// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import { useState } from "react";
import Link from "next/link";
import SearchBox from "@/components/SearchBox";
import EstimateForm from "@/components/EstimateForm";
import { locNum, MarketPulseChart } from "@/components/MetricViz";
import { useLang } from "@/components/LangContext";

/** Indice de marché d'un grand type — série + variations (calculé côté serveur). */
export interface PulseItem {
  type: "unifamilial" | "condo" | "plex";
  series: { month: string; idx: number }[];
  pct12m: number | null;
  since2021: number | null;
}

/** Vente réelle récente appariée à une unité d'évaluation. */
export interface RecentSaleItem {
  id: string;
  date: string;
  amount: number;
  street: string | null;
  city: string | null;
  propertyType: string | null;
  idProvinc: string | null;
  vsRolePct: number | null;
}

const PULSE_LABELS: Record<PulseItem["type"], { fr: string; en: string }> = {
  unifamilial: { fr: "Unifamiliale", en: "Single-family" },
  condo: { fr: "Condo", en: "Condo" },
  plex: { fr: "Plex", en: "Plex" },
};
/* attribution FIXE des couleurs de série (jamais recyclée) */
const PULSE_COLORS: Record<PulseItem["type"], string> = {
  unifamilial: "var(--chart-1)",
  condo: "var(--chart-2)",
  plex: "var(--chart-3)",
};

/** Variation signée — l'encre porte le positif, le rouge danger le négatif. */
function Pct({ v, digits = 1 }: { v: number | null; digits?: number }) {
  if (v == null) return <span className="text-ink-3">—</span>;
  return (
    <span className={v >= 0 ? "text-ink" : "text-[var(--danger)]"}>
      {v >= 0 ? "+" : "−"}
      {Math.abs(v).toFixed(digits)}&nbsp;%
    </span>
  );
}

/** En-tête de section éditorial : filet fort, numéro mono rouge, titre display. */
function SectionHead({
  num,
  kicker,
  title,
  lede,
}: {
  num: string;
  kicker: string;
  title: string;
  lede?: string;
}) {
  return (
    <header className="sec">
      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
        <span className="sec-num">
          {num} — {kicker}
        </span>
      </div>
      <h2 className="vp-display mt-2 max-w-3xl text-[clamp(24px,3.6vw,36px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">
        {title}
      </h2>
      {lede && <p className="mt-3 max-w-2xl text-[14.5px] leading-relaxed text-ink-2">{lede}</p>}
    </header>
  );
}

const PERIODS = [
  { key: "12", months: 12, fr: "12 mois", en: "12 mo" },
  { key: "24", months: 24, fr: "24 mois", en: "24 mo" },
  { key: "all", months: null as number | null, fr: "Depuis 2021", en: "Since 2021" },
] as const;

