// Vrai-Prix — méthode du coût : primitives de formulaire de l'atelier (champs éditoriaux, parts en %, blocs).
"use client";
import type { AttributeSource } from "@/lib/cost/types";
import { AttrBadge } from "./Provenance";

export function Block({ num, title, children, id, aside }: { num: string; title: string; children: React.ReactNode; id?: string; aside?: React.ReactNode }) {
  return (
    <section id={id} className="sec scroll-mt-24">
      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
        <p className="vp-mono text-[10px] font-bold uppercase tracking-[0.12em] text-accent">{num} — {title}</p>
        {aside}
      </div>
      <div className="mt-4 space-y-4">{children}</div>
    </section>
  );
}

export function Field({ label, children, hint, source, fr }: { label: string; children: React.ReactNode; hint?: string; source?: AttributeSource | null; fr?: boolean }) {
  return (
    <label className="block" title={hint}>
      <span className="flex items-center gap-2"><span className="klabel">{label}</span>{source && fr != null && <AttrBadge source={source} fr={fr} />}</span>
      <div className="mt-1">{children}</div>
    </label>
  );
}

export function NumField({ value, onChange, min, max, step, unit, placeholder, disabled }: { value: number | null | undefined; onChange: (v: number | null) => void; min?: number; max?: number; step?: number; unit?: string; placeholder?: string; disabled?: boolean }) {
  return (
    <div className="flex items-baseline gap-2">
      <input type="number" inputMode="decimal" value={value ?? ""} min={min} max={max} step={step ?? 1} placeholder={placeholder} disabled={disabled}
        onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))} className="vp-input vp-mono text-[14px]" />
      {unit && <span className="vp-mono shrink-0 text-[10.5px] uppercase text-ink-3">{unit}</span>}
    </div>
  );
}

export function SelectField<T extends string>({ value, onChange, options }: { value: T; onChange: (v: T) => void; options: { key: T; label: string }[] }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value as T)} className="vp-input text-[14px]">
      {options.map((o) => (<option key={o.key} value={o.key}>{o.label}</option>))}
    </select>
  );
}

export function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
  return (
    <label className="flex items-center gap-2 text-[13.5px]">
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} className="accent-[var(--accent)]" />
      {label}
    </label>
  );
}

/** Parts en % d'un mélange (revêtements, planchers) — la somme est normalisée par le moteur. */
export function MixField<K extends string>({ value, onChange, options, fr }: { value: Partial<Record<K, number>>; onChange: (v: Partial<Record<K, number>>) => void; options: { key: K; fr: string; en: string }[]; fr: boolean }) {
  const total = Object.values(value as Record<string, number>).reduce((s, v) => s + (v || 0), 0);
  return (
    <div>
      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 sm:grid-cols-3">
        {options.map((o) => (
          <label key={o.key} className="flex items-center justify-between gap-2 text-[12.5px]">
            <span>{fr ? o.fr : o.en}</span>
            <span className="flex items-baseline gap-1">
              <input type="number" inputMode="numeric" min={0} max={100} value={value[o.key] != null ? Math.round((value[o.key] as number) * 100) : ""} placeholder="0"
                onChange={(e) => { const n = { ...value }; const v = Number(e.target.value); if (!e.target.value || v <= 0) delete n[o.key]; else n[o.key] = v / 100; onChange(n); }}
                className="vp-input vp-mono !min-h-0 w-[56px] !py-1 text-right text-[13px]" />
              <span className="vp-mono text-[10px] text-ink-3">%</span>
            </span>
          </label>
        ))}
      </div>
      <p className={`vp-mono mt-1 text-[10px] uppercase tracking-[0.05em] ${Math.abs(total - 1) > 0.02 && total > 0 ? "text-[var(--amber)]" : "text-ink-3"}`}>
        {fr ? "Total" : "Total"} {Math.round(total * 100)} % {total > 0 && Math.abs(total - 1) > 0.02 ? (fr ? "— normalisé à 100 % par le moteur" : "— normalised to 100 % by the engine") : ""}
      </p>
    </div>
  );
}

export function PctField({ value, onChange, label, note, amount, fr, lang }: { value: number; onChange: (v: number) => void; label: string; note?: string; amount?: number; fr: boolean; lang: string }) {
  return (
    <div className="grid grid-cols-[1fr_84px_110px] items-center gap-3 border-b border-[var(--line)] py-1.5 text-[13px]" title={note}>
      <span className="flex items-center gap-1.5">{label}{note && <span className="vp-mono cursor-help text-[10px] text-ink-3" aria-label={note}>ⓘ</span>}</span>
      <span className="flex items-baseline gap-1"><input type="number" inputMode="decimal" step={0.1} min={0} max={40} value={value} onChange={(e) => onChange(Number(e.target.value) || 0)} className="vp-input vp-mono !min-h-0 !py-1 text-right text-[13px]" /><span className="vp-mono text-[10px] text-ink-3">%</span></span>
      <span className="vp-mono text-right text-[12.5px]">{amount != null ? new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 }).format(amount) : (fr ? "—" : "—")}</span>
    </div>
  );
}