// Vrai-Prix — petits composants partagés de l'analyse IA du bâtiment (badges de couche, sections, tableau RCN, viewer JSON).
"use client";
import { useState } from "react";
import type { Layer } from "@/lib/cost/types";
import type { CostEstimate } from "@/lib/cost/types";
import { money, num, pct } from "../fmt";

export function Sect({ num: n, kicker, title, id }: { num: string; kicker: string; title: string; id?: string }) {
  return (
    <header className="sec" id={id}>
      <span className="sec-num">{n} — {kicker}</span>
      <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{title}</h2>
    </header>
  );
}

/** §208 — les quatre couches, toujours nommées : OBSERVÉ · INFÉRÉ PAR IA · CALCULÉ · PRIX SOURCÉ (+ hypothèse). */
export function LayerBadge({ layer, fr }: { layer: Layer; fr: boolean }) {
  const map: Record<Layer, { fr: string; en: string; cls: string }> = {
    observed: { fr: "Observé", en: "Observed", cls: "border-ink bg-ink text-paper" },
    ai_inferred: { fr: "Inféré par IA", en: "AI-inferred", cls: "border-[var(--accent)] text-[var(--accent-deep)]" },
    computed: { fr: "Calculé", en: "Computed", cls: "border-[var(--line-strong)] text-ink" },
    sourced_price: { fr: "Prix sourcé", en: "Sourced price", cls: "border-[var(--green)] text-[var(--green-deep)]" },
    assumption: { fr: "Hypothèse", en: "Assumption", cls: "border-[var(--amber)] bg-[var(--amber-soft)] text-[#8a5a12]" },
  };
  const m = map[layer];
  return <span className={`vp-mono inline-block border px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-[0.08em] ${m.cls}`}>{fr ? m.fr : m.en}</span>;
}

export function layerOf(source: string | null | undefined): Layer {
  switch (source) {
    case "MAMH": case "listing": case "cadastral": case "user": return "observed";
    case "AI": case "photo": case "ai_estimated": return "ai_inferred";
    case "derived": return "computed";
    case "assumed": case "unknown": return "assumption";
    default: return "computed";
  }
}

export function ConfBar({ value, fr }: { value: number; fr: boolean }) {
  const p = Math.round(value <= 1 ? value * 100 : value);
  const tone = p >= 80 ? "bg-ink" : p >= 60 ? "bg-[var(--accent)]" : p >= 40 ? "bg-[var(--amber)]" : "bg-[var(--danger)]";
  return (
    <span className="inline-flex items-center gap-1.5" title={fr ? `Confiance ${p} %` : `Confidence ${p}%`}>
      <span className="inline-block h-[5px] w-10 bg-[var(--line)]"><span className={`block h-full ${tone}`} style={{ width: `${p}%` }} /></span>
      <span className="vp-mono text-[10px] text-ink-3">{p} %</span>
    </span>
  );
}

export function Stat({ k, v, sub, big }: { k: string; v: string; sub?: string; big?: boolean }) {
  return (
    <div className="kv-cell">
      <p className="k">{k}</p>
      <p className={`v ${big ? "text-[22px]" : ""}`}>{v}</p>
      {sub ? <p className="vp-mono mt-0.5 text-[10px] uppercase tracking-[0.05em] text-ink-3">{sub}</p> : null}
    </div>
  );
}

