import { ImageResponse } from "next/og";
import { ENGINE_URL, type Forecast } from "@/lib/api";
import { PARTIES } from "@/lib/parties";

export const runtime = "nodejs";
export const alt = "QC26 — Projection de l'élection québécoise 2026";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image() {
  let f: Forecast | null = null;
  try { f = await fetch(`${ENGINE_URL}/api/forecast/latest`, { next: { revalidate: 300 } }).then((r) => r.json()); } catch { f = null; }
  const rows = f ? Object.entries(f.parties).filter(([id]) => id !== "aut").sort((a, b) => b[1].seatsMean - a[1].seatsMean) : [];
  const color = (id: string) => PARTIES.find((p) => p.id === id)?.color ?? "#999";
  const date = f?.completedAt ? new Date(f.completedAt).toLocaleDateString("fr-CA", { day: "numeric", month: "long", timeZone: "America/Toronto" }) : "";
  return new ImageResponse(
    (
      <div style={{ display: "flex", width: "100%", height: "100%", flexDirection: "column", background: "#F7F8FA", color: "#111318", padding: 56, fontFamily: "Inter, sans-serif" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "baseline", fontSize: 44, fontWeight: 800, letterSpacing: -2 }}><span>QC</span><span style={{ width: 4, height: 36, background: "#2563EB", margin: "0 6px", borderRadius: 2 }} /><span style={{ color: "#2563EB" }}>26</span></div>
          <div style={{ display: "flex", fontSize: 20, color: "#656B76", letterSpacing: 3, textTransform: "uppercase" }}>Projection · {date}</div>
        </div>
        <div style={{ display: "flex", flex: 1, marginTop: 30, gap: 40 }}>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", flex: 1 }}>
            {rows.map(([id, v]) => (
              <div key={id} style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 14 }}>
                <div style={{ display: "flex", width: 90, fontSize: 30, fontWeight: 700, color: color(id) }}>{id.toUpperCase()}</div>
                <div style={{ display: "flex", flex: 1, height: 26, background: "#E9ECF0", borderRadius: 6, position: "relative" }}>
                  <div style={{ display: "flex", width: `${(v.seatsMedian / (f?.summary.seats_total ?? 127)) * 100}%`, height: 26, background: color(id), borderRadius: 6 }} />
                  <div style={{ display: "flex", position: "absolute", left: `${((f?.summary.majority ?? 64) / (f?.summary.seats_total ?? 127)) * 100}%`, top: -6, width: 3, height: 38, background: "#111318" }} />
                </div>
                <div style={{ display: "flex", width: 150, fontSize: 34, fontWeight: 800, textAlign: "right" }}>{v.seatsMedian}<span style={{ fontSize: 18, color: "#656B76", fontWeight: 500 }}> {v.seats80[0]}–{v.seats80[1]}</span></div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 20, color: "#656B76" }}><span>Québec 2026 · 5 octobre · {f?.summary.seats_total ?? 127} sièges · majorité {f?.summary.majority ?? 64}</span><span>qc26.ca</span></div>
      </div>
    ),
    { ...size },
  );
}