// Vrai-Prix — méthode du coût : l'ATELIER (/cout?property=… | ?mode=construction | ?estimate=…).
// Deux modes, neuf sections, recalcul déterministe à chaque changement (debounce), état local persistant,
// mode exercice (masquer / estimer soi-même / révéler). Aucun calcul métier ici : tout passe par POST /api/cost/estimate.
"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useLang } from "@/components/LangContext";
import type { AttributeSource, BuildingSpec, CostEstimate, CostInput, CostLocation, CostParams, DepreciationInput, LandInput } from "@/lib/cost/types";
import { defaultInput } from "@/lib/cost/estimate-defaults";
import { money, num } from "@/components/avendre/fmt";
import { PropertyPanel, BuildingFormPanel, type PrefillMeta } from "./BuildingForm";
import { AssemblyLinesPanel, CostTablePanel, LabourPanel } from "./CostPanels";
import { DepreciationPanel, LandPanel, ResultPanel, SourcesPanel } from "./ResultPanels";
import { Toggle } from "./fields";

interface PrefillResponse extends PrefillMeta { input: CostInput; otherReadings: CostEstimate["otherReadings"]; recent: { id: string; createdAt: string; rcn: number; value: number; letter: string }[] }

const SECTIONS = ["01", "02", "03", "04", "05", "06", "07", "08", "09"];
const NAMES_FR = ["Propriété", "Caractéristiques", "Coût à neuf", "Assemblages", "Main-d'œuvre", "Dépréciation", "Terrain", "Résultat", "Sources"];
const NAMES_EN = ["Property", "Characteristics", "Cost new", "Assemblies", "Labour", "Depreciation", "Land", "Result", "Sources"];

