/* Supplier detail page — list of suppliers + detail view with tabs */

const SupplierDetail = () => {
  const list = Array.isArray(SUPPLIERS) ? SUPPLIERS : [];
  const [selectedId, setSelectedId] = useState(list[0]?.id || null);
  const [tab, setTab] = useState("overview");
  const [, force] = useState(0);
  const sup = list.find((s) => s.id === selectedId) || list[0];
  const toast = (window.useToast || (() => () => {}))();

  // Add-contact modal state
  const [addOpen, setAddOpen] = useState(false);
  const [draft, setDraft] = useState({ role: "Commercial", name: "", email: "", number: "" });

  // Trash bin — uses shared KCCTrash (visible in Settings → Corbeille)
  const trashHook = (window.useKCCTrash || (() => ({ items: [], send: async () => {}, restore: async () => {}, empty: () => {} })))();
  const supplierTrash = (trashHook.items || []).filter(t => t._kccType === "suppliers");
  const [trashOpen, setTrashOpen] = useState(false);

  // Create-supplier modal state
  const [newOpen, setNewOpen] = useState(false);
  const [newDraft, setNewDraft] = useState({ name: "", region: "", cat: "", contact: "", email: "", phone: "" });

  const createSupplier = async () => {
    const n = newDraft.name.trim();
    if (!n) return;
    const id = "sup-" + Date.now().toString(36);
    const fresh = {
      id, name: n,
      region: newDraft.region.trim() || "—",
      cat: newDraft.cat.trim() || "—",
      contact: newDraft.contact.trim() || "",
      email: newDraft.email.trim() || "",
      phone: newDraft.phone.trim() || "",
      rating: 0, products: 0, moq: 0, leadDays: 0, score: 0,
      openBalance: 0, terms: "—", status: "actif", phones: [],
    };
    list.push(fresh);
    setSelectedId(id);
    setNewOpen(false);
    setNewDraft({ name: "", region: "", cat: "", contact: "", email: "", phone: "" });
    force(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "suppliers", items: [fresh] }),
      });
      toast?.({ message: `Fournisseur "${n}" créé`, tone: "green" });
    } catch (_) {
      toast?.({ message: "Créé localement (sync hors-ligne)", tone: "amber" });
    }
  };

  // Soft delete via shared KCCTrash
  const deleteSupplier = async (target) => {
    if (!target) return;
    if (!window.confirm(`Mettre "${target.name}" à la corbeille ?`)) return;
    await trashHook.send("suppliers", target);
    const next = list[0];
    setSelectedId(next?.id || null);
    force(x => x + 1);
    toast?.({ message: `"${target.name}" → corbeille (visible dans Paramètres)`, tone: "muted" });
  };

  const restoreFromTrash = async (id) => {
    const item = supplierTrash.find(t => t.id === id);
    const restored = await trashHook.restore(id);
    if (restored) {
      setSelectedId(restored.id);
      force(x => x + 1);
      toast?.({ message: `"${restored.name || item?.name}" restauré`, tone: "green" });
    }
  };

  const emptyTrash = () => {
    if (!supplierTrash.length) return;
    if (!window.confirm(`Vider la corbeille fournisseurs ? ${supplierTrash.length} fournisseur(s) seront supprimés définitivement.`)) return;
    // Remove only supplier-type items, keep others
    supplierTrash.forEach(t => window.KCCTrash?.remove(t.id));
    setTrashOpen(false);
    toast?.({ message: "Corbeille fournisseurs vidée", tone: "muted" });
  };

  // Brand-research modal state
  const [brandOpen, setBrandOpen] = useState(false);
  const [brandQuery, setBrandQuery] = useState("");
  const [brandLoading, setBrandLoading] = useState(false);
  const [brandResult, setBrandResult] = useState(null);
  const [brandError, setBrandError] = useState(null);

  const runBrandSearch = async () => {
    const b = brandQuery.trim();
    if (!b) return;
    setBrandLoading(true);
    setBrandError(null);
    setBrandResult(null);
    try {
      const res = window.kccAPI
        ? await window.kccAPI.supplierByBrand(b)
        : await fetch("/api/supplier-hunter", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ brand: b }) }).then(r => r.json());
      if (res?.error) { setBrandError(res.error); }
      else { setBrandResult(res); }
    } catch (e) {
      setBrandError(e.message || String(e));
    } finally {
      setBrandLoading(false);
    }
  };

  // Persist supplier changes back to D1 and refresh local
  const persistSupplier = async (patch) => {
    if (!sup) return;
    Object.assign(sup, patch);
    force(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "suppliers", items: [{ ...sup, ...patch }] }),
      });
    } catch (_) {}
  };

  const addContact = () => {
    if (!draft.name && !draft.number) return;
    const phones = Array.isArray(sup.phones) ? [...sup.phones] : [];
    phones.push({ role: draft.role, name: draft.name, email: draft.email, number: draft.number });
    persistSupplier({ phones, phone: sup.phone || draft.number });
    setAddOpen(false);
    setDraft({ role: "Commercial", name: "", email: "", number: "" });
    toast?.({ message: "Contact ajouté", tone: "green" });
  };

  const removeContact = (i) => {
    const phones = (sup.phones || []).filter((_, idx) => idx !== i);
    persistSupplier({ phones });
    toast?.({ message: "Contact supprimé", tone: "muted" });
  };

  const trashModal = trashOpen && (
    <div onClick={() => setTrashOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 9999, display: "grid", placeItems: "center" }}>
      <div className="card" onClick={(e) => e.stopPropagation()} style={{ width: 560, maxHeight: "75vh", overflow: "auto", padding: 20 }}>
        <div className="between" style={{ marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Corbeille fournisseurs</div>
            <div className="muted" style={{ fontSize: 11.5 }}>{supplierTrash.length} élément(s) · restaurables ou suppression définitive</div>
          </div>
          <button className="btn" data-variant="ghost" data-size="sm" onClick={() => setTrashOpen(false)}><Icon name="x" size={13}/></button>
        </div>
        {supplierTrash.length === 0 ? (
          <div className="muted" style={{ fontSize: 12, textAlign: "center", padding: 30 }}>La corbeille est vide.</div>
        ) : (
          <div className="stack" style={{ gap: 6 }}>
            {supplierTrash.map((t) => (
              <div key={t.id} className="row between" style={{ padding: "8px 10px", borderRadius: 6, background: "var(--bg-3)" }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 550 }}>{t.name}</div>
                  <div className="muted" style={{ fontSize: 10.5 }}>
                    {t.region} · {t.cat} · supprimé {t._trashedAt ? new Date(t._trashedAt).toLocaleString("fr-CA") : "—"}
                  </div>
                </div>
                <button className="btn" data-size="sm" onClick={() => restoreFromTrash(t.id)}><Icon name="refresh" size={11}/> Restaurer</button>
              </div>
            ))}
          </div>
        )}
        <div className="row" style={{ marginTop: 16, justifyContent: "flex-end", gap: 8 }}>
          <button className="btn" onClick={() => setTrashOpen(false)}>Fermer</button>
          <button className="btn" onClick={emptyTrash} disabled={!supplierTrash.length} style={{ color: supplierTrash.length ? "var(--red)" : "var(--text-faint)" }}>
            <Icon name="x" size={12}/> Vider la corbeille
          </button>
        </div>
      </div>
    </div>
  );

  const newModal = newOpen && (
    <div onClick={() => setNewOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 9999, display: "grid", placeItems: "center" }}>
      <div className="card" onClick={(e) => e.stopPropagation()} style={{ width: 480, padding: 20 }}>
        <div className="between" style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>Nouveau fournisseur</div>
          <button className="btn" data-variant="ghost" data-size="sm" onClick={() => setNewOpen(false)}><Icon name="x" size={13}/></button>
        </div>
        <div className="stack" style={{ gap: 10 }}>
          {[
            ["name", "Nom *", "Maison Cuisine QC"],
            ["region", "Région / ville", "Montréal, QC"],
            ["cat", "Catégorie", "Maison & Cuisine"],
            ["contact", "Contact", "Sophie Tremblay"],
            ["email", "Email", "wholesale@exemple.ca"],
            ["phone", "Téléphone", "+1 514 555 1234"],
          ].map(([k, label, ph]) => (
            <div key={k}>
              <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>{label}</div>
              <div className="input" style={{ height: 32, padding: "0 10px" }}>
                <input
                  autoFocus={k === "name"}
                  value={newDraft[k]}
                  onChange={(e) => setNewDraft(d => ({ ...d, [k]: e.target.value }))}
                  placeholder={ph}
                  style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}
                />
              </div>
            </div>
          ))}
        </div>
        <div className="row" style={{ marginTop: 16, justifyContent: "flex-end", gap: 8 }}>
          <button className="btn" onClick={() => setNewOpen(false)}>Annuler</button>
          <button className="btn" data-variant="primary" onClick={createSupplier} disabled={!newDraft.name.trim()}>Créer</button>
        </div>
      </div>
    </div>
  );

  if (!sup) {
    return (
      <div className="page" style={{ maxWidth: 1500 }}>
        <div className="page-head">
          <div>
            <div className="page-title">Annuaire fournisseurs</div>
            <div className="page-sub">Aucun fournisseur — ajoute-en un pour commencer.</div>
          </div>
          <div className="row">
            <button className="btn" onClick={() => setTrashOpen(true)} title="Corbeille">
              <Icon name="x" size={13}/> Corbeille{supplierTrash.length > 0 ? ` (${supplierTrash.length})` : ""}
            </button>
            <button className="btn" onClick={() => setBrandOpen(true)}><Icon name="search" size={13} /> Rechercher par marque</button>
            <button className="btn" data-variant="primary" onClick={() => setNewOpen(true)}><Icon name="plus" size={13} /> Nouveau fournisseur</button>
          </div>
        </div>
        {newModal}
        {trashModal}
      </div>
    );
  }

  return (
    <div className="page" style={{ maxWidth: 1500 }}>
      <div className="page-head">
        <div>
          <div className="page-title">Annuaire fournisseurs</div>
          <div className="page-sub">{list.length} actifs · 1 en revue · score moyen {list.length ? (list.reduce((s,x)=>s+(x.score||0),0)/list.length).toFixed(0) : 0}/100</div>
        </div>
        <div className="row">
          <button className="btn"><Icon name="filter" size={13} /> Filtres</button>
          <button className="btn" onClick={() => setTrashOpen(true)} title="Corbeille">
            <Icon name="x" size={13}/> Corbeille{supplierTrash.length > 0 ? ` (${supplierTrash.length})` : ""}
          </button>
          <button className="btn" onClick={() => setBrandOpen(true)}><Icon name="search" size={13} /> Rechercher par marque</button>
          <button className="btn" data-variant="primary" onClick={() => setNewOpen(true)}><Icon name="plus" size={13} /> Nouveau fournisseur</button>
        </div>
      </div>

      {brandOpen && (
        <div className="modal-backdrop" onClick={() => !brandLoading && setBrandOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 9998, display: "grid", placeItems: "center" }}>
          <div className="card" onClick={(e) => e.stopPropagation()} style={{ width: 720, maxHeight: "85vh", overflow: "auto", padding: 20 }}>
            <div className="between" style={{ marginBottom: 14 }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Recherche fournisseurs par marque</div>
                <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>5+ fournisseurs légitimes · QC → CA → USA · top 3 + scripts email FR/EN</div>
              </div>
              <button className="btn" data-variant="ghost" data-size="sm" onClick={() => !brandLoading && setBrandOpen(false)}><Icon name="x" size={13}/></button>
            </div>

            <div className="row" style={{ gap: 8, marginBottom: 14 }}>
              <div className="input" style={{ flex: 1, height: 34, padding: "0 10px" }}>
                <Icon name="search" size={13} style={{ marginRight: 8, color: "var(--text-dim)" }}/>
                <input
                  autoFocus
                  value={brandQuery}
                  onChange={(e) => setBrandQuery(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && !brandLoading && runBrandSearch()}
                  placeholder="Nom de la marque (ex: Cuisinart, OXO, Kong…)"
                  style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 13 }}
                />
              </div>
              <button className="btn" data-variant="primary" onClick={runBrandSearch} disabled={brandLoading || !brandQuery.trim()}>
                {brandLoading ? "Recherche…" : "Lancer"}
              </button>
            </div>

            {brandError && (
              <div className="card" style={{ padding: 12, background: "var(--bg-3)", border: "1px solid var(--red)", color: "var(--red)", fontSize: 12 }}>
                Erreur : {brandError}
              </div>
            )}

            {brandResult && (
              <div className="stack" style={{ gap: 14 }}>
                <div className="muted" style={{ fontSize: 11.5 }}>
                  {brandResult.count} fournisseurs trouvés pour <strong>{brandResult.brand}</strong>
                </div>

                {Array.isArray(brandResult.top3) && brandResult.top3.length > 0 && (
                  <div className="card" style={{ padding: 12 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Top 3 à contacter en premier</div>
                    {brandResult.top3.map((t, i) => (
                      <div key={i} style={{ fontSize: 12, padding: "6px 0", borderBottom: i < brandResult.top3.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                        <strong>{i + 1}. {t.name}</strong> — <span className="muted">{t.reason}</span>
                      </div>
                    ))}
                  </div>
                )}

                <div className="stack" style={{ gap: 8 }}>
                  {brandResult.suppliers.map((s, i) => (
                    <div key={i} className="card" style={{ padding: 12 }}>
                      <div className="between">
                        <div>
                          <span style={{ fontSize: 13, fontWeight: 600 }}>{s.name}</span>
                          <span className="muted" style={{ fontSize: 11, marginLeft: 8 }}>
                            {[s.location?.city, s.location?.province, s.location?.country].filter(Boolean).join(", ")}
                          </span>
                        </div>
                        <Badge tone={s.confidence === "élevé" ? "green" : s.confidence === "moyen" ? "amber" : "muted"}>{s.confidence}</Badge>
                      </div>
                      <div style={{ fontSize: 11.5, marginTop: 6, color: "var(--text-dim)" }}>
                        {s.type} · {s.sellsBrandDirectly ? "Vend directement" : "Indirect"}{s.sellsBrandNote ? ` — ${s.sellsBrandNote}` : ""}
                      </div>
                      <div className="row" style={{ gap: 10, marginTop: 6, fontSize: 11.5, flexWrap: "wrap" }}>
                        {s.website && <a href={s.website} target="_blank" rel="noopener noreferrer">🌐 Site</a>}
                        {s.wholesaleLink && <a href={s.wholesaleLink} target="_blank" rel="noopener noreferrer">📦 B2B</a>}
                        {s.contact?.email && <span>✉ {s.contact.email}</span>}
                        {s.contact?.phone && <span>☎ {s.contact.phone}</span>}
                      </div>
                      <div style={{ fontSize: 11.5, marginTop: 6 }}>
                        <strong>FBA :</strong> <span className="muted">{s.whyInterestingForFBA}</span>
                      </div>
                      <div style={{ fontSize: 11.5, marginTop: 4 }}>
                        <strong>Next :</strong> <span className="muted">{s.nextAction}</span>
                      </div>
                    </div>
                  ))}
                </div>

                {(brandResult.emailScriptFR || brandResult.emailScriptEN) && (
                  <div className="card" style={{ padding: 12 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Scripts email</div>
                    {brandResult.emailScriptFR && (
                      <details style={{ marginBottom: 8 }}>
                        <summary style={{ fontSize: 12, cursor: "pointer" }}>🇫🇷 Français</summary>
                        <pre style={{ whiteSpace: "pre-wrap", fontSize: 11.5, marginTop: 6, padding: 10, background: "var(--bg-3)", borderRadius: 6 }}>{brandResult.emailScriptFR}</pre>
                      </details>
                    )}
                    {brandResult.emailScriptEN && (
                      <details>
                        <summary style={{ fontSize: 12, cursor: "pointer" }}>🇬🇧 English</summary>
                        <pre style={{ whiteSpace: "pre-wrap", fontSize: 11.5, marginTop: 6, padding: 10, background: "var(--bg-3)", borderRadius: 6 }}>{brandResult.emailScriptEN}</pre>
                      </details>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      <div className="grid" style={{ gridTemplateColumns: "320px 1fr", gap: 14, alignItems: "flex-start" }}>
        {/* List */}
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: 10, borderBottom: "1px solid var(--border-subtle)" }}>
            <div className="input" style={{ height: 28, padding: "0 8px" }}>
              <Icon name="search" size={12} style={{ marginRight: 6, color: "var(--text-dim)" }}/>
              <input style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12 }} placeholder="Rechercher…"/>
            </div>
          </div>
          <div style={{ maxHeight: 600, overflow: "auto" }}>
            {list.map((s) => (
              <div key={s.id} onClick={() => setSelectedId(s.id)} style={{
                padding: "10px 12px",
                borderBottom: "1px solid var(--border-subtle)",
                cursor: "pointer",
                background: s.id === selectedId ? "var(--bg-3)" : "transparent",
                borderLeft: s.id === selectedId ? "2px solid var(--accent)" : "2px solid transparent",
              }}>
                <div className="between">
                  <span style={{ fontSize: 12.5, fontWeight: 550 }}>{s.name}</span>
                  <span className="num" style={{ fontSize: 11, fontWeight: 600, color: s.score >= 85 ? "var(--green)" : s.score >= 75 ? "var(--amber)" : "var(--red)" }}>{s.score}</span>
                </div>
                <div className="row" style={{ gap: 6, marginTop: 4 }}>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)" }}>{s.region}</span>
                  <span style={{color:"var(--text-faint)"}}>·</span>
                  <span style={{ fontSize: 10.5, color: "var(--text-dim)" }}>{s.cat}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Detail */}
        <div className="stack" style={{ gap: 14 }}>
          {/* Header card */}
          <div className="card" style={{ padding: 18 }}>
            <div className="row" style={{ gap: 14 }}>
              <div style={{
                width: 52, height: 52, borderRadius: 12,
                background: "linear-gradient(135deg, oklch(0.4 0.08 248), oklch(0.28 0.05 248))",
                display: "grid", placeItems: "center", fontSize: 18, fontWeight: 600,
                boxShadow: "0 0 0 1px oklch(1 0 0 / 0.08) inset",
                fontFamily: "var(--font-display)"
              }}>{sup.name.split(" ").map(w=>w[0]).slice(0,2).join("")}</div>
              <div style={{ flex: 1 }}>
                <div className="row" style={{ gap: 10 }}>
                  <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.015em" }}>
                    <EditableField value={sup.name} onSave={(v) => persistSupplier({ name: v })} width={260}/>
                  </span>
                  <Badge tone="green" dot>Actif</Badge>
                  <Badge tone="muted">
                    <EditableField value={sup.cat} onSave={(v) => persistSupplier({ cat: v })} width={140}/>
                  </Badge>
                </div>
                <div className="row" style={{ gap: 14, marginTop: 6, fontSize: 12, color: "var(--text-dim)" }}>
                  <span><Icon name="target" size={11} style={{ verticalAlign: -2, marginRight: 4 }}/>
                    <EditableField value={sup.region} onSave={(v) => persistSupplier({ region: v })} width={140}/>
                  </span>
                  <span><Icon name="users" size={11} style={{ verticalAlign: -2, marginRight: 4 }}/>
                    <EditableField value={sup.contact} onSave={(v) => persistSupplier({ contact: v })} width={160}/>
                  </span>
                  <span><Icon name="mail" size={11} style={{ verticalAlign: -2, marginRight: 4 }}/>
                    <EditableField value={sup.email} onSave={(v) => persistSupplier({ email: v })} type="email" width={200}/>
                  </span>
                </div>
              </div>
              <div className="row">
                <button className="btn" data-size="sm"><Icon name="mail" size={12} /> Contacter</button>
                <button className="btn" data-size="sm" data-variant="primary"><Icon name="plus" size={12} /> Nouvelle RFQ</button>
                <button className="btn" data-size="sm" onClick={() => deleteSupplier(sup)} title="Supprimer ce fournisseur" style={{ color: "var(--red)" }}><Icon name="x" size={12} /> Supprimer</button>
              </div>
            </div>

            <div className="grid" style={{ gridTemplateColumns: "repeat(5, 1fr)", marginTop: 16, gap: 10 }}>
              {[
                { l: "Score fiabilité", v: sup.score + "/100", color: sup.score >= 85 ? "var(--green)" : "var(--amber)" },
                { l: "Note qualité",    v: "★ " + sup.rating.toFixed(1) },
                { l: "Délai moyen",     v: sup.leadDays + "j" },
                { l: "MOQ",             v: sup.moq.toLocaleString() + " u" },
                { l: "Solde ouvert",    v: fmtDollar(sup.openBalance), color: sup.openBalance > 0 ? "var(--amber)" : "var(--text)" },
              ].map((m, i) => (
                <div key={i} style={{ padding: "10px 0", borderRight: i < 4 ? "1px solid var(--border-subtle)" : "none", paddingLeft: i > 0 ? 12 : 0 }}>
                  <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>{m.l}</div>
                  <div className="num" style={{ fontSize: 16, fontWeight: 600, color: m.color || "var(--text)" }}>{m.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Tabs */}
          <div className="card" style={{ padding: 0 }}>
            <div className="row" style={{ padding: "0 14px", borderBottom: "1px solid var(--border-subtle)", gap: 0 }}>
              {[
                ["overview","Vue d'ensemble"],
                ["catalog","Catalogue"],
                ["contacts","Contacts"],
                ["account","Compte ouvert"],
                ["rfq","Demandes / RFQ"],
                ["history","Historique"],
              ].map(([id, label]) => (
                <button key={id} onClick={() => setTab(id)} style={{
                  padding: "10px 12px", fontSize: 12.5, fontWeight: tab === id ? 600 : 450,
                  color: tab === id ? "var(--text)" : "var(--text-dim)",
                  borderBottom: tab === id ? "2px solid var(--accent)" : "2px solid transparent",
                  marginBottom: -1
                }}>{label}</button>
              ))}
            </div>
            <div style={{ padding: 14 }}>
              {tab === "overview" && (
                <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <div>
                    <div style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>Termes commerciaux</div>
                    <div className="stack" style={{ gap: 8, fontSize: 12.5 }}>
                      <div className="between"><span className="muted">Termes paiement</span>
                        <span className="mono"><EditableField value={sup.terms} onSave={(v) => persistSupplier({ terms: v })} width={140}/></span>
                      </div>
                      <div className="between"><span className="muted">MOQ standard</span>
                        <span className="num"><EditableField value={sup.moq} onSave={(v) => persistSupplier({ moq: v })} type="number" parse={(v) => Number(v) || 0} format={(v) => Number(v).toLocaleString() + " u"} width={100}/></span>
                      </div>
                      <div className="between"><span className="muted">Délai production</span>
                        <span className="num"><EditableField value={sup.leadDays} onSave={(v) => persistSupplier({ leadDays: v })} type="number" parse={(v) => Number(v) || 0} format={(v) => v + " jours"} width={80}/></span>
                      </div>
                      <div className="between"><span className="muted">Devise</span>
                        <span className="mono"><EditableField value={sup.currency || "USD"} onSave={(v) => persistSupplier({ currency: v })} options={[{value:"USD",label:"USD"},{value:"CAD",label:"CAD"},{value:"EUR",label:"EUR"},{value:"CNY",label:"CNY"}]} width={80}/></span>
                      </div>
                      <div className="between"><span className="muted">Incoterms</span>
                        <span className="mono"><EditableField value={sup.incoterms || "FOB Shenzhen"} onSave={(v) => persistSupplier({ incoterms: v })} width={140}/></span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>Performance 90j</div>
                    <div className="stack" style={{ gap: 8, fontSize: 12.5 }}>
                      <div className="between"><span className="muted">Commandes</span><span className="num">14</span></div>
                      <div className="between"><span className="muted">Volume total</span><span className="num">$ 142,800</span></div>
                      <div className="between"><span className="muted">Taux livraison à temps</span><span className="num" style={{ color: "var(--green)" }}>92.3%</span></div>
                      <div className="between"><span className="muted">Taux défauts</span><span className="num" style={{ color: "var(--green)" }}>0.8%</span></div>
                      <div className="between"><span className="muted">Délai réponse moyen</span><span className="num">4h 12min</span></div>
                    </div>
                  </div>
                </div>
              )}
              {tab === "catalog" && (
                <table className="table">
                  <thead><tr><th>Produit</th><th>SKU fournisseur</th><th>MOQ</th><th>Prix unitaire</th><th>Statut</th></tr></thead>
                  <tbody>
                    {PRODUCTS.filter(p => p.supplier === sup.name).slice(0, 6).map(p => (
                      <tr key={p.id}>
                        <td>{p.name}</td>
                        <td><span className="mono" style={{ color: "var(--text-muted)", fontSize: 11.5 }}>SKU-{p.id.slice(-3)}-{sup.id.slice(-3)}</span></td>
                        <td><span className="num">{sup.moq}</span></td>
                        <td><span className="num">{fmtDollar(p.cost)}</span></td>
                        <td><StatusBadge value={p.status}/></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
              {tab === "contacts" && (() => {
                const fallback = (sup.contact || sup.phone) ? [{ role: "Commercial", name: sup.contact, email: sup.email, number: sup.phone || "" }] : [];
                const contacts = (Array.isArray(sup.phones) && sup.phones.length) ? sup.phones : fallback;
                return (
                  <div>
                    <div className="row" style={{ justifyContent: "flex-end", marginBottom: 10 }}>
                      <button className="btn" data-variant="primary" data-size="sm" onClick={() => setAddOpen(true)}>
                        <Icon name="plus" size={12} /> Ajouter un contact
                      </button>
                    </div>

                    {addOpen && (
                      <div className="card" style={{ padding: 12, marginBottom: 10 }}>
                        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr auto auto", gap: 8 }}>
                          <select className="input" value={draft.role} onChange={e => setDraft(d => ({ ...d, role: e.target.value }))}>
                            <option>Commercial</option>
                            <option>Logistique</option>
                            <option>Comptabilité</option>
                            <option>Direction</option>
                            <option>Qualité</option>
                            <option>Autre</option>
                          </select>
                          <input className="input" placeholder="Nom" value={draft.name} onChange={e => setDraft(d => ({ ...d, name: e.target.value }))} />
                          <input className="input" placeholder="Email" value={draft.email} onChange={e => setDraft(d => ({ ...d, email: e.target.value }))} />
                          <input className="input" placeholder="Téléphone (ex: +86 138 0013 8000)" value={draft.number} onChange={e => setDraft(d => ({ ...d, number: e.target.value }))} />
                          <button className="btn" data-variant="primary" onClick={addContact}>Ajouter</button>
                          <button className="btn" data-variant="ghost" onClick={() => setAddOpen(false)}>Annuler</button>
                        </div>
                      </div>
                    )}

                    {contacts.length === 0 ? (
                      <div className="card" style={{ padding: 24, textAlign: "center", color: "var(--text-faint)" }}>
                        Aucun contact. Clique sur « Ajouter un contact » pour en créer un.
                      </div>
                    ) : (
                      <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                        {contacts.map((c, i) => (
                          <div key={i} style={{ padding: 12, border: "1px solid var(--border-subtle)", borderRadius: 8, background: "var(--bg-2)", position: "relative" }}>
                            <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>{c.role}</div>
                            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{c.name || "—"}</div>
                            <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>
                              {c.email ? <a href={`mailto:${c.email}`} style={{ color: "inherit" }}>{c.email}</a> : <span style={{ opacity: 0.4 }}>(pas d'email)</span>}
                            </div>
                            <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>
                              {c.number ? <a href={`tel:${c.number.replace(/\s/g, "")}`} style={{ color: "inherit" }}>{c.number}</a> : <span style={{ opacity: 0.4 }}>(pas de téléphone)</span>}
                            </div>
                            {(Array.isArray(sup.phones) && sup.phones.length > 0) && (
                              <button
                                className="icon-btn"
                                title="Supprimer"
                                onClick={() => removeContact(i)}
                                style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, opacity: 0.6 }}
                              >
                                <Icon name="trash" size={11} />
                              </button>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })()}
              {tab === "account" && (
                <div>
                  <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
                    <KpiCard label="Solde courant"   prefix="$" value={fmtMoney(sup.openBalance)} />
                    <KpiCard label="À échoir 30j"    prefix="$" value="6.4k" />
                    <KpiCard label="En retard"       prefix="$" value="0" delta={0} muted />
                  </div>
                  <table className="table">
                    <thead><tr><th>Facture</th><th>Émise</th><th>Échéance</th><th style={{textAlign:"right"}}>Montant</th><th>Statut</th></tr></thead>
                    <tbody>
                      {[
                        { n: "INV-2026-0412", e: "12 avr.", d: "12 mai", a: 4200, s: "amber", l: "À échoir" },
                        { n: "INV-2026-0408", e: "08 avr.", d: "08 mai", a: 2840, s: "amber", l: "À échoir" },
                        { n: "INV-2026-0322", e: "22 mars", d: "21 avr.", a: 5100, s: "green", l: "Payé" },
                        { n: "INV-2026-0301", e: "01 mars", d: "31 mars", a: 3200, s: "green", l: "Payé" },
                      ].map(r => (
                        <tr key={r.n}>
                          <td><span className="mono">{r.n}</span></td>
                          <td className="mono muted">{r.e}</td>
                          <td className="mono muted">{r.d}</td>
                          <td className="num" style={{ textAlign:"right" }}>{fmtDollar(r.a)}</td>
                          <td><Badge tone={r.s} dot>{r.l}</Badge></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              {tab === "rfq" && (
                <div style={{ padding: "20px 0", textAlign: "center", color: "var(--text-dim)", fontSize: 12.5 }}>
                  Aucune RFQ ouverte avec ce fournisseur · <span style={{ color: "var(--accent)", cursor: "pointer" }}>Créer une RFQ</span>
                </div>
              )}
              {tab === "history" && (
                <div className="stack" style={{ gap: 0 }}>
                  {[
                    { d: "10 mai", t: "Envoi échantillon", who: "kevin",   desc: "Lot 240510-AROM reçu — qualité OK" },
                    { d: "06 mai", t: "Paiement",          who: "clarens", desc: "INV-2026-0322 réglée par virement T/T · $5,100" },
                    { d: "02 mai", t: "Commande",          who: "kevin",   desc: "PO-2026-0079 envoyée · 480 unités" },
                    { d: "28 avr.",t: "Négociation MOQ",   who: "kevin",   desc: "MOQ révisé 300 → 200 unités" },
                    { d: "20 avr.",t: "Audit qualité",     who: "carly",   desc: "Audit usine — score 92/100" },
                  ].map((e, i) => (
                    <div key={i} className="row" style={{ padding: "10px 0", borderBottom: "1px solid var(--border-subtle)", gap: 12 }}>
                      <div className="mono" style={{ width: 56, fontSize: 11, color: "var(--text-faint)" }}>{e.d}</div>
                      <Avatar user={e.who} size="sm" />
                      <Badge tone="muted">{e.t}</Badge>
                      <span style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{e.desc}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {newModal}
      {trashModal}
    </div>
  );
};

window.SupplierDetail = SupplierDetail;