import React, { useMemo } from 'react';
import {
  Area,
  AreaChart,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { format, parseISO } from 'date-fns';
import { useTheme } from '@/app/providers/ThemeProvider';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ChartResponsiveContainer } from '@/features/dashboard/components/ChartResponsiveContainer';
import {
  ChartShell,
  createChartTooltipRenderer,
  createLegendFormatter,
  getChartAnimationProps,
  getChartAxisTick,
  getChartGridProps,
  getChartLegendProps,
  getChartMargin,
} from '@/features/dashboard/components/charts';
import { getChartPalette } from '@/features/dashboard/utils/chartColors';
import type { TicketTrends } from '@/features/dashboard/types/dashboard.types';

interface TicketTrendsChartProps {
  title: string;
  trends: TicketTrends | undefined;
  emptyLabel: string;
  emptyHint?: string;
  seriesLabels: {
    created: string;
    closed: string;
  };
}

export const TicketTrendsChart: React.FC<TicketTrendsChartProps> = ({
  title,
  trends,
  emptyLabel,
  emptyHint,
  seriesLabels,
}) => {
  const { theme } = useTheme();
  const { locale } = useLocale();
  const palette = getChartPalette(theme);
  const legendProps = getChartLegendProps(theme);
  const legendFormatter = createLegendFormatter({
    created: seriesLabels.created,
    closed: seriesLabels.closed,
  });

  const chartData = useMemo(() => {
    if (!trends) {
      return [];
    }

    const createdDataset =
      trends.datasets.find((dataset) => dataset.label.toLowerCase() === 'created') ??
      trends.datasets[0];
    const closedDataset =
      trends.datasets.find((dataset) => dataset.label.toLowerCase() === 'closed') ??
      trends.datasets[1];

    return trends.labels.map((label, index) => ({
      date: label,
      created: createdDataset?.data[index] ?? 0,
      closed: closedDataset?.data[index] ?? 0,
    }));
  }, [trends]);

  const hasData = chartData.some((point) => point.created > 0 || point.closed > 0);

  const formatDate = (value: string) => {
    try {
      return format(parseISO(value), 'MMM d');
    } catch {
      return value;
    }
  };

  const chartHeight = chartData.length <= 2 ? 220 : 260;
  const showDots = chartData.length <= 3;
  const numberFormat = new Intl.NumberFormat(locale);

  const tooltipRenderer = createChartTooltipRenderer(
    (label) => formatDate(String(label)),
    (name, value) => ({
      name: name === 'created' ? seriesLabels.created : seriesLabels.closed,
      value: numberFormat.format(value),
      color: name === 'created' ? palette[0] : palette[2],
    }),
  );

  return (
    <ChartShell
      title={title}
      empty={!hasData}
      emptyLabel={emptyLabel}
      emptyHint={emptyHint}
      height={chartHeight}
    >
      <ChartResponsiveContainer height={chartHeight}>
        {({ width, height }) => (
          <AreaChart
            width={width}
            height={height}
            data={chartData}
            margin={getChartMargin('withLegend')}
          >
            <defs>
              <linearGradient id="createdGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={palette[0]} stopOpacity={0.28} />
                <stop offset="95%" stopColor={palette[0]} stopOpacity={0} />
              </linearGradient>
              <linearGradient id="closedGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={palette[2]} stopOpacity={0.28} />
                <stop offset="95%" stopColor={palette[2]} stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid {...getChartGridProps(theme)} />
            <XAxis
              dataKey="date"
              tickFormatter={formatDate}
              tick={getChartAxisTick(theme)}
              axisLine={false}
              tickLine={false}
            />
            <YAxis
              allowDecimals={false}
              tick={getChartAxisTick(theme)}
              axisLine={false}
              tickLine={false}
              width={36}
            />
            <Tooltip
              content={tooltipRenderer}
              cursor={{ stroke: theme.colors.borderSoft, strokeWidth: 1 }}
            />
            <Legend {...legendProps} formatter={legendFormatter} />
            <Area
              type="monotone"
              dataKey="created"
              stroke={palette[0]}
              fill="url(#createdGradient)"
              strokeWidth={2}
              dot={showDots ? { r: 3, strokeWidth: 0, fill: palette[0] } : false}
              activeDot={{ r: 4, strokeWidth: 0 }}
              {...getChartAnimationProps()}
            />
            <Area
              type="monotone"
              dataKey="closed"
              stroke={palette[2]}
              fill="url(#closedGradient)"
              strokeWidth={2}
              dot={showDots ? { r: 3, strokeWidth: 0, fill: palette[2] } : false}
              activeDot={{ r: 4, strokeWidth: 0 }}
              {...getChartAnimationProps()}
            />
          </AreaChart>
        )}
      </ChartResponsiveContainer>
    </ChartShell>
  );
};