import Link from "next/link";
import type { ReactNode } from "react";
import { cls, dateTimeFr, relTime } from "@/lib/format";

export function SectionHeader({ eyebrow, title, description, action, id, className, num }: { eyebrow?: string; title: string; description?: ReactNode; action?: ReactNode; id?: string; className?: string; num?: string }) {
  return (
    <div id={id} className={cls("flex flex-wrap items-end justify-between gap-3 mb-5 scroll-mt-24", className)}>
      <div className="min-w-0">
        {(eyebrow || num) && <div className="flex items-center gap-2 mb-1.5">{num && <span className="section-num">{num}</span>}{eyebrow && <span className="eyebrow">{eyebrow}</span>}</div>}
        <h2 className="display text-[26px] md:text-[32px] leading-[1.05]">{title}</h2>
        {description && <p className="text-ink-2 text-[14.5px] mt-2 max-w-2xl leading-relaxed">{description}</p>}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}

export function PageTitle({ eyebrow, title, lede, action, children }: { eyebrow?: ReactNode; title: ReactNode; lede?: ReactNode; action?: ReactNode; children?: ReactNode }) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-6">
      <div className="min-w-0 max-w-3xl">
        {eyebrow && <div className="eyebrow eyebrow-accent">{eyebrow}</div>}
        <h1 className="display text-[40px] md:text-[60px] mt-3">{title}</h1>
        {lede && <p className="lede mt-4">{lede}</p>}
        {children}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}

export function Card({ children, className, pad = true }: { children: ReactNode; className?: string; pad?: boolean }) {
  return <div className={cls("card", pad && "p-4 md:p-5", className)}>{children}</div>;
}

export function Metric({ label, value, sub, delta, className, size = "md", color, serif = true }: { label: string; value: ReactNode; sub?: ReactNode; delta?: ReactNode; className?: string; size?: "sm" | "md" | "lg" | "xl"; color?: string; serif?: boolean }) {
  const vs = { sm: "text-[22px]", md: "text-[30px]", lg: "text-[44px]", xl: "text-[72px] md:text-[96px]" }[size];
  return (
    <div className={cls("min-w-0", className)}>
      <div className="eyebrow">{label}</div>
      <div className={cls(serif ? "figure" : "num font-bold tracking-tight", "mt-1.5", vs)} style={color ? { color } : undefined}>{value}</div>
      {(sub || delta) && (
        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1 mt-1.5 text-[13px] text-ink-2">
          {delta}
          {sub && <span className="whitespace-nowrap">{sub}</span>}
        </div>
      )}
    </div>
  );
}

export function MetricDelta({ value, digits = 1, suffix = " pt", invert = false }: { value: number | null | undefined; digits?: 0 | 1; suffix?: string; invert?: boolean }) {
  if (value === null || value === undefined) return null;
  const eps = digits === 1 ? 0.05 : 0.5;
  const zero = Math.abs(value) < eps;
  const up = value > 0;
  const good = invert ? !up : up;
  const txt = zero ? "0" : (up ? "+" : "−") + Math.abs(value).toFixed(digits).replace(".", ",");
  return (
    <span className={cls("num inline-flex items-center gap-0.5 font-semibold text-[12px] px-1.5 py-[2px] rounded-[6px] mono whitespace-nowrap", zero ? "text-ink-3 bg-surface-2" : good ? "text-ok bg-ok-soft" : "text-live bg-live-soft")} aria-label={`variation ${txt}${suffix}`}>
      {!zero && (up ? "▲" : "▼")} {txt}{suffix}
    </span>
  );
}

export function Badge({ children, tone = "neutral", className, title }: { children: ReactNode; tone?: "neutral" | "accent" | "live" | "ok" | "warn" | "ink"; className?: string; title?: string }) {
  const t = {
    neutral: "bg-surface-2 text-ink-2 border-border",
    accent: "bg-accent-soft text-accent border-transparent",
    live: "bg-live-soft text-live border-transparent",
    ok: "bg-ok-soft text-ok border-transparent",
    warn: "bg-warn-soft text-warn border-transparent",
    ink: "bg-brand text-ink-inverse border-transparent",
  }[tone];
  return <span title={title} className={cls("inline-flex items-center gap-1 rounded-[6px] border px-2 py-[3px] text-[10.5px] font-semibold tracking-[0.06em] uppercase mono", t, className)}>{children}</span>;
}

