import type { ToveliEstimate } from "@/lib/estimate";
import { fmtPrice, fmtPct } from "@/lib/format";
export function EstimateBreakdown({ e, price }: { e: ToveliEstimate; price?: number | null }) {
  const r = e.result;
  const w = (v: number | null) => (v && r.estimate ? Math.min(100, Math.max(0, ((v - r.low) / Math.max(1, r.high - r.low)) * 100)) : null);
  return (
    <div className="tv-card p-4">
      <div className="relative h-2 rounded-full bg-surface-2 mt-6 mb-7">
        <div className="absolute inset-y-0 rounded-full bg-brand-soft" style={{ left: 0, right: 0 }} />
        {[["Estimation", r.estimate, "bg-brand"], ...(r.modelEstimate ? [["Modèle", r.modelEstimate, "bg-ink-3"]] : []), ...(r.compsEstimate ? [["Comparables", r.compsEstimate, "bg-ink-3"]] : []), ...(price ? [["Prix demandé", price, "bg-info"]] : [])].map(([k, v, c]) => { const x = w(v as number); return x == null ? null : <span key={String(k)} className="absolute -top-5 text-[10px] text-ink-3 -translate-x-1/2 whitespace-nowrap" style={{ left: `${x}%` }}>{k}<span className={`block mx-auto mt-0.5 w-2.5 h-2.5 rounded-full ${c}`} /></span>; })}
        <span className="absolute -bottom-5 left-0 text-[11px] text-ink-3">{fmtPrice(r.low)}</span><span className="absolute -bottom-5 right-0 text-[11px] text-ink-3">{fmtPrice(r.high)}</span>
      </div>
      <dl className="grid sm:grid-cols-2 gap-x-6 gap-y-1 text-sm">
        {r.modelEstimate != null && <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Modèle hédonique (poids {Math.round(r.modelWeight * 100)} %)</dt><dd className="tabular-nums">{fmtPrice(r.modelEstimate)}</dd></div>}
        {r.compsEstimate != null && <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Comparables ajustés (poids {Math.round((1 - r.modelWeight) * 100)} %)</dt><dd className="tabular-nums">{fmtPrice(r.compsEstimate)}</dd></div>}
        <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Comparables retenus</dt><dd>{r.nCompsUsed}</dd></div>
        {r.compsDispersionPct != null && <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Dispersion des comparables</dt><dd>{r.compsDispersionPct} %</dd></div>}
        {e.roleUnit?.role_value != null && <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Valeur au rôle</dt><dd className="tabular-nums">{fmtPrice(e.roleUnit.role_value)} <span className="text-ink-3 text-xs">({fmtPct(r.estimate / e.roleUnit.role_value - 1)})</span></dd></div>}
        <div className="flex justify-between border-b border-line py-1"><dt className="text-ink-3">Largeur de la fourchette</dt><dd>{fmtPct((r.high - r.low) / r.estimate, 0, false)}</dd></div>
      </dl>
      <p className="mt-3 text-xs text-ink-3">Entrées : {e.method.inputs.join(" ; ")}.</p>
    </div>
  );
}