// Vrai-Prix — méthode du coût : catalogue des assemblages (/cout/assemblage) avec filtre par catégorie / recherche
// et, si ?item=, la fiche d'un article (prix canonique, historique, assemblages qui l'utilisent).
"use client";
import { useState } from "react";
import Link from "next/link";
import { useLang } from "@/components/LangContext";
import type { CostItem, ItemPrice, UxCategory } from "@/lib/cost/types";
import { UX_CATEGORIES, categoryLabel } from "@/lib/cost/taxonomy";
import { UNIT_LABELS } from "@/lib/cost/units";
import { num } from "@/components/avendre/fmt";
import { KindIcon, KindLegend, fmtDate } from "./Provenance";
import { PriceSourceCard } from "./SourceDrawer";
import { Sparkline } from "./Charts";

export interface CatalogRow { code: string; nameFr: string; nameEn: string; unit: string; category: UxCategory; quality: string | null; economicLife: number | null; material: number; labour: number; equipment: number; direct: number; observedShare: number; freshestObservation: string | null; components: number }
export interface ItemCard { item: CostItem; price: ItemPrice | null; history: { date: string; price: number; source: string; url: string | null; regular: boolean; kind: string; outlier: boolean }[]; usedBy: { code: string; nameFr: string; nameEn: string; unit: string; quantity: number }[] }

