import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
} from 'recharts';
import { getRegimeHistory } from '../../api/regime';
import { Callout } from '../ui/Callout';
import { SkeletonCard } from '../ui/Skeleton';
import { formatDate } from '../../lib/format';

// Lazy-loaded (see RegimePage) so recharts only ships in the regime-tab chunk.

const HISTORY_RANGES = [
  { key: '1M', days: 30 },
  { key: '3M', days: 90 },
  { key: '6M', days: 182 },
  { key: 'All', days: 100000 },
] as const;
type HistoryRange = (typeof HISTORY_RANGES)[number]['key'];

const HISTORY_SERIES = [
  { key: 'index', label: 'Index', color: '#60a5fa' },
  { key: 'early_warning', label: 'Early warning', color: '#fb923c' },
  { key: 'combined', label: 'Combined', color: '#a78bfa' },
] as const;

export default function ScoreHistoryChart() {
  const [range, setRange] = useState<HistoryRange>('3M');
  const history = useQuery({ queryKey: ['regime', 'history'], queryFn: () => getRegimeHistory(400) });

  const filtered = useMemo(() => {
    const data = history.data ?? [];
    const days = HISTORY_RANGES.find((r) => r.key === range)!.days;
    if (range === 'All') return data;
    const cutoff = new Date();
    cutoff.setDate(cutoff.getDate() - days);
    return data.filter((p) => new Date(p.date) >= cutoff);
  }, [history.data, range]);

  return (
    <div className="glass p-5">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="text-[11px] uppercase tracking-wider text-gray-500">Score history</div>
        <div className="flex gap-1">
          {HISTORY_RANGES.map((r) => (
            <button
              key={r.key}
              type="button"
              onClick={() => setRange(r.key)}
              className={`rounded px-2 py-1 text-[11px] font-medium tabular-nums transition-colors ${
                range === r.key ? 'bg-white/10 text-blue-300' : 'text-gray-500 hover:text-gray-300'
              }`}
            >
              {r.key}
            </button>
          ))}
        </div>
      </div>

      {history.isLoading ? (
        <SkeletonCard className="mt-3 h-56" />
      ) : filtered.length < 2 ? (
        <Callout variant="empty">Not enough history yet — it accumulates as the daily job runs.</Callout>
      ) : (
        <>
          <div className="mt-3 h-60">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={filtered} margin={{ top: 6, right: 8, left: -18, bottom: 0 }}>
                <CartesianGrid stroke="rgba(255,255,255,0.05)" vertical={false} />
                <XAxis
                  dataKey="date"
                  tick={{ fill: '#6b7280', fontSize: 10 }}
                  tickFormatter={(d) => formatDate(String(d))}
                  minTickGap={28}
                  tickLine={false}
                  axisLine={{ stroke: 'rgba(255,255,255,0.08)' }}
                />
                <YAxis
                  domain={[0, 100]}
                  ticks={[0, 30, 60, 80, 100]}
                  tick={{ fill: '#6b7280', fontSize: 10 }}
                  width={28}
                  tickLine={false}
                  axisLine={false}
                />
                <ReferenceLine y={30} stroke="rgba(255,255,255,0.06)" />
                <ReferenceLine y={60} stroke="rgba(255,255,255,0.06)" />
                <ReferenceLine y={80} stroke="rgba(255,255,255,0.06)" />
                <Tooltip
                  contentStyle={{
                    background: 'rgba(17,24,39,0.95)',
                    border: '1px solid rgba(255,255,255,0.1)',
                    borderRadius: 8,
                    fontSize: 12,
                  }}
                  labelStyle={{ color: '#9ca3af' }}
                  labelFormatter={(l) => formatDate(String(l))}
                  formatter={(value) => (value == null ? '—' : Math.round(Number(value)))}
                />
                {HISTORY_SERIES.map((s) => (
                  <Line
                    key={s.key}
                    type="monotone"
                    dataKey={s.key}
                    name={s.label}
                    stroke={s.color}
                    dot={false}
                    strokeWidth={1.5}
                    connectNulls
                    isAnimationActive={false}
                  />
                ))}
              </LineChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-2 flex flex-wrap gap-4">
            {HISTORY_SERIES.map((s) => (
              <span key={s.key} className="flex items-center gap-1.5 text-[11px] text-gray-400">
                <span className="inline-block h-2 w-3 rounded-sm" style={{ background: s.color }} />
                {s.label}
              </span>
            ))}
          </div>
        </>
      )}
    </div>
  );
}
