import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { persianDigits } from '@/lib/persianDate';
import type { TermAverages } from '@/lib/reportCard';

const AXIS_STYLE = { fontFamily: 'Estedad, Tahoma, sans-serif', fontSize: 12, fill: '#94A3B8' };

/** نمودار روند پیشرفت — میانگین نوبت اول به نوبت دوم. */
export function PerformanceChart({ data, height = 200 }: { data: TermAverages; height?: number }) {
  const points = [
    { label: 'نوبت اول', value: data.term1 },
    { label: 'نوبت دوم', value: data.term2 },
  ].filter((p) => p.value != null) as Array<{ label: string; value: number }>;

  if (points.length < 2) {
    return (
      <div className="rc-chart-empty">
        <i className="bi bi-graph-up" aria-hidden="true" />
        <span>برای نمایش روند، به میانگین هر دو نوبت نیاز است.</span>
      </div>
    );
  }

  return (
    <ResponsiveContainer width="100%" height={height}>
      <LineChart data={points} margin={{ top: 24, right: 16, left: 8, bottom: 4 }}>
        <CartesianGrid strokeDasharray="4 4" stroke="#E2E8F0" vertical={false} />
        <XAxis dataKey="label" tick={AXIS_STYLE} axisLine={false} tickLine={false} />
        <YAxis
          domain={[0, 20]}
          ticks={[0, 5, 10, 15, 20]}
          tick={AXIS_STYLE}
          tickFormatter={(v: number) => persianDigits(v)}
          axisLine={false}
          tickLine={false}
          width={34}
          orientation="right"
        />
        <Tooltip content={<ChartTooltip />} cursor={{ stroke: '#CBD5E1' }} />
        <Line
          type="monotone"
          dataKey="value"
          stroke="#0EA678"
          strokeWidth={3}
          dot={{ r: 6, fill: '#0EA678', strokeWidth: 0 }}
          activeDot={{ r: 7 }}
          label={{
            position: 'top',
            fill: '#0EA678',
            fontSize: 14,
            fontWeight: 700,
            fontFamily: 'Estedad, Tahoma, sans-serif',
            formatter: (v: number) => persianDigits(v.toFixed(2)),
          }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

function ChartTooltip({
  active,
  payload,
  label,
}: {
  active?: boolean;
  payload?: Array<{ value: number }>;
  label?: string;
}) {
  if (!active || !payload || payload.length === 0) return null;
  return (
    <div dir="rtl" className="rc-chart-tooltip">
      <span>{label}</span>
      <strong>{persianDigits(payload[0].value.toFixed(2))}</strong>
    </div>
  );
}