import { useMemo } from 'react';
import { useT } from '@/lib/i18n';

export interface TimelinePoint {
  minute: number;
  p_home: number;
  p_draw: number;
  p_away: number;
}

/** Stacked 100% area chart of the in-play win probability: home fills from the
 *  bottom (accent), away from the top (info), draw is the gap between. */
export function WinProbTimeline({ points, home, away }: { points: TimelinePoint[]; home: string; away: string }) {
  const t = useT();
  const W = 600;
  const H = 180;
  const PAD = { l: 6, r: 6, t: 6, b: 20 };

  const { homePath, awayPath, ticks, maxMin } = useMemo(() => {
    const pts = [...points].sort((a, b) => a.minute - b.minute);
    const maxMin = Math.max(90, pts[pts.length - 1]?.minute ?? 90);
    const x = (min: number) => PAD.l + (min / maxMin) * (W - PAD.l - PAD.r);
    const y = (p: number) => PAD.t + (1 - p) * (H - PAD.t - PAD.b);

    // Home area: from the bottom edge up to p_home.
    const homeTop = pts.map((p) => `${x(p.minute).toFixed(1)},${y(p.p_home).toFixed(1)}`);
    const homePath = pts.length
      ? `M ${PAD.l},${y(0)} L ${homeTop.join(' L ')} L ${x(pts[pts.length - 1]!.minute).toFixed(1)},${y(0)} Z`
      : '';
    // Away area: from the top edge down to 1 − p_away.
    const awayBottom = pts.map((p) => `${x(p.minute).toFixed(1)},${y(1 - p.p_away).toFixed(1)}`);
    const awayPath = pts.length
      ? `M ${PAD.l},${y(1)} L ${awayBottom.join(' L ')} L ${x(pts[pts.length - 1]!.minute).toFixed(1)},${y(1)} Z`
      : '';
    const ticks = [0, 15, 30, 45, 60, 75, 90].filter((m) => m <= maxMin).map((m) => ({ m, px: x(m) }));
    return { homePath, awayPath, ticks, maxMin };
  }, [points]);

  if (points.length < 2) return null;

  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img" aria-label={`${home} / ${t.common.draw} / ${away}`}>
        <rect x={PAD.l} y={PAD.t} width={W - PAD.l - PAD.r} height={H - PAD.t - PAD.b} className="fill-[var(--app-elevated)]" rx={4} />
        <path d={awayPath} className="fill-[var(--app-info)] opacity-70" />
        <path d={homePath} className="fill-[var(--app-accent)] opacity-80" />
        {/* 50% guide */}
        <line x1={PAD.l} x2={W - PAD.r} y1={PAD.t + (H - PAD.t - PAD.b) / 2} y2={PAD.t + (H - PAD.t - PAD.b) / 2} className="stroke-[var(--app-line-strong)]" strokeDasharray="4 4" strokeWidth={1} />
        {ticks.map(({ m, px }) => (
          <g key={m}>
            <line x1={px} x2={px} y1={H - PAD.b} y2={H - PAD.b + 4} className="stroke-[var(--app-line-strong)]" strokeWidth={1} />
            <text x={px} y={H - 6} textAnchor="middle" className="fill-[var(--app-faint)] text-[10px]">{m}'</text>
          </g>
        ))}
        {maxMin > 90 && (
          <line x1={PAD.l + (90 / maxMin) * (W - PAD.l - PAD.r)} x2={PAD.l + (90 / maxMin) * (W - PAD.l - PAD.r)} y1={PAD.t} y2={H - PAD.b} className="stroke-[var(--app-line-strong)]" strokeWidth={1} />
        )}
      </svg>
      <div className="mt-1.5 flex items-center justify-between text-[11px]">
        <span className="font-semibold text-accent">{home}</span>
        <span className="text-faint">{t.common.draw}</span>
        <span className="font-semibold text-info">{away}</span>
      </div>
    </div>
  );
}
