// Vrai-Prix — méthode du coût : tiroir latéral générique + fiche « Source » d'un prix
// (source, date, URL, valeur observée, unité d'origine, conversion, facteur régional, méthode, synchro, confiance).
"use client";
import { useEffect } from "react";
import type { ItemPrice, Provenance } from "@/lib/cost/types";
import { UNIT_LABELS } from "@/lib/cost/units";
import { fmtDate, KindIcon, kindLabel } from "./Provenance";
import { money, num } from "@/components/avendre/fmt";

export function Drawer({ open, onClose, title, children, fr }: { open: boolean; onClose: () => void; title: string; children: React.ReactNode; fr: boolean }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[var(--z-modal,900)] flex justify-end" role="dialog" aria-modal="true" aria-label={title}>
      <button type="button" aria-label={fr ? "Fermer" : "Close"} onClick={onClose} className="absolute inset-0 bg-[rgba(22,24,27,0.45)]" />
      <aside className="relative flex h-full w-full max-w-[520px] flex-col overflow-y-auto border-l border-[var(--line-strong)] bg-paper shadow-xl">
        <div className="sticky top-0 flex items-center justify-between border-b-2 border-ink bg-paper px-5 py-3">
          <p className="vp-display text-[15px] font-bold uppercase tracking-[-0.01em]">{title}</p>
          <button type="button" onClick={onClose} className="vp-mono flex h-10 w-10 items-center justify-center text-[15px]" aria-label={fr ? "Fermer" : "Close"}>✕</button>
        </div>
        <div className="px-5 pb-[max(24px,env(safe-area-inset-bottom))] pt-4">{children}</div>
      </aside>
    </div>
  );
}

export function KV({ k, v, mono = false }: { k: string; v: React.ReactNode; mono?: boolean }) {
  return (
    <div className="kv-cell">
      <p className="k">{k}</p>
      <p className={`v ${mono ? "vp-mono text-[13px] font-medium" : ""}`}>{v}</p>
    </div>
  );
}