export default function Workbench({ propertyId, estimateId, locations }: { propertyId: string | null; estimateId: string | null; locations: CostLocation[] }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const storageKey = `vrai-prix-cout:${propertyId ?? "construction"}`;
  const [input, setInput] = useState<CostInput | null>(null);
  const [meta, setMeta] = useState<PrefillMeta | null>(null);
  const [est, setEst] = useState<CostEstimate | null>(null);
  const [computedKey, setComputedKey] = useState<string>("");
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [savedId, setSavedId] = useState<string | null>(estimateId);
  const [exercise, setExercise] = useState(false);
  const [hideResult, setHideResult] = useState(false);
  const [hideCosts, setHideCosts] = useState(false);
  const [answer, setAnswer] = useState("");
  const [revealed, setRevealed] = useState(false);
  const [restored, setRestored] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  /* ---------------------------------------------------- chargement initial */
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        if (estimateId) {
          const r = await fetch(`/api/cost/estimate/${encodeURIComponent(estimateId)}`);
          if (!r.ok) throw new Error((await r.json()).error ?? r.statusText);
          const e = (await r.json()) as CostEstimate;
          if (cancelled) return;
          setEst(e); setInput(e.input); setComputedKey(JSON.stringify(e.input));
          setMeta({ unit: null, missing: [], location: e.location, locationMethod: null });
          if (e.input.propertyId) {
            const p = await fetch(`/api/cost/property?id=${encodeURIComponent(e.input.propertyId)}&readings=0`);
            if (p.ok && !cancelled) { const d = (await p.json()) as PrefillResponse; setMeta({ unit: d.unit, missing: d.missing, location: d.location, locationMethod: d.locationMethod }); }
          }
          return;
        }
        let saved: CostInput | null = null;
        try { const raw = window.localStorage.getItem(storageKey); if (raw) saved = JSON.parse(raw) as CostInput; } catch { /* ignore */ }
        if (propertyId) {
          const r = await fetch(`/api/cost/property?id=${encodeURIComponent(propertyId)}`);
          if (!r.ok) throw new Error((await r.json()).error ?? r.statusText);
          const d = (await r.json()) as PrefillResponse;
          if (cancelled) return;
          setMeta({ unit: d.unit, missing: d.missing, location: d.location, locationMethod: d.locationMethod });
          const use = saved && saved.propertyId === propertyId && saved.roll?.totalValue === d.input.roll?.totalValue ? { ...saved, roll: d.input.roll, lat: d.input.lat, lng: d.input.lng } : d.input;
          setInput(use); setRestored(!!saved && use === saved);
        } else {
          const base = saved && saved.mode === "construction" ? saved : defaultInput();
          if (cancelled) return;
          setInput(base); setRestored(!!saved && saved.mode === "construction");
          setMeta({ unit: null, missing: [], location: null, locationMethod: null });
        }
      } catch (e) { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); }
    })();
    return () => { cancelled = true; };
  }, [propertyId, estimateId, storageKey]);

  /* ---------------------------------------------------- recalcul (debounce) */
  const key = input ? JSON.stringify(input) : "";
  useEffect(() => {
    if (!input || key === computedKey) return;
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(async () => {
      try {
        const r = await fetch("/api/cost/estimate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ input, save: false }) });
        const d = await r.json();
        if (!r.ok) throw new Error(d.error ?? r.statusText);
        setEst(d as CostEstimate); setComputedKey(key); setError(null);
        try { window.localStorage.setItem(storageKey, key); } catch { /* quota */ }
      } catch (e) { setError(e instanceof Error ? e.message : String(e)); }
    }, 400);
    return () => { if (timer.current) clearTimeout(timer.current); };
  }, [key, computedKey, input, storageKey]);
  const pending = !!input && key !== computedKey;

  /* ----------------------------------------------------------- mutateurs */
  const patch = (p: Partial<CostInput>) => setInput((i) => (i ? { ...i, ...p } : i));
  const patchB = (p: Partial<BuildingSpec>) => setInput((i) => (i ? { ...i, building: { ...i.building, ...p } } : i));
  const patchP = (p: Partial<CostParams>) => setInput((i) => (i ? { ...i, params: { ...i.params, ...p } } : i));
  const patchD = (p: Partial<DepreciationInput>) => setInput((i) => (i ? { ...i, depreciation: { ...i.depreciation, ...p } } : i));
  const patchL = (p: Partial<LandInput>) => setInput((i) => (i ? { ...i, land: { ...i.land, ...p } } : i));
  const setSrc = (k: string, s: AttributeSource) => setInput((i) => (i ? { ...i, attributeSources: { ...i.attributeSources, [k]: s } } : i));
  const setQty = (code: string, q: number | null) => setInput((i) => { if (!i) return i; const o = { ...i.quantityOverrides }; if (q == null) delete o[code]; else o[code] = q; return { ...i, quantityOverrides: o }; });
  const toggleExclude = (code: string) => setInput((i) => (i ? { ...i, excludedAssemblies: i.excludedAssemblies.includes(code) ? i.excludedAssemblies.filter((c) => c !== code) : [...i.excludedAssemblies, code] } : i));

  const save = async () => {
    if (!input) return;
    setSaving(true);
    try {
      const r = await fetch("/api/cost/estimate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ input, save: true }) });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error ?? r.statusText);
      setEst(d as CostEstimate); setComputedKey(key); setSavedId((d as CostEstimate).id);
      const url = new URL(window.location.href); url.searchParams.set("estimate", (d as CostEstimate).id); window.history.replaceState(null, "", url.toString());
    } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setSaving(false); }
  };
  const refreshPrices = () => { patch({ priceDate: null }); setComputedKey(""); };
  const reset = () => { try { window.localStorage.removeItem(storageKey); } catch { /* ignore */ } window.location.href = propertyId ? `/cout?property=${encodeURIComponent(propertyId)}` : "/cout?mode=construction"; };

  if (error && !input) return <div className="py-16"><p className="vp-display text-[22px] font-bold">{fr ? "Impossible de charger l'atelier" : "Cannot load the workshop"}</p><p className="mt-2 text-ink-2">{error}</p><Link href="/cout" className="btn btn-ghost mt-4">← {fr ? "Retour" : "Back"}</Link></div>;
  if (!input) return <div className="py-16 vp-mono text-[11px] uppercase tracking-[0.08em] text-ink-3">{fr ? "Chargement de la propriété…" : "Loading property…"}</div>;

  const hide = exercise && hideResult;
  const hideC = exercise && hideCosts;
  const structure = est?.categories.find((c) => c.category === "structure");
  const structureAnswer = (
    <div className="border border-[var(--line-strong)] bg-surface p-4">
      <p className="kicker">{fr ? "Exercice" : "Exercise"}</p>
      <p className="vp-display mt-1 text-[16px] font-bold">{fr ? "Calculez le coût direct de la structure." : "Compute the direct cost of the structure."}</p>
      <p className="mt-1 text-[12.5px] text-ink-2">{fr ? "À partir des lignes de la catégorie Structure (section 04) : Σ quantité × coût unitaire, puis × facteur régional. Saisissez votre réponse, puis comparez." : "From the Structure lines (section 04): Σ quantity × unit cost, then × regional factor. Enter your answer, then compare."}</p>
      <div className="mt-2 flex flex-wrap items-center gap-3">
        <input value={answer} onChange={(e) => setAnswer(e.target.value)} inputMode="numeric" placeholder="$" className="vp-input vp-mono max-w-[200px] text-[14px]" />
        <button type="button" className="btn btn-primary !min-h-0 !py-2" onClick={() => setRevealed(true)}>{fr ? "Voir la correction" : "See the correction"}</button>
        {revealed && <button type="button" className="btn btn-ghost !min-h-0 !py-2" onClick={() => { setRevealed(false); setAnswer(""); }}>{fr ? "Recommencer" : "Try again"}</button>}
      </div>
      {revealed && structure && est && (
        <div className="mt-3">
          <p className="vp-mono text-[12px]">{fr ? "Réponse du moteur" : "Engine answer"} : <b>{money(structure.adjusted, lang)}</b>{answer && Number(answer.replace(/[^\d.]/g, "")) > 0 ? ` · ${fr ? "votre réponse" : "your answer"} ${money(Number(answer.replace(/[^\d.]/g, "")), lang)} (${fr ? "écart" : "gap"} ${num(((Number(answer.replace(/[^\d.]/g, "")) / structure.adjusted) - 1) * 100, lang, 1)} %)` : ""}</p>
          <div className="src-wrap mt-2"><table className="src-table"><thead><tr><th>{fr ? "Assemblage" : "Assembly"}</th><th className="text-right">{fr ? "Quantité" : "Quantity"}</th><th className="text-right">×</th><th className="text-right">{fr ? "Coût unitaire" : "Unit cost"}</th><th className="text-right">=</th><th className="text-right">{fr ? "Direct" : "Direct"}</th></tr></thead><tbody>
            {est.lines.filter((l) => l.category === "structure").map((l) => (<tr key={l.assemblyCode}><td>{fr ? l.nameFr : l.nameEn}</td><td className="vp-mono text-right">{num(l.quantity, lang, 1)} {l.unit}</td><td className="text-right">×</td><td className="vp-mono text-right">{num(l.unitCost, lang, 2)} $</td><td className="text-right">=</td><td className="vp-mono text-right">{money(l.direct, lang)}</td></tr>))}
            <tr className="bg-surface-2 font-bold"><td colSpan={5}>{fr ? "Direct × facteur régional" : "Direct × regional factor"} (M {est.location.materialFactor} · MO {est.location.labourFactor} · É {est.location.equipmentFactor})</td><td className="vp-mono text-right">{money(structure.adjusted, lang)}</td></tr>
          </tbody></table></div>
        </div>
      )}
    </div>
  );

  return (
    <div className="py-8">
      {/* masthead */}
      <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>{input.mode === "property" ? (fr ? "Atelier — propriété" : "Workshop — property") : (fr ? "Atelier — construction" : "Workshop — construction")}</span>
          </nav>
          <span className="vp-mono text-[10px] uppercase tracking-[0.08em] text-ink-3">{pending ? (fr ? "recalcul…" : "recomputing…") : est ? `${fr ? "calculé en" : "computed"} ${est.priceDate}` : ""}</span>
        </div>
        <div className="mt-5 grid gap-x-10 gap-y-4 lg:grid-cols-[1.5fr_1fr]">
          <div>
            <span className="kicker">{fr ? "Méthode du coût — atelier" : "Cost approach — workshop"}</span>
            <h1 className="vp-display mt-2 text-[clamp(24px,3.6vw,38px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">{input.address ?? (fr ? "Bâtiment hypothétique" : "Hypothetical building")}</h1>
            <p className="mt-1 text-[14px] text-ink-2">{input.municipality ?? (fr ? "Sans adresse — décrivez le bâtiment" : "No address — describe the building")}{est ? ` · ${fr ? est.location.nameFr : est.location.nameEn}` : ""}</p>
          </div>
          <aside className="flex flex-col gap-2 lg:items-end">
            <div className="flex flex-wrap gap-2">
              <button type="button" aria-pressed={exercise} onClick={() => setExercise((v) => !v)} className={`btn !min-h-0 !px-3 !py-1.5 text-[12px] ${exercise ? "btn-primary" : "btn-ghost"}`}>✎ {fr ? "Mode exercice" : "Exercise mode"}</button>
              <button type="button" onClick={reset} className="btn btn-ghost !min-h-0 !px-3 !py-1.5 text-[12px]">{fr ? "Réinitialiser" : "Reset"}</button>
            </div>
            {exercise && (
              <div className="flex flex-wrap gap-x-4 gap-y-1">
                <Toggle checked={hideResult} onChange={setHideResult} label={fr ? "Masquer le résultat final" : "Hide final result"} />
                <Toggle checked={hideCosts} onChange={setHideCosts} label={fr ? "Masquer les coûts des lignes" : "Hide line costs"} />
              </div>
            )}
            {restored && <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "état restauré depuis cet appareil" : "state restored from this device"}</p>}
          </aside>
        </div>
        {/* sommaire des sections */}
        <ol className="vp-mono mt-5 flex flex-wrap gap-x-4 gap-y-1.5 border-y border-[var(--line)] py-2.5 text-[10px] uppercase tracking-[0.08em]">
          {SECTIONS.map((s, i) => (<li key={s}><a href={`#s${s}`} className="text-ink-2 hover:text-accent"><b className="text-accent">{s}</b> {fr ? NAMES_FR[i] : NAMES_EN[i]}</a></li>))}
        </ol>
        {error && <p className="mt-3 border-l-2 border-[var(--danger)] pl-3 text-[13px] text-[var(--danger)]">{error}</p>}
      </section>

      <div className="mt-8 space-y-12">
        <PropertyPanel input={input} meta={meta} fr={fr} locations={locations} patch={patch} setSrc={setSrc} />
        <BuildingFormPanel b={input.building} src={input.attributeSources} fr={fr} patchB={patchB} setSrc={setSrc} />
        <CostTablePanel est={est} params={input.params} fr={fr} patchP={patchP} hide={hide || hideC} />
        <AssemblyLinesPanel est={est} input={input} fr={fr} setQty={setQty} toggleExclude={toggleExclude} hide={hideC} />
        <LabourPanel est={est} fr={fr} hide={hideC} />
        <DepreciationPanel est={est} dep={input.depreciation} fr={fr} patchD={patchD} hide={hide} />
        <LandPanel input={input} fr={fr} patchL={patchL} />
        <ResultPanel est={est} fr={fr} hide={hide} exercise={exercise} onSave={save} saving={saving} savedId={savedId} onRefreshPrices={refreshPrices} structureAnswer={structureAnswer} />
        <SourcesPanel est={est} fr={fr} />
      </div>
      <p className="vp-mono mt-10 border-l-2 border-accent pl-4 text-[11px] uppercase leading-relaxed tracking-[0.05em] text-ink-2">
        {fr ? "Estimation indicative — les coûts présentés sont des estimations statistiques et ne constituent ni une soumission d'entrepreneur ni une évaluation professionnelle certifiée (OEAQ)." : "Building analysis — the costs shown are estimates and constitute neither a contractor's bid nor a certified professional appraisal (OEAQ)."}
      </p>
    </div>
  );
}