// Vrai-Prix — méthode du coût : fiche d'un assemblage (/cout/assemblage/[code]) — description, schéma, composition,
// prix + provenance, main-d'œuvre, sources, historique 8 trimestres, variations régionales, voisins.
"use client";
import { useState } from "react";
import Link from "next/link";
import { useLang } from "@/components/LangContext";
import type { Assembly, AssemblyUnitCost, CostLocation } from "@/lib/cost/types";
import { categoryLabel, MASTERFORMAT, QUALITIES, tradeLabel } from "@/lib/cost/taxonomy";
import { UNIT_LABELS } from "@/lib/cost/units";
import { num } from "@/components/avendre/fmt";
import { AssemblySketch, StackBar, UnitCostHistory } from "./Charts";
import { fmtDate, KindIcon, KindLegend, kindLabel, LayerBadge } from "./Provenance";
import { Drawer, PriceSourceCard } from "./SourceDrawer";

export interface AssemblyDetailData {
  asOf: string;
  location: CostLocation;
  assembly: Assembly;
  unit: AssemblyUnitCost;
  regional: { code: string; nameFr: string; nameEn: string; direct: number; materialFactor: number; labourFactor: number; equipmentFactor: number }[];
  history: { date: string; direct: number; material: number; labour: number; equipment: number; kind: string }[];
  neighbours: { code: string; nameFr: string; nameEn: string; unit: string; direct: number }[];
}