export function LiveBadge({ label = "Direct" }: { label?: string }) {
  return (
    <Badge tone="live"><span className="live-dot" /> {label}</Badge>
  );
}
export function ProjectionBadge({ children = "Projection QC26" }: { children?: ReactNode }) {
  return <Badge tone="accent">{children}</Badge>;
}
export function OfficialBadge({ children = "Officiel" }: { children?: ReactNode }) {
  return <Badge tone="ok">{children}</Badge>;
}
export function ConfidenceBadge({ value }: { value: number | null | undefined }) {
  if (value === null || value === undefined) return null;
  const tone = value >= 0.85 ? "ok" : value >= 0.6 ? "neutral" : "warn";
  return <Badge tone={tone} title="Confiance de l'extraction (validation schéma + arithmétique + concordance)">Confiance {Math.round(value * 100)} %</Badge>;
}

export function Timestamp({ iso, prefix = "Mise à jour", className, relative = false }: { iso: string | null | undefined; prefix?: string; className?: string; relative?: boolean }) {
  if (!iso) return null;
  return (
    <time dateTime={iso} className={cls("text-[12px] text-ink-3 num", className)} title={dateTimeFr(iso)}>
      {prefix} {relative ? relTime(iso) : dateTimeFr(iso)}
    </time>
  );
}

