// Vrai-Prix — méthode du coût : 06 Dépréciation, 07 Terrain, 08 Résultat (tableau, fourchette, confiance, benchmarks,
// trois lectures, graphiques, exports, mode exercice), 09 Sources et transparence.
"use client";
import { useState } from "react";
import type { Condition, CostEstimate, CostInput, DepreciationInput, LandInput, PriceKind } from "@/lib/cost/types";
import { CONDITIONS, CONDITION_GROUPS, categoryLabel } from "@/lib/cost/taxonomy";
import { money, num, pct } from "@/components/avendre/fmt";
import { ConfidenceDial } from "@/components/MetricViz";
import { Block, Field, NumField, SelectField, Toggle } from "./fields";
import { CompareBars, HBarsMoney, RangeDist, StackBar, Waterfall } from "./Charts";
import { fmtDate, KindIcon, kindLabel, KindLegend, LayerBadge } from "./Provenance";

/* ------------------------------------------------------------ 06 dépréciation */

export function DepreciationPanel({ est, dep, fr, patchD, hide }: { est: CostEstimate | null; dep: DepreciationInput; fr: boolean; patchD: (p: Partial<DepreciationInput>) => void; hide: boolean }) {
  const lang = fr ? "fr" : "en";
  const d = est?.depreciation;
  const f = (v: number | null | undefined) => (hide ? "•••" : money(v, lang));
  const condOpts = [{ key: "", label: fr ? "— non renseignée (âge chronologique)" : "— not entered (chronological age)" }, ...CONDITIONS.map((c) => ({ key: c.key, label: `${fr ? c.fr : c.en} (âge eff. ${Math.round(c.effectiveAgeRatio * 100)} % de la vie)` }))];
  return (
    <Block num="06" title={fr ? "Dépréciation" : "Depreciation"} id="s06">
      <div className="grid grid-cols-2 gap-2 sm:max-w-md">
        {(["age_life", "components"] as const).map((m) => (
          <button key={m} type="button" aria-pressed={dep.method === m} onClick={() => patchD({ method: m })} className={`border p-3 text-left ${dep.method === m ? "border-ink bg-ink text-paper" : "border-[var(--line)] bg-surface"}`}>
            <p className="vp-display text-[13px] font-bold uppercase">{m === "age_life" ? (fr ? "Âge-vie (simple)" : "Age-life (simple)") : (fr ? "Par composante (avancée)" : "By component (advanced)")}</p>
            <p className={`mt-0.5 text-[11px] ${dep.method === m ? "text-paper/70" : "text-ink-3"}`}>{m === "age_life" ? (fr ? "% = âge effectif ÷ vie économique" : "% = effective age ÷ economic life") : (fr ? "vie et condition propres à chaque groupe" : "own life and condition per group")}</p>
          </button>
        ))}
      </div>
      <div className="grid gap-x-6 gap-y-4 sm:grid-cols-4">
        <div className="kv-cell"><p className="k">{fr ? "Âge chronologique" : "Chronological age"}</p><p className="v">{d?.chronologicalAge != null ? `${d.chronologicalAge} ${fr ? "ans" : "yrs"}` : "—"}</p></div>
        <Field label={fr ? "Âge effectif (années)" : "Effective age (years)"} hint={fr ? "Vide = âge chronologique. Une suggestion IA serait affichée comme telle." : "Empty = chronological age."} source={dep.effectiveAge != null ? "user" : "derived"} fr={fr}><NumField value={dep.effectiveAge} min={0} max={200} placeholder={d?.chronologicalAge != null ? String(d.chronologicalAge) : ""} onChange={(v) => patchD({ effectiveAge: v, effectiveAgeSource: v == null ? "derived" : "user" })} /></Field>
        <Field label={fr ? "Vie économique (années)" : "Economic life (years)"} source="assumed" fr={fr}><NumField value={dep.economicLife} min={10} max={150} onChange={(v) => patchD({ economicLife: v ?? 60 })} /></Field>
        <div className="kv-cell"><p className="k">{fr ? "Détérioration physique" : "Physical deterioration"}</p><p className="v">{d ? `${num(d.physicalPct, lang, 1)} % · ${f(d.physical)}` : "—"}</p></div>
      </div>
      {dep.method === "components" && d && (
        <div className="src-wrap">
          <table className="src-table">
            <thead><tr><th>{fr ? "Groupe" : "Group"}</th><th className="text-right">RCN</th><th className="text-right">{fr ? "Vie" : "Life"}</th><th>{fr ? "Condition" : "Condition"}</th><th className="text-right">{fr ? "Âge eff." : "Eff. age"}</th><th className="text-right">%</th><th className="text-right">{fr ? "Dépréciation" : "Depreciation"}</th><th className="text-right">{fr ? "Restant" : "Remaining"}</th></tr></thead>
            <tbody>
              {d.components.map((c) => (
                <tr key={c.conditionGroup}>
                  <td className="font-semibold">{fr ? c.labelFr : c.labelEn}<br /><span className="text-[10.5px] font-normal text-ink-3">{c.rule}</span></td>
                  <td className="vp-mono text-right">{f(c.rcn)}</td>
                  <td className="vp-mono text-right">{c.economicLife}</td>
                  <td><select value={dep.componentConditions[c.conditionGroup] ?? ""} onChange={(e) => patchD({ componentConditions: { ...dep.componentConditions, [c.conditionGroup]: (e.target.value || undefined) as Condition | undefined } })} className="vp-input !min-h-0 !py-1 text-[12px]">{condOpts.map((o) => (<option key={o.key} value={o.key}>{o.label}</option>))}</select></td>
                  <td className="vp-mono text-right">{num(c.effectiveAge, lang, 1)}</td>
                  <td className="vp-mono text-right">{num(c.depreciationPct, lang, 1)}</td>
                  <td className="vp-mono text-right text-[var(--danger)]">−{f(c.depreciation)}</td>
                  <td className="vp-mono text-right font-bold">{f(c.remaining)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {dep.method === "components" && (
        <p className="vp-mono text-[10px] uppercase leading-relaxed tracking-[0.05em] text-ink-3">{fr ? "Règles condition → âge effectif (table component_condition_rules, hypothèses documentées) : " : "Condition → effective-age rules (component_condition_rules table, documented assumptions): "}{CONDITIONS.map((c) => `${fr ? c.fr : c.en} ${Math.round(c.effectiveAgeRatio * 100)} %`).join(" · ")}. {fr ? "Groupes : " : "Groups: "}{CONDITION_GROUPS.map((g) => `${fr ? g.fr : g.en} ${g.economicLife} ans`).join(" · ")}.</p>
      )}
      <div className="grid gap-x-12 gap-y-6 lg:grid-cols-2">
        <div>
          <div className="flex items-baseline justify-between"><p className="klabel">{fr ? "Désuétude fonctionnelle" : "Functional obsolescence"}</p><button type="button" className="vp-mono text-[10.5px] font-bold uppercase tracking-[0.08em] text-accent" onClick={() => patchD({ functional: [...dep.functional, { id: `${Date.now()}`, type: "", curable: true, costToCure: 0, valueLoss: 0, notes: "" }] })}>+ {fr ? "Ajouter une déficience" : "Add a deficiency"}</button></div>
          {dep.functional.length === 0 && <p className="mt-1 text-[12.5px] text-ink-3">{fr ? "Aucune déficience saisie. Exemples : nombre insuffisant de salles de bain, configuration dépassée, absence de garage, hauteur sous plafond, cuisine inadéquate, suramélioration, mécanique inadéquate." : "No deficiency entered. Examples: too few bathrooms, outdated layout, no garage, ceiling height, inadequate kitchen, over-improvement, inadequate mechanical."}</p>}
          <div className="mt-2 space-y-3">
            {dep.functional.map((fo, i) => {
              const upd = (p: Partial<typeof fo>) => patchD({ functional: dep.functional.map((x, j) => (j === i ? { ...x, ...p } : x)) });
              return (
                <div key={fo.id} className="grid grid-cols-2 gap-x-4 gap-y-2 border-t border-[var(--line)] pt-2 sm:grid-cols-[1.4fr_1fr_1fr_1fr_auto]">
                  <input value={fo.type} onChange={(e) => upd({ type: e.target.value })} placeholder={fr ? "Type (ex. 1 seule salle de bain)" : "Type (e.g. single bathroom)"} className="vp-input !min-h-0 !py-1 text-[13px] sm:col-span-1" />
                  <select value={fo.curable ? "c" : "i"} onChange={(e) => upd({ curable: e.target.value === "c" })} className="vp-input !min-h-0 !py-1 text-[13px]"><option value="c">{fr ? "Curable" : "Curable"}</option><option value="i">{fr ? "Incurable" : "Incurable"}</option></select>
                  <NumField value={fo.curable ? fo.costToCure : fo.valueLoss} min={0} step={500} unit="$" onChange={(v) => upd(fo.curable ? { costToCure: v ?? 0 } : { valueLoss: v ?? 0 })} />
                  <input value={fo.notes} onChange={(e) => upd({ notes: e.target.value })} placeholder={fr ? "Notes" : "Notes"} className="vp-input !min-h-0 !py-1 text-[13px]" />
                  <button type="button" onClick={() => patchD({ functional: dep.functional.filter((_, j) => j !== i) })} className="vp-mono text-[10px] uppercase text-ink-3 hover:text-[var(--danger)]">{fr ? "retirer" : "remove"}</button>
                </div>
              );
            })}
          </div>
          <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "Curable = coût de correction · Incurable = perte de valeur" : "Curable = cost to cure · Incurable = value loss"}{d ? ` · ${fr ? "total" : "total"} ${f(d.functional)}` : ""}</p>
        </div>
        <div>
          <p className="klabel">{fr ? "Désuétude externe" : "External obsolescence"}</p>
          <div className="mt-1 grid grid-cols-[140px_1fr] gap-3">
            <NumField value={dep.externalValueLoss} min={0} step={1000} unit="$" onChange={(v) => patchD({ externalValueLoss: v ?? 0 })} />
            <input value={dep.externalNote} onChange={(e) => patchD({ externalNote: e.target.value })} placeholder={fr ? "Motif (nuisance, proximité industrielle, marché faible…)" : "Reason (nuisance, industrial proximity, weak market…)"} className="vp-input text-[13px]" />
          </div>
          <p className="vp-mono mt-2 text-[10px] uppercase leading-relaxed tracking-[0.05em] text-ink-3">{fr ? "Jamais calculée automatiquement sans preuve : 0 $ par défaut." : "Never computed automatically without evidence: 0 $ by default."}</p>
          {d && !hide && (
            <div className="mt-4">
              <HBarsMoney lang={lang} rows={[{ label: fr ? "Détérioration physique" : "Physical deterioration", value: -d.physical }, { label: fr ? "Désuétude fonctionnelle" : "Functional obsolescence", value: -d.functional }, { label: fr ? "Désuétude externe" : "External obsolescence", value: -d.external }, { label: fr ? "Valeur dépréciée du bâtiment" : "Depreciated building value", value: d.depreciatedImprovementValue }]} />
            </div>
          )}
        </div>
      </div>
    </Block>
  );
}

/* ------------------------------------------------------------------ 07 terrain */

export function LandPanel({ input, fr, patchL }: { input: CostInput; fr: boolean; patchL: (p: Partial<LandInput>) => void }) {
  const lang = fr ? "fr" : "en";
  const l = input.land;
  const roll = input.roll?.landValue ?? null;
  return (
    <Block num="07" title={fr ? "Valeur du terrain" : "Land value"} id="s07">
      <div className="grid gap-x-10 gap-y-5 lg:grid-cols-[1fr_1.2fr]">
        <div>
          <p className="klabel">{fr ? "Valeur du terrain utilisée" : "Land value used"}</p>
          <p className={`vp-display mt-1 text-[clamp(26px,3.5vw,36px)] font-bold tracking-[-0.03em] ${l.value == null ? "text-ink-3" : ""}`}>{l.value != null ? money(l.value, lang) : (fr ? "Donnée non disponible" : "Data not available")}</p>
          <p className="vp-mono mt-1 text-[11px] uppercase tracking-[0.05em] text-ink-2">{fr ? "Source" : "Source"} : {l.source === "role" ? (fr ? `Rôle d'évaluation foncière ${l.rollYear ?? 2026} (MAMH)` : `Assessment roll ${l.rollYear ?? 2026} (MAMH)`) : l.source === "user" ? (fr ? "Saisie de l'utilisateur" : "User entry") : l.source === "market" ? (fr ? "Analyse de marché (saisie)" : "Market analysis (entered)") : l.source === "residual" ? (fr ? "Technique résiduelle (saisie)" : "Residual technique (entered)") : (fr ? "aucune" : "none")}</p>
          <p className="mt-3 border-l-2 border-[var(--amber)] pl-3 text-[13px] leading-relaxed text-ink-2">⚠ {fr ? "La valeur du terrain au rôle n'est pas nécessairement la valeur marchande actuelle du terrain : elle est fixée 18 à 24 mois avant l'entrée en vigueur du rôle et vise l'équité fiscale." : "The land value on the roll is not necessarily the land's current market value: it is set 18 to 24 months before the roll takes effect and aims at fiscal equity."}</p>
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label={fr ? "Méthode" : "Method"}>
            <SelectField value={l.source} onChange={(v) => patchL({ source: v, value: v === "role" ? roll : l.value, method: v === "role" ? (fr ? "Valeur du terrain au rôle 2026 (MAMH)" : "Land value on the 2026 roll (MAMH)") : l.method })} options={[{ key: "role" as const, label: fr ? "Conserver la valeur au rôle" : "Keep the roll value" }, { key: "user" as const, label: fr ? "Remplacer par une valeur saisie" : "Replace with an entered value" }, { key: "market" as const, label: fr ? "Comparables de terrains (saisie)" : "Land comparables (entered)" }, { key: "residual" as const, label: fr ? "Technique résiduelle (saisie)" : "Residual technique (entered)" }, { key: "none" as const, label: fr ? "Aucune (0 $)" : "None (0 $)" }].filter((o) => roll != null || o.key !== "role")} />
          </Field>
          <Field label={fr ? "Valeur ($)" : "Value ($)"}>
            <NumField value={l.value} min={0} step={1000} unit="$" disabled={l.source === "role" || l.source === "none"} onChange={(v) => patchL({ value: v })} />
          </Field>
          <Field label={fr ? "Justification / méthode" : "Rationale / method"}>
            <input value={l.method} onChange={(e) => patchL({ method: e.target.value })} className="vp-input text-[13px]" placeholder={fr ? "ex. 3 ventes de terrains vacants ajustées…" : "e.g. 3 adjusted vacant-land sales…"} disabled={l.source === "role"} />
          </Field>
          {roll != null && <div className="kv-cell"><p className="k">{fr ? "Rappel — terrain au rôle" : "Reminder — roll land value"}</p><p className="v">{money(roll, lang)}</p></div>}
        </div>
      </div>
    </Block>
  );
}

/* ---------------------------------------------------------------- 08 résultat */

export function ResultPanel({ est, fr, hide, exercise, onSave, saving, savedId, onRefreshPrices, structureAnswer }: { est: CostEstimate | null; fr: boolean; hide: boolean; exercise: boolean; onSave: () => void; saving: boolean; savedId: string | null; onRefreshPrices: () => void; structureAnswer: React.ReactNode }) {
  const lang = fr ? "fr" : "en";
  const [showJson, setShowJson] = useState(false);
  if (!est) return <Block num="08" title={fr ? "Résultat" : "Result"} id="s08"><p className="text-ink-2">{fr ? "Calcul en cours…" : "Computing…"}</p></Block>;
  const f = (v: number | null | undefined) => (hide ? "•••" : money(v, lang));
  const d = est.depreciation;
  const c = est.confidence;
  const o = est.otherReadings;
  const rows: [string, string, boolean?][] = [
    [fr ? "Coûts directs" : "Direct costs", f(est.directCost)],
    [fr ? "Coûts indirects" : "Indirect costs", f(est.indirectCost)],
    [fr ? "Frais généraux entrepreneur" : "Contractor overhead", f(est.contractorOverhead)],
    [fr ? "Profit entrepreneur" : "Contractor profit", f(est.contractorProfit)],
    [fr ? "Contingence" : "Contingency", f(est.contingency)],
    [fr ? "COÛT DE REMPLACEMENT À NEUF" : "REPLACEMENT COST NEW", f(est.replacementCostNew), true],
    [fr ? "Détérioration physique" : "Physical deterioration", hide ? "•••" : `−${money(d.physical, lang)}`],
    [fr ? "Désuétude fonctionnelle" : "Functional obsolescence", hide ? "•••" : `−${money(d.functional, lang)}`],
    [fr ? "Désuétude externe" : "External obsolescence", hide ? "•••" : `−${money(d.external, lang)}`],
    [fr ? "Valeur dépréciée du bâtiment" : "Depreciated building value", f(d.depreciatedImprovementValue), true],
    [fr ? "Valeur du terrain" : "Land value", f(est.landValue)],
    [fr ? "INDICATION PAR LE COÛT" : "COST INDICATION", f(est.costApproachValue), true],
  ];
  const conf = [[fr ? "Fraîcheur" : "Freshness", c.freshness, 20], [fr ? "Couverture" : "Coverage", c.coverage, 20], [fr ? "Localisation" : "Location", c.location, 15], [fr ? "Main-d'œuvre" : "Labour", c.labour, 15], [fr ? "Benchmarks" : "Benchmarks", c.benchmarks, 10], [fr ? "Bâtiment" : "Building", c.building, 20]] as [string, number, number][];
  return (
    <Block num="08" title={fr ? "Résultat" : "Result"} id="s08" aside={<span className="vp-mono text-[10px] uppercase tracking-[0.06em] text-ink-3">{fr ? "méthode" : "method"} v{est.methodVersion} · {fr ? "base" : "db"} {est.costDatabaseVersion.split("|")[0]} · {est.priceDate}</span>}>
      {exercise && structureAnswer}
      <div className="grid gap-x-12 gap-y-8 lg:grid-cols-[1.1fr_1fr]">
        <div>
          <div className="src-wrap">
            <table className="src-table">
              <tbody>
                {rows.map(([k, v, b], i) => (
                  <tr key={i} className={b ? "bg-surface-2 font-bold" : ""}><td className={b ? "vp-display uppercase tracking-[-0.01em]" : ""}>{k}</td><td className="vp-mono text-right">{v}</td></tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="mt-5 border-t-2 border-ink pt-3">
            <p className="klabel">{fr ? "Indication de valeur par la méthode du coût" : "Value indication by the cost approach"}</p>
            <p className="vp-display mt-1 text-[clamp(32px,5vw,52px)] font-bold tracking-[-0.035em]">{f(est.costApproachValue)}</p>
            <p className="vp-mono text-[11px] uppercase tracking-[0.05em] text-ink-2">RCN {hide ? "•••" : `${money(est.range.p10, lang)} – ${money(est.range.p90, lang)}`} (P10 – P90) · {hide ? "•••" : `${num(est.perSqft, lang, 0)} $/pi²`}</p>
            {est.warnings.filter((w) => w !== "land_missing" && !w.startsWith("localisation")).length > 0 && <p className="mt-2 text-[12px] text-ink-2">{est.warnings.filter((w) => w !== "land_missing" && !w.startsWith("localisation")).map((w) => ({ condo_common_areas: fr ? "Condo : quote-part des parties communes non incluse." : "Condo: share of common areas not included.", geothermal_as_heatpump: fr ? "Géothermie chiffrée comme thermopompe centrale." : "Geothermal priced as central heat pump.", hydronic_as_furnace: fr ? "Hydronique chiffré comme fournaise électrique + conduits." : "Hydronic priced as electric furnace + ducts.", wood_as_baseboard: fr ? "Chauffage au bois : plinthes d'appoint chiffrées." : "Wood heating: backup baseboards priced." } as Record<string, string>)[w] ?? w).join(" ")}</p>}
            {est.warnings.includes("land_missing") && <p className="mt-2 border-l-2 border-[var(--amber)] pl-3 text-[12.5px] text-ink-2">{fr ? "Aucune valeur de terrain : l'indication ne comprend que le bâtiment déprécié (section 07)." : "No land value: the indication only includes the depreciated building (section 07)."}</p>}
          </div>
          {!hide && <div className="mt-5"><Waterfall lang={lang} steps={[{ label: "RCN", value: est.replacementCostNew, kind: "total" }, { label: fr ? "Dépréciation" : "Depreciation", value: d.total, kind: "minus" }, { label: fr ? "Terrain" : "Land", value: est.landValue, kind: "plus" }, { label: fr ? "Indication" : "Indication", value: est.costApproachValue, kind: "total" }]} /></div>}
          <div className="mt-5 flex flex-wrap gap-2.5">
            <button type="button" onClick={onSave} disabled={saving} className="btn btn-primary">{saving ? "…" : savedId ? (fr ? "Enregistré ✓ — ré-enregistrer" : "Saved ✓ — save again") : (fr ? "Enregistrer et partager" : "Save and share")}</button>
            {savedId && <a href={`/api/cost/report?estimate=${encodeURIComponent(savedId)}`} className="btn btn-accent" target="_blank" rel="noopener">{fr ? "Télécharger le rapport PDF" : "Download PDF report"}</a>}
            {!savedId && <button type="button" onClick={onSave} disabled={saving} className="btn btn-ghost" title={fr ? "Enregistre d'abord l'estimation" : "Save the estimate first"}>{fr ? "Rapport PDF (enregistrer d'abord)" : "PDF report (save first)"}</button>}
            <button type="button" onClick={() => setShowJson((v) => !v)} className="btn btn-ghost">{showJson ? (fr ? "Masquer le JSON" : "Hide JSON") : (fr ? "Voir le JSON" : "View JSON")}</button>
            <button type="button" onClick={onRefreshPrices} className="btn btn-ghost">{fr ? "Recalculer avec les coûts d'aujourd'hui" : "Recompute with today's costs"}</button>
          </div>
          {savedId && <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "Lien partageable" : "Shareable link"} : /cout?estimate={savedId}</p>}
          {showJson && <pre className="vp-mono mt-3 max-h-[420px] overflow-auto border border-[var(--line)] bg-surface p-3 text-[10.5px] leading-snug">{JSON.stringify({ id: est.id, priceDate: est.priceDate, methodVersion: est.methodVersion, costDatabaseVersion: est.costDatabaseVersion, assemblyVersion: est.assemblyVersion, location: est.location, directCost: est.directCost, indirectCost: est.indirectCost, contractorOverhead: est.contractorOverhead, contractorProfit: est.contractorProfit, contingency: est.contingency, replacementCostNew: est.replacementCostNew, range: est.range, depreciation: est.depreciation, landValue: est.landValue, costApproachValue: est.costApproachValue, confidence: est.confidence, coverage: est.coverage, benchmarks: est.benchmarks, categories: est.categories, quantities: est.quantities, input: est.input }, null, 2)}</pre>}
        </div>
        <div className="space-y-7">
          <div>
            <p className="klabel mb-2">{fr ? "Indice de confiance" : "Confidence index"}</p>
            <div className="flex flex-wrap items-start gap-6">
              <ConfidenceDial pct={c.total} level={c.letter} label={fr ? "Confiance" : "Confidence"} />
              <div className="flex-1 min-w-[220px]">
                {conf.map(([k, v, max]) => (
                  <div key={k} className="grid grid-cols-[110px_1fr_48px] items-center gap-2 py-1 text-[12px]">
                    <span>{k}</span>
                    <span className="h-[6px] bg-[var(--line)]"><span className="block h-full bg-ink" style={{ width: `${(v / max) * 100}%` }} /></span>
                    <span className="vp-mono text-right">{v}/{max}</span>
                  </div>
                ))}
                <p className="vp-mono mt-1 text-[11px] font-bold">{c.total} / 100 · <span className={`pill pill-conf-${c.letter}`}>{c.letter}</span></p>
              </div>
            </div>
            {(fr ? c.notesFr : c.notesEn).length > 0 && <ul className="mt-2 space-y-1 text-[12px] text-ink-2">{(fr ? c.notesFr : c.notesEn).map((n) => (<li key={n} className="border-l-2 border-[var(--line-strong)] pl-2">{n}</li>))}</ul>}
            <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "couverture observée des matériaux" : "observed material coverage"} {Math.round(est.coverage.materialObservedShare * 100)} % · {est.coverage.assembliesPriced}/{est.coverage.assembliesTotal} {fr ? "assemblages chiffrés" : "assemblies priced"}</p>
          </div>
          <div>
            <p className="klabel mb-2">{fr ? "Validation externe" : "External validation"}</p>
            {est.benchmarks.length === 0 ? <p className="text-[13px] text-ink-2">{fr ? "Aucun benchmark externe disponible pour ce type et ce marché (Altus Group : import licencié requis). Le moteur n'est jamais recalé sur un benchmark." : "No external benchmark available for this type and market (Altus Group: licensed import required). The engine is never forced onto a benchmark."}</p> : (
              <div className="src-wrap"><table className="src-table"><thead><tr><th>{fr ? "Source" : "Source"}</th><th className="text-right">{fr ? "Benchmark" : "Benchmark"}</th><th className="text-right">Vrai-Prix</th><th>{fr ? "État" : "Status"}</th></tr></thead><tbody>
                {est.benchmarks.map((b, i) => (
                  <tr key={i}><td>{b.source} {b.year}<br /><span className="text-[10.5px] text-ink-3">{b.market} · {b.notes ?? ""}</span></td><td className="vp-mono text-right">{num(b.low, lang)}–{num(b.high, lang)} {b.unit}</td><td className="vp-mono text-right">{hide ? "•••" : `${num(b.estimatePerUnit, lang)} $/pi²`}</td><td className={b.status === "within" ? "text-ink" : "font-bold text-[var(--danger)]"}>{b.status === "within" ? (fr ? "Dans la plage" : "Within range") : `⚠ ${fr ? "Écart significatif" : "Significant deviation"} ${b.deviationPct != null ? pct(b.deviationPct, lang, 0) : ""}`}</td></tr>
                ))}
              </tbody></table></div>
            )}
          </div>
          <div>
            <p className="klabel mb-2">{fr ? "Trois lectures de la valeur — jamais moyennées" : "Three readings of value — never averaged"}</p>
            {o ? (
              <>
                {!hide && <CompareBars lang={lang} rows={[{ label: fr ? "Modèle hédonique" : "Hedonic model", value: o.hedonic }, { label: fr ? "Comparables" : "Comparables", value: o.comparables }, { label: fr ? "Méthode du coût" : "Cost approach", value: est.costApproachValue, accent: true }, { label: fr ? "Rôle 2026" : "Roll 2026", value: o.rollValue }, ...(o.askingPrice ? [{ label: fr ? "Prix demandé" : "Asking price", value: o.askingPrice }] : [])]} />}
                <div className="grid grid-cols-2 gap-x-6 gap-y-1 sm:grid-cols-4">
                  <div className="kv-cell"><p className="k">{fr ? "Hédonique" : "Hedonic"}</p><p className="v">{money(o.hedonic, lang)}</p></div>
                  <div className="kv-cell"><p className="k">{fr ? "Comparables" : "Comparables"}</p><p className="v">{money(o.comparables, lang)}</p></div>
                  <div className="kv-cell"><p className="k">{fr ? "Coût" : "Cost"}</p><p className="v text-accent">{f(est.costApproachValue)}</p></div>
                  <div className="kv-cell"><p className="k">{fr ? "Mesure Vrai-Prix (hybride)" : "Vrai-Prix measure (hybrid)"}</p><p className="v">{money(o.hybrid, lang)}</p></div>
                </div>
                {o.rollBuilding != null && !hide && <div className="mt-3"><p className="klabel mb-1">{fr ? "RCN vs valeur du bâtiment au rôle" : "RCN vs building value on the roll"}</p><HBarsMoney lang={lang} rows={[{ label: fr ? "RCN (à neuf)" : "RCN (new)", value: est.replacementCostNew }, { label: fr ? "Bâtiment déprécié (coût)" : "Depreciated building (cost)", value: d.depreciatedImprovementValue }, { label: fr ? "Bâtiment au rôle 2026" : "Building on roll 2026", value: o.rollBuilding }]} /></div>}
                <p className="mt-2 text-[12px] leading-relaxed text-ink-2">{fr ? "L'objectif est de comparer les approches : un écart entre le coût et le marché s'explique (dépréciation sous- ou surestimée, terrain, marché tendu), il ne se moyenne pas." : "The teaching goal is to compare approaches: a gap between cost and market is explained (under- or over-estimated depreciation, land, tight market), not averaged."}</p>
              </>
            ) : <p className="text-[13px] text-ink-2">{fr ? "Mode construction : aucune lecture hédonique ou par comparables (bâtiment hypothétique)." : "Construction mode: no hedonic or comparables reading (hypothetical building)."}</p>}
          </div>
          {!hide && (
            <div className="space-y-5">
              <div><p className="klabel mb-1">{fr ? "RCN par catégorie" : "RCN by category"}</p><HBarsMoney lang={lang} total={est.directCost} rows={est.categories.map((k) => ({ label: fr ? k.labelFr : k.labelEn, value: k.adjusted }))} /></div>
              <div><p className="klabel mb-1">{fr ? "Matériaux · main-d'œuvre · équipement" : "Materials · labour · equipment"}</p><StackBar lang={lang} parts={[{ label: fr ? "Matériaux" : "Materials", value: est.directMaterial }, { label: fr ? "Main-d'œuvre" : "Labour", value: est.directLabour }, { label: fr ? "Équipement" : "Equipment", value: est.directEquipment }]} /></div>
              <div><p className="klabel mb-1">{fr ? "Distribution du RCN (P10 · central · P90)" : "RCN distribution (P10 · central · P90)"}</p><RangeDist low={est.range.p10} central={est.replacementCostNew} high={est.range.p90} lang={lang} /></div>
            </div>
          )}
        </div>
      </div>
    </Block>
  );
}

/* ------------------------------------------------------------------ 09 sources */

export function SourcesPanel({ est, fr }: { est: CostEstimate | null; fr: boolean }) {
  if (!est) return null;
  const agg = new Map<string, { kind: PriceKind; n: number; latest: string | null; url: string | null }>();
  for (const l of est.lines) for (const c of l.unitDetail.components) {
    for (const p of [c.provenance, c.rateProvenance].filter((x): x is NonNullable<typeof x> => !!x)) {
      if (p.kind === "assumption" && !c.itemCode && !c.labourHours) continue;
      const k = `${p.source}|${p.kind}`;
      const cur = agg.get(k) ?? { kind: p.kind, n: 0, latest: null, url: p.sourceUrl ?? null };
      cur.n++;
      const dte = p.observedAt ?? p.effectiveDate ?? null;
      if (dte && (!cur.latest || dte > cur.latest)) cur.latest = dte;
      agg.set(k, cur);
    }
  }
  const rows = [...agg.entries()].map(([k, v]) => ({ source: k.split("|")[0], ...v })).sort((a, b) => b.n - a.n);
  return (
    <Block num="09" title={fr ? "Sources et transparence" : "Sources and transparency"} id="s09">
      <div className="flex flex-wrap gap-2">{(["observed", "ai_inferred", "computed", "sourced_price", "assumption"] as const).map((l) => <LayerBadge key={l} layer={l} fr={fr} />)}</div>
      <p className="text-[13px] leading-relaxed text-ink-2">{fr ? "Quatre couches, toujours distinguées : OBSERVÉ (rôle, annonce, fournisseur), INFÉRÉ PAR IA (profil technique d'une annonce), CALCULÉ (géométrie, quantités, formules du moteur), PRIX SOURCÉ (observation détaillant, grille APCHQ/CCQ, indice StatCan). Les hypothèses (productivités, pourcentages, prix de référence) sont étiquetées comme telles." : "Four layers, always distinguished: OBSERVED (roll, listing, supplier), AI-INFERRED (technical profile of a listing), COMPUTED (geometry, quantities, engine formulas), SOURCED PRICE (retail observation, APCHQ/CCQ grid, StatCan index). Assumptions (productivities, percentages, reference prices) are labelled as such."}</p>
      <div className="src-wrap">
        <table className="src-table">
          <thead><tr><th>{fr ? "Source" : "Source"}</th><th>{fr ? "Nature" : "Nature"}</th><th className="text-right">{fr ? "Composants" : "Components"}</th><th>{fr ? "Date la plus récente" : "Most recent date"}</th></tr></thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.source + r.kind}><td className="font-semibold">{r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer nofollow" className="hover:text-accent-deep">{r.source} ↗</a> : r.source}</td><td className="inline-flex items-center gap-1.5 text-[12.5px]"><KindIcon kind={r.kind} fr={fr} /> {kindLabel(r.kind, fr)}</td><td className="vp-mono text-right">{r.n}</td><td className="vp-mono text-[12px]">{r.latest ? fmtDate(r.latest, fr) : "—"}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
      <KindLegend fr={fr} />
      <p className="vp-mono text-[10px] uppercase leading-relaxed tracking-[0.05em] text-ink-3">{fr ? `Localisation : ${est.location.nameFr} (M × ${est.location.materialFactor}, MO × ${est.location.labourFactor}, É × ${est.location.equipmentFactor}) — ${est.location.sourceMethod}. Version de méthode ${est.methodVersion}, base ${est.costDatabaseVersion}, assemblages v${est.assemblyVersion}, prix au ${est.priceDate} : l'estimation est reproductible à l'identique.` : `Location: ${est.location.nameEn} (M × ${est.location.materialFactor}, L × ${est.location.labourFactor}, E × ${est.location.equipmentFactor}) — ${est.location.sourceMethod}. Method ${est.methodVersion}, database ${est.costDatabaseVersion}, assemblies v${est.assemblyVersion}, prices as of ${est.priceDate}: the estimate is exactly reproducible.`}</p>
      <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "Catégories chiffrées : " : "Categories priced: "}{est.categories.map((c) => categoryLabel(c.category, fr)).join(" · ")}</p>
    </Block>
  );
}

export { Toggle };