export default function AssemblyCatalog({ rows, asOf, item }: { rows: CatalogRow[]; asOf: string; item: ItemCard | null }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const [q, setQ] = useState("");
  const [cat, setCat] = useState<UxCategory | "">("");
  const unitL = (x: string) => UNIT_LABELS[x as keyof typeof UNIT_LABELS]?.[fr ? "fr" : "en"] ?? x;
  const fold = (s: string) => s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
  const list = rows.filter((r) => (!cat || r.category === cat) && (!q || fold(fr ? r.nameFr : r.nameEn).includes(fold(q)) || r.code.toLowerCase().includes(q.toLowerCase())));
  const cats = UX_CATEGORIES.filter((c) => rows.some((r) => r.category === c.key));
  const hist = item ? (() => { const byDate = new Map<string, number[]>(); for (const h of item.history) if (!h.outlier && h.kind !== "reference") byDate.set(h.date, [...(byDate.get(h.date) ?? []), h.price]); return [...byDate.entries()].map(([date, ps]) => ({ date, price: ps.sort((a, b) => a - b)[Math.floor(ps.length / 2)] })).sort((a, b) => a.date.localeCompare(b.date)); })() : [];
  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>
            <span>{fr ? "Assemblages" : "Assemblies"}</span>
          </nav>
          <span className="vp-mono text-[10px] uppercase tracking-[0.08em] text-ink-3">{rows.length} {fr ? "assemblages · prix au" : "assemblies · prices as of"} {asOf} · Montréal</span>
        </div>
        <span className="kicker mt-6 inline-flex">{fr ? "Catalogue" : "Catalogue"}</span>
        <h1 className="vp-display mt-2 text-[clamp(26px,4vw,42px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">{fr ? "Les assemblages de construction" : "Construction assemblies"}</h1>
        <p className="mt-3 max-w-2xl text-[14.5px] leading-relaxed text-ink-2">{fr ? "Chaque assemblage décompose une composante réelle (mur, toiture, fenêtre, cuisine…) en articles chiffrés, heures de métier et équipement. Le coût direct par unité est recalculé à chaque synchronisation des sources." : "Each assembly breaks a real component (wall, roof, window, kitchen…) down into priced items, trade hours and equipment. The direct cost per unit is recomputed at every source synchronisation."}</p>
      </section>

      {item && (
        <section className="grid gap-x-12 gap-y-6 border border-[var(--line-strong)] bg-surface p-5 lg:grid-cols-[1.2fr_1fr]">
          <div>
            <p className="kicker">{fr ? "Article" : "Item"} · {item.item.code}</p>
            <h2 className="vp-display mt-2 text-[22px] font-bold leading-tight">{fr ? item.item.nameFr : item.item.nameEn}</h2>
            <p className="vp-mono mt-1 text-[10.5px] uppercase tracking-[0.05em] text-ink-3">MasterFormat {item.item.masterformat} · {item.item.division} · {categoryLabel(item.item.category, fr)} · {fr ? "pertes par défaut" : "default waste"} {Math.round(item.item.defaultWastePct * 100)} %</p>
            <div className="mt-4"><PriceSourceCard fr={fr} itemName={fr ? item.item.nameFr : item.item.nameEn} unit={item.item.unit} price={item.price} /></div>
          </div>
          <div>
            <p className="klabel">{fr ? "Historique (médiane par date, aberrations exclues)" : "History (median per date, outliers excluded)"}</p>
            <div className="mt-2 max-w-[360px]"><Sparkline points={hist} lang={lang} /></div>
            {item.history.length > 0 && (
              <div className="src-wrap mt-3 max-h-[240px] overflow-y-auto"><table className="src-table"><thead><tr><th>{fr ? "Date" : "Date"}</th><th>{fr ? "Source" : "Source"}</th><th className="text-right">{fr ? "Prix" : "Price"}</th><th /></tr></thead><tbody>
                {[...item.history].reverse().slice(0, 40).map((h, i) => (<tr key={i} className={h.outlier ? "opacity-50" : ""}><td className="vp-mono text-[12px]">{h.date}</td><td className="text-[12.5px]">{h.url ? <a href={h.url} target="_blank" rel="noopener noreferrer nofollow" className="hover:text-accent-deep">{h.source} ↗</a> : h.source}</td><td className="vp-mono text-right text-[12px]">{num(h.price, lang, 2)} $</td><td className="vp-mono text-[9.5px] uppercase text-ink-3">{h.outlier ? (fr ? "aberrant" : "outlier") : !h.regular ? (fr ? "promo" : "sale") : ""}</td></tr>))}
              </tbody></table></div>
            )}
            <p className="klabel mt-4">{fr ? "Utilisé par" : "Used by"}</p>
            <ul className="mt-1 flex flex-wrap gap-2">
              {item.usedBy.map((u) => (<li key={u.code}><Link href={`/cout/assemblage/${encodeURIComponent(u.code)}`} className="vp-mono inline-block border border-[var(--line)] px-2 py-1 text-[10.5px] uppercase tracking-[0.05em] hover:border-ink">{fr ? u.nameFr : u.nameEn} · {num(u.quantity, lang, 3)} / {fr ? "unité" : "unit"}</Link></li>))}
              {!item.usedBy.length && <li className="text-[12.5px] text-ink-3">—</li>}
            </ul>
          </div>
        </section>
      )}

      <section>
        <div className="flex flex-wrap items-end gap-4">
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={fr ? "Rechercher un assemblage…" : "Search an assembly…"} className="vp-input max-w-sm text-base" aria-label={fr ? "Rechercher" : "Search"} />
          <div className="flex flex-wrap gap-1">
            <button type="button" aria-pressed={cat === ""} onClick={() => setCat("")} className="vp-tab">{fr ? "Toutes" : "All"}</button>
            {cats.map((c) => (<button key={c.key} type="button" aria-pressed={cat === c.key} onClick={() => setCat(c.key)} className="vp-tab">{fr ? c.fr : c.en}</button>))}
          </div>
        </div>
        <div className="mt-3"><KindLegend fr={fr} /></div>
        <div className="src-wrap mt-4">
          <table className="src-table">
            <thead><tr><th>{fr ? "Assemblage" : "Assembly"}</th><th>{fr ? "Catégorie" : "Category"}</th><th className="text-right">{fr ? "Matériaux" : "Materials"}</th><th className="text-right">{fr ? "Main-d'œuvre" : "Labour"}</th><th className="text-right">{fr ? "Équip." : "Equip."}</th><th className="text-right">{fr ? "Direct / unité" : "Direct / unit"}</th><th className="text-right">{fr ? "Observé" : "Observed"}</th><th>{fr ? "Vie" : "Life"}</th><th>{fr ? "Mise à jour" : "Updated"}</th></tr></thead>
            <tbody>
              {list.map((r) => (
                <tr key={r.code}>
                  <td><Link href={`/cout/assemblage/${encodeURIComponent(r.code)}`} className="font-semibold hover:text-accent-deep">{fr ? r.nameFr : r.nameEn}</Link><br /><span className="vp-mono text-[10px] uppercase text-ink-3">{r.code} · {r.components} {fr ? "composants" : "components"}</span></td>
                  <td className="text-[12.5px]">{categoryLabel(r.category, fr)}</td>
                  <td className="vp-mono text-right text-[12px]">{num(r.material, lang, 2)}</td>
                  <td className="vp-mono text-right text-[12px]">{num(r.labour, lang, 2)}</td>
                  <td className="vp-mono text-right text-[12px]">{num(r.equipment, lang, 2)}</td>
                  <td className="vp-mono text-right font-bold">{num(r.direct, lang, 2)} $ <span className="text-[10px] font-normal text-ink-3">/ {unitL(r.unit)}</span></td>
                  <td className="vp-mono text-right text-[12px]"><KindIcon kind={r.observedShare >= 0.5 ? "observed" : r.observedShare > 0 ? "derived" : "reference"} fr={fr} /> {Math.round(r.observedShare * 100)} %</td>
                  <td className="vp-mono text-[12px]">{r.economicLife ?? "—"}</td>
                  <td className="vp-mono text-[11px]">{r.freshestObservation ? fmtDate(r.freshestObservation, fr) : (fr ? "référence" : "reference")}</td>
                </tr>
              ))}
              {!list.length && <tr><td colSpan={9} className="text-ink-2">{fr ? "Aucun assemblage." : "No assembly."}</td></tr>}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}