/** Bouton « Source » : ouvre la provenance (URL originale, archive QC26, date de récupération, page). */
export function SourceBadge({ source }: { source: { name: string; url?: string | null; archiveUrl?: string | null; retrievedAt?: string | null; page?: number | null; detail?: string | null; tier?: string | null } }) {
  return (
    <details className="relative inline-block group">
      <summary className="list-none cursor-pointer inline-flex items-center gap-1.5 text-[10.5px] mono font-semibold uppercase tracking-[0.06em] text-ink-2 border border-border rounded-[6px] px-2 py-[3px] hover:bg-surface-2 select-none">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg> Source
      </summary>
      <div className="absolute z-30 left-0 mt-2 w-[320px] max-w-[calc(100vw-2rem)] card p-3.5 text-[12.5px] shadow-md text-left leading-relaxed max-md:fixed max-md:left-3 max-md:right-3 max-md:w-auto max-md:max-w-none max-md:bottom-[calc(var(--bottom-nav-h)+env(safe-area-inset-bottom)+12px)] max-md:mt-0 max-md:shadow-lg">
        <div className="font-semibold text-ink">{source.name}</div>
        {source.detail && <div className="text-ink-2 mt-1">{source.detail}</div>}
        <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-ink-2">
          {source.tier && (<><dt>Niveau</dt><dd>{source.tier}</dd></>)}
          {source.page && (<><dt>Page</dt><dd className="num">{source.page}</dd></>)}
          {source.retrievedAt && (<><dt>Récupéré</dt><dd>{dateTimeFr(source.retrievedAt)}</dd></>)}
          {source.url && (<><dt>Original</dt><dd className="truncate"><a className="link" href={source.url} target="_blank" rel="noopener noreferrer">{source.url.replace(/^https?:\/\//, "").slice(0, 44)}…</a></dd></>)}
          {source.archiveUrl && (<><dt>Archive</dt><dd><a className="link" href={source.archiveUrl} target="_blank" rel="noopener noreferrer">copie QC26 (SHA-256)</a></dd></>)}
        </dl>
      </div>
    </details>
  );
}

export function ProbabilityBar({ p, color, label, height = 10, showValue = true, className }: { p: number; color: string; label?: string; height?: number; showValue?: boolean; className?: string }) {
  const v = Math.max(0, Math.min(1, p));
  return (
    <div className={cls("flex items-center gap-3", className)} role="img" aria-label={`${label ?? "probabilité"} ${Math.round(v * 100)} %`}>
      <div className="flex-1 rounded-full overflow-hidden bg-surface-3" style={{ height }}>
        <div className="h-full rounded-full transition-[width] duration-500" style={{ width: `${v * 100}%`, background: color }} />
      </div>
      {showValue && <span className="num font-semibold text-[13px] w-12 text-right">{v > 0.995 ? "> 99" : v < 0.005 ? "< 1" : Math.round(v * 100)} %</span>}
    </div>
  );
}

export function Pill({ href, children, active, className }: { href: string; children: ReactNode; active?: boolean; className?: string }) {
  return (
    <Link href={href} className={cls("chip", active && "chip-active", className)}>
      {children}
    </Link>
  );
}

export function Empty({ title, children }: { title: string; children?: ReactNode }) {
  return (
    <div className="card p-10 text-center">
      <div className="display text-[22px]">{title}</div>
      {children && <div className="text-ink-2 text-[14px] mt-2">{children}</div>}
    </div>
  );
}

export function Disclaimer({ text }: { text?: string }) {
  return (
    <p className="text-[12.5px] text-ink-3 leading-relaxed max-w-3xl">
      {text ?? "QC26 est une plateforme indépendante d'analyse électorale. Les projections sont des estimations probabilistes et non des prédictions certaines. QC26 n'est affilié à aucun parti politique ni à Élections Québec."}
    </p>
  );
}

export function KV({ items, className }: { items: [ReactNode, ReactNode][]; className?: string }) {
  return (
    <dl className={cls("grid grid-cols-[minmax(80px,auto)_minmax(0,1fr)] gap-x-3 sm:gap-x-4 gap-y-1.5 text-[13.5px]", className)}>
      {items.map(([k, v], i) => (
        <div key={i} className="contents">
          <dt className="text-ink-2">{k}</dt>
          <dd className="num min-w-0 break-words">{v}</dd>
        </div>
      ))}
    </dl>
  );
}

/** Petite étiquette « signal » : nom de la source, fraîcheur, statut. */
export function SourceChip({ name, at, tone = "neutral" }: { name: string; at?: string | null; tone?: "neutral" | "ok" | "warn" }) {
  return (
    <span className={cls("inline-flex items-center gap-1.5 text-[11px] mono uppercase tracking-[0.06em] rounded-[6px] px-2 py-[3px] border", tone === "ok" ? "border-transparent bg-ok-soft text-ok" : tone === "warn" ? "border-transparent bg-warn-soft text-warn" : "border-border text-ink-2")}>
      <span className={cls("w-1.5 h-1.5 rounded-full", tone === "ok" ? "bg-ok" : tone === "warn" ? "bg-warn" : "bg-ink-3")} aria-hidden />{name}{at && <span className="text-ink-3 normal-case tracking-normal">· {relTime(at)}</span>}
    </span>
  );
}

/** Rend une variante étroite (mobile) et une variante large (≥ md) : utile pour les SVG à viewBox fixe. */
export function Dual({ narrow, wide, className }: { narrow: ReactNode; wide: ReactNode; className?: string }) {
  return (
    <>
      <div className={cls("md:hidden", className)}>{narrow}</div>
      <div className={cls("hidden md:block", className)}>{wide}</div>
    </>
  );
}

/** Rangée mobile « clé → valeur » compacte pour remplacer une ligne de tableau. */
export function StatRow({ label, value, sub, className }: { label: ReactNode; value: ReactNode; sub?: ReactNode; className?: string }) {
  return (
    <div className={cls("flex items-baseline justify-between gap-3 py-2 border-b border-border last:border-b-0", className)}>
      <div className="min-w-0"><div className="text-[13.5px] font-medium truncate">{label}</div>{sub && <div className="text-[11.5px] text-ink-3 truncate">{sub}</div>}</div>
      <div className="mono text-[13.5px] font-semibold shrink-0">{value}</div>
    </div>
  );
}