/** Tableau RCN par catégorie → indirects → RCN → dépréciation → terrain → indication (§206). */
export function CostTable({ e, fr }: { e: CostEstimate; fr: boolean }) {
  const lang = fr ? "fr" : "en";
  const row = (label: string, v: number | null, opts: { bold?: boolean; neg?: boolean; sep?: boolean; layer?: Layer } = {}) => (
    <tr key={label} className={`${opts.bold ? "font-bold" : ""} ${opts.sep ? "border-t-2 border-ink" : ""}`}>
      <td>{label}{opts.layer ? <span className="ml-2"><LayerBadge layer={opts.layer} fr={fr} /></span> : null}</td>
      <td className={`vp-mono text-right ${opts.neg ? "text-[var(--danger)]" : ""}`}>{v == null ? "—" : `${opts.neg && v > 0 ? "−" : ""}${money(Math.abs(v), lang)}`}</td>
    </tr>
  );
  return (
    <div className="src-wrap">
      <table className="src-table">
        <thead><tr><th>{fr ? "Coût de remplacement à neuf" : "Replacement cost new"}</th><th className="text-right">$</th></tr></thead>
        <tbody>
          {e.categories.map((c) => row(fr ? c.labelFr : c.labelEn, c.adjusted, { layer: "computed" }))}
          {row(fr ? "Coûts directs" : "Direct costs", e.directCost, { bold: true, sep: true })}
          {row(fr ? "Coûts indirects" : "Indirect costs", e.indirectCost, { layer: "assumption" })}
          {row(fr ? `Frais généraux (${num(e.input.params.overheadPct, lang, 1)} %)` : `Overhead (${num(e.input.params.overheadPct, lang, 1)}%)`, e.contractorOverhead, { layer: "assumption" })}
          {row(fr ? `Profit (${num(e.input.params.profitPct, lang, 1)} %)` : `Profit (${num(e.input.params.profitPct, lang, 1)}%)`, e.contractorProfit, { layer: "assumption" })}
          {row(fr ? `Contingence (${num(e.input.params.contingencyPct, lang, 1)} %)` : `Contingency (${num(e.input.params.contingencyPct, lang, 1)}%)`, e.contingency, { layer: "assumption" })}
          {row(fr ? "COÛT DE REMPLACEMENT À NEUF (RCN)" : "REPLACEMENT COST NEW (RCN)", e.replacementCostNew, { bold: true, sep: true })}
          {row(fr ? "Détérioration physique" : "Physical deterioration", e.depreciation.physical, { neg: true, layer: "computed" })}
          {row(fr ? "Désuétude fonctionnelle" : "Functional obsolescence", e.depreciation.functional, { neg: true })}
          {row(fr ? "Désuétude externe" : "External obsolescence", e.depreciation.external, { neg: true })}
          {row(fr ? "Valeur dépréciée du bâtiment" : "Depreciated building value", e.depreciation.depreciatedImprovementValue, { bold: true, sep: true })}
          {row(fr ? "Valeur du terrain" : "Land value", e.landValue, { layer: e.input.land.source === "role" ? "observed" : e.input.land.source === "none" ? "assumption" : "observed" })}
          {row(fr ? "INDICATION PAR LE COÛT" : "COST APPROACH INDICATION", e.costApproachValue, { bold: true, sep: true })}
        </tbody>
      </table>
      <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">
        {fr ? `Fourchette RCN : ${money(e.range.p10, lang)} – ${money(e.range.p90, lang)} (P10-P90) · ${num(e.perSqft, lang, 0)} $/pi² · prix du ${e.priceDate}` : `RCN range: ${money(e.range.p10, lang)} – ${money(e.range.p90, lang)} (P10-P90) · $${num(e.perSqft, lang, 0)}/sq ft · prices as of ${e.priceDate}`}
        {e.coverage.pricingCoverage < 1 ? ` · ${fr ? "couverture des coûts" : "cost coverage"} ${pct(e.coverage.pricingCoverage * 100, lang, 0, false)}` : ""}
      </p>
    </div>
  );
}

export function JsonViewer({ value, fr }: { value: unknown; fr: boolean }) {
  const [open, setOpen] = useState(false);
  const txt = JSON.stringify(value, null, 2);
  return (
    <div>
      <button type="button" className="btn btn-ghost" onClick={() => setOpen((o) => !o)}>{open ? (fr ? "Masquer le JSON" : "Hide JSON") : (fr ? "Voir les données techniques (JSON)" : "View technical data (JSON)")}</button>
      {open && <pre className="vp-mono mt-3 max-h-[520px] overflow-auto border border-[var(--line)] bg-surface-2 p-3 text-[10.5px] leading-snug">{txt}</pre>}
    </div>
  );
}