/** Contenu d'un tiroir source pour un prix canonique d'article. */
export function PriceSourceCard({ price, fr, itemName, unit, locationFactor, locationName, lastSync }: { price: ItemPrice | Provenance | null; fr: boolean; itemName: string; unit?: string; locationFactor?: number; locationName?: string; lastSync?: string | null }) {
  const lang = fr ? "fr" : "en";
  if (!price) return <p className="text-[13.5px] text-ink-2">{fr ? "Donnée non disponible." : "Data not available."}</p>;
  const isItem = "itemCode" in price;
  const kind = price.kind;
  const unitLabel = unit ? (UNIT_LABELS[unit as keyof typeof UNIT_LABELS]?.[lang] ?? unit) : "";
  return (
    <div className="space-y-4">
      <div>
        <p className="klabel">{fr ? "Article" : "Item"}</p>
        <p className="vp-display mt-1 text-[17px] font-bold">{itemName}</p>
        <p className="mt-1 inline-flex items-center gap-2 text-[12.5px] text-ink-2"><KindIcon kind={kind} fr={fr} source={isItem ? price.sources[0]?.source : price.source} observedAt={price.observedAt} note={price.note} /> {kindLabel(kind, fr)}</p>
      </div>
      <div className="grid grid-cols-2 gap-x-6 gap-y-2">
        {isItem ? (
          <>
            <KV k={fr ? "Prix canonique" : "Canonical price"} v={`${num(price.price, lang, 2)} $ / ${unitLabel}`} mono />
            <KV k={fr ? "Fourchette (min–max sources)" : "Range (min–max sources)"} v={`${num(price.low, lang, 2)} – ${num(price.high, lang, 2)} $`} mono />
            <KV k={fr ? "Nombre de sources" : "Source count"} v={price.sourceCount} mono />
            <KV k={fr ? "Date d'observation" : "Observation date"} v={fmtDate(price.observedAt, fr)} />
            <KV k={fr ? "Confiance" : "Confidence"} v={`${price.confidence} / 100`} mono />
            <KV k={fr ? "Méthode" : "Method"} v={fr ? (price.sourceCount >= 2 ? "Médiane robuste multi-source (prix régulier préféré, aberrations écartées)" : price.kind === "indexed" ? "Actualisation par indice StatCan" : price.kind === "reference" ? "Prix de référence interne (hypothèse)" : "Observation unique") : price.sourceCount >= 2 ? "Robust multi-source median (regular price preferred, outliers flagged)" : price.kind === "indexed" ? "StatCan index update" : price.kind === "reference" ? "Internal reference price (assumption)" : "Single observation"} />
          </>
        ) : (
          <>
            <KV k={fr ? "Source" : "Source"} v={price.source} />
            <KV k={fr ? "Date" : "Date"} v={fmtDate(price.observedAt ?? price.effectiveDate, fr)} />
            <KV k={fr ? "Confiance" : "Confidence"} v={`${price.confidence} / 100`} mono />
          </>
        )}
        {locationFactor != null && <KV k={fr ? "Facteur régional (matériaux)" : "Regional factor (materials)"} v={`× ${num(locationFactor, lang, 3)}${locationName ? ` — ${locationName}` : ""}`} mono />}
        {lastSync !== undefined && <KV k={fr ? "Dernière synchronisation" : "Last synchronisation"} v={lastSync ? fmtDate(lastSync, fr) : fr ? "Donnée non disponible" : "Data not available"} />}
      </div>
      {isItem && price.indexed && (
        <p className="border-l-2 border-accent pl-3 text-[12.5px] text-ink-2">
          {fr ? `Prix du ${fmtDate(price.indexed.fromDate, fr)} actualisé au ${fmtDate(price.indexed.toDate, fr)} avec l'indice ${price.indexed.index} (× ${num(price.indexed.factor, lang, 3)}).` : `Price of ${fmtDate(price.indexed.fromDate, fr)} updated to ${fmtDate(price.indexed.toDate, fr)} with the ${price.indexed.index} index (× ${num(price.indexed.factor, lang, 3)}).`}
        </p>
      )}
      {price.note && <p className="border-l-2 border-[var(--amber)] pl-3 text-[12.5px] text-ink-2">{price.note}</p>}
      {isItem && price.sources.length > 0 && (
        <div className="src-wrap">
          <table className="src-table">
            <thead><tr><th>{fr ? "Source" : "Source"}</th><th className="text-right">{fr ? "Valeur observée" : "Observed value"}</th><th>{fr ? "Unité d'origine" : "Original unit"}</th><th>{fr ? "Conversion" : "Conversion"}</th><th>{fr ? "Date" : "Date"}</th></tr></thead>
            <tbody>
              {price.sources.map((s, i) => (
                <tr key={i}>
                  <td>{s.url ? <a href={s.url} target="_blank" rel="noopener noreferrer nofollow" className="border-b border-transparent text-accent hover:border-accent">{s.source} ↗</a> : s.source}{!s.regular && <span className="vp-mono ml-1 text-[9px] uppercase text-[var(--amber)]">{fr ? "promo" : "sale"}</span>}</td>
                  <td className="vp-mono text-right">{s.conversionFactor !== 1 ? `${num(s.price / s.conversionFactor, lang, 2)} $` : `${num(s.price, lang, 2)} $`}</td>
                  <td className="vp-mono text-[12px]">{s.sourceUnit}</td>
                  <td className="vp-mono text-[12px]">{s.conversionFactor === 1 ? "—" : `× ${s.conversionFactor < 0.01 ? s.conversionFactor.toExponential(2) : num(s.conversionFactor, lang, 4)} → ${num(s.price, lang, 2)} $/${unitLabel}`}</td>
                  <td className="vp-mono text-[12px]">{s.observedAt}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">{fr ? "Chaque nombre affiché est retraçable : source → observation → conversion → prix canonique → formule → résultat." : "Every displayed number is traceable: source → observation → conversion → canonical price → formula → result."}</p>
    </div>
  );
}

export { money };