{TITLES[tab][0]}

{TITLES[tab][1]}

⭳ Export CSV

{tab === "overview" && } {tab === "dossiers" && setOpenDossier(null)} />} {tab === "bulk" && { bump(); setTab("dossiers"); toast("Dossiers créés"); }} />} {tab === "sites" && } {tab === "gmail" && } {tab === "admin" && }


{d.reference}	{d.site_name \|\| "—"}	{d.client_name}	{d.product}	{fmtMoney(d.amount_claimed, d.currency)}		{d.next_action_type ? (() => { const ad = daysUntil(d.next_action_date); const m = actionMeta(d.next_action_type); return {m.icon} {m.label} · {ad < 0 ? `+${-ad} j` : ad === 0 ? "auj." : "J-" + ad} ; })() : —}	{fmtDate(d.due_date)}{isOverdue(d) && " ⚠"}	{ago(d.updated_at)}

{d.reference}

{d.site_name || "—"}

{d.client_name}

{d.product}

{fmtMoney(d.amount_claimed, d.currency)}

{d.next_action_type ? (() => { const ad = daysUntil(d.next_action_date); const m = actionMeta(d.next_action_type); return {m.icon} {m.label} · {ad < 0 ? `+${-ad} j` : ad === 0 ? "auj." : "J-" + ad} ; })() : —}

{fmtDate(d.due_date)}{isOverdue(d) && " ⚠"}

{ago(d.updated_at)}

{initial ? "Dupliquer le dossier" : "Nouveau dossier"}

setD((prev) => applyOcrFields(prev, f))} /> {error &&

{error}

}

); } function OcrImport({ onApply }) { const [busy, setBusy] = useState(false); const [info, setInfo] = useState(null); const run = async (file) => { setBusy(true); setInfo(null); try { const fd = new FormData(); fd.append("file", file); const r = await fetch("/api/tools/ocr", { method: "POST", body: fd }); const j = await r.json(); if (!r.ok) throw new Error(j.detail || "Analyse impossible"); const f = j.fields; const applied = onApply(f); const found = [ f.amount_claimed && `montant ${f.amount_claimed}`, f.order_ref && `commande ${f.order_ref}`, f.serial_number && `n° série ${f.serial_number}`, ].filter(Boolean); setInfo(found.length ? `Détecté (${j.method}) : ${found.join(", ")}` : `Rien trouvé (${j.method}) — remplis à la main.`); if (found.length) toast("Champs pré-remplis depuis le document"); } catch (e) { setInfo("⚠ " + e.message); } setBusy(false); }; return (

{busy ? "Analyse en cours…" : "📄 Remplir depuis une facture / photo (OCR)"} e.target.files[0] && run(e.target.files[0])} /> {info &&

{info}

}

); } function FormFields({ d, set, sites, onApplyOcr }) { return (

{onApplyOcr && }

Site / marque

Client set("client_name", e.target.value)} />

Produit set("product", e.target.value)} />

Référence commande set("order_ref", e.target.value)} />

Numéro de série set("serial_number", e.target.value)} />

Transporteur set("carrier", e.target.value)} />

N° dossier fabricant set("manufacturer_ref", e.target.value)} />

Motif du litige

set("dispute_reason", e.target.value)} /></div>
      <div className="row3">
        <div className="field"><label>Montant réclamé</label>
          <input type="number" step="0.01" value={d.amount_claimed} onChange={(e) => set("amount_claimed", e.target.value)} /></div>
        <div className="field"><label>Statut</label>
          <select value={d.status} onChange={(e) => set("status", e.target.value)}>
            {STATUSES.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}
          </select></div>
        <div className="field"><label>Date d'échéance</label>
          <input type="date" value={d.due_date || ""} onChange={(e) => set("due_date", e.target.value)} /></div>
      </div>

<div className="section-title">Proxy du dossier <span style={{ color: "var(--faint)", fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>— assigné à cette marque jusqu'à la clôture</span></div>
      <div className="row3">
        <div className="field"><label>Proxy (host:port)</label>
          <input value={d.proxy_server || ""} placeholder="http://host:port ou socks5://host:port"
            onChange={(e) => set("proxy_server", e.target.value)} /></div>
        <div className="field"><label>Identifiant proxy</label>
          <input value={d.proxy_username || ""} placeholder="optionnel"
            onChange={(e) => set("proxy_username", e.target.value)} /></div>
        <div className="field"><label>Mot de passe proxy</label>
          <input type="password" value={d.proxy_password || ""} placeholder="optionnel"
            onChange={(e) => set("proxy_password", e.target.value)} /></div>
      </div>
    </div>
  );
}