export default function AssemblyDetail({ data }: { data: AssemblyDetailData }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const a = data.assembly;
  const u = data.unit;
  const unitL = (x: string) => UNIT_LABELS[x as keyof typeof UNIT_LABELS]?.[fr ? "fr" : "en"] ?? x;
  const [src, setSrc] = useState<AssemblyUnitCost["components"][number] | null>(null);
  const maxRegional = Math.max(...data.regional.map((r) => r.direct), 0.01);
  const observedShare = Math.round(u.observedShare * 100);
  return (
    <div className="space-y-12 py-8">
      <section className="rise">
        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b-2 border-ink pb-2.5">
          <nav className="vp-mono flex flex-wrap items-center gap-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
            <Link href="/" className="text-ink-2 hover:text-accent-deep">Vrai&nbsp;Prix</Link><span aria-hidden="true">/</span>
            <Link href="/cout" className="text-ink-2 hover:text-accent-deep">{fr ? "Coût" : "Cost"}</Link><span aria-hidden="true">/</span>
            <Link href="/cout/assemblage" className="text-ink-2 hover:text-accent-deep">{fr ? "Assemblages" : "Assemblies"}</Link><span aria-hidden="true">/</span>
            <span>{a.code}</span>
          </nav>
          <span className="vp-mono text-[10px] uppercase tracking-[0.08em] text-ink-3">{fr ? "prix au" : "prices as of"} {data.asOf} · {fr ? data.location.nameFr : data.location.nameEn} · v{a.version}</span>
        </div>
        <div className="mt-6 grid gap-x-12 gap-y-6 lg:grid-cols-[1.5fr_1fr]">
          <div>
            <span className="kicker">{categoryLabel(a.category, fr)} · MasterFormat {a.masterformat} — {MASTERFORMAT[a.masterformat]?.[fr ? "fr" : "en"] ?? ""}</span>
            <h1 className="vp-display mt-2 text-[clamp(24px,3.8vw,40px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">{fr ? a.nameFr : a.nameEn}</h1>
            <p className="mt-3 max-w-2xl text-[14.5px] leading-relaxed text-ink-2">{fr ? a.descriptionFr : a.descriptionEn}</p>
            <div className="mt-4 flex flex-wrap gap-x-6 gap-y-2">
              <div className="kv-cell"><p className="k">{fr ? "Unité" : "Unit"}</p><p className="v">{unitL(a.unit)}</p></div>
              <div className="kv-cell"><p className="k">{fr ? "Qualité" : "Quality"}</p><p className="v">{a.quality ? (QUALITIES.find((q) => q.key === a.quality)?.[fr ? "fr" : "en"] ?? a.quality) : (fr ? "toutes" : "all")}</p></div>
              <div className="kv-cell"><p className="k">{fr ? "Vie économique" : "Economic life"}</p><p className="v">{a.economicLife ?? "—"} {fr ? "ans" : "yrs"}</p></div>
              <div className="kv-cell"><p className="k">{fr ? "Groupe de condition" : "Condition group"}</p><p className="v">{a.conditionGroup ?? "—"}</p></div>
              <div className="kv-cell"><p className="k">{fr ? "Mise à jour des prix" : "Price update"}</p><p className="v">{u.freshestObservation ? fmtDate(u.freshestObservation, fr) : (fr ? "référence seulement" : "reference only")}</p></div>
            </div>
          </div>
          <aside className="lg:border-l lg:border-[var(--line)] lg:pl-10">
            <p className="klabel">{fr ? "Coût direct par unité (Montréal, avant facteur régional)" : "Direct cost per unit (Montréal, before regional factor)"}</p>
            <p className="vp-display mt-1 text-[clamp(30px,4vw,44px)] font-bold tracking-[-0.03em]">{num(u.direct, lang, 2)} $ <span className="vp-mono text-[11px] font-medium text-ink-3">/ {unitL(a.unit)}</span></p>
            <div className="mt-3"><StackBar lang={lang} parts={[{ label: fr ? "Matériaux" : "Materials", value: u.material }, { label: fr ? "Main-d'œuvre" : "Labour", value: u.labour }, { label: fr ? "Équipement" : "Equipment", value: u.equipment }]} /></div>
            <p className="vp-mono mt-3 text-[10.5px] uppercase tracking-[0.05em] text-ink-2">{fr ? "part observée des matériaux" : "observed share of materials"} : <b className="text-ink">{observedShare} %</b> · σ ≈ {Math.round(u.sigmaPct * 100)} %</p>
            <div className="mt-4"><AssemblySketch category={a.category} /></div>
            <p className="vp-mono mt-1 text-[9.5px] uppercase tracking-[0.05em] text-ink-3">{fr ? "schéma de principe (coupe générique)" : "schematic (generic section)"}</p>
          </aside>
        </div>
      </section>

      <section>
        <div className="sec"><span className="sec-num">01</span> <span className="kicker">{fr ? "Composition" : "Composition"}</span>
          <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{fr ? "Composants, quantités, prix et main-d'œuvre" : "Components, quantities, prices and labour"}</h2>
          <p className="mt-2 max-w-3xl text-[14px] text-ink-2">{fr ? "Par unité d'assemblage : matériau = quantité × (1 + pertes) × prix canonique ; main-d'œuvre = heures × coût employeur du métier ; équipement = forfait par unité. Cliquez une ligne pour la fiche source." : "Per assembly unit: material = quantity × (1 + waste) × canonical price; labour = hours × trade employer cost; equipment = lump per unit. Click a row for the source card."}</p>
        </div>
        <div className="src-wrap mt-5">
          <table className="src-table">
            <thead><tr><th>{fr ? "Composant" : "Component"}</th><th className="text-right">{fr ? "Qté / unité" : "Qty / unit"}</th><th className="text-right">{fr ? "Pertes" : "Waste"}</th><th className="text-right">{fr ? "Prix unitaire" : "Unit price"}</th><th>{fr ? "Provenance" : "Provenance"}</th><th className="text-right">{fr ? "Matériau" : "Material"}</th><th className="text-right">{fr ? "Heures" : "Hours"}</th><th className="text-right">{fr ? "Taux" : "Rate"}</th><th className="text-right">MO</th><th className="text-right">É</th></tr></thead>
            <tbody>
              {u.components.map((c, i) => (
                <tr key={i} className="cursor-pointer" onClick={() => setSrc(c)}>
                  <td><span className="font-semibold">{fr ? c.nameFr : c.nameEn}</span>{c.itemCode && <><br /><span className="vp-mono text-[10px] text-ink-3">{c.itemCode}</span></>}{c.trade && c.labourHours > 0 && <><br /><span className="vp-mono text-[10px] text-ink-3">{tradeLabel(c.trade, fr)}</span></>}</td>
                  <td className="vp-mono text-right text-[12px]">{c.itemCode ? `${num(c.quantity, lang, 4)} ${unitL(c.unit)}` : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.itemCode ? `${Math.round(c.wasteFactor * 100)} %` : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.itemCode ? `${num(c.unitPrice, lang, 2)} $` : "—"}</td>
                  <td className="text-[12px]">{c.itemCode ? <span className="inline-flex items-center gap-1.5"><KindIcon kind={c.provenance.kind} fr={fr} source={c.provenance.source} observedAt={c.provenance.observedAt} note={c.provenance.note} /> {kindLabel(c.provenance.kind, fr)}{c.provenance.observedAt ? ` · ${c.provenance.observedAt}` : ""}</span> : <LayerBadge layer="assumption" fr={fr} />}</td>
                  <td className="vp-mono text-right text-[12px]">{c.materialCost ? `${num(c.materialCost, lang, 2)} $` : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.labourHours ? num(c.labourHours, lang, 3) : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.hourlyRate != null ? <span className="inline-flex items-center gap-1">{num(c.hourlyRate, lang, 2)} $/h <KindIcon kind={c.rateProvenance?.kind ?? "assumption"} fr={fr} source={c.rateProvenance?.source} observedAt={c.rateProvenance?.effectiveDate} note={c.rateProvenance?.note} /></span> : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.labourCost ? `${num(c.labourCost, lang, 2)} $` : "—"}</td>
                  <td className="vp-mono text-right text-[12px]">{c.equipmentCost ? `${num(c.equipmentCost, lang, 2)} $` : "—"}</td>
                </tr>
              ))}
              <tr className="bg-surface-2 font-bold"><td>{fr ? "Total par unité" : "Total per unit"}</td><td colSpan={4} /><td className="vp-mono text-right">{num(u.material, lang, 2)} $</td><td colSpan={2} className="vp-mono text-right">{num(u.components.reduce((s, c) => s + c.labourHours, 0), lang, 3)} h</td><td className="vp-mono text-right">{num(u.labour, lang, 2)} $</td><td className="vp-mono text-right">{num(u.equipment, lang, 2)} $</td></tr>
            </tbody>
          </table>
        </div>
        <div className="mt-3"><KindLegend fr={fr} /></div>
      </section>

      <section className="grid gap-x-12 gap-y-10 lg:grid-cols-2">
        <div>
          <div className="sec"><span className="sec-num">02</span> <span className="kicker">{fr ? "Historique" : "History"}</span>
            <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{fr ? "Coût unitaire — 8 trimestres" : "Unit cost — 8 quarters"}</h2>
            <p className="mt-2 text-[13.5px] text-ink-2">{fr ? "Recalculé avec les prix disponibles à chaque date (observé ●, indexé ○ ou référence ◇). Une base de référence stable donne une ligne plate : ce n'est pas une observation." : "Recomputed with the prices available at each date (observed ●, indexed ○ or reference ◇). A stable reference base gives a flat line: it is not an observation."}</p>
          </div>
          <div className="mt-4"><UnitCostHistory rows={data.history} lang={lang} unit={unitL(a.unit)} /></div>
        </div>
        <div>
          <div className="sec"><span className="sec-num">03</span> <span className="kicker">{fr ? "Régions" : "Regions"}</span>
            <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{fr ? "Variations régionales" : "Regional variations"}</h2>
            <p className="mt-2 text-[13.5px] text-ink-2">{fr ? "Direct × facteurs matériaux / main-d'œuvre / équipement de chaque région (conventions CCQ uniformes → main-d'œuvre 1,00 hors régions éloignées)." : "Direct × material / labour / equipment factors of each region (uniform CCQ agreements → labour 1.00 outside remote regions)."}</p>
          </div>
          <div className="mt-4 space-y-1.5">
            {data.regional.map((r) => (
              <div key={r.code} className="grid grid-cols-[150px_1fr_90px] items-center gap-2 text-[12px]">
                <span className="truncate" title={fr ? r.nameFr : r.nameEn}>{fr ? r.nameFr : r.nameEn}</span>
                <span className="h-[8px] bg-[var(--line)]"><span className={`block h-full ${r.code === data.location.code ? "bg-accent" : "bg-ink"}`} style={{ width: `${(r.direct / maxRegional) * 100}%` }} /></span>
                <span className="vp-mono text-right">{num(r.direct, lang, 2)} $</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="sec"><span className="sec-num">04</span> <span className="kicker">{fr ? "Voisins" : "Neighbours"}</span>
          <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{fr ? "Assemblages de la même catégorie" : "Assemblies of the same category"}</h2>
        </div>
        <div className="mt-5 grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-4">
          {data.neighbours.map((n) => (
            <Link key={n.code} href={`/cout/assemblage/${encodeURIComponent(n.code)}`} className="group border-t border-[var(--line)] pt-3">
              <p className="vp-mono text-[10px] uppercase tracking-[0.08em] text-ink-3">{n.code}</p>
              <p className="text-[13.5px] font-semibold leading-snug group-hover:text-accent-deep">{fr ? n.nameFr : n.nameEn}</p>
              <p className="vp-mono mt-1 text-[12px]">{num(n.direct, lang, 2)} $ / {unitL(n.unit)}</p>
            </Link>
          ))}
        </div>
        <Link href="/cout/assemblage" className="vp-mono mt-5 inline-block text-[11px] font-bold uppercase tracking-[0.08em] text-accent">{fr ? "Tout le catalogue" : "Full catalogue"} →</Link>
      </section>

      <Drawer open={!!src} onClose={() => setSrc(null)} title={fr ? "Source" : "Source"} fr={fr}>
        {src && (
          <div className="space-y-6">
            {src.itemCode ? <PriceSourceCard fr={fr} itemName={fr ? src.nameFr : src.nameEn} unit={src.unit} price={src.provenance} locationFactor={data.location.materialFactor} locationName={fr ? data.location.nameFr : data.location.nameEn} /> : null}
            {src.rateProvenance && (
              <div>
                <p className="klabel">{fr ? "Taux de main-d'œuvre" : "Labour rate"}</p>
                <p className="vp-display mt-1 text-[16px] font-bold">{tradeLabel(src.trade, fr)} — {num(src.hourlyRate ?? 0, lang, 2)} $/h</p>
                <p className="mt-1 inline-flex items-center gap-2 text-[12.5px] text-ink-2"><KindIcon kind={src.rateProvenance.kind} fr={fr} /> {kindLabel(src.rateProvenance.kind, fr)} · {src.rateProvenance.source}{src.rateProvenance.effectiveDate ? ` · ${src.rateProvenance.effectiveDate}` : ""}</p>
                {src.rateProvenance.note && <p className="mt-1 text-[12.5px] text-ink-2">{src.rateProvenance.note}</p>}
                {src.rateProvenance.sourceUrl && <a href={src.rateProvenance.sourceUrl} target="_blank" rel="noopener noreferrer nofollow" className="vp-mono mt-1 inline-block text-[10.5px] font-bold uppercase tracking-[0.08em] text-accent">{fr ? "Document source" : "Source document"} ↗</a>}
              </div>
            )}
            {!src.itemCode && !src.rateProvenance && <p className="text-[13px] text-ink-2">{fr ? "Équipement : forfait par unité d'assemblage (hypothèse documentée)." : "Equipment: lump per assembly unit (documented assumption)."}{src.provenance.note ? ` ${src.provenance.note}` : ""}</p>}
          </div>
        )}
      </Drawer>
    </div>
  );
}