import { useEffect, useState } from 'react';
import { Sparkles } from 'lucide-react';
import { PageHeader } from '@/components/ui/PageHeader';
import { Card, CardBody, CardHeader } from '@/components/ui/Card';
import { Placeholder } from '@/components/ui/Placeholder';
import { ShotMap } from '@/components/viz/ShotMap';
import { XgRace } from '@/components/viz/XgRace';
import { PassNetwork } from '@/components/viz/PassNetwork';
import { teamFlag } from '@/lib/teams';
import { fmt, fmtSplit, useT } from '@/lib/i18n';
import type { StoryViz } from '@/lib/types';

function StatRow({ label, home, away, fmt = (n: number) => String(n) }: {
  label: string; home: number; away: number; fmt?: (n: number) => string;
}) {
  const total = home + away || 1;
  return (
    <div>
      <div className="mb-1 flex items-center justify-between text-sm">
        <span className="tnum font-bold text-accent">{fmt(home)}</span>
        <span className="text-xs uppercase tracking-wide text-faint">{label}</span>
        <span className="tnum font-bold text-info">{fmt(away)}</span>
      </div>
      <div className="flex h-2 overflow-hidden rounded-full bg-elevated">
        <div className="bg-accent" style={{ width: `${(home / total) * 100}%` }} />
        <div className="bg-info" style={{ width: `${(away / total) * 100}%` }} />
      </div>
    </div>
  );
}

export function StoryPage() {
  const t = useT();
  const [viz, setViz] = useState<StoryViz | null>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    let alive = true;
    fetch('/data/viz/final-2022.json')
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((d: StoryViz) => alive && setViz(d))
      .catch(() => alive && setFailed(true));
    return () => { alive = false; };
  }, []);

  if (failed) {
    return (
      <div>
        <PageHeader title={t.story.title} subtitle={t.story.subtitle} />
        <Placeholder icon={<Sparkles size={28} />}>
          {fmtSplit(t.story.datasetMissing).map((p, i) =>
            typeof p === 'string' ? p : <code key={i} className="text-accent">npm run data:viz</code>,
          )}
        </Placeholder>
      </div>
    );
  }

  if (!viz) {
    return (
      <div>
        <PageHeader title={t.story.title} subtitle={t.story.loadingSubtitle} />
        <div className="h-96 animate-pulse rounded-xl border border-line bg-panel" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={t.story.heroTitle}
        subtitle={`${viz.competition} · ${viz.stage} · ${viz.date}`}
      />

      {/* hero scoreline */}
      <Card>
        <CardBody className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-center">
          <span className="flex items-center gap-2 text-xl font-bold text-ink">
            <span aria-hidden className="text-2xl">{teamFlag(viz.home)}</span> {viz.home}
          </span>
          <span className="tnum text-3xl font-extrabold text-ink">{viz.homeScore} – {viz.awayScore}</span>
          <span className="flex items-center gap-2 text-xl font-bold text-ink">
            {viz.away} <span aria-hidden className="text-2xl">{teamFlag(viz.away)}</span>
          </span>
          <span className="w-full text-sm font-medium text-gold">{viz.result}</span>
        </CardBody>
      </Card>

      <p className="mx-auto max-w-2xl text-center text-sm text-muted">
        {t.story.intro}
      </p>

      {/* totals */}
      <Card>
        <CardHeader><span className="font-display font-bold text-ink">{t.story.byTheNumbers}</span></CardHeader>
        <CardBody className="grid gap-4 sm:grid-cols-2">
          <StatRow label={t.story.stats.expectedGoals} home={viz.totals.home.xg} away={viz.totals.away.xg} fmt={(n) => n.toFixed(2)} />
          <StatRow label={t.story.stats.shots} home={viz.totals.home.shots} away={viz.totals.away.shots} />
          <StatRow label={t.story.stats.passes} home={viz.totals.home.passes} away={viz.totals.away.passes} />
          <StatRow label={t.story.stats.passAccuracy} home={viz.totals.home.passAccuracy} away={viz.totals.away.passAccuracy} />
        </CardBody>
      </Card>

      {/* shot map */}
      <Card>
        <CardHeader><span className="font-display font-bold text-ink">{t.story.shotMapTitle}</span></CardHeader>
        <CardBody>
          <ShotMap viz={viz} />
          <p className="mt-3 text-sm text-muted">
            {fmt(t.story.shotMapCaption, { xg: viz.totals.home.xg.toFixed(2) })}
          </p>
        </CardBody>
      </Card>

      {/* xG race */}
      <Card>
        <CardHeader><span className="font-display font-bold text-ink">{t.story.xgRaceTitle}</span></CardHeader>
        <CardBody>
          <XgRace viz={viz} />
          <p className="mt-3 text-sm text-muted">
            {t.story.xgRaceCaption}
          </p>
        </CardBody>
      </Card>

      {/* pass networks */}
      <Card>
        <CardHeader><span className="font-display font-bold text-ink">{t.story.passNetworkTitle}</span></CardHeader>
        <CardBody>
          <div className="grid gap-6 md:grid-cols-2">
            <PassNetwork net={viz.passNetwork.home} team={viz.home} color="var(--app-accent)" />
            <PassNetwork net={viz.passNetwork.away} team={viz.away} color="var(--app-info)" />
          </div>
          <p className="mt-3 text-sm text-muted">
            {t.story.passNetworkCaption}
          </p>
        </CardBody>
      </Card>
    </div>
  );
}
