import type { Metadata } from "next";
import { apiSafe, type Forecast, type Poll } from "@/lib/api";
import { Legend } from "@/components/charts";
import { TrendChartInteractive } from "@/components/trend-chart";
import { Card, Empty, PageTitle, SectionHeader } from "@/components/ui";
import { PollsTable } from "@/components/polls-table";
import { PARTY_IDS, partyVar, partyLabel } from "@/lib/parties";
import { dateShort } from "@/lib/format";

export const metadata: Metadata = { title: "Sondages Québec 2026 — Agrégateur et tendances", description: "Tous les sondages provinciaux depuis l'élection de 2022, avec documents originaux archivés, poids dans le modèle QC26, effets maison et sous-échantillons." };
export const revalidate = 60;

interface Pollster { id: string; name: string; website: string | null; polls: number; lastPoll: string | null; houseEffects: Record<string, number> | null; nUsed: number | null }

export default async function Page() {
  const [data, f, ps] = await Promise.all([apiSafe<{ polls: Poll[]; trend: Forecast["trend"] }>("/api/polls?limit=600"), apiSafe<Forecast>("/api/forecast/latest"), apiSafe<{ pollsters: Pollster[] }>("/api/pollsters")]);
  if (!data) return <Empty title="Sondages indisponibles" />;
  const polls = data.polls;
  const pollPts = polls.filter((p) => !p.excluded).map((p) => ({ date: p.fieldworkEnd, values: p.results, pollster: p.pollster.name }));
  const primary = polls.filter((p) => p.sourceTier === "primary").length;
  return (
    <div className="space-y-12">
      <PageTitle eyebrow={`Sondages · ${polls.length} sondages · ${primary} documents originaux archivés`} title="Moyenne QC26"
        lede="Chaque sondage provincial depuis le scrutin d'octobre 2022 : téléchargé chez la firme, haché (SHA-256), archivé, extrait page par page et validé avant d'entrer dans le modèle. Les lignes marquées « index » attendent encore leur document original." />
      <Card>
        {f?.trend && <TrendChartInteractive trend={f.trend} polls={pollPts} height={360} election2022={{ caq: 40.98, plq: 14.37, qs: 15.43, pq: 14.61, pcq: 12.91 }} />}
        <div className="flex flex-wrap items-center justify-between gap-2 mt-2"><Legend ids={PARTY_IDS} /><span className="text-[12px] text-ink-3">Points = sondages bruts · ligne = moyenne QC26 corrigée des effets maison · bande 80 %</span></div>
      </Card>
      <section>
        <SectionHeader eyebrow="Derniers sondages" title="Tous les sondages" description="Cliquez sur une ligne pour ouvrir le Poll Inspector : document original, pages utilisées, sous-échantillons, poids et impact sur le modèle." />
        <Card pad={false}><PollsTable polls={polls} /></Card>
      </section>
      {ps && (
        <section>
          <SectionHeader eyebrow="Firmes" title="Effets maison" description="Écart moyen de chaque firme à la tendance des autres firmes (points), rétréci de moitié et borné à ±3 ; positif = la firme mesure le parti plus haut que la moyenne." />
          <div className="md:hidden grid grid-cols-1 gap-2">
            {ps.pollsters.sort((a, b) => b.polls - a.polls).map((p) => (
              <div key={p.id} className="card p-3">
                <div className="flex items-baseline justify-between"><span className="font-semibold text-[14px]">{p.name}</span><span className="text-[12px] text-ink-3 num">{p.polls} sondages · dernier {dateShort(p.lastPoll)}</span></div>
                <div className="grid grid-cols-5 gap-1 mt-2">{PARTY_IDS.map((id) => <div key={id} className="inset text-center py-1.5" style={{ borderTop: `3px solid ${partyVar(id)}` }}><div className="mono text-[9.5px] uppercase tracking-[0.06em] text-ink-2">{partyLabel(id)}</div><div className="mono text-[13.5px] font-semibold">{p.houseEffects?.[id] !== undefined ? (p.houseEffects[id] > 0 ? "+" : "") + p.houseEffects[id].toFixed(1).replace(".", ",") : "—"}</div></div>)}</div>
              </div>
            ))}
            <p className="text-[12px] text-ink-3 px-1">— : moins de 2 sondages dans la fenêtre de 400 jours, aucun effet maison estimé.</p>
          </div>
          <Card pad={false} className="overflow-x-auto hidden md:block">
            <table className="data-table min-w-[640px]"><thead><tr><th>Firme</th><th className="r">Sondages</th><th>Dernier</th>{PARTY_IDS.map((id) => <th key={id} className="r" style={{ color: partyVar(id) }}>{partyLabel(id)}</th>)}</tr></thead>
              <tbody>{ps.pollsters.sort((a, b) => b.polls - a.polls).map((p) => (
                <tr key={p.id}><td className="font-semibold">{p.website ? <a href={p.website} target="_blank" rel="noopener noreferrer" className="hover:underline">{p.name}</a> : p.name}</td><td className="r num">{p.polls}</td><td className="num">{dateShort(p.lastPoll)}</td>{PARTY_IDS.map((id) => <td key={id} className="r num">{p.houseEffects?.[id] !== undefined ? (p.houseEffects[id] > 0 ? "+" : "") + p.houseEffects[id].toFixed(1).replace(".", ",") : <span className="text-ink-3">—</span>}</td>)}</tr>
              ))}</tbody></table>
            <p className="text-[12px] text-ink-3 p-3">— : moins de 2 sondages dans la fenêtre de 400 jours, aucun effet maison estimé (le sondage entre sans correction).</p>
          </Card>
        </section>
      )}
    </div>
  );
}