// =============================================================
// Achats Mercari — list + add drawer (handoff design)
// =============================================================

const PurchasesScreen = ({ state, actions }) => {
  const { purchases, shipments, categories, currentRate } = state;
  const [openImport, setOpenImport] = useState(false);
  const [search, setSearch] = useState("");
  const [shipFilter, setShipFilter] = useState("all");
  const [openPendingDetail, setOpenPendingDetail] = useState(null);
  const [openCreateShip, setOpenCreateShip] = useState(false);

  // Pending = pas rattache a un colis et pas encore livre.
  // Par construction, les commandes manuelles (eBay/Vinted) creent toujours un
  // ship donc pending = uniquement les achats Mercari pas encore mis en colis.
  const pending = useMemo(() => purchases.filter(p => !p.ship && p.status !== "delivered").sort((a, b) => b.id - a.id), [purchases]);
  // inShipments = TOUS les achats rattaches a un colis + ajouts stock manuels (status=delivered sans ship)
  const inShipments = useMemo(() => purchases.filter(p => p.ship || p.status === "delivered"), [purchases]);

  const filtered = useMemo(() => {
    let r = inShipments;
    if (shipFilter !== "all") r = r.filter(p => String(p.ship) === shipFilter);
    if (search) {
      const q = search.toLowerCase();
      r = r.filter(p => p.title.toLowerCase().includes(q));
    }
    // tri DESC par ship (cmd la plus recente en haut) puis DESC par id
    return [...r].sort((a, b) => (b.ship || 0) - (a.ship || 0) || b.id - a.id);
  }, [inShipments, search, shipFilter]);

  // Ordinal stable shipments (1, 2, 3... sans trous) - meme calcul que screen-shipments
  const shipOrdinals = useMemo(() => {
    const sorted = [...shipments].sort((a, b) => a.id - b.id);
    return Object.fromEntries(sorted.map((s, i) => [s.id, i + 1]));
  }, [shipments]);

  // Separation Mercari (JPY) vs Manuels (EUR/USD via shipment.source)
  const shipById = useMemo(() => Object.fromEntries(shipments.map(s => [s.id, s])), [shipments]);

  // Pre-calcul des parts de frais par achat (commission fixe + part proportionnelle port intl + douane)
  const sharesByPurchase = useMemo(() => {
    const result = {};
    shipments.forEach(sh => {
      const shPurchases = purchases.filter(p => p.ship === sh.id && !sh.source);
      const sumJpy = shPurchases.reduce((a, p) => a + (p.jpy || 0), 0);
      shPurchases.forEach(p => {
        const weight = sumJpy > 0 ? (p.jpy || 0) / sumJpy : 0;
        result[p.id] = {
          intlShareJpy: (sh.port_jpy || 0) * weight,
          dutyShareEur: (sh.duty_eur || 0) * weight,
        };
      });
    });
    return result;
  }, [shipments, purchases]);
  const isManualPurchase = (p) => {
    if (!p.ship) return true;
    const sh = shipById[p.ship];
    return sh && sh.source;
  };
  const mercariFiltered = filtered.filter(p => !isManualPurchase(p));
  const manualFiltered  = filtered.filter(p => isManualPurchase(p));

  // Mercari : on garde le JPY brut + estimation EUR via le rate du shipment
  const mercariJpy = mercariFiltered.reduce((a, p) => a + (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0), 0);
  const mercariEur = mercariFiltered.reduce((a, p) => {
    const itemJpy = (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0);
    const rate = shipById[p.ship]?.rate || currentRate || 170;
    return a + itemJpy / rate;
  }, 0);
  // Manuels : prix_final_eur direct
  const manualEur = manualFiltered.reduce((a, p) => a + (p.eur || 0), 0);
  const totalAllEur = mercariEur + manualEur;

  const rateRef = currentRate || 170;
  const pendingJpy = pending.reduce((a, p) => a + (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0), 0);
  const pendingEur = pendingJpy / rateRef;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Achats</h1>
          <div className="page-sub">
            {purchases.length} achats · {pending.length > 0 && <span style={{ color: "var(--accent)", fontWeight: 500 }}>{pending.length} en attente de colis · </span>}
            {shipments.length} commandes
          </div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => setOpenImport(true)}><Icon name="plus" /> Ajouter un achat</button>
        </div>
      </div>

      {/* --- En attente de colis --- */}
      {pending.length > 0 && (
        <div className="card pending-card" style={{ marginBottom: 16, border: "1px solid var(--accent)", borderLeft: "3px solid var(--accent)" }}>
          <div className="card-head" style={{ background: "var(--accent-tint)", borderBottom: "1px solid var(--accent-tint-strong)" }}>
            <div>
              <div className="card-title" style={{ color: "var(--accent)" }}>
                En attente de colis
              </div>
              <div className="card-sub">
                Articles achetes depuis l'extension Mercari, pas encore rattaches a un colis international.
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="tag tag-accent">
                {pending.length} article{pending.length > 1 ? "s" : ""}
              </span>
              <span className="mono" style={{ fontSize: 13, color: "var(--accent)", fontWeight: 500 }}>
                ¥{fmtJPY(pendingJpy)} · ≈ {fmtEUR(pendingEur, { decimals: 0 })} €
              </span>
              <button className="btn btn-sm btn-primary" onClick={() => setOpenCreateShip(true)}>
                <Icon name="truck" /> Creer un colis
              </button>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Item</th>
                <th>Categorie</th>
                <th className="right">Qty</th>
                <th className="right">Prix Mercari (JPY)</th>
                <th className="right">Estime EUR</th>
                <th style={{ width: 30 }}></th>
              </tr>
            </thead>
            <tbody>
              {pending.map(p => {
                const cat = categories.find(c => c.id === p.cat);
                const itemJpy = (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0);
                return (
                  <tr key={p.id} className="clickable" onClick={() => setOpenPendingDetail(p)}>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        {p.photo_url ? (
                          <img src={p.photo_url} alt="" style={{ width: 32, height: 32, borderRadius: 6, objectFit: "cover", border: "1px solid var(--line)", flexShrink: 0 }} />
                        ) : (
                          <div style={{
                            width: 32, height: 32, borderRadius: 6, flexShrink: 0,
                            background: "repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--bg-sunk) 4px, var(--bg-sunk) 8px)",
                            border: "1px solid var(--line)",
                            display: "grid", placeItems: "center",
                            fontSize: 9, color: "var(--ink-4)", fontFamily: "var(--font-mono)",
                          }}>IMG</div>
                        )}
                        <div style={{ maxWidth: 360, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                          {p.title}
                        </div>
                      </div>
                    </td>
                    <td><span className="tag">{cat?.short || "—"}</span></td>
                    <td className="right num">{p.qty}</td>
                    <td className="right num">¥{fmtJPY(itemJpy)}</td>
                    <td className="right num" style={{ color: "var(--accent)" }}>≈ {fmtEUR(itemJpy / rateRef)} €</td>
                    <td><Icon name="chev" /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      <div className="subhead" style={{ marginTop: 0 }}>
        <h3>Achats rattaches a un colis</h3>
      </div>

      <div className="toolbar">
        <div className="search">
          <Icon name="search" />
          <input placeholder="Rechercher par titre..." value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <select className="select" style={{ width: 200 }} value={shipFilter} onChange={e => setShipFilter(e.target.value)}>
          <option value="all">Toutes les commandes</option>
          {shipments.map(s => <option key={s.id} value={s.id}>Commande #{shipOrdinals[s.id]} · {s.method}{s.source ? ` · ${s.source}` : ""}</option>)}
        </select>
        <div className="toolbar-spacer"></div>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>
          {filtered.length} achats
          {mercariFiltered.length > 0 && <React.Fragment> · Mercari : <b style={{ color: "var(--ink)" }}>¥{fmtJPY(mercariJpy)}</b> (≈ {fmtEUR(mercariEur, { decimals: 0 })} €)</React.Fragment>}
          {manualFiltered.length > 0 && <React.Fragment> · Manuels : <b style={{ color: "var(--ink)" }}>{fmtEUR(manualEur, { decimals: 0 })} €</b></React.Fragment>}
          {" · Total ≈ "}<b style={{ color: "var(--ink)" }}>{fmtEUR(totalAllEur, { decimals: 0 })} €</b>
        </span>
      </div>

      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 40 }}>#</th>
              <th>Titre</th>
              <th>Serie</th>
              <th className="right">Qty</th>
              <th className="right">Prix JPY</th>
              <th className="right">Frais</th>
              <th className="right">EUR final</th>
              <th className="right">€/unite</th>
              <th>Commande</th>
              <th>Statut</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((p) => {
              const cat = categories.find(c => c.id === p.cat);
              const pRate = shipById[p.ship]?.rate || currentRate || 170;
              // Source de verite Excel pour CMD ZenMarket : p.intl_ship = col E "Part frais", p.zm_fee = col D - col C
              // Pour Mercari pur (CMD7, source=null) : utilise shipment.port_jpy prorata + douane shipment
              const isJpyShip = (p.jpy || 0) > 0;
              const sh = shipById[p.ship];
              const useExcelDirect = isJpyShip && sh && sh.source; // CMD1-6 zenmarket = lecture directe DB
              const shares = sharesByPurchase[p.id] || { intlShareJpy: 0, dutyShareEur: 0 };
              const commJpy = p.zm_fee || 0;
              const fraisJpy = useExcelDirect ? (p.intl_ship || 0) : Math.round(shares.intlShareJpy);
              const dutyEur = useExcelDirect ? 0 : (shares.dutyShareEur || 0);
              const feesEur = isJpyShip
                ? ((p.port_jp || 0) + commJpy + fraisJpy) / pRate + dutyEur
                : null;
              return (
                <tr key={p.id} className="clickable">
                  <td className="mono muted">{p.displayNum}</td>
                  <td>
                    <div style={{ maxWidth: 320, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {p.title}
                    </div>
                    {isJpyShip && (
                      <div style={{ fontSize: 10.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 2, maxWidth: 320, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                        {commJpy > 0 && `+¥${fmtJPY(commJpy)} comm`}
                        {fraisJpy > 0 && ` · +¥${fmtJPY(fraisJpy)} frais`}
                        {dutyEur > 0 && ` · +${fmtEUR(dutyEur, { decimals: 2 })}€ douane`}
                      </div>
                    )}
                  </td>
                  <td><span className="tag">{cat?.short || "—"}</span></td>
                  <td className="right num">{p.qty}</td>
                  <td className="right num muted">{isJpyShip ? `¥${fmtJPY(p.jpy)}` : "—"}</td>
                  <td className="right num muted">
                    {feesEur != null ? `${fmtEUR(feesEur, { decimals: 2 })} €` : "—"}
                  </td>
                  <td className="right num">{p.eur ? fmtEUR(p.eur) : "—"}</td>
                  <td className="right num muted">{p.eur ? (p.eur / p.qty).toFixed(2) : "—"}</td>
                  <td className="mono">{p.ship ? `#${shipOrdinals[p.ship] || p.ship}` : <span style={{ color: "var(--ink-3)", fontStyle: "italic" }}>Stock manuel</span>}</td>
                  <td><StatusPill status={p.status} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {openPendingDetail && <PendingPurchaseDrawer purchase={openPendingDetail} state={state} actions={actions} onClose={() => setOpenPendingDetail(null)} />}
      {openCreateShip && <CreateShipmentDrawer state={state} actions={actions} onClose={() => setOpenCreateShip(false)} />}
      {openImport && (
        <ImportMercariDrawer
          state={state}
          onClose={() => setOpenImport(false)}
          onSubmit={(p) => { actions.addPurchase(p); setOpenImport(false); }}
        />
      )}
    </div>
  );
};

const PendingPurchaseDrawer = ({ purchase: p, state, actions, onClose }) => {
  const cat = state.categories.find(c => c.id === p.cat);
  const rate = state.currentRate || 170;
  const totalJpy = (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0);
  const estEur = totalJpy / rate;
  const [confirming, setConfirming] = useState(false);

  const confirmDelete = () => {
    actions.deletePurchase(p.id);
    onClose();
  };

  return (
    <Drawer open onClose={onClose} title={p.title} sub={`Categorie ${cat?.short || "—"} · qty ${p.qty || 1}`}
      footer={
        confirming ? (
          <React.Fragment>
            <span style={{ color: "var(--neg)", fontSize: 13, marginRight: "auto" }}>
              Supprimer definitivement cet achat ?
            </span>
            <button className="btn" onClick={() => setConfirming(false)}>Annuler</button>
            <button className="btn btn-danger" onClick={confirmDelete}>
              <Icon name="trash" /> Oui, supprimer
            </button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <button className="btn btn-danger" onClick={() => setConfirming(true)}>
              <Icon name="trash" /> Supprimer
            </button>
            <div style={{ flex: 1 }}></div>
            <button className="btn" onClick={onClose}>Fermer</button>
          </React.Fragment>
        )
      }
    >
      {p.photo_url && (
        <div style={{ marginBottom: 16, textAlign: "center" }}>
          <img src={p.photo_url} alt="" style={{ maxWidth: "100%", maxHeight: 240, borderRadius: 8, border: "1px solid var(--line)" }} />
        </div>
      )}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 22 }}>
        <div className="card card-pad">
          <div className="kpi-label">Total JPY</div>
          <div className="kpi-value" style={{ marginTop: 6 }}>¥{fmtJPY(totalJpy)}</div>
        </div>
        <div className="card card-pad">
          <div className="kpi-label">Estime EUR</div>
          <div className="kpi-value" style={{ marginTop: 6, color: "var(--accent)" }}>≈ {fmtEUR(estEur)} €</div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>Au taux {rate.toFixed(2)} ¥/€</div>
        </div>
      </div>
      <dl className="kv">
        <dt>Titre complet</dt><dd style={{ whiteSpace: "normal" }}>{p.title}</dd>
        <dt>Categorie</dt><dd>{cat?.name || "—"}</dd>
        <dt>Quantite</dt><dd>{p.qty || 1}</dd>
        <dt>Prix Mercari</dt><dd className="mono">¥{fmtJPY(p.jpy || 0)}</dd>
        <dt>Port JP interne</dt><dd className="mono">¥{fmtJPY(p.port_jp || 0)}</dd>
        <dt>Commission ZM</dt><dd className="mono">¥{fmtJPY(p.zm_fee || 0)}</dd>
        <dt>Statut</dt><dd><StatusPill status={p.status || "pending"} /></dd>
        {p.url && <React.Fragment><dt>URL Mercari</dt><dd><a href={p.url} target="_blank" rel="noreferrer" style={{ color: "var(--accent)" }}>Ouvrir l'annonce</a></dd></React.Fragment>}
      </dl>
    </Drawer>
  );
};

const CreateShipmentDrawer = ({ state, actions, onClose }) => {
  const pending = useMemo(() => state.purchases.filter(p => !p.ship && p.status !== "delivered"), [state.purchases]);
  const [selected, setSelected] = useState(new Set(pending.map(p => p.id)));
  const [intlJpy, setIntlJpy] = useState(0);
  const [method, setMethod] = useState("AVIA");
  const nextNum = state.shipments.length + 1;
  const [name, setName] = useState("");

  const toggle = (id) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const selectedPending = pending.filter(p => selected.has(p.id));
  const totalItemsJpy = selectedPending.reduce((a, p) => a + (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0), 0);
  const grandTotalJpy = totalItemsJpy + Number(intlJpy || 0);
  const rate = state.currentRate || 170;
  const [creating, setCreating] = useState(false);

  const submit = () => {
    if (selected.size === 0 || creating) return;
    setCreating(true);
    Promise.resolve(actions.createShipmentFromPending({
      purchase_ids: Array.from(selected),
      intl_jpy: Number(intlJpy || 0),
      method,
      name: name.trim() || null,
    }))
      .then(() => onClose())
      .catch(() => setCreating(false));
  };

  return (
    <React.Fragment>
    {creating && (
      <div className="loading-overlay">
        <div className="loading-spinner"></div>
        <div className="loading-msg">Creation du colis...</div>
      </div>
    )}
    <Drawer open onClose={creating ? () => {} : onClose} wide
      title="Creer un nouveau colis"
      sub={`${selected.size} achats selectionnes`}
      footer={
        <React.Fragment>
          <button className="btn" onClick={onClose} disabled={creating}>Annuler</button>
          <div style={{ flex: 1 }}></div>
          <button className="btn btn-primary" onClick={submit} disabled={selected.size === 0 || creating}>
            <Icon name="truck" /> Creer le colis
          </button>
        </React.Fragment>
      }
    >
      <div className="field" style={{ marginBottom: 16 }}>
        <label>Nom du colis</label>
        <input className="input" placeholder={`Commande #${nextNum} (auto si vide)`} value={name} onChange={e => setName(e.target.value)} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        <div className="field">
          <label>Frais port international (JPY)</label>
          <div className="input-suffix-wrap">
            <input className="input mono" type="number" value={intlJpy} onChange={e => setIntlJpy(e.target.value)} />
            <span className="input-suffix">¥</span>
          </div>
        </div>
        <div className="field">
          <label>Methode d'envoi</label>
          <select className="select" value={method} onChange={e => setMethod(e.target.value)}>
            <option value="AVIA">AVIA</option>
            <option value="EMS">EMS</option>
            <option value="Surface">Surface</option>
            <option value="UPS">UPS</option>
          </select>
        </div>
      </div>

      <div className="subhead">
        <h3>Achats du colis</h3>
      </div>
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 40 }}></th>
              <th>Item</th>
              <th>Categorie</th>
              <th className="right">Qty</th>
              <th className="right">Prix JPY</th>
            </tr>
          </thead>
          <tbody>
            {pending.map(p => {
              const cat = state.categories.find(c => c.id === p.cat);
              const itemJpy = (p.jpy || 0) + (p.port_jp || 0) + (p.zm_fee || 0);
              return (
                <tr key={p.id} className="clickable" onClick={() => toggle(p.id)}>
                  <td><input type="checkbox" checked={selected.has(p.id)} onChange={() => toggle(p.id)} /></td>
                  <td>
                    <div style={{ maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.title}</div>
                  </td>
                  <td><span className="tag">{cat?.short || "—"}</span></td>
                  <td className="right num">{p.qty}</td>
                  <td className="right num">¥{fmtJPY(itemJpy)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 16, padding: 14, background: "var(--bg-sunk)", borderRadius: 8, border: "1px dashed var(--line-strong)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
          <span>Total items</span><span className="mono">¥{fmtJPY(totalItemsJpy)}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
          <span>Frais port international</span><span className="mono">¥{fmtJPY(Number(intlJpy || 0))}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--line)", paddingTop: 6, fontWeight: 600 }}>
          <span>Total commande</span><span className="mono">¥{fmtJPY(grandTotalJpy)} · ≈ {fmtEUR(grandTotalJpy / rate)} €</span>
        </div>
      </div>
    </Drawer>
    </React.Fragment>
  );
};

const AddPurchaseDrawer = ({ open, onClose, state, actions }) => {
  const lastShip = state.shipments.length > 0 ? state.shipments[state.shipments.length - 1].id : null;
  const firstCat = state.categories.length > 0 ? state.categories[0].id : null;
  const [isSealed, setIsSealed] = useState(false);
  const [form, setForm] = useState({
    url: "", title: "", qty: 1, jpy: 0, port_jp: 0, cat: firstCat, ship: lastShip,
  });
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const ship = state.shipments.find(s => s.id === Number(form.ship));
  const rate = ship?.rate || state.currentRate || 170;
  const estEur = (Number(form.jpy) + Number(form.port_jp)) / rate;

  const submit = () => {
    // prefixe [SCELLE] dans le titre si toggle actif
    const finalTitle = isSealed && !form.title.startsWith("[SCELLE]")
      ? `[SCELLE] ${form.title}`
      : form.title;
    actions.addPurchase({
      ...form,
      title: finalTitle,
      qty: 1,
      jpy: Number(form.jpy),
      port_jp: Number(form.port_jp),
      cat: null,
      ship: Number(form.ship),
      status: "ordered",
    });
    onClose();
  };

  return (
    <Drawer open={open} onClose={onClose}
      title="Nouvel achat Mercari"
      sub="Item japonais via ZenMarket"
      footer={
        <React.Fragment>
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>
            <Icon name="check" /> Enregistrer l'achat
          </button>
        </React.Fragment>
      }
    >
      <div className="flex-col" style={{ gap: 14 }}>
        {/* toggle scelle en haut du formulaire */}
        <label style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, fontSize: 13, cursor: "pointer" }}>
          <input type="checkbox" checked={isSealed} onChange={e => setIsSealed(e.target.checked)} />
          C'est du scelle (display / ETB / deck)
        </label>
        <div className="field">
          <label>URL Mercari</label>
          <input className="input mono" placeholder="https://jp.mercari.com/item/m85941955311" value={form.url} onChange={e => upd("url", e.target.value)} />
        </div>
        <div className="field">
          <label>Titre</label>
          <input className="input" placeholder="ポケモンカード ニンジャスピナー 30パック" value={form.title} onChange={e => upd("title", e.target.value)} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="field">
            <label>Prix JPY</label>
            <div className="input-suffix-wrap">
              <input className="input mono" type="number" value={form.jpy} onChange={e => upd("jpy", e.target.value)} />
              <span className="input-suffix">¥</span>
            </div>
          </div>
          <div className="field">
            <label>Port JP interne</label>
            <div className="input-suffix-wrap">
              <input className="input mono" type="number" value={form.port_jp} onChange={e => upd("port_jp", e.target.value)} />
              <span className="input-suffix">¥</span>
            </div>
          </div>
        </div>
        <div className="field">
          <label>Rattacher a une commande</label>
          <select className="select" value={form.ship || ""} onChange={e => upd("ship", e.target.value)}>
            {state.shipments.map(s => (
              <option key={s.id} value={s.id}>
                Commande #{s.displayNum || s.id} · {s.method} · {(typeof STATUS_LABELS !== "undefined" && STATUS_LABELS[s.status]) || s.status}
              </option>
            ))}
          </select>
        </div>

        <div style={{ marginTop: 8, padding: 14, background: "var(--bg-sunk)", borderRadius: 8, border: "1px dashed var(--line-strong)" }}>
          <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.07em", fontWeight: 500 }}>Estimation</div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            <span style={{ fontSize: 13 }}>Cout total (hors port intl)</span>
            <span className="mono" style={{ fontWeight: 500 }}>
              ¥{fmtJPY(Number(form.jpy) + Number(form.port_jp))} · ≈ {fmtEUR(estEur)} €
            </span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
            <span style={{ fontSize: 12, color: "var(--ink-3)" }}>Au taux {rate?.toFixed(2)} JPY/EUR</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>
              ≈ {form.qty > 0 ? (estEur / Number(form.qty)).toFixed(2) : "—"} € / unite
            </span>
          </div>
        </div>
      </div>
    </Drawer>
  );
};

// =============================================================
// Import Mercari URL drawer — paste URL, mock scrape, then review & save
// =============================================================
// accepte aussi le prefixe de langue optionnel (/en/, /fr/, etc.)
const MERCARI_URL_RE = /^https?:\/\/(jp\.)?mercari\.com\/(?:[a-z]{2}\/)?item\/[a-z0-9]+/i;


const ImportMercariDrawer = ({ state, onClose, onSubmit }) => {
  const [step, setStep] = useState("paste"); // paste | loading | review | submitting
  const [url, setUrl] = useState("");
  const [scraped, setScraped] = useState(null);
  const [form, setForm] = useState(null);
  const [error, setError] = useState(null);
  const [isSealed, setIsSealed] = useState(false);

  const validUrl = MERCARI_URL_RE.test(url.trim());

  const fetchUrl = async () => {
    if (!validUrl) return;
    setStep("loading");
    setError(null);
    try {
      const data = await apiFetch("POST", "/api/mercari/preview", { url: url.trim() });
      setScraped(data);
      setForm({
        url: url.trim(),
        title: data.title || "",
        qty: 1,
        cat: state.categories[0]?.id ?? "",
        jpy: data.price_jpy || 0,
        port_jp: data.jp_shipping_jpy || 0,
        ship: "",
      });
      setStep("review");
    } catch (err) {
      setError(err?.message || "Echec de l'extraction");
      setStep("paste");
    }
  };

  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const ship = form && form.ship ? state.shipments.find(s => s.id === Number(form.ship)) : null;
  const rate = ship?.rate || state.currentRate || 170;
  const estEur = form ? (Number(form.jpy) + Number(form.port_jp)) / rate : 0;

  const valid = form && form.title.trim() && Number(form.jpy) > 0;

  const submit = () => {
    if (!valid) return;
    setStep("submitting");
    setTimeout(() => {
      const rawTitle = form.title.trim();
      const finalTitle = isSealed && !rawTitle.startsWith("[SCELLE] ")
        ? "[SCELLE] " + rawTitle
        : rawTitle;
      onSubmit({
        title: finalTitle,
        qty: 1,
        jpy: Number(form.jpy),
        port_jp: Number(form.port_jp),
        cat: null,
        ship: form.ship ? Number(form.ship) : null,
        status: "ordered",
        url: form.url,
      });
    }, 600);
  };

  const reset = () => {
    setUrl("");
    setScraped(null);
    setForm(null);
    setError(null);
    setStep("paste");
  };

  return (
    <React.Fragment>
    {step === "submitting" && (
      <div className="loading-overlay">
        <div className="loading-spinner"></div>
        <div className="loading-msg">Enregistrement...</div>
      </div>
    )}
    <Drawer open onClose={step === "submitting" ? () => {} : onClose}
      title="Importer une URL Mercari"
      sub="Colle l'URL d'un article Mercari, on extrait les infos automatiquement"
      footer={
        step === "review" ? (
          <React.Fragment>
            <button className="btn" onClick={reset}>← Recommencer</button>
            <div style={{ flex: 1 }}></div>
            <button className="btn" onClick={onClose}>Annuler</button>
            <button className="btn btn-primary" disabled={!valid} onClick={submit}>
              <Icon name="check" /> Ajouter l'achat
            </button>
          </React.Fragment>
        ) : step === "submitting" ? (
          <React.Fragment>
            <div style={{ flex: 1 }}></div>
            <button className="btn btn-primary" disabled>
              Ajout en cours...
            </button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <button className="btn" onClick={onClose}>Annuler</button>
            <div style={{ flex: 1 }}></div>
            <button className="btn btn-primary" disabled={!validUrl || step === "loading"} onClick={fetchUrl}>
              {step === "loading" ? (
                "Extraction..."
              ) : (
                <React.Fragment><Icon name="download" /> Extraire les infos</React.Fragment>
              )}
            </button>
          </React.Fragment>
        )
      }
    >
      {/* Etape 1 — paste URL */}
      {(step === "paste" || step === "loading") && (
        <React.Fragment>
          <div className="field">
            <label>URL Mercari</label>
            <input className="input mono" autoFocus
                   placeholder="https://jp.mercari.com/item/m85941955311"
                   value={url}
                   disabled={step === "loading"}
                   onChange={e => setUrl(e.target.value)}
                   onKeyDown={e => { if (e.key === "Enter" && validUrl) fetchUrl(); }} />
            {url && !validUrl && (
              <div style={{ fontSize: 11.5, color: "var(--neg)", marginTop: 6 }}>
                URL non reconnue — attendu : <span className="mono">https://jp.mercari.com/item/...</span>
              </div>
            )}
          </div>

          {error && (
            <div style={{
              marginTop: 12, padding: "10px 14px",
              background: "var(--neg-tint, #ffebee)", border: "1px solid var(--neg, #c62828)",
              borderRadius: 8, fontSize: 12.5, color: "var(--neg, #c62828)",
            }}>
              {error}
            </div>
          )}

          <div className="import-explainer" style={{ marginTop: 16, padding: 14, background: "var(--bg-sunk)", borderRadius: 8, border: "1px solid var(--line)" }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-2)", marginBottom: 8, display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="external" /> Ce qu'on recupere
            </div>
            <ul style={{ margin: 0, padding: "0 0 0 18px", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.7 }}>
              <li>Titre original japonais</li>
              <li>Prix Mercari (¥) et port Japon interne (¥)</li>
              <li>Photo principale de l'annonce</li>
            </ul>
            <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 8 }}>
              Tu pourras verifier et corriger chaque champ avant d'enregistrer.
            </div>
          </div>

          {step === "loading" && (
            <div style={{ marginTop: 24, textAlign: "center", color: "var(--ink-2)", fontSize: 13 }}>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 10 }}>Extraction depuis Mercari...</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 4, fontFamily: "var(--font-mono)" }}>
                {url.replace(/^https?:\/\//, "").slice(0, 48)}
              </div>
            </div>
          )}
        </React.Fragment>
      )}

      {/* Etape 2 — review et correction */}
      {step === "review" && form && (
        <React.Fragment>
          <div style={{
            display: "flex", alignItems: "center", gap: 8, padding: "10px 14px",
            background: "var(--pos-tint, #e8f5e9)", border: "1px solid var(--pos, #4caf50)",
            borderRadius: 8, marginBottom: 16, fontSize: 13, fontWeight: 500, color: "var(--pos, #2e7d32)",
          }}>
            <Icon name="check" />
            <span>Infos extraites — verifie et corrige avant d'ajouter.</span>
          </div>

          <label style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, fontSize: 13, cursor: "pointer" }}>
            <input type="checkbox" checked={isSealed} onChange={e => setIsSealed(e.target.checked)} />
            C'est du scelle (display / ETB / deck)
          </label>

          <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 20, padding: 12, background: "var(--surface-2)", borderRadius: 8, border: "1px solid var(--line)" }}>
            {scraped.photo_url ? (
              <img src={scraped.photo_url} alt="" style={{
                width: 56, height: 56, borderRadius: 6, flexShrink: 0,
                objectFit: "cover", border: "1px solid var(--line)",
              }} />
            ) : (
              <div style={{
                width: 56, height: 56, borderRadius: 6, flexShrink: 0,
                background: "repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--bg-sunk) 4px, var(--bg-sunk) 8px)",
                border: "1px solid var(--line)", display: "grid", placeItems: "center",
                fontSize: 9, color: "var(--ink-4)", fontFamily: "var(--font-mono)",
              }}>IMG</div>
            )}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 3 }}>{scraped.title}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", display: "flex", gap: 8, flexWrap: "wrap" }}>
                <span className="mono">¥{fmtJPY(scraped.price_jpy)}</span>
                {scraped.jp_shipping_jpy > 0 && <span>· port ¥{fmtJPY(scraped.jp_shipping_jpy)}</span>}
                {scraped.url && (
                  <a href={scraped.url} target="_blank" rel="noreferrer" style={{ color: "var(--accent)", marginLeft: "auto" }}>
                    Voir l'annonce ↗
                  </a>
                )}
              </div>
            </div>
          </div>

          <div className="flex-col" style={{ gap: 14 }}>
            <div className="field">
              <label>Titre <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>(japonais ou traduit)</span></label>
              <input className="input" value={form.title} onChange={e => upd("title", e.target.value)} />
            </div>


            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12 }}>
              <div className="field">
                <label>Prix Mercari</label>
                <div className="input-suffix-wrap">
                  <input className="input mono" type="number" value={form.jpy}
                         onChange={e => upd("jpy", e.target.value)} />
                  <span className="input-suffix">¥</span>
                </div>
              </div>
            </div>

            <div className="field">
              <label>Rattacher a une commande</label>
              <select className="select" value={form.ship} onChange={e => upd("ship", e.target.value)}>
                <option value="">En attente — pas encore de colis</option>
                {state.shipments.map(s => (
                  <option key={s.id} value={s.id}>
                    Commande #{s.displayNum || s.id} · {s.method} · {(typeof STATUS_LABELS !== "undefined" && STATUS_LABELS[s.status]) || s.status}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div style={{ marginTop: 18, padding: 14, background: "var(--bg-sunk)", borderRadius: 8, border: "1px dashed var(--line-strong)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontSize: 13 }}>Article ({form.qty}×)</span>
              <span className="mono">¥{fmtJPY(Number(form.jpy))}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontSize: 13 }}>Commission Mercari</span>
              <span className="mono">¥800</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--line)", paddingTop: 6, fontWeight: 600 }}>
              <span>Estimation finale</span>
              <span className="mono">¥{fmtJPY(Number(form.jpy) + 800)} · <b>≈ {fmtEUR((Number(form.jpy) + 800) / rate)} €</b></span>
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 6 }}>
              {form.ship
                ? `Au taux ${ship?.rate?.toFixed(2)} JPY/EUR de la commande #${ship?.displayNum || form.ship}`
                : "Estimation au taux courant " + rate.toFixed(0) + " JPY/EUR — frais port intl ajoutes lors du rattachement au colis"}
            </div>
          </div>
        </React.Fragment>
      )}
    </Drawer>
    </React.Fragment>
  );
};

window.PurchasesScreen = PurchasesScreen;