export default function HomeClient({
  pulse,
  recent,
  salesLast30d,
}: {
  pulse: PulseItem[];
  recent: RecentSaleItem[];
  salesLast30d: number;
}) {
  const { lang, t } = useLang();
  const fr = lang === "fr";
  const [period, setPeriod] = useState<(typeof PERIODS)[number]["key"]>("24");
  const money = (v: number) =>
    new Intl.NumberFormat(fr ? "fr-CA" : "en-CA", {
      style: "currency",
      currency: "CAD",
      maximumFractionDigits: 0,
    }).format(v);
  const dateFmt = (d: string) =>
    new Date(`${d}T12:00:00`).toLocaleDateString(fr ? "fr-CA" : "en-CA", {
      day: "numeric",
      month: "short",
    });

  const months = PERIODS.find((p) => p.key === period)?.months ?? 24;
  const chartData = pulse.map((p) => ({
    key: p.type,
    label: PULSE_LABELS[p.type][lang],
    color: PULSE_COLORS[p.type],
    series: p.series,
  }));

  const proofs: [string, string][] = [
    ["3 747 008", fr ? "propriétés estimées" : "estimated properties"],
    ["745 119", fr ? "ventes réelles 2021-2026" : "real sales 2021-2026"],
    [locNum(salesLast30d, lang, { maxFrac: 0 }), fr ? "ventes captées / 30 jours" : "sales captured / 30 days"],
    ["1 100", fr ? "municipalités couvertes" : "municipalities covered"],
  ];

  return (
    <div className="pb-6">
      {/* ================= HÉRO — terminal encre pleine largeur ================= */}
      <section className="bleed vp-dark">
        <div className="mx-auto max-w-6xl px-4 pb-10 pt-12 sm:px-6 sm:pb-14 sm:pt-16">
          <span className="kicker !text-[var(--accent-bright)] [&::before]:!bg-[var(--accent-bright)]">
            {fr
              ? "Terminal public de valeur immobilière — Québec"
              : "Public real-estate value terminal — Québec"}
          </span>
          <h1 className="vp-display mt-4 text-[clamp(38px,8vw,92px)] font-bold uppercase leading-[0.95] tracking-[-0.035em]">
            {fr ? (
              <>
                La <span className="outline-txt">vraie</span> valeur.
                <br />
                <span className="text-[var(--accent-bright)]">Sans boîte noire.</span>
              </>
            ) : (
              <>
                The <span className="outline-txt">true</span> value.
                <br />
                <span className="text-[var(--accent-bright)]">No black box.</span>
              </>
            )}
          </h1>
          <p className="mt-5 max-w-xl text-[15.5px] leading-relaxed text-[rgba(245,243,238,0.72)]">
            {t("sub")}
          </p>

          {/* -------- la recherche : l'action centrale de la page -------- */}
          <div className="mt-9 max-w-3xl">
            <p className="vp-mono mb-1 text-[10.5px] font-medium uppercase tracking-[0.16em] text-[rgba(245,243,238,0.55)]">
              {fr ? "Entrez une adresse au Québec" : "Enter a Québec address"}
            </p>
            <SearchBox variant="hero" />
            <p className="vp-mono mt-2.5 text-[10px] uppercase tracking-[0.06em] text-[rgba(245,243,238,0.4)]">
              {t("dataNote")}
            </p>
          </div>

          {/* -------- preuves de profondeur de données, intégrées -------- */}
          <div className="mt-10 grid grid-cols-2 gap-x-6 gap-y-5 border-t border-[rgba(245,243,238,0.16)] pt-6 sm:grid-cols-4">
            {proofs.map(([num, label], i) => (
              <div key={label}>
                <p className="vp-display flex items-baseline gap-2 text-[clamp(20px,2.6vw,28px)] font-bold leading-none tracking-[-0.02em] text-[var(--paper-on-ink)]">
                  {num}
                  {i === 2 && (
                    <span
                      aria-hidden="true"
                      className="inline-block h-[7px] w-[7px] rounded-full bg-[var(--accent-bright)] [animation:pulse_2.4s_ease_infinite]"
                    />
                  )}
                </p>
                <p className="vp-mono mt-1.5 text-[9.5px] uppercase tracking-[0.12em] text-[rgba(245,243,238,0.5)]">
                  {label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ le principe, en une ligne (pas de boîtes) ============ */}
      <section className="border-b border-[var(--line)] py-6">
        <div className="grid gap-x-8 gap-y-4 sm:grid-cols-3">
          {(fr
            ? [
                ["01", "Cherchez l'adresse", "3,7 M d'unités d'évaluation, recherche tolérante aux fautes."],
                ["02", "Deux sources croisées", "Modèle hédonique (690 k ventes) + comparables réels ajustés en dollars."],
                ["03", "Fourchette + confiance", "P10-P90, indice A-D — le calcul montré en entier."],
              ]
            : [
                ["01", "Search the address", "3.7M assessment units, typo-tolerant search."],
                ["02", "Two sources, crossed", "Hedonic model (690k sales) + real comparables adjusted in dollars."],
                ["03", "Range + confidence", "P10-P90, A-D index — the full math, shown."],
              ]
          ).map(([num, title, body]) => (
            <div key={num} className="flex items-start gap-3">
              <span className="vp-mono pt-[3px] text-[11px] font-bold text-accent">{num}</span>
              <p className="text-[13px] leading-snug text-ink-2">
                <span className="vp-display block text-[14px] font-bold uppercase tracking-[-0.01em] text-ink">
                  {title}
                </span>
                {body}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ================= MARCHÉ — data visualization éditoriale ================= */}
      <section className="mt-12">
        <SectionHead
          num="01"
          kicker={fr ? "Indice Vrai-Prix" : "Vrai-Prix index"}
          title={fr ? "Le pouls du marché québécois" : "The pulse of the Québec market"}
          lede={
            fr
              ? "L'indice mensuel calculé sur les ventes réelles — celui-là même qui ajuste les comparables de chaque estimation. Trois grands types, une même échelle : base 100 au début de la période."
              : "The monthly index built from real sales — the same one adjusting every estimate's comparables. Three major types, one scale: base 100 at the period start."
          }
        />

        {/* contrôles : période (une rangée, au-dessus du graphique) */}
        <div className="mt-5 flex flex-wrap items-end justify-between gap-x-6 gap-y-2 border-b border-[var(--line)]">
          <div className="flex gap-5">
            {PERIODS.map((p) => (
              <button
                key={p.key}
                type="button"
                className="vp-tab"
                aria-pressed={period === p.key}
                onClick={() => setPeriod(p.key)}
              >
                {p[lang]}
              </button>
            ))}
          </div>
          {/* légende — l'identité ne repose jamais sur la couleur seule */}
          <div className="flex flex-wrap gap-x-4 gap-y-1 pb-2">
            {chartData.map((s) => (
              <span key={s.key} className="vp-mono flex items-center gap-1.5 text-[10px] uppercase tracking-[0.08em] text-ink-2">
                <span className="inline-block h-[2px] w-[14px]" style={{ background: s.color }} />
                {s.label}
              </span>
            ))}
          </div>
        </div>

        <div className="mt-4">
          <MarketPulseChart data={chartData} lang={lang} months={months} />
        </div>

        {/* lecture par type : variations en colonnes de données */}
        <div className="mt-5 grid gap-x-8 gap-y-3 border-t border-[var(--line)] pt-4 sm:grid-cols-3">
          {pulse.map((p) => (
            <div key={p.type} className="flex items-baseline justify-between gap-4 sm:block">
              <p className="vp-mono flex items-center gap-1.5 text-[10.5px] font-bold uppercase tracking-[0.08em] text-ink">
                <span className="inline-block h-[2px] w-[12px]" style={{ background: PULSE_COLORS[p.type] }} />
                {PULSE_LABELS[p.type][lang]}
              </p>
              <p className="vp-mono mt-1 flex gap-4 text-[11px] text-ink-2">
                <span>
                  12&nbsp;{fr ? "mois" : "mo"}&nbsp;
                  <b className="vp-display text-[14px]">
                    <Pct v={p.pct12m} />
                  </b>
                </span>
                <span>
                  2021→&nbsp;
                  <b className="vp-display text-[14px]">
                    <Pct v={p.since2021} digits={0} />
                  </b>
                </span>
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ================= VENTES RÉELLES — flux prix-d'abord ================= */}
      {recent.length > 0 && (
        <section id="ventes" className="mt-14 scroll-mt-20">
          <SectionHead
            num="02"
            kicker={fr ? "Flux en continu" : "Live feed"}
            title={fr ? "Dernières ventes réelles captées" : "Latest real sales captured"}
            lede={
              fr
                ? "Transactions publiées, appariées automatiquement à leur unité d'évaluation. Chaque vente mène à l'estimation complète de la propriété."
                : "Published transactions, automatically matched to their assessment unit. Each sale leads to the property's full estimate."
            }
          />
          <div className="mt-5">
            {recent.map((s) => {
              const inner = (
                <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 sm:flex-nowrap">
                  {/* le prix d'abord — la donnée mène */}
                  <p className="vp-display w-full text-[22px] font-bold leading-none tracking-[-0.02em] sm:w-[168px] sm:shrink-0 sm:text-[20px]">
                    {money(s.amount)}
                  </p>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-[14.5px] font-semibold leading-snug">
                      {s.street}
                      {s.city ? `, ${s.city}` : ""}
                    </p>
                    <p className="vp-mono mt-0.5 text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
                      {dateFmt(s.date)}
                      {s.propertyType && s.propertyType !== "indéterminé" ? ` · ${s.propertyType}` : ""}
                      {s.vsRolePct != null && Math.abs(s.vsRolePct) < 400 && (
                        <>
                          {" · "}
                          <span className={s.vsRolePct >= 0 ? "text-ink-2" : "text-[var(--danger)]"}>
                            {s.vsRolePct >= 0 ? "+" : "−"}
                            {Math.abs(s.vsRolePct).toFixed(0)} % {fr ? "vs rôle" : "vs roll"}
                          </span>
                        </>
                      )}
                    </p>
                  </div>
                  {s.idProvinc && (
                    <p className="vp-mono shrink-0 text-[10.5px] font-bold uppercase tracking-[0.08em] text-accent">
                      {fr ? "Voir l'estimation" : "See the estimate"} →
                    </p>
                  )}
                </div>
              );
              return s.idProvinc ? (
                <Link key={s.id} href={`/estimation/${encodeURIComponent(s.idProvinc)}`} className="feed-row">
                  {inner}
                </Link>
              ) : (
                <div key={s.id} className="feed-row">
                  {inner}
                </div>
              );
            })}
          </div>
        </section>
      )}

      {/* ================= LE CALCUL, MONTRÉ — promesse centrale ================= */}
      <section className="mt-14">
        <SectionHead
          num="03"
          kicker={fr ? "Sans boîte noire" : "No black box"}
          title={fr ? "Voici exactement comment le prix est calculé" : "Here is exactly how the price is computed"}
        />
        <div className="mt-6 grid gap-10 lg:grid-cols-[1.2fr_1fr]">
          <ol className="tl">
            {(fr
              ? [
                  ["Propriété identifiée", "3,7 M d'unités d'évaluation géoréférencées (MAMH)."],
                  ["Rôle d'évaluation récupéré", "Valeurs terrain + bâtiment, six millésimes 2021-2026."],
                  ["Ventes comparables sélectionnées", "Rayon adaptatif, même famille de type, aire ±20 %."],
                  ["Caractéristiques ajustées", "Marché, superficie, âge — chaque ajustement affiché en dollars."],
                  ["Estimation calculée", "65 % modèle hédonique + 35 % comparables pondérés."],
                  ["Intervalle de confiance produit", "Fourchette P10-P90 et indice A-D, toujours affichés."],
                ]
              : [
                  ["Property identified", "3.7M georeferenced assessment units (MAMH)."],
                  ["Assessment roll retrieved", "Land + building values, six vintages 2021-2026."],
                  ["Comparable sales selected", "Adaptive radius, same type family, area ±20%."],
                  ["Characteristics adjusted", "Market, area, age — every adjustment shown in dollars."],
                  ["Estimate computed", "65% hedonic model + 35% weighted comparables."],
                  ["Confidence interval produced", "P10-P90 range and A-D index, always shown."],
                ]
            ).map(([title, body], i, arr) => (
              <li key={title} className="tl-step" data-accent={i === arr.length - 1 ? "true" : undefined}>
                <p className="vp-display flex items-baseline gap-2.5 text-[15px] font-bold uppercase tracking-[-0.01em]">
                  <span className="vp-mono text-[10.5px] font-bold text-accent">0{i + 1}</span>
                  {title}
                </p>
                <p className="mt-1 text-[13px] leading-snug text-ink-2">{body}</p>
              </li>
            ))}
          </ol>
          <div>
            {(lang === "fr"
              ? [
                  ["Le calcul, montré", "Chaque ajustement de chaque comparable est affiché en dollars. Pas de score magique."],
                  ["Fourchette honnête", "Un prix unique est un mensonge statistique. On donne P10-P90 et un indice de confiance A-D."],
                  ["Données réelles", "Rôles fonciers officiels (MAMH) et ventes publiées — locales et récentes en priorité."],
                ]
              : [
                  ["The math, shown", "Every adjustment on every comparable is displayed in dollars. No magic score."],
                  ["Honest range", "A single price is a statistical lie. We give P10-P90 and an A-D confidence index."],
                  ["Real data", "Official assessment rolls (MAMH) and published sales — local and recent first."],
                ]
            ).map(([title, body]) => (
              <div key={title} className="border-t border-[var(--line)] py-4 first:border-t-0 first:pt-0">
                <h3 className="vp-display text-[15px] font-bold uppercase tracking-[-0.01em]">{title}</h3>
                <p className="mt-1.5 text-[13px] leading-snug text-ink-2">{body}</p>
              </div>
            ))}
            <p className="vp-mono mt-2 border-t border-[var(--line)] pt-4 text-[11px] uppercase tracking-[0.06em]">
              <Link href="/methodologie" className="border-b border-accent pb-px text-accent-deep hover:text-accent">
                {fr ? "Méthodologie complète — niveau rapport technique" : "Full methodology — technical-report depth"} →
              </Link>
            </p>
          </div>
        </div>
      </section>

      {/* ================= PLAN B — estimation sans adresse ================= */}
      <section className="mt-14">
        <SectionHead
          num="04"
          kicker={fr ? "Plan B" : "Plan B"}
          title={t("manualTitle")}
        />
        <div className="mt-6 max-w-3xl">
          <EstimateForm />
        </div>
      </section>
    </div>
  );
}