'use client';

/**
 * AreaChartWidget — Reusable area chart component.
 *
 * Features:
 * - ResponsiveContainer for automatic resizing
 * - Custom themed tooltip
 * - Legend support (optional)
 * - Gradient fill for area
 * - Smooth fade-in and draw animation on initial render
 * - Axis labels with reduced density on mobile
 *
 * Requirements: 16.1, 16.2, 16.3, 16.4, 16.5
 */

import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import CustomTooltip from './CustomTooltip';
import { divisiColors } from '@/lib/constants/theme';
import { useIsMobile } from '@/lib/hooks/useIsMobile';
import { useChartTheme } from '@/lib/hooks/useChartTheme';

interface AreaConfig {
  dataKey: string;
  color: string;
  name?: string;
}

interface AreaChartWidgetProps {
  data: Array<Record<string, unknown>>;
  xKey: string;
  areas: AreaConfig[];
  height?: number;
  showLegend?: boolean;
  yAxisFormatter?: (value: number) => string;
}

export default function AreaChartWidget({
  data,
  xKey,
  areas,
  height = 300,
  showLegend = false,
  yAxisFormatter,
}: AreaChartWidgetProps) {
  const isMobile = useIsMobile();
  const chartTheme = useChartTheme();

  return (
    <ResponsiveContainer width="100%" height={height}>
      <AreaChart data={data} margin={{ top: 5, right: 10, left: isMobile ? 0 : 10, bottom: 5 }}>
        <defs>
          {areas.map((area) => (
            <linearGradient
              key={`gradient-${area.dataKey}`}
              id={`gradient-${area.dataKey}`}
              x1="0"
              y1="0"
              x2="0"
              y2="1"
            >
              <stop offset="5%" stopColor={area.color} stopOpacity={0.3} />
              <stop offset="95%" stopColor={area.color} stopOpacity={0} />
            </linearGradient>
          ))}
        </defs>
        <CartesianGrid
          strokeDasharray="3 3"
          stroke={chartTheme.gridColor}
          vertical={false}
        />
        <XAxis
          dataKey={xKey}
          tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 10 : 12 }}
          axisLine={{ stroke: chartTheme.axisColor }}
          tickLine={false}
          interval={isMobile ? Math.max(1, Math.floor(data.length / 4)) : 'preserveStartEnd'}
        />
        <YAxis
          tick={{ fill: chartTheme.tickColor, fontSize: isMobile ? 10 : 12 }}
          axisLine={false}
          tickLine={false}
          width={isMobile ? (yAxisFormatter ? 50 : 40) : (yAxisFormatter ? 65 : 50)}
          tickFormatter={yAxisFormatter}
        />
        <Tooltip content={<CustomTooltip />} />
        {showLegend && (
          <Legend
            wrapperStyle={{ fontSize: 12 }}
            formatter={(value: string) => (
              <span style={{ color: chartTheme.legendColor }}>{value}</span>
            )}
          />
        )}
        {areas.map((area) => (
          <Area
            key={area.dataKey}
            type="monotone"
            dataKey={area.dataKey}
            stroke={area.color}
            name={area.name ?? area.dataKey}
            strokeWidth={2}
            fill={`url(#gradient-${area.dataKey})`}
            animationDuration={1000}
            animationEasing="ease-in-out"
          />
        ))}
      </AreaChart>
    </ResponsiveContainer>
  );
}