'use client';

import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  ReferenceLine, LabelList,
} from 'recharts';
import type { SeasonalPatternPoint } from '../types';

interface SeasonalPatternChartProps {
  data: SeasonalPatternPoint[];
}

export default function SeasonalPatternChart({ data }: SeasonalPatternChartProps) {
  if (data.length === 0) {
    return (
      <div className="flex items-center justify-center h-64 text-gray-400">
        No seasonal data
      </div>
    );
  }

  const totalReviews = data.reduce((sum, d) => sum + d.review_count, 0);
  const overallAvg = totalReviews > 0
    ? data.reduce((sum, d) => sum + d.avg_rating * d.review_count, 0) / totalReviews
    : 0;

  return (
    <ResponsiveContainer width="100%" height={280}>
      <BarChart data={data} margin={{ top: 20, right: 20, left: 0, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
        <XAxis
          dataKey="quarter_label"
          tick={{ fill: '#6b7280', fontSize: 12 }}
          tickLine={false}
          axisLine={{ stroke: '#e5e7eb' }}
        />
        <YAxis
          domain={[1, 5]}
          ticks={[1, 2, 3, 4, 5]}
          tick={{ fill: '#6b7280', fontSize: 11 }}
          tickLine={false}
          axisLine={false}
        />
        {overallAvg > 0 && (
          <ReferenceLine
            y={Number(overallAvg.toFixed(2))}
            stroke="#94a3b8"
            strokeDasharray="4 4"
            label={{ value: `Avg ${overallAvg.toFixed(2)}`, position: 'right', fill: '#94a3b8', fontSize: 10 }}
          />
        )}
        <Bar dataKey="avg_rating" fill="#3b82f6" radius={[4, 4, 0, 0]} maxBarSize={60}>
          <LabelList dataKey="avg_rating" position="top" formatter={(v: any) => Number(v).toFixed(2)} style={{ fill: '#374151', fontSize: 11, fontWeight: 500 }} />
        </Bar>
        <Tooltip
          contentStyle={{ borderRadius: '8px', border: '1px solid #e5e7eb' }}
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          formatter={(value: any, name: any) => {
            if (name === 'avg_rating') return [`${Number(value).toFixed(2)} / 5`, 'Rating'];
            return [value, name];
          }}
          labelFormatter={(label: any) => String(label)}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}
