import Link from "next/link";
import { apiSafe, type Forecast, type Meta, type Party, type Poll, type RidingListItem, type SignalsPayload } from "@/lib/api";
import { Battlegrounds, ComponentsCompare, HeroForecast, LatestPolls, MajorityPanel, PopularVoteTable, RegionalGrid, SeatProjectionTable, WhatChanged } from "@/components/forecast-blocks";
import { MapSection } from "@/components/map-section";
import { Legend, SeatMeter } from "@/components/charts";
import { TrendChartInteractive } from "@/components/trend-chart";
import { MarketsPanel, MediaPanel, SignalsOverview } from "@/components/signals";
import { PartyLogo } from "@/components/party";
import { Card, Empty, SectionHeader } from "@/components/ui";
import { PARTY_IDS, partyVar } from "@/lib/parties";
import { int, prob } from "@/lib/format";
import { LiveHome } from "@/components/live";

export const revalidate = 60;

export default async function Home() {
  const [meta, f, polls, ridings, regions, parties, sig] = await Promise.all([
    apiSafe<Meta>("/api/meta"),
    apiSafe<Forecast>("/api/forecast/latest"),
    apiSafe<{ polls: Poll[] }>("/api/polls?limit=8"),
    apiSafe<{ ridings: RidingListItem[] }>("/api/ridings"),
    apiSafe<{ regions: { id: string; name: string; ridings: number; favorites: Record<string, number>; voteNow: Record<string, number>; vote2022: Record<string, number> }[] }>("/api/regions"),
    apiSafe<{ parties: Party[] }>("/api/parties"),
    apiSafe<SignalsPayload>("/api/signals"),
  ]);
  if (!meta || !f) return <Empty title="Le moteur QC26 est temporairement indisponible">Les projections seront de retour dans quelques instants.</Empty>;
  if (meta.mode !== "forecast") return <LiveHome meta={meta} forecast={f} />;

  const ridingNames = Object.fromEntries((ridings?.ridings ?? []).map((r) => [r.code, { name: r.name, slug: r.slug }]));
  const seats = Object.fromEntries(Object.entries(f.parties).map(([k, v]) => [k, v.seatsMedian]));
  const from = new Date(); from.setDate(from.getDate() - 182);
  const pollPts = (polls?.polls ?? []).map((p) => ({ date: p.fieldworkEnd, values: p.results, pollster: p.pollster.name }));
  const comp = f.summary.components;

  return (
    <div className="space-y-12 md:space-y-16">
      <HeroForecast f={f} meta={meta} />

      {comp && (
        <section>
          <SectionHeader num="02" eyebrow="Au-delà des sondages" title="Marchés, presse, attention, terrain" description="Depuis le modèle 2.0, quatre familles de signaux indépendants corrigent la moyenne des sondages, chacune avec un poids borné et publié. La vue « sondages seuls » reste toujours visible." action={<Link href="/signaux" className="link text-[13.5px]">Tous les signaux →</Link>} />
          <SignalsOverview comp={comp} />
          <Card className="mt-4"><ComponentsCompare f={f} /></Card>
        </section>
      )}

      <section>
        <SectionHeader num="03" eyebrow="Sièges" title="Prévision des sièges" description={`Médiane, intervalles de crédibilité et probabilités issus des simulations pondérées. Le seuil de ${meta.majority} sièges est dérivé des ${meta.seatsTotal} circonscriptions officielles.`} action={<Link href="/prevision" className="link text-[13.5px]">Prévision complète →</Link>} />
        <Card><SeatMeter seats={seats} total={meta.seatsTotal} majority={meta.majority} className="mb-6" title="Sièges médians projetés" /><SeatProjectionTable f={f} /></Card>
      </section>

      <section className="grid lg:grid-cols-2 gap-6">
        <div>
          <SectionHeader num="04" eyebrow="Vote populaire" title="Intentions de vote projetées" description="Vote au jour du scrutin (moyenne QC26 corrigée des effets maison, projetée au 5 octobre)." />
          <Card><PopularVoteTable f={f} /></Card>
        </div>
        <div>
          <SectionHeader num="05" eyebrow="Majorité" title="Probabilité de majorité" description={`Part des simulations où le parti obtient au moins ${meta.majority} sièges.`} />
          <Card><MajorityPanel f={f} /></Card>
        </div>
      </section>

      <section>
        <SectionHeader num="06" eyebrow="Carte" title="Carte électorale" description="Favori par circonscription ; l'intensité de la couleur traduit la certitude, jamais un résultat acquis." action={<Link href="/carte" className="link text-[13.5px]">Explorer la carte →</Link>} />
        <Card pad={false} className="p-3 md:p-4"><MapSection height={520} compact /></Card>
      </section>

      <section>
        <SectionHeader num="07" eyebrow="Sondages" title="Tendance et derniers sondages" description={`${f.pollCount} sondages depuis novembre 2022 alimentent la moyenne QC26.`} action={<Link href="/sondages" className="link text-[13.5px]">Tous les sondages →</Link>} />
        <Card pad={false}>
          <div className="p-4 md:p-5 border-b border-border">
            {f.trend && <TrendChartInteractive trend={f.trend} polls={pollPts} from={from.toISOString().slice(0, 10)} height={260} markers={[{ date: meta.campaignStart, label: "Déclenchement" }]} />}
            <Legend ids={PARTY_IDS} className="mt-2" />
          </div>
          {polls && <LatestPolls polls={polls.polls} limit={6} compact />}
        </Card>
      </section>

      {sig && sig.markets.asOf && (
        <section className="grid lg:grid-cols-2 gap-6">
          <div>
            <SectionHeader num="08" eyebrow="Marchés de prédiction" title="Ce que parient les marchés" description="Polymarket, prix « Oui » renormalisés. Comparés à la vue « sondages seuls » et à l'ensemble ci-dessus." action={<Link href="/signaux#marches" className="link text-[13.5px]">Détail →</Link>} />
            <Card><MarketsPanel m={sig.markets} comp={comp} compact /></Card>
          </div>
          <div>
            <SectionHeader num="09" eyebrow="Presse" title="Le ton de la couverture" description={`${sig.media.articles} titres des ${sig.media.window} derniers jours, classés par parti et par ton.`} action={<Link href="/signaux#presse" className="link text-[13.5px]">Revue de presse →</Link>} />
            <Card><MediaPanel m={sig.media} compact /></Card>
          </div>
        </section>
      )}

      <section>
        <SectionHeader num="10" eyebrow="Qu'est-ce qui a changé ?" title="Depuis le dernier recalcul" description="Différences entre les deux derniers runs publiés et les entrées qui les expliquent." />
        <Card><WhatChanged f={f} ridingNames={ridingNames} /></Card>
      </section>

      {ridings && (
        <section>
          <SectionHeader num="11" eyebrow="À surveiller" title="Circonscriptions les plus disputées" description="Classées par incertitude (1 − probabilité du favori)." action={<Link href="/circonscriptions?tri=serre" className="link text-[13.5px]">Toutes les circonscriptions →</Link>} />
          <Battlegrounds ridings={ridings.ridings} codes={f.summary.battlegrounds} limit={10} />
        </section>
      )}

      {regions && (
        <section>
          <SectionHeader num="12" eyebrow="Régions" title="Prévision régionale" description="Favoris et vote projeté par région, comparés au résultat 2022 transposé sur la carte 2026." />
          <RegionalGrid regions={regions.regions} />
        </section>
      )}

      <section className="grid lg:grid-cols-2 gap-6">
        <div className="card card-lg p-6 md:p-8 ink-panel flex flex-col">
          <div className="eyebrow" style={{ color: "color-mix(in srgb, var(--text-inverse) 60%, transparent)" }}>13 · Boussole électorale</div>
          <h2 className="display text-[30px] mt-3 leading-tight">Quel parti correspond le mieux à vos positions ?</h2>
          <p className="text-[14px] opacity-75 mt-3 leading-relaxed">48 énoncés sur 6 axes. Chaque position de parti est tirée d&apos;un document officiel, avec page et citation : vous pourrez voir pourquoi.</p>
          <Link href="/boussole" className="mt-auto pt-6 btn self-start" style={{ background: "var(--text-inverse)", color: "var(--text)" }}>Commencer la boussole →</Link>
        </div>
        <div>
          <SectionHeader num="14" eyebrow="Partis" title="Comparaison des partis" action={<Link href="/partis/comparateur" className="link text-[13.5px]">Comparateur →</Link>} />
          <div className="grid grid-cols-1 gap-2">
            {(parties?.parties ?? []).sort((a, b) => (b.forecast?.seatsMedian ?? 0) - (a.forecast?.seatsMedian ?? 0)).map((p) => (
              <Link key={p.id} href={`/partis/${p.id}`} className="card card-hover p-3 flex items-center gap-4">
                <PartyLogo id={p.id} height={22} className="w-[92px] justify-start" />
                <div className="min-w-0 flex-1"><div className="font-semibold text-[14px] truncate">{p.officialName}</div><div className="text-[12px] text-ink-3 truncate">{p.leader} · {p.candidatesCount} candidatures · {p.proposals} propositions documentées</div></div>
                <div className="text-right num shrink-0"><div className="figure text-[22px]" style={{ color: partyVar(p.id) }}>{p.forecast?.seatsMedian ?? "—"}</div><div className="text-[11px] text-ink-3">P(maj) {prob(p.forecast?.pMajority)}</div></div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="card card-lg p-6 md:p-8 grid md:grid-cols-[1fr_auto] gap-6 items-center">
        <div>
          <div className="eyebrow">15 · Méthodologie</div>
          <h2 className="display text-[26px] mt-2">Comment QC26 calcule</h2>
          <p className="text-[14px] text-ink-2 mt-2 leading-relaxed max-w-2xl">Sondages pondérés et corrigés des effets maison → état latent du vote (filtre de Kalman) → prior fondamentaux et momentum bornés → swing proportionnel sur les résultats 2022 transposés → {int(f.nSimulations)} simulations à erreurs corrélées, repondérées vers les marchés. Chaque run est versionné (modèle {f.modelVersion}, run #{f.id}{f.codeCommit ? `, commit ${f.codeCommit}` : ""}).</p>
        </div>
        <div className="flex gap-3"><Link href="/methodologie" className="btn btn-primary">Méthodologie</Link><Link href="/methodologie/changelog" className="btn btn-ghost">Changelog</Link></div>
      </section>
    </div>
  );
}