// =============================================================
// Rechargements ZenMarket - design tableau (comme Ventes/Stock)
// =============================================================

// Helper exporte sur window pour usage dans screen-shipments (delegue au helper partage)
const computeShipmentRechargeStatus = (shipment, topups, purchases) => {
  return shipRechargeStatus(shipment, topups, purchases);
};
window.computeShipmentRechargeStatus = computeShipmentRechargeStatus;


const TopupsScreen = ({ state, actions }) => {
  const { topups, shipments, purchases } = state;
  const [openAdd, setOpenAdd] = useState(false);
  const [openDetail, setOpenDetail] = useState(null);
  const [filter, setFilter] = useState("all");

  const totalJpy = topups.reduce((a, t) => a + t.jpy, 0);
  const knownEur = topups.filter(t => t.eur).reduce((a, t) => a + t.eur, 0);
  const known = topups.filter(t => t.eur).length;
  const missing = topups.length - known;
  const lastRate = topups
    .filter(t => t.rate)
    .sort((a, b) => b.id - a.id)[0]?.rate;

  const filtered = useMemo(() => {
    let r = [...topups];
    if (filter === "pending") r = r.filter(t => !t.eur);
    else if (filter === "unassigned") r = r.filter(t => !t.shipment);
    else if (filter === "assigned") r = r.filter(t => t.shipment);
    return r.sort((a, b) => b.date.localeCompare(a.date));
  }, [topups, filter]);

  // map id -> displayNum pour deref dans la colonne "Commande"
  const shipNumById = useMemo(() => {
    const m = {};
    shipments.forEach(s => { m[s.id] = shipNum(s, shipments); });
    return m;
  }, [shipments]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Rechargements ZenMarket</h1>
          <div className="page-sub">{topups.length} virements · ¥{fmtJPY(totalJpy)} crédités</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => setOpenAdd(true)}>
            <Icon name="plus" /> Nouveau rechargement
          </button>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi label="Total JPY crédité" value={totalJpy} unit="¥" decimals={0} meta={`${topups.length} virements`} />
        <Kpi label="Total EUR connu" value={knownEur} unit="€" meta={`${known} virement(s) avec taux`} />
        <Kpi label="Données manquantes" value={missing} unit="" meta="EUR/taux à compléter" />
        <Kpi label="Dernier taux" value={lastRate || 0} unit="¥/€" decimals={2} meta="référence estimation" />
      </div>

      {missing > 0 && (
        <div style={{ margin: "16px 0 10px", padding: 12, background: "var(--warn-tint)", color: "var(--warn)", borderRadius: 8, fontSize: 12.5, border: "1px solid oklch(0.85 0.05 65)" }}>
          <b>⚠ {missing} rechargement{missing > 1 ? "s" : ""} sans EUR/taux.</b> Saisis le montant € pour comptabiliser le coût réel.
        </div>
      )}

      <div className="toolbar">
        <Tabs value={filter} onChange={setFilter} options={[
          { value: "all", label: `Tous (${topups.length})` },
          { value: "pending", label: `En attente d'€ (${missing})` },
          { value: "unassigned", label: `Non rattachés (${topups.filter(t => !t.shipment).length})` },
          { value: "assigned", label: `Rattachés (${topups.filter(t => t.shipment).length})` },
        ]} />
      </div>

      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 40 }}>#</th>
              <th>Date</th>
              <th>Source</th>
              <th className="right">JPY crédité</th>
              <th className="right">EUR payé</th>
              <th className="right">Taux effectif</th>
              <th>Commande</th>
              <th style={{ width: 30 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(t => (
              <tr key={t.id} className="clickable" onClick={() => setOpenDetail(t)}>
                <td className="mono muted">{t.displayNum || t.id}</td>
                <td className="mono">{fmtDate(t.date)}</td>
                <td><span className="tag tag-ghost"><Icon name="external" />{t.source}</span></td>
                <td className="right num">¥{fmtJPY(t.jpy)}</td>
                <td className="right num">{t.eur ? `${fmtEUR(t.eur)} €` : <span style={{ color: "var(--ink-4)" }}>—</span>}</td>
                <td className="right num">{t.rate ? t.rate.toFixed(2) : <span style={{ color: "var(--ink-4)" }}>—</span>}</td>
                <td>{t.shipment ? <span className="tag tag-accent">→ #{shipNumById[t.shipment] || t.shipment}</span> : <span className="muted">non rattaché</span>}</td>
                <td><Icon name="chev" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <AddTopupDrawer open={openAdd} onClose={() => setOpenAdd(false)} shipments={shipments} topups={topups} purchases={purchases} actions={actions} />

      {openDetail && (
        <TopupDetailDrawer
          topup={openDetail}
          shipments={shipments}
          topups={topups}
          purchases={purchases}
          onClose={() => setOpenDetail(null)}
          onDelete={() => actions.deleteTopup ? actions.deleteTopup(openDetail.id) : Promise.resolve()}
          onUpdate={(patch) => { actions.updateTopup && actions.updateTopup(openDetail.id, patch); setOpenDetail({ ...openDetail, ...patch }); }}
        />
      )}
    </div>
  );
};

// ---------- Detail drawer (lecture + edition + suppression) ----------
// Calcule total JPY d'un colis (achats + port + commission ZM reelle)
// Necessite state.purchases accessible — on passe purchases en prop separement si besoin.
// Ici on passe `state` complet pour rester simple.
const _shipTotalJpy = (ship, allPurchases) => {
  if (!ship || (ship.currency || "JPY") !== "JPY") return 0;
  const items = (allPurchases || []).filter(p => p.ship === ship.id);
  const itemsJpy = items.reduce((a, p) => a + (p.jpy || 0) + (p.port_jp || 0), 0);
  const portJpy = ship.port_jpy || ship.intl_shipping_jpy || 0;
  return itemsJpy + portJpy + items.reduce((a, p) => a + (p.zm_fee || 0), 0);
};

const TopupDetailDrawer = ({ topup, shipments, topups, purchases, onClose, onDelete, onUpdate }) => {
  const [edit, setEdit] = useState(false);
  const [eur, setEur] = useState(topup.eur || "");
  const [shipment, setShipment] = useState(topup.shipment || "");
  const [confirming, setConfirming] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const computedRate = (eur && topup.jpy) ? (topup.jpy / Number(eur)) : null;

  const save = () => {
    onUpdate({
      eur: Number(eur) || null,
      rate: computedRate,
      shipment: shipment ? Number(shipment) : null,
    });
    setEdit(false);
  };

  const handleDelete = () => {
    setDeleting(true);
    Promise.resolve(onDelete())
      .then(() => onClose())
      .catch(() => setDeleting(false));
  };

  return (
    <React.Fragment>
    {deleting && (
      <div className="loading-overlay">
        <div className="loading-spinner"></div>
        <div className="loading-msg">Suppression du rechargement...</div>
      </div>
    )}
    <Drawer open onClose={deleting ? () => {} : onClose}
      title={`Rechargement #${topup.displayNum || topup.id}`}
      sub={`${fmtDate(topup.date)} · ${topup.source}`}
      footer={
        confirming ? (
          <React.Fragment>
            <span style={{ color: "var(--neg)", fontSize: 13, marginRight: "auto" }}>
              Supprimer ce rechargement (¥{fmtJPY(topup.jpy)}) ?
            </span>
            <button className="btn" onClick={() => setConfirming(false)} disabled={deleting}>Annuler</button>
            <button className="btn btn-danger" onClick={handleDelete} disabled={deleting}>
              <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>
            {edit ? (
              <button className="btn btn-primary" onClick={save}>
                <Icon name="check" /> Enregistrer
              </button>
            ) : (
              <button className="btn btn-primary" onClick={() => setEdit(true)}>
                <Icon name="edit" /> Modifier
              </button>
            )}
          </React.Fragment>
        )
      }
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginBottom: 22 }}>
        <div className="card card-pad">
          <div className="kpi-label">JPY crédité</div>
          <div className="kpi-value" style={{ marginTop: 6 }}>¥{fmtJPY(topup.jpy)}</div>
        </div>
        <div className="card card-pad">
          <div className="kpi-label">EUR payé</div>
          <div className="kpi-value" style={{ marginTop: 6, color: topup.eur ? "var(--ink)" : "var(--ink-4)" }}>
            {topup.eur ? `${fmtEUR(topup.eur)} €` : "—"}
          </div>
        </div>
        <div className="card card-pad">
          <div className="kpi-label">Taux effectif</div>
          <div className="kpi-value" style={{ marginTop: 6, color: topup.rate ? "var(--accent)" : "var(--ink-4)" }}>
            {topup.rate ? topup.rate.toFixed(2) : "—"}
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>¥ pour 1 €</div>
        </div>
      </div>

      {!edit && (
        <React.Fragment>
          <dl className="kv">
            <dt>Date</dt><dd>{fmtDate(topup.date)}</dd>
            <dt>Source</dt><dd>{topup.source === "email" ? "Scrape email Gmail" : "Saisie manuelle"}</dd>
            <dt>Commande rattachée</dt>
            <dd>
              {topup.shipment ? (
                <span className="tag tag-accent">Colis #{shipNum(shipments.find(function(s) { return s.id === topup.shipment; }), shipments)}</span>
              ) : (
                <span style={{ color: "var(--ink-3)" }}>Aucune (rechargement libre)</span>
              )}
            </dd>
            <dt>Statut des données</dt>
            <dd>
              {topup.eur && topup.rate ? (
                <span className="tag tag-pos">✓ complet</span>
              ) : (
                <span className="tag tag-warn">⚠ EUR / taux manquant</span>
              )}
            </dd>
          </dl>

          {!topup.eur && (
            <div style={{ marginTop: 18, padding: 12, background: "var(--warn-tint)", color: "var(--warn)", borderRadius: 8, fontSize: 12.5, border: "1px solid oklch(0.85 0.05 65)" }}>
              <b>Données incomplètes.</b> Le montant EUR et le taux JPY/EUR ne sont pas renseignés, donc ce rechargement n'est pas comptabilisé dans le coût réel. Modifie-le ou re-scrappe l'email correspondant.
            </div>
          )}
        </React.Fragment>
      )}

      {edit && (
        <div className="flex-col" style={{ gap: 14 }}>
          <div className="field">
            <label>EUR payé</label>
            <div className="input-suffix-wrap">
              <input className="input mono" type="number" step="0.01" value={eur} onChange={e => setEur(e.target.value)} />
              <span className="input-suffix">€</span>
            </div>
          </div>

          <div className="field">
            <label>Taux JPY/EUR (auto)</label>
            <div className="input-suffix-wrap">
              <input className="input mono" disabled value={computedRate ? computedRate.toFixed(2) : ""} placeholder="se calcule auto" />
              <span className="input-suffix">¥/€</span>
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>
              ¥{fmtJPY(topup.jpy)} ÷ {eur || "?"} € = {computedRate ? computedRate.toFixed(2) : "?"}
            </div>
          </div>

          <div className="field">
            <label>Rattacher à une commande</label>
            <select className="select" value={shipment} onChange={e => setShipment(e.target.value)}>
              <option value="">— Aucune —</option>
              {shipments
                .filter(function(s) {
                  if (s.id === topup.shipment) return true;       // colis deja attache : toujours visible
                  return !shipIsRecharged(s, topups, purchases);  // sinon masquer si deja recharge
                })
                .map(s => <option key={s.id} value={s.id}>{s.name || ("Colis #" + shipNum(s, shipments))} · {s.method} · {fmtDate(s.date)}</option>)}
            </select>
            {/* Encart recap couverture rechargements si un colis est selectionne */}
            {shipment && (() => {
              const selShip = shipments.find(s => s.id === Number(shipment));
              const shipTotal = _shipTotalJpy(selShip, purchases);
              if (!selShip || shipTotal === 0) return null;
              // total deja recharge pour ce colis, hors le topup courant, + ce topup modifie
              const othersJpy = (topups || [])
                .filter(t => t.shipment === Number(shipment) && t.id !== topup.id)
                .reduce((a, t) => a + (t.jpy || 0), 0);
              const alreadyJpy = othersJpy + (topup.jpy || 0);
              const reste = shipTotal - alreadyJpy;
              return (
                <div style={{ marginTop: 8, padding: 10, background: "var(--bg-sunk)", borderRadius: 6, fontSize: 12, fontFamily: "var(--font-mono)", lineHeight: 1.7 }}>
                  <div>Total colis : <b>¥{fmtJPY(shipTotal)}</b></div>
                  <div>Déjà rechargé : <b>¥{fmtJPY(alreadyJpy)}</b></div>
                  <div>
                    {(() => {
                      const pct = shipTotal > 0 ? Math.round(alreadyJpy / shipTotal * 100) : null;
                      if (pct !== null && pct >= 95 && pct <= 100) return <span className="tag tag-pos" style={{ fontSize: 11 }}>✓ complet ({pct}%)</span>;
                      if (pct !== null && pct > 100) return <span style={{ color: "var(--neg)" }}>Surplus {pct}% — trop de ¥{fmtJPY(Math.abs(reste))}</span>;
                      return <span>Reste à recharger : <b style={{ color: "var(--warn)" }}>¥{fmtJPY(reste)}</b>{pct !== null ? ` (${pct}%)` : ""}</span>;
                    })()}
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      )}
    </Drawer>
    </React.Fragment>
  );
};

const AddTopupDrawer = ({ open, onClose, shipments, topups, purchases, actions }) => {
  const today = new Date().toISOString().slice(0, 10);
  const [date, setDate] = useState(today);
  const [source, setSource] = useState("email");
  const [jpy, setJpy] = useState("");
  const [eur, setEur] = useState("");
  const [shipment, setShipment] = useState("");

  const reset = () => { setDate(today); setSource("email"); setJpy(""); setEur(""); setShipment(""); };

  const jpyN = Number(jpy) || 0;
  const eurN = Number(eur) || 0;
  const rate = jpyN > 0 && eurN > 0 ? jpyN / eurN : null;
  const valid = jpyN > 0;

  const submit = () => {
    if (!valid) return;
    actions.addTopup({
      date,
      source,
      jpy: jpyN,
      eur: eurN || null,
      rate,
      shipment: shipment ? Number(shipment) : null,
    });
    reset();
    onClose();
  };

  return (
    <Drawer open={open} onClose={onClose}
      title="Nouveau rechargement"
      sub="Virement EUR → solde JPY ZenMarket"
      footer={
        <React.Fragment>
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" disabled={!valid} onClick={submit}>
            <Icon name="check" /> Enregistrer
          </button>
        </React.Fragment>
      }
    >
      <div className="flex-col" style={{ gap: 14 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="field"><label>Date</label>
            <input className="input mono" type="date" value={date} onChange={e => setDate(e.target.value)} />
          </div>
          <div className="field"><label>Source</label>
            <select className="select" value={source} onChange={e => setSource(e.target.value)}>
              <option value="email">email</option>
              <option value="manuel">manuel</option>
            </select>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="field"><label>JPY crédité</label>
            <div className="input-suffix-wrap">
              <input className="input mono" type="number" value={jpy} onChange={e => setJpy(e.target.value)} placeholder="50000" />
              <span className="input-suffix">¥</span>
            </div>
          </div>
          <div className="field"><label>EUR payé</label>
            <div className="input-suffix-wrap">
              <input className="input mono" type="number" step="0.01" value={eur} onChange={e => setEur(e.target.value)} placeholder="295.50" />
              <span className="input-suffix">€</span>
            </div>
          </div>
        </div>
        <div className="field"><label>Rattacher à une commande (optionnel)</label>
          <select className="select" value={shipment} onChange={e => setShipment(e.target.value)}>
            <option value="">— Aucune —</option>
            {shipments
              .filter(function(s) { return !shipIsRecharged(s, topups, purchases); })
              .map(s => <option key={s.id} value={s.id}>{s.name || ("Commande #" + shipNum(s, shipments))} · {s.method}</option>)}
          </select>
          {/* Encart recap couverture rechargements si un colis est selectionne */}
          {shipment && (() => {
            const selShip = shipments.find(s => s.id === Number(shipment));
            const shipTotal = _shipTotalJpy(selShip, purchases);
            if (!selShip || shipTotal === 0) return null;
            // total deja recharge pour ce colis (hors ce nouveau topup) + preview montant saisi
            const othersJpy = (topups || [])
              .filter(t => t.shipment === Number(shipment))
              .reduce((a, t) => a + (t.jpy || 0), 0);
            const alreadyJpy = othersJpy + jpyN;
            const reste = shipTotal - alreadyJpy;
            return (
              <div style={{ marginTop: 8, padding: 10, background: "var(--bg-sunk)", borderRadius: 6, fontSize: 12, fontFamily: "var(--font-mono)", lineHeight: 1.7 }}>
                <div>Total colis : <b>¥{fmtJPY(shipTotal)}</b></div>
                <div>Déjà rechargé{jpyN > 0 ? " (ce recharg. inclus)" : ""} : <b>¥{fmtJPY(alreadyJpy)}</b></div>
                <div>
                  {(() => {
                    const pct = shipTotal > 0 ? Math.round(alreadyJpy / shipTotal * 100) : null;
                    if (pct !== null && pct >= 95 && pct <= 100) return <span className="tag tag-pos" style={{ fontSize: 11 }}>✓ complet ({pct}%)</span>;
                    if (pct !== null && pct > 100) return <span style={{ color: "var(--neg)" }}>Surplus {pct}% — trop de ¥{fmtJPY(Math.abs(reste))}</span>;
                    return <span>Reste à recharger : <b style={{ color: "var(--warn)" }}>¥{fmtJPY(reste)}</b>{pct !== null ? ` (${pct}%)` : ""}</span>;
                  })()}
                </div>
              </div>
            );
          })()}
        </div>
        {rate && (
          <div style={{ padding: 12, background: "var(--bg-sunk)", borderRadius: 8, fontSize: 12.5 }}>
            <b>Taux effectif :</b> <span className="mono">{rate.toFixed(2)} ¥/€</span>
          </div>
        )}
      </div>
    </Drawer>
  );
};

window.TopupsScreen = TopupsScreen;