/* ----------------------------------------------------- Dossier drawer ---- */
function DossierDrawer({ id, sites, onClose, onChanged }) {
  const [d, setD] = useState(null);
  const [edit, setEdit] = useState(null);
  const [dup, setDup] = useState(false);
  const [note, setNote] = useState("");
  const [error, setError] = useState("");
  const [actionForm, setActionForm] = useState(null); // {action_type, action_date, note}
  const [copilot, setCopilot] = useState(false);
  const [carriersList, setCarriersList] = useState([]);
  const [track, setTrack] = useState(null); // {tracking_number, carrier_code}
  const [launching, setLaunching] = useState(false);
  const [lettersOpen, setLettersOpen] = useState(false);
  const [docCat, setDocCat] = useState("facture");
  const [browserStatus, setBrowserStatus] = useState(null);

if (!d) return <Overlay onClose={onClose}><div className="empty">Chargement…</div></Overlay>;

const site = sites.find((s) => s.id === d.site_id);
  const actionDays = d.next_action_date ? daysUntil(d.next_action_date) : null;
  const carrierName = (code) => (carriersList.find((c) => c.key === code) || {}).name || code;

return (
    <Overlay onClose={onClose}>
      <button className="btn ghost sm close" onClick={onClose}>{Ico.x}</button>
      <h2 className="serif"><SiteLogo name={d.site_name} logo={d.site_logo} size={38} />{d.client_name} <Badge status={d.status} />
        {d.archived_at && <span className="pill" style={{ background: "var(--glass-2)", color: "var(--faint)" }}>🗄 archivé</span>}</h2>
      <div className="muted" style={{ marginLeft: 50 }}>{d.reference} · {d.site_name || "sans site"} · {d.product}</div>

{!edit ? (
        <div>
          <div className="toolbar" style={{ marginTop: 18 }}>
            {site && !CLOSED.includes(d.status) && !d.archived_at &&
              <button className="btn gold sm" onClick={() => setCopilot(true)}>🚀 Soumettre chez {site.name}</button>}
            <button className="btn sm" onClick={() => setEdit({ ...d, due_date: d.due_date || "" })}>{Ico.edit} Modifier</button>
            <button className="btn ghost sm" onClick={() => setLettersOpen(true)}>{Ico.doc} Courriers</button>
            <button className="btn ghost sm" onClick={copySummary}>{Ico.copy} Copier le résumé</button>
            <button className="btn ghost sm" onClick={() => setDup(true)}>⧉ Dupliquer</button>
            <select defaultValue="" onChange={(e) => e.target.value && quickStatus(e.target.value)}
              style={{ background: "var(--glass)", color: "var(--text)", border: "1px solid var(--stroke)", borderRadius: 9, padding: "7px 10px", fontFamily: "inherit", fontSize: 12 }}>
              <option value="">Changer statut…</option>
              {STATUSES.filter((s) => s.key !== d.status).map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}
            </select>
            {d.archived_at
              ? <button className="btn ghost sm" style={{ marginLeft: "auto" }} onClick={unarchive}>↩ Désarchiver</button>
              : <button className="btn ghost sm" style={{ marginLeft: "auto" }} onClick={archive}>🗄 Archiver</button>}
            <button className="btn danger sm" onClick={del}>Supprimer</button>
          </div>

<div className="row3">
            <Info k="Montant réclamé" v={fmtMoney(d.amount_claimed, d.currency)} gold />
            <Info k="Échéance" v={fmtDate(d.due_date)} cls={isOverdue(d) ? "overdue" : ""} />
            <Info k="Transporteur" v={d.carrier || "—"} />
          </div>
          <div className="row3">
            <Info k="Réf. commande" v={d.order_ref || "—"} />
            <Info k="N° série" v={d.serial_number || "—"} />
            <Info k="N° dossier fabricant" v={d.manufacturer_ref || "—"} gold={!!d.manufacturer_ref} />
          </div>
          {d.dispute_reason && <div className="field"><label>Motif du litige</label><div>{d.dispute_reason}</div></div>}

{site && (
            <div className="alert-item" style={{ cursor: "default" }}>
              <SiteLogo name={site.name} logo={site.logo} size={24} />
              <span className="atxt">Parcours <b>{site.flow_type}</b>{site.category ? ` · ${site.category}` : ""} · délai cible <b>{site.sla_days ?? 7} j</b></span>
              {site.support_url && <a href={site.support_url} target="_blank" rel="noreferrer">Ouvrir le support ↗</a>}
            </div>
          )}

{site && !CLOSED.includes(d.status) && !d.archived_at && browserStatus?.reason === "hosted" && (
            <div className="alert-item" style={{ cursor: "default" }}>
              <span className="adot" style={{ background: "var(--faint)" }} />
              <span className="atxt faint">{Ico.globe} Navigateur + proxy — disponible uniquement sur l'app installée en local.</span>
            </div>
          )}
          {site && !CLOSED.includes(d.status) && !d.archived_at && browserStatus && browserStatus.reason !== "hosted" && (
            <div className="alert-item" style={{ cursor: "default", borderColor: d.proxy_server ? "rgba(232,194,104,.35)" : "var(--stroke)" }}>
              <span className="adot" style={{ background: d.proxy_server ? "var(--gold)" : "var(--faint)" }} />
              <span className="atxt">
                {d.proxy_server
                  ? <>Proxy assigné : <b style={{ color: "var(--gold)" }}>{d.proxy_server}</b>{d.proxy_username ? ` (${d.proxy_username})` : ""}</>
                  : <span className="faint">Aucun proxy — ajoute-le via « Modifier ».</span>}
              </span>
              <button className="btn gold sm" onClick={launchBrowser} disabled={launching}>
                {launching ? "Ouverture…" : (<>{Ico.globe} Ouvrir le navigateur</>)}
              </button>
            </div>
          )}

<div className="section-title">Prochaine action</div>
          {!actionForm && d.next_action_type && (
            <div className="alert-item" style={{ cursor: "default" }}>
              <span className="adot" style={{ background: actionDays < 0 ? ST_COLOR.refuse : actionDays === 0 ? ST_COLOR.rembourse : "var(--accent)" }} />
              <span className="atxt">
                <b>{actionMeta(d.next_action_type).icon} {actionMeta(d.next_action_type).label}</b> le {fmtDate(d.next_action_date)}
                {actionDays < 0 && <span className="overdue"> — {-actionDays} j de retard</span>}
                {actionDays === 0 && <span style={{ color: ST_COLOR.rembourse }}> — aujourd'hui</span>}
                {d.next_action_note && <span className="faint"> · {d.next_action_note}</span>}
              </span>
              <button className="btn sm" onClick={doneAction}>{Ico.check} Fait</button>
              <button className="btn ghost sm" onClick={() => setActionForm({ action_type: d.next_action_type, action_date: d.next_action_date, note: d.next_action_note || "" })}>{Ico.edit}</button>
            </div>
          )}
          {!actionForm && !d.next_action_type && (
            <div className="toolbar" style={{ margin: "4px 0" }}>
              <span className="faint">Aucune action planifiée.</span>
              <button className="btn ghost sm" onClick={() => setActionForm({ action_type: "relancer", action_date: todayISO(), note: "" })}>+ Planifier une action</button>
              {site && <button className="btn gold sm" onClick={() => setActionForm({ action_type: "relancer", action_date: plusDaysISO(site.sla_days ?? 7), note: "" })}>📣 Relance à J+{site.sla_days ?? 7} (SLA)</button>}
            </div>
          )}
          {actionForm && (
            <div>
              <div className="row3">
                <div className="field"><label>Action</label>
                  <select value={actionForm.action_type} onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>
                    {ACTION_TYPES.map((a) => <option key={a.key} value={a.key}>{a.icon} {a.label}</option>)}
                  </select></div>
                <div className="field"><label>Date</label>
                  <input type="date" value={actionForm.action_date} onChange={(e) => setActionForm({ ...actionForm, action_date: e.target.value })} /></div>
                <div className="field"><label>Note</label>
                  <input value={actionForm.note} placeholder="optionnel" onChange={(e) => setActionForm({ ...actionForm, note: e.target.value })} /></div>
              </div>
              <div className="toolbar" style={{ marginTop: 2 }}>
                <button className="btn sm" onClick={saveAction}>Planifier</button>
                <button className="btn ghost sm" onClick={() => setActionForm(null)}>Annuler</button>
              </div>
            </div>
          )}

<div className="section-title">Suivi colis</div>
          {!track && d.tracking_number && (
            <div className="alert-item" style={{ cursor: "default" }}>
              <span className="adot" style={{ background: "var(--accent)" }} />
              <span className="atxt"><b>{carrierName(d.carrier_code) || "Transporteur"}</b> · {d.tracking_number}</span>
              <a className="btn sm" href={trackUrl(d.carrier_code, d.tracking_number)} target="_blank" rel="noreferrer">Suivre ↗</a>
              <button className="btn ghost sm" onClick={() => setTrack({ tracking_number: d.tracking_number, carrier_code: d.carrier_code || "" })}>{Ico.edit}</button>
            </div>
          )}
          {!track && !d.tracking_number && (
            <button className="btn ghost sm" onClick={() => setTrack({ tracking_number: "", carrier_code: "" })}>+ Ajouter un n° de suivi</button>
          )}
          {track && (
            <div>
              <div className="row2">
                <div className="field"><label>N° de suivi</label>
                  <input value={track.tracking_number} autoFocus
                    onChange={(e) => setTrack({ ...track, tracking_number: e.target.value })}
                    onBlur={(e) => detectCarrier(e.target.value)} placeholder="colle le n° de suivi" /></div>
                <div className="field"><label>Transporteur (auto-détecté)</label>
                  <select value={track.carrier_code} onChange={(e) => setTrack({ ...track, carrier_code: e.target.value })}>
                    <option value="">— choisir —</option>
                    {carriersList.map((c) => <option key={c.key} value={c.key}>{c.name}</option>)}
                  </select></div>
              </div>
              <div className="toolbar" style={{ marginTop: 2 }}>
                <button className="btn sm" onClick={saveTracking}>Enregistrer</button>
                {track.tracking_number && trackUrl(track.carrier_code, track.tracking_number) &&
                  <a className="btn ghost sm" href={trackUrl(track.carrier_code, track.tracking_number)} target="_blank" rel="noreferrer">Tester le lien ↗</a>}
                <button className="btn ghost sm" onClick={() => setTrack(null)}>Annuler</button>
              </div>
            </div>
          )}

<div className="section-title">Documents du dossier</div>
          {d.serial_number &&
            <div className="faint" style={{ fontSize: 12, marginBottom: 8 }}>🔢 N° de série (saisi) : <b style={{ color: "var(--text)" }}>{d.serial_number}</b> — inclus automatiquement dans les courriers.</div>}
          {d.attachments.length === 0 && <div className="faint">Aucun document. Ajoute la facture, des photos, l'étiquette…</div>}
          {DOC_CATS.map((cat) => {
            const items = d.attachments.filter((a) => (a.category || "autre") === cat.key);
            if (items.length === 0) return null;
            return (
              <div key={cat.key} style={{ marginBottom: 8 }}>
                <div className="faint" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".6px", marginBottom: 3 }}>{cat.icon} {cat.label} ({items.length})</div>
                {items.map((a) => (
                  <div key={a.id} className="alert-item" style={{ cursor: "default", padding: "7px 10px" }}>
                    <span className="atxt"><a href={"/api/dossiers/attachments/" + a.id}>{a.filename}</a> <span className="faint">({Math.round(a.size / 1024)} Ko)</span>
                      {a.source && a.source.startsWith("gmail:") && <span className="pill" style={{ background: "var(--gold-soft)", color: "var(--gold)", marginLeft: 6 }}>📧 reçu par email</span>}</span>
                    <button className="btn ghost sm" onClick={() => deleteAttachment(a.id)} title="Supprimer">{Ico.trash}</button>
                  </div>
                ))}
              </div>
            );
          })}
          <div className="toolbar" style={{ marginTop: 6 }}>
            <select value={docCat} onChange={(e) => setDocCat(e.target.value)}
              style={{ background: "var(--glass)", color: "var(--text)", border: "1px solid var(--stroke)", borderRadius: 9, padding: "8px 10px", fontFamily: "inherit", fontSize: 12.5 }}>
              {DOC_CATS.map((c) => <option key={c.key} value={c.key}>{c.icon} {c.label}</option>)}
            </select>
            <label className="btn ghost sm" style={{ display: "inline-block" }}>
              + Ajouter un document
              <input type="file" style={{ display: "none" }} onChange={(e) => e.target.files[0] && upload(e.target.files[0], docCat)} />
            </label>
          </div>

{d.emails && d.emails.length > 0 && (
            <div>
              <div className="section-title">Emails reçus ({d.emails.length})</div>
              {d.emails.map((e) => (
                <div className="alert-item" key={e.id} style={{ cursor: "default", alignItems: "flex-start" }}>
                  <span className="adot" style={{ background: "var(--accent)", marginTop: 6 }} />
                  <span className="atxt" style={{ whiteSpace: "normal" }}>
                    <b>{e.subject || "(sans objet)"}</b> <span className="faint">— {e.sender}{e.received_at ? " · " + fmtDateTime(e.received_at) : ""}</span>
                    <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>{e.snippet}</div>
                  </span>
                  <span className="pill" style={{ flexShrink: 0 }}>{e.matched_on}</span>
                </div>
              ))}
            </div>
          )}

<div className="section-title">Historique des échanges</div>
          <div className="note-input">
            <input placeholder="Ajouter une note… (Entrée pour valider)" value={note} onChange={(e) => setNote(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addNote()} />
            <button className="btn sm" onClick={addNote}>Ajouter</button>
          </div>
          <ul className="hist">
            {d.history.map((h) => (
              <li key={h.id}><div className="when">{fmtDateTime(h.created_at)} · {h.author}</div><div className="what">{h.content}</div></li>
            ))}
          </ul>
        </div>
      ) : (
        <div style={{ marginTop: 18 }}>
          <FormFields d={edit} set={(k, v) => setEdit({ ...edit, [k]: v })} sites={sites}
            onApplyOcr={(f) => setEdit((prev) => applyOcrFields(prev, f))} />
          {error && <div className="err">{error}</div>}
          <div className="toolbar">
            <button className="btn" onClick={saveEdit}>Enregistrer</button>
            <button className="btn ghost" onClick={() => { setEdit(null); setError(""); }}>Annuler</button>
          </div>
        </div>
      )}
      {copilot && site &&
        <SubmitCopilot dossier={d} site={site} onClose={() => setCopilot(false)}
          onDone={async () => { setCopilot(false); await load(); onChanged(); }} />}
      {lettersOpen &&
        <LetterModal dossier={d} site={site} onClose={() => setLettersOpen(false)}
          onSent={async () => { await load(); onChanged(); }} />}
      {dup && <DossierForm sites={sites}
        initial={{ ...EMPTY, site_id: d.site_id || "", client_name: d.client_name, product: d.product, order_ref: d.order_ref || "", serial_number: "", dispute_reason: d.dispute_reason || "", carrier: d.carrier || "", amount_claimed: d.amount_claimed, currency: d.currency, status: "ouvert", due_date: "" }}
        onClose={() => setDup(false)}
        onSaved={() => { setDup(false); onChanged(); toast("Dossier dupliqué"); }} />}
    </Overlay>
  );
}
function Info({ k, v, cls, gold }) {
  return <div className="field"><label>{k}</label><div className={cls} style={gold ? { color: "var(--gold)", fontWeight: 650 } : null}>{v}</div></div>;
}

/* -------------------------------------------------------- Bulk create ---- */
function emptyBulkRow() { return { site_id: "", client_name: "", product: "", order_ref: "", serial_number: "", amount_claimed: "", status: "ouvert", due_date: "" }; }

function BulkCreate({ sites, onDone }) {
  const [rows, setRows] = useState(Array.from({ length: 3 }, emptyBulkRow));
  const [error, setError] = useState("");
  const [importResult, setImportResult] = useState(null);

const setCell = (i, k, v) => setRows(rows.map((r, idx) => (idx === i ? { ...r, [k]: v } : r)));
  const addRow = () => setRows([...rows, emptyBulkRow()]);
  const removeRow = (i) => setRows(rows.filter((_, idx) => idx !== i));

return (
    <div>
      <div className="panel" style={{ marginBottom: 14 }}>
        <h3>Saisie manuelle <span className="hint">plusieurs dossiers d'un coup</span></h3>
        <div style={{ overflowX: "auto" }}>
          <table className="bulk-table">
            <thead><tr>
              <th>Site</th><th className="req">Client</th><th className="req">Produit</th><th>Réf. cmd</th>
              <th>N° série</th><th>Montant</th><th>Statut</th><th>Échéance</th><th></th>
            </tr></thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td><select value={r.site_id} onChange={(e) => setCell(i, "site_id", e.target.value)}>
                    <option value="">—</option>
                    {sites.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
                  </select></td>
                  <td><input value={r.client_name} onChange={(e) => setCell(i, "client_name", e.target.value)} /></td>
                  <td><input value={r.product} onChange={(e) => setCell(i, "product", e.target.value)} /></td>
                  <td><input value={r.order_ref} onChange={(e) => setCell(i, "order_ref", e.target.value)} /></td>
                  <td><input value={r.serial_number} onChange={(e) => setCell(i, "serial_number", e.target.value)} /></td>
                  <td><input type="number" step="0.01" value={r.amount_claimed} onChange={(e) => setCell(i, "amount_claimed", e.target.value)} /></td>
                  <td><select value={r.status} onChange={(e) => setCell(i, "status", e.target.value)}>
                    {STATUSES.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}
                  </select></td>
                  <td><input type="date" value={r.due_date} onChange={(e) => setCell(i, "due_date", e.target.value)} /></td>
                  <td><button className="btn ghost sm" onClick={() => removeRow(i)} title="Supprimer la ligne">{Ico.x}</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="toolbar">
          <button className="btn ghost" onClick={addRow}>+ Ligne</button>
          <button className="btn" onClick={submit}>Créer les dossiers</button>
          {error && <span className="err">{error}</span>}
        </div>
      </div>

<div className="panel">
        <h3>Import CSV</h3>
        <div className="dropzone">
          <p style={{ margin: "0 0 12px" }}>Colonnes attendues (séparateur <b>;</b> ou <b>,</b>) :<br />
            <code style={{ fontSize: 11.5 }}>site;client_name;product;order_ref;serial_number;dispute_reason;carrier;amount_claimed;currency;status;due_date</code></p>
          <label className="btn" style={{ display: "inline-block" }}>
            Choisir un fichier CSV
            <input type="file" accept=".csv,text/csv" style={{ display: "none" }} onChange={(e) => e.target.files[0] && importCsv(e.target.files[0])} />
          </label>
          {" "}
          <a className="linkish" href="/api/dossiers/csv/template" download="modele_rma.csv">Télécharger le modèle</a>
        </div>
        {importResult && (
          <div style={{ marginTop: 12 }}>
            <div className="ok-msg">{importResult.created} dossier(s) importé(s).</div>
            {importResult.errors && importResult.errors.length > 0 &&
              <ul className="err">{importResult.errors.map((e, i) => <li key={i}>{e}</li>)}</ul>}
          </div>
        )}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------- Gmail ---- */
function GmailView({ onChange, onOpen }) {
  const [st, setSt] = useState(null);
  const [matches, setMatches] = useState([]);
  const [scanning, setScanning] = useState(false);
  const [scanResult, setScanResult] = useState(null);
  const [error, setError] = useState("");
  const [setupOpen, setSetupOpen] = useState(false);

const load = useCallback(async () => {
    const s = await api.get("/api/gmail/status");
    setSt(s);
    setMatches(await api.get("/api/gmail/matches?limit=25"));
    setSetupOpen((prev) => prev || !s.accounts || s.accounts.length === 0);
  }, []);
  useEffect(() => { load(); }, [load]);

if (!st) return <div className="empty">Chargement…</div>;

const hasAny = st.accounts && st.accounts.length > 0;
  const canScan = st.accounts && st.accounts.some((a) => a.valid);
  const addAccount = () => { if (st.has_credentials) authorize(); else setSetupOpen(true); };

return (
    <div>
      {/* --- Boîtes connectées : l'essentiel, en premier --- */}
      <div className="panel" style={{ marginBottom: 13 }}>
        <h3>Boîtes connectées {hasAny && <span className="hint">{st.accounts.length} boîte{st.accounts.length > 1 ? "s" : ""} · lecture seule sauf envoi autorisé</span>}</h3>

{!hasAny && (
          <div className="empty" style={{ padding: "26px 10px" }}>
            <div className="big">📭</div>
            Aucune boîte Gmail connectée pour l'instant.
            <div style={{ marginTop: 12 }}>
              <button className="btn" onClick={addAccount}>+ Connecter une boîte Gmail</button>
            </div>
          </div>
        )}

{hasAny && st.accounts.map((a) => (
          <div className="alert-item" key={a.email} style={{ cursor: "default" }}>
            <span className="adot" style={{ background: !a.valid ? "var(--st-refuse)" : a.can_send ? "var(--st-rembourse)" : "var(--st-en_attente)" }} />
            <span className="atxt"><b style={{ color: a.valid ? "var(--gold)" : "inherit" }}>{a.email}</b>
              {!a.valid && <span className="err" style={{ fontSize: 12 }}> — expiré, reconnecte</span>}
              {a.valid && !a.can_send && <span className="duesoon" style={{ fontSize: 12 }}> — lecture seule (envoi non autorisé)</span>}
              {a.valid && a.can_send && <span className="faint" style={{ fontSize: 12 }}> — lecture + envoi ✓</span>}</span>
            {!a.valid && <button className="btn sm" onClick={authorize}>Reconnecter</button>}
            {a.valid && !a.can_send && <button className="btn gold sm" onClick={authorize}>{Ico.lockOpen} Autoriser l'envoi</button>}
            <button className="btn ghost sm" onClick={() => disconnect(a.email)}>Déconnecter</button>
          </div>
        ))}

{hasAny && (
          <div className="toolbar">
            <button className="btn ghost sm" onClick={addAccount}>+ Ajouter une autre boîte</button>
          </div>
        )}
        {error && <div className="err">{error}</div>}
      </div>

{/* --- Scan & synchronisation : ses propres boutons, séparés --- */}
      {hasAny && (
        <div className="panel" style={{ marginBottom: 13 }}>
          <h3>Scan & synchronisation <span className="hint">auto toutes les 15 min</span></h3>
          <div className="toolbar" style={{ marginTop: 0 }}>
            <button className="btn gold" onClick={scan} disabled={scanning || !canScan}>{scanning ? "Scan en cours…" : (<>{Icon.search} Scanner toutes les boîtes</>)}</button>
          </div>
          {st.last_scan &&
            <p className="muted" style={{ fontSize: 12, margin: "10px 0 0" }}>Dernier scan : {new Date(st.last_scan).toLocaleString("fr-FR")} — {st.last_scanned} analysé(s), {st.last_matched} rattaché(s).</p>}
          {scanResult && (
            <div className="ok-msg" style={{ marginTop: 8 }}>
              {scanResult.scanned} email(s) analysé(s), {scanResult.matched} rattaché(s).
              {scanResult.new_matches.map((m, i) => <div key={i} className="muted" style={{ fontSize: 12 }}>→ {m.dossier} · « {m.subject} » ({m.matched_on}{m.account ? ` · ${m.account}` : ""})</div>)}
            </div>
          )}
        </div>
      )}

{/* --- Ajouter une boîte / configuration : replié une fois connecté --- */}
      <div className="panel" style={{ marginBottom: 13 }}>
        <div className="toolbar" style={{ marginTop: 0, cursor: "pointer" }} onClick={() => setSetupOpen((o) => !o)}>
          <h3 style={{ margin: 0 }}>{st.has_credentials ? "Ajouter / configurer une boîte" : "Connecter Gmail — configuration (une fois)"}</h3>
          <button className="btn ghost sm" style={{ marginLeft: "auto" }}>{setupOpen ? "Réduire ▲" : "Déplier ▼"}</button>
        </div>

{setupOpen && (
          <div style={{ marginTop: 14 }}>
            {!st.has_credentials && (
              <div>
                <p className="muted" style={{ marginTop: 0 }}>Une seule fois, ~10 minutes : crée tes identifiants Google (gratuit) puis dépose le fichier ici.</p>
                <ol style={{ lineHeight: 2, margin: "0 0 14px", paddingLeft: 20 }}>
                  <li>Ouvre <a href="https://console.cloud.google.com/projectcreate" target="_blank" rel="noreferrer">console.cloud.google.com</a> → crée un projet (nom libre, ex. « RMA Dashboard »).</li>
                  <li>Menu <b>API et services → Bibliothèque</b> → cherche <b>Gmail API</b> → <b>Activer</b>.</li>
                  <li><b>Écran de consentement OAuth</b> → type <b>Externe</b> → renseigne le nom et ton email → ajoute ton adresse comme <b>utilisateur test</b>.</li>
                  <li><b>Identifiants → Créer des identifiants → ID client OAuth</b> → type <b>Application Web</b>.</li>
                  <li><b>Important</b> — dans <b>« URI de redirection autorisés »</b>, ajoute exactement :<br />
                    <code style={{ fontSize: 11.5 }}>{window.location.origin}/api/gmail/oauth2callback</code></li>
                  <li><b>Télécharger le JSON</b>, puis dépose-le ci-dessous :</li>
                </ol>
                <label className="btn" style={{ display: "inline-block" }}>
                  {Ico.doc} Déposer credentials.json
                  <input type="file" accept=".json,application/json" style={{ display: "none" }}
                    onChange={(e) => e.target.files[0] && uploadCreds(e.target.files[0])} />
                </label>
              </div>
            )}

{st.has_credentials && (
              <div>
                <p className="muted" style={{ marginTop: 0 }}>Credentials en place. Clique pour connecter une boîte supplémentaire (même procédure Google à chaque fois).</p>
                <div className="toolbar" style={{ marginTop: 0 }}>
                  <button className="btn" onClick={authorize}>+ Ajouter une boîte Gmail</button>
                  <label className="btn ghost sm" style={{ display: "inline-block" }}>
                    Remplacer credentials.json
                    <input type="file" accept=".json" style={{ display: "none" }}
                      onChange={(e) => e.target.files[0] && uploadCreds(e.target.files[0])} />
                  </label>
                </div>
              </div>
            )}

<div className="alert-item" style={{ cursor: "default", borderColor: "rgba(245,166,35,.28)", marginTop: 12 }}>
              <span className="adot" style={{ background: "var(--st-en_attente)" }} />
              <span className="atxt" style={{ whiteSpace: "normal", fontSize: 12 }}>
                À la connexion : écran Google → <b>Paramètres avancés → Accéder quand même</b>. En mode « Test », l'accès expire tous les 7 jours (reclique « Reconnecter »).
              </span>
            </div>
          </div>
        )}
      </div>

{/* --- Emails rattachés --- */}
      <div className="panel">
        <h3>Derniers emails rattachés</h3>
        {matches.length === 0 && <div className="faint">Aucun pour l'instant. Lance un scan une fois connecté.</div>}
        {matches.map((m) => (
          <div className="alert-item" key={m.id} onClick={() => onOpen(m.dossier_id)}>
            <span className="adot" style={{ background: "var(--accent)" }} />
            <span className="atxt">
              <b>{m.dossier_ref}</b> · {m.client} — « {m.subject} » <span className="faint">de {m.sender}{m.account ? ` → ${m.account}` : ""}</span>
            </span>
            <span className="pill">{m.matched_on}</span>
            <span className="awhen faint">{m.received_at ? ago(m.received_at) : ""}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------------------------------------------------------- Sites config ---- */
function SitesConfig({ sites, onChange, user }) {
  const isAdmin = !!user?.is_admin;
  const [editing, setEditing] = useState(null);
  const [creating, setCreating] = useState(false);
  const [q, setQ] = useState("");
  // Par défaut on tombe sur la première catégorie de la liste, pas sur "Toutes".
  const [cat, setCat] = useState(() => {
    const set = new Set(sites.map((s) => s.category).filter(Boolean));
    const first = [...set].sort()[0];
    return first || "";
  });

const categories = useMemo(() => {
    const set = new Set(sites.map((s) => s.category).filter(Boolean));
    return [...set].sort();
  }, [sites]);

const filtered = sites.filter((s) =>
    (!q || s.name.toLowerCase().includes(q.toLowerCase()) || (s.brand_group || "").toLowerCase().includes(q.toLowerCase())) &&
    (!cat || s.category === cat));

return (
    <div>
      <div className="filters">
        <input className="grow" placeholder={`Rechercher parmi ${sites.length} marques…`} value={q} onChange={(e) => setQ(e.target.value)} />
        {isAdmin && <button className="btn sm" onClick={() => setCreating(true)}>+ Ajouter une marque</button>}
      </div>
      <div className="filters" style={{ gap: 7 }}>
        {categories.map((c) => (
          <button key={c} className={"chip" + (cat === c ? " active" : "")} onClick={() => setCat(cat === c ? "" : c)}>
            {c} ({sites.filter((s) => s.category === c).length})
          </button>
        ))}
        <button className={"chip" + (!cat ? " active" : "")} onClick={() => setCat("")}>Toutes ({sites.length})</button>
      </div>

<div className="grid">
        {filtered.map((s) => (
          <div className="scard" key={s.id} style={{ opacity: s.active ? 1 : 0.5 }}>
            {s.open_count > 0 && <span className="open-pill">{s.open_count} en cours</span>}
            <div className="shead">
              <SiteLogo name={s.name} logo={s.logo} size={42} />
              <div>
                <h3>{s.name}</h3>
                <div className="meta">{s.category || "—"}{s.brand_group ? ` · groupe ${s.brand_group}` : ""}</div>
              </div>
            </div>
            <div className="meta">Parcours {s.flow_type} · {s.contact_method === "web_form" ? "formulaire web" : s.contact_method}</div>
            <div className="foot">
              {s.support_url && <a href={s.support_url} target="_blank" rel="noreferrer" style={{ fontSize: 12 }}>Support ↗</a>}
              {isAdmin && <button className="btn ghost sm" style={{ marginLeft: "auto" }} onClick={() => setEditing(s)}>Éditer</button>}
            </div>
          </div>
        ))}
      </div>
      {filtered.length === 0 && <div className="empty"><div className="big">🔎</div>Aucune marque ne correspond.</div>}

{(editing || creating) &&
        <SiteForm site={editing} onClose={() => { setEditing(null); setCreating(false); }}
          onSaved={() => { setEditing(null); setCreating(false); onChange(); toast("Site enregistré"); }} />}
    </div>
  );
}

return (
    <Overlay center onClose={onClose}>
      <button className="btn ghost sm close" onClick={onClose}>{Ico.x}</button>
      <h2><SiteLogo name={s.name} logo={s.logo} size={34} />{site ? "Éditer la marque" : "Nouvelle marque"}</h2>
      <div style={{ height: 14 }} />
      <div className="row3">
        <div className="field"><label className="req">Nom</label><input value={s.name} onChange={(e) => set("name", e.target.value)} /></div>
        <div className="field"><label>Groupe</label><input value={s.brand_group || ""} onChange={(e) => set("brand_group", e.target.value)} /></div>
        <div className="field"><label>Catégorie</label><input value={s.category || ""} onChange={(e) => set("category", e.target.value)} placeholder="Informatique, Audio…" /></div>
      </div>
      <div className="row2">
        <div className="field"><label>Domaine web (pour le logo)</label><input value={s.domain || ""} onChange={(e) => set("domain", e.target.value)} placeholder="dell.com" /></div>
        <div className="field"><label>Fichier logo</label><input value={s.logo || ""} onChange={(e) => set("logo", e.target.value)} placeholder="dell.png (dans frontend/logos/)" /></div>
      </div>
      <div className="row2">
        <div className="field"><label>Type de flux</label>
          <select value={s.flow_type} onChange={(e) => set("flow_type", e.target.value)}>
            <option value="dynamique">Dynamique (compte / n° série)</option>
            <option value="statique">Statique (URL de formulaire fixe)</option>
            <option value="email">Email</option>
            <option value="telephone">Téléphone</option>
          </select></div>
        <div className="field"><label>Méthode de contact</label>
          <select value={s.contact_method} onChange={(e) => set("contact_method", e.target.value)}>
            <option value="web_form">Formulaire web</option>
            <option value="email">Email</option>
            <option value="phone">Téléphone</option>
          </select></div>
      </div>
      <div className="field"><label>URL support</label><input value={s.support_url || ""} onChange={(e) => set("support_url", e.target.value)} /></div>
      <div className="field"><label>URL d'entrée du parcours RMA</label><input value={s.entry_url || ""} onChange={(e) => set("entry_url", e.target.value)} /></div>
      <div className="row2">
        <div className="field"><label>Email support</label><input value={s.contact_email || ""} onChange={(e) => set("contact_email", e.target.value)} /></div>
        <div className="field"><label>Téléphone support</label><input value={s.contact_phone || ""} onChange={(e) => set("contact_phone", e.target.value)} /></div>
      </div>
      <div className="row2">
        <div className="field"><label>Champs requis (virgules)</label>
          <input value={Array.isArray(s.required_fields) ? s.required_fields.join(", ") : s.required_fields}
            onChange={(e) => set("required_fields", e.target.value.split(",").map((x) => x.trim()).filter(Boolean))} /></div>
        <div className="field"><label>Rang de fréquence (1 = plus fréquent)</label>
          <input type="number" value={s.frequency_rank} onChange={(e) => set("frequency_rank", e.target.value)} /></div>
      </div>
      <div className="row2">
        <div className="field"><label>Délai de réponse cible — SLA (jours)</label>
          <input type="number" min="1" value={s.sla_days ?? 7} onChange={(e) => set("sla_days", Number(e.target.value) || 7)} /></div>
        <div />
      </div>
      <div className="field"><label>Notes</label><textarea rows="2" value={s.notes || ""} onChange={(e) => set("notes", e.target.value)} /></div>
      <div className="field"><label style={{ display: "flex", alignItems: "center", gap: 8, textTransform: "none", fontSize: 13 }}>
        <input type="checkbox" style={{ width: "auto" }} checked={s.active} onChange={(e) => set("active", e.target.checked)} /> Marque active</label></div>
      {error && <div className="err">{error}</div>}
      <div className="toolbar"><button className="btn" onClick={save}>Enregistrer</button></div>
    </Overlay>
  );
}

/* ------------------------------------------------- Copilote de soumission */
function SubmitCopilot({ dossier, site, onClose, onDone }) {
  const [checked, setChecked] = useState({});
  const [copied, setCopied] = useState({});
  const [mref, setMref] = useState(dossier.manufacturer_ref || "");
  const [editingCk, setEditingCk] = useState(null); // texte de la checklist en édition
  const [checklist, setChecklist] = useState(site.checklist || []);
  const [proxy, setProxy] = useState({
    proxy_server: dossier.proxy_server || "", proxy_username: dossier.proxy_username || "", proxy_password: dossier.proxy_password || "",
  });
  const [launching, setLaunching] = useState(false);
  const [browserStatus, setBrowserStatus] = useState(null);
  useEffect(() => { api.get("/api/dossiers/browser/status").then(setBrowserStatus); }, []);

useEffect(() => { api.post(`/api/dossiers/${dossier.id}/submission/start`, {}); }, [dossier.id]);

const FIELDS = [
    ["Référence interne", dossier.reference],
    ["Client", dossier.client_name],
    ["Produit", dossier.product],
    ["Réf. commande", dossier.order_ref],
    ["N° de série", dossier.serial_number],
    ["Motif du litige", dossier.dispute_reason],
    ["Montant réclamé", dossier.amount_claimed ? String(dossier.amount_claimed).replace(".", ",") : null],
    ["Transporteur", dossier.carrier],
  ].filter(([, v]) => v);

const doneSteps = checklist.filter((_, i) => checked[i]).length;

return (
    <Overlay center onClose={cancel}>
      <button className="btn ghost sm close" onClick={cancel}>{Ico.x}</button>
      <h2><SiteLogo name={site.name} logo={site.logo} size={36} />Soumettre chez {site.name}</h2>
      <div className="muted" style={{ margin: "4px 0 14px 48px" }}>
        {dossier.reference} · {dossier.client_name} — {dossier.product}
      </div>

<div className="section-title" style={{ marginTop: 6 }}>Navigateur & proxy (propre à ce dossier)</div>
      <div className="row3">
        <div className="field"><label>Proxy (host:port)</label>
          <input value={proxy.proxy_server} placeholder="http://host:port ou socks5://host:port"
            onChange={(e) => setProxy({ ...proxy, proxy_server: e.target.value })} /></div>
        <div className="field"><label>Identifiant proxy</label>
          <input value={proxy.proxy_username} placeholder="optionnel"
            onChange={(e) => setProxy({ ...proxy, proxy_username: e.target.value })} /></div>
        <div className="field"><label>Mot de passe proxy</label>
          <input type="password" value={proxy.proxy_password} placeholder="optionnel"
            onChange={(e) => setProxy({ ...proxy, proxy_password: e.target.value })} /></div>
      </div>
      <div className="toolbar" style={{ marginTop: 2 }}>
        {browserStatus?.reason !== "hosted" && (
          <button className="btn" onClick={launchBrowser} disabled={launching}>
            {launching ? "Ouverture…" : (<>{Ico.globe} Ouvrir le navigateur{proxy.proxy_server ? " (proxy)" : ""}</>)}
          </button>
        )}
        {site.entry_url && <a className="btn ghost sm" href={site.entry_url} target="_blank" rel="noreferrer">↗ Ouvrir dans mon navigateur</a>}
        <span className="faint" style={{ fontSize: 12 }}>
          {browserStatus?.reason === "hosted"
            ? "Le lancement Chromium+proxy est réservé à l'app installée en local — utilise « Ouvrir dans mon navigateur » ici."
            : "Chromium visible via ton proxy. Connexion, CAPTCHA et validation finale restent à ta main."}
        </span>
      </div>

<div className="section-title">Parcours {site.name} — {doneSteps}/{checklist.length} étapes
        {editingCk == null && <button className="linkish" style={{ marginLeft: 10, fontSize: 11 }} onClick={() => setEditingCk(checklist.join("\n"))}>{Ico.edit} modifier</button>}
      </div>
      {editingCk == null ? (
        <div>
          {checklist.map((step, i) => (
            <label key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "6px 2px", cursor: "pointer", opacity: checked[i] ? 0.55 : 1 }}>
              <input type="checkbox" checked={!!checked[i]} onChange={(e) => setChecked({ ...checked, [i]: e.target.checked })} style={{ marginTop: 3 }} />
              <span style={{ textDecoration: checked[i] ? "line-through" : "none", fontSize: 13.5 }}>{step}</span>
            </label>
          ))}
        </div>
      ) : (
        <div>
          <textarea rows={Math.max(6, checklist.length + 1)} style={{ width: "100%", background: "var(--glass)", border: "1px solid var(--stroke)", color: "var(--text)", borderRadius: 10, padding: 10, fontFamily: "inherit", fontSize: 13 }}
            value={editingCk} onChange={(e) => setEditingCk(e.target.value)} placeholder="Une étape par ligne" />
          <div className="toolbar" style={{ marginTop: 6 }}>
            <button className="btn sm" onClick={saveChecklist}>Enregistrer la checklist</button>
            <button className="btn ghost sm" onClick={() => setEditingCk(null)}>Annuler</button>
            <span className="faint" style={{ fontSize: 11.5 }}>Vider tout = revenir à la checklist par défaut.</span>
          </div>
        </div>
      )}

<div className="section-title">Champs du dossier — clique pour copier</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        {FIELDS.map(([label, val]) => (
          <button key={label} className="alert-item" style={{ width: "100%", textAlign: "left", background: copied[label] ? "rgba(52,211,153,.07)" : "var(--glass-2)", border: "1px solid " + (copied[label] ? "rgba(52,211,153,.35)" : "var(--stroke)"), fontFamily: "inherit", color: "var(--text)" }}
            onClick={() => copy(label, val)}>
            <span className="atxt" style={{ whiteSpace: "normal" }}>
              <span className="faint" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".6px", display: "block" }}>{label} {copied[label] && "✓"}</span>
              <b style={{ fontSize: 13 }}>{String(val).slice(0, 80)}</b>
            </span>
            <span className="pill">{Ico.copy}</span>
          </button>
        ))}
      </div>

<div className="section-title">Terminer</div>
      <div className="row2">
        <div className="field"><label>N° de dossier fabricant (obtenu à la fin du parcours)</label>
          <input value={mref} onChange={(e) => setMref(e.target.value)} placeholder="ex. SR-123456789" /></div>
        <div className="field" style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
          <button className="btn gold" onClick={complete}>✅ Soumission terminée</button>
          <button className="btn ghost" onClick={cancel}>Abandonner</button>
        </div>
      </div>
      <div className="faint" style={{ fontSize: 12 }}>
        À la validation : statut → <b>en attente</b>, action « ⏳ attendre réponse » planifiée à J+{site.sla_days ?? 7},
        n° fabricant utilisé pour détecter les emails de réponse (Gmail).
      </div>
    </Overlay>
  );
}

/* ------------------------------------------------------- Courriers ------- */
function LetterModal({ dossier, site, onClose, onSent }) {
  const [templates, setTemplates] = useState([]);
  const [key, setKey] = useState("");
  const [rendered, setRendered] = useState(null);   // {subject, body, to}
  const [editTpl, setEditTpl] = useState(null);     // {subject, body} du modèle en édition
  const [accounts, setAccounts] = useState([]);     // boîtes Gmail (avec can_send)
  const [sendAccount, setSendAccount] = useState("");
  const [toAddr, setToAddr] = useState("");
  const [selAtts, setSelAtts] = useState({});       // {attachmentId: true}
  const [sending, setSending] = useState(false);

useEffect(() => {
    api.get("/api/letters/templates").then((t) => { setTemplates(t); if (t[0]) setKey(t[0].key); });
    api.get("/api/gmail/status").then((s) => {
      const accs = s.accounts || [];
      setAccounts(accs);
      const firstSendable = accs.find((a) => a.valid && a.can_send);
      if (firstSendable) setSendAccount(firstSendable.email);
    });
  }, []);

const currentTpl = templates.find((t) => t.key === key);

return (
    <Overlay center onClose={onClose}>
      <button className="btn ghost sm close" onClick={onClose}>{Ico.x}</button>
      <h2>{Ico.doc} Courriers — {dossier.client_name}</h2>
      <div className="muted" style={{ margin: "2px 0 14px" }}>{dossier.reference} · {site ? site.name : "sans marque"} · rempli automatiquement, signé <b>{dossier.client_name}</b></div>

<div className="row2">
        <div className="field"><label>Type de courrier</label>
          <select value={key} onChange={(e) => setKey(e.target.value)}>
            {templates.map((t) => <option key={t.key} value={t.key}>{t.name}{t.customized ? " ✎" : ""}</option>)}
          </select></div>
        <div className="field" style={{ display: "flex", alignItems: "flex-end", gap: 6 }}>
          {currentTpl && <button className="btn ghost sm" onClick={() => setEditTpl(editTpl ? null : { subject: currentTpl.subject, body: currentTpl.body })}>{Ico.edit} Modifier le modèle</button>}
        </div>
      </div>

{editTpl ? (
        <div>
          <div className="field"><label>Objet du modèle</label>
            <input value={editTpl.subject} onChange={(e) => setEditTpl({ ...editTpl, subject: e.target.value })} /></div>
          <div className="field"><label>Corps du modèle <span className="faint">— variables : {"{client} {produit} {marque} {commande} {serie} {montant} {ref_fabricant} {reference}"} · {"{signature}"} = nom du titulaire</span></label>
            <textarea rows="12" value={editTpl.body} onChange={(e) => setEditTpl({ ...editTpl, body: e.target.value })} style={{ fontFamily: "inherit" }} /></div>
          <div className="toolbar">
            <button className="btn sm" onClick={saveTpl}>Enregistrer le modèle</button>
            <button className="btn ghost sm" onClick={resetTpl}>Réinitialiser au défaut</button>
            <button className="btn ghost sm" onClick={() => setEditTpl(null)}>Annuler</button>
          </div>
        </div>
      ) : rendered ? (
        <div>
          <div className="field"><label>Objet</label>
            <input readOnly value={rendered.subject} style={{ background: "var(--glass-2)" }} /></div>
          <div className="field"><label>Courrier (prêt à envoyer)</label>
            <textarea readOnly rows="14" value={rendered.body} style={{ background: "var(--glass-2)", fontFamily: "inherit", lineHeight: 1.5 }} /></div>
          <div className="section-title" style={{ marginTop: 8 }}>Envoi</div>
          <div className="row2">
            <div className="field"><label className="req">Destinataire</label>
              <input value={toAddr} onChange={(e) => setToAddr(e.target.value)} placeholder="email du SAV / fabricant" /></div>
            <div className="field"><label>Envoyer depuis</label>
              {sendable.length > 0 ? (
                <select value={sendAccount} onChange={(e) => setSendAccount(e.target.value)}>
                  {sendable.map((a) => <option key={a.email} value={a.email}>{a.email}</option>)}
                </select>
              ) : <input readOnly value="aucune boîte autorisée à envoyer" style={{ background: "var(--glass-2)", color: "var(--faint)" }} />}
            </div>
          </div>

{dossier.attachments && dossier.attachments.length > 0 && (
            <div className="field">
              <label>Pièces jointes à inclure (coche selon la demande du fabricant)</label>
              <div>
                {dossier.attachments.map((a) => (
                  <label key={a.id} className="alert-item" style={{ cursor: "pointer", padding: "7px 10px" }}>
                    <input type="checkbox" checked={!!selAtts[a.id]} onChange={(e) => setSelAtts({ ...selAtts, [a.id]: e.target.checked })} />
                    <span className="atxt">{docCatMeta(a.category).icon} {a.filename} <span className="faint">({Math.round(a.size / 1024)} Ko · {docCatMeta(a.category).label})</span></span>
                  </label>
                ))}
              </div>
            </div>
          )}

{sendable.length === 0 && (
            <div className="alert-item" style={{ cursor: "default", borderColor: "rgba(245,166,35,.35)" }}>
              <span className="adot" style={{ background: "var(--st-en_attente)" }} />
              <span className="atxt" style={{ whiteSpace: "normal", fontSize: 12.5 }}>Pour envoyer directement, va dans l'onglet <b>Gmail</b> et <b>reconnecte ta boîte</b> — Google demandera cette fois la permission d'envoi.</span>
            </div>
          )}

<div className="toolbar">
            <button className="btn gold" onClick={sendMail} disabled={sending || sendable.length === 0}>{sending ? "Envoi…" : (<>{Ico.send} Envoyer par Gmail</>)}</button>
            <button className="btn ghost" onClick={copyMail}>{Ico.copy} Copier</button>
            <button className="btn ghost sm" onClick={openGmail}>Ouvrir dans Gmail (sans PJ)</button>
          </div>
          <div className="faint" style={{ fontSize: 12 }}>L'envoi part de ta boîte, avec les pièces cochées. Tu valides avant l'envoi. Champs vides du dossier retirés automatiquement.</div>
        </div>
      ) : <div className="empty">Chargement…</div>}
    </Overlay>
  );
}

/* -------------------------------------------------------------- Admin ---- */
function AdminPanel({ currentUser }) {
  const [users, setUsers] = useState([]);
  const [creating, setCreating] = useState(false);
  const [form, setForm] = useState({ login_id: "", full_name: "", is_admin: false });
  const [newCode, setNewCode] = useState(null);   // {login_id, code} affiché une fois
  const [error, setError] = useState("");
  const [accessOf, setAccessOf] = useState(null); // user dont on regarde les accès

const load = useCallback(async () => setUsers(await api.get("/api/admin/users")), []);
  useEffect(() => { load(); }, [load]);

return (
    <div>
      {newCode && (
        <div className="panel" style={{ marginBottom: 13, borderColor: "rgba(232,194,104,.4)" }}>
          <h3>{Ico.key} Code licence de « {newCode.login_id} »</h3>
          <p className="muted" style={{ margin: "0 0 8px", fontSize: 13 }}>Communique ce code au titulaire. Il ne sera <b>plus jamais affiché</b> — note-le maintenant.</p>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <code style={{ fontSize: 18, letterSpacing: 2, background: "var(--glass-2)", border: "1px solid var(--stroke)", borderRadius: 10, padding: "10px 16px" }}>{newCode.code}</code>
            <button className="btn ghost sm" onClick={() => { navigator.clipboard.writeText(newCode.code); toast("Code copié"); }}>{Ico.copy} Copier</button>
            <button className="btn ghost sm" onClick={() => setNewCode(null)}>Fermer</button>
          </div>
        </div>
      )}

<div className="toolbar" style={{ marginTop: 0 }}>
        <div className="section-title" style={{ borderTop: 0, paddingTop: 0, margin: 0 }}>Comptes ({users.length})</div>
        <button className="btn sm" style={{ marginLeft: "auto" }} onClick={() => setCreating((c) => !c)}>+ Nouveau compte</button>
      </div>

{creating && (
        <div className="panel" style={{ marginBottom: 13 }}>
          <div className="row3">
            <div className="field"><label className="req">Identifiant</label>
              <input value={form.login_id} onChange={(e) => setForm({ ...form, login_id: e.target.value })} placeholder="ex. julien" /></div>
            <div className="field"><label>Nom complet</label>
              <input value={form.full_name} onChange={(e) => setForm({ ...form, full_name: e.target.value })} placeholder="Julien Martin" /></div>
            <div className="field"><label>Rôle</label>
              <select value={form.is_admin ? "1" : "0"} onChange={(e) => setForm({ ...form, is_admin: e.target.value === "1" })}>
                <option value="0">Agent (accès standard)</option>
                <option value="1">Administrateur</option>
              </select></div>
          </div>
          {error && <div className="err">{error}</div>}
          <div className="toolbar"><button className="btn" onClick={create}>Créer le compte</button>
            <button className="btn ghost" onClick={() => setCreating(false)}>Annuler</button></div>
        </div>
      )}

<div className="table-wrap">
        <table className="data">
          <thead><tr><th>Identifiant</th><th>Nom</th><th>Rôle</th><th>Statut</th><th>Dernier accès</th><th></th></tr></thead>
          <tbody>
            {users.map((u) => (
              <tr key={u.id}>
                <td style={{ fontWeight: 600 }}>{u.login_id}{u.id === currentUser.id && <span className="faint"> (toi)</span>}</td>
                <td className="muted">{u.full_name || "—"}</td>
                <td>{u.is_admin ? <span className="badge valide">Admin</span> : <span className="muted">Agent</span>}</td>
                <td>{u.active ? <span className="badge rembourse">Actif</span> : <span className="badge refuse">Désactivé</span>}</td>
                <td className="muted" style={{ fontSize: 12 }}>
                  {u.last_login
                    ? <button className="linkish" onClick={() => setAccessOf(u)}>{fmtDateTime(u.last_login)}<br /><span className="faint">{u.last_ip}{u.last_location ? ` · ${u.last_location}` : ""} · {u.login_count} conn.</span></button>
                    : <span className="faint">jamais connecté</span>}
                </td>
                <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
                  <button className="btn ghost sm" onClick={() => setAccessOf(u)}>{Ico.eye} Accès</button>{" "}
                  <button className="btn ghost sm" onClick={() => resetCode(u)}>{Ico.key} Code</button>{" "}
                  {u.id !== currentUser.id && <button className="btn ghost sm" onClick={() => toggle(u)}>{u.active ? "Désactiver" : "Réactiver"}</button>}{" "}
                  {u.id !== currentUser.id && <button className="btn danger sm" onClick={() => remove(u)}>Suppr.</button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{accessOf && <AccessLog user={accessOf} onClose={() => setAccessOf(null)} />}
      <div className="ok-msg" style={{ fontSize: 12, marginTop: 10 }}>
        {Ico.lock} Isolation des données <b>active</b> : chaque compte ne voit que ses propres dossiers, marques, documents et boîtes Gmail.
      </div>
    </div>
  );
}

/* ------------------------------------------------------------ Overlay ---- */
function Overlay({ children, onClose, center }) {
  useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div className="overlay" onClick={(e) => e.target.classList.contains("overlay") && onClose()}>
      <div className={"drawer" + (center ? " center" : "")}>
        <ErrorBoundary fallback={(err, reset) => (
          <div style={{ padding: 10 }}>
            <button className="btn ghost sm" onClick={onClose}>✕ Fermer</button>
            <div style={{ fontSize: 34, margin: "18px 0 6px" }}>⚠️</div>
            <h2 style={{ margin: "0 0 6px" }}>Problème d'affichage</h2>
            <p className="muted" style={{ fontSize: 13 }}>Ce panneau a rencontré une erreur — le reste de l'appli fonctionne toujours.</p>
            <pre style={{ background: "var(--glass)", border: "1px solid var(--stroke)", borderRadius: 10, padding: 10, fontSize: 11.5, color: "#fb9d9d", overflow: "auto", maxHeight: 120 }}>{String(err && (err.message || err))}</pre>
            <div className="toolbar"><button className="btn" onClick={reset}>Réessayer</button><button className="btn ghost" onClick={onClose}>Fermer</button></div>
          </div>
        )}>
          {children}
        </ErrorBoundary>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <ErrorBoundary><AuthGate /></ErrorBoundary>
);

Une erreur est survenue

Connexion

{TITLES[tab][0]}

🎯 File de travail {dueActions.length === 0 ? "rien à faire aujourd'hui" : `${dueActions.length} action(s) à faire`}

Charge par fabricant dossiers en cours

Répartition par statut

{Ico.warn} Échéances proches ≤ 7 jours ou dépassées

Activité récente

{s.label}{items.length}

{initial ? "Dupliquer le dossier" : "Nouveau dossier"}