/* global React, Icon, Button, Badge, Avatar, Card, Modal, PageHead, Toolbar, Table, Th, Td, SectionTitle, WhatsAppBtn, BarChart, DATA */
// ============================================================
// Facturation — modèle subs × prix · paiements horodatés · ROI équipe
// ============================================================
const { useState: useBillState } = React;

function nowStamp() {
  const d = new Date();
  const p = (n) => String(n).padStart(2, "0");
  return `${p(d.getDate())}/${p(d.getMonth() + 1)}/${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}`;
}
const eur = (n) => CurStore.get() === "USD" ? "$" + Math.round(n).toLocaleString("en-US") : Math.round(n).toLocaleString("fr-FR") + "\u00a0€";
const num = (n) => n.toLocaleString("fr-FR");
const CUR_SYM = () => CurStore.get() === "USD" ? "$" : "€";

const CurStore = (function () {
  let cur = "USD"; // full dollar par défaut
  const ls = new Set();
  return { sub(cb) { ls.add(cb); return () => ls.delete(cb); }, get() { return cur; }, set(c) { cur = c; ls.forEach(f => f()); } };
})();
function useCur() { const [, f] = React.useReducer(x => x + 1, 0); React.useEffect(() => CurStore.sub(f), []); return CurStore; }

// dérivés du modèle subs
const owedOf = (r) => r.type === "salary" ? (r.owed || 0) : Math.max(0, (r.subs - r.paidSubs) * r.rate);
const statusOf = (r) => {
  if (r.type === "salary") return owedOf(r) > 0 ? "pending" : "paid";
  if (!r.subs) return "na";
  if (r.paidSubs >= r.subs) return "paid";
  return r.paidSubs > 0 ? "partial" : "pending";
};
const BILL_STATUS = { paid: ["green", "Payé"], pending: ["amber", "À payer"], partial: ["cyan", "Partiel"], na: ["gray", "—"] };

function AdminBilling() {
  const cur = useCur();
  // lignes limitées aux membres réels (les personnes fictives de démo sont exclues)
  const [rows, setRows] = useBillState(() => {
    const real = new Set(DATA.realTeam().map(o => o.id));
    return DATA.BILLING.filter(b => real.has(b.id)).map(b => ({ ...b, payments: [...b.payments] }));
  });
  const [history, setHistory] = useBillState(null);
  const [pay, setPay] = useBillState(null);
  const [addSubs, setAddSubs] = useBillState(null);
  const [addPerson, setAddPerson] = useBillState(false);
  const [confirmReset, setConfirmReset] = useBillState(false);
  const [addRev, setAddRev] = useBillState(false);
  const [revenues, setRevenues] = useBillState([]);   // revenus réels saisis (vide au départ)
  const [revTotal, setRevTotal] = useBillState(null); // si défini : revenu total fixé (n'accumule pas)
  const [q, setQ] = useBillState("");

  const totalOwed = rows.reduce((s, r) => s + owedOf(r), 0);
  const totalPaid = rows.reduce((s, r) => s + r.payments.reduce((a, p) => a + p.amount, 0), 0);
  const pendingCount = rows.filter(r => ["pending", "partial"].includes(statusOf(r))).length;

  // --- ROI équipe ---
  const totalSubs = rows.filter(r => r.type === "sub").reduce((s, r) => s + r.subs, 0);
  const sell = DATA.SELL_PER_SUB;
  const teamCost = totalPaid + totalOwed;          // ce que coûte le travail réalisé
  const manualRev = revTotal != null ? revTotal : revenues.reduce((s, r) => s + r.amount, 0);
  const estRev = totalSubs * sell;
  const revenue = manualRev > 0 ? manualRev : estRev;   // revenus réels saisis, sinon estimation
  const margin = revenue - teamCost;
  const roi = teamCost ? Math.round((margin / teamCost) * 100) : 0;
  const series = DATA.days.map((d, i) => {
    const subsDay = Math.round((d.tasksDone || 4) * 6 + 6 + (i % 3) * 5);
    return { label: d.label, cost: Math.round(subsDay * 0.62), revenue: Math.round(subsDay * sell) };
  });

  const recordPayment = (id, { amount, method, ref }) => {
    setRows(rs => rs.map(r => {
      if (r.id !== id) return r;
      const payment = { amount, at: nowStamp(), method, ref };
      if (r.type === "salary") return { ...r, owed: Math.max(0, (r.owed || 0) - amount), payments: [payment, ...r.payments] };
      const subsPaidNow = Math.min(r.subs - r.paidSubs, Math.round(amount / r.rate));
      payment.subs = subsPaidNow;
      return { ...r, paidSubs: Math.min(r.subs, r.paidSubs + subsPaidNow), payments: [payment, ...r.payments] };
    }));
  };
  const addSubsTo = (id, n) => setRows(rs => rs.map(r => r.id === id ? { ...r, subs: r.subs + n } : r));
  const createRow = (row) => setRows(rs => [...rs, row]);

  const shown = rows.filter(r => { const o = DATA.opById(r.id); return o && o.name.toLowerCase().includes(q.toLowerCase()); });

  return (
    <div>
      <PageHead title="Facturation" sub="paiement aux subs · jamais 2× les mêmes · ROI de l'équipe en direct">
        <Segmented value={cur.get()} onChange={(v) => cur.set(v)} options={[["USD", "$ USD"], ["EUR", "€ EUR"]]} />
        <Button variant="outline" icon="refresh" onClick={() => setConfirmReset(true)}>Réinitialiser</Button>
        <Button variant="outline" icon="download">Export CSV</Button>
        <Button variant="outline" icon="euro" onClick={() => setAddRev(true)}>Ajouter un revenu</Button>
        <Button variant="primary" icon="plus" onClick={() => setAddPerson(true)}>Ajouter une personne</Button>
      </PageHead>

      {confirmReset && (
        <Modal title="Réinitialiser la facturation" onClose={() => setConfirmReset(false)} width={460}
          footer={<><Button variant="ghost" onClick={() => setConfirmReset(false)}>Annuler</Button>
            <Button variant="danger" icon="refresh" onClick={() => { setRows([]); setRevenues([]); setRevTotal(null); setConfirmReset(false); }}>Oui, tout réinitialiser</Button></>}>
          <div style={{ display: "grid", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderRadius: 11, background: "rgba(255,92,108,.08)", border: "1px solid rgba(255,92,108,.25)" }}>
              <span style={{ width: 38, height: 38, borderRadius: 10, background: "rgba(255,92,108,.15)", color: "var(--danger)", display: "grid", placeItems: "center", flex: "none" }}>{React.createElement(Icon.x, { size: 18 })}</span>
              <div style={{ fontSize: 13.5, lineHeight: 1.5 }}>Vous êtes sûr de vouloir réinitialiser ? <b>Toutes les personnes, paiements, subs et revenus saisis seront remis à zéro.</b> Cette action est irréversible.</div>
            </div>
          </div>
        </Modal>
      )}

      {/* ROI */}
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginBottom: 16 }} className="ov-grid">
        <Card pad={20}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700 }}>Coût équipe vs revenus</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--faint)", marginTop: 3 }}>estimé · {num(totalSubs)} subs × {sell} {CUR_SYM()} revente</div>
            </div>
            <div style={{ display: "flex", gap: 14, fontSize: 11.5 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--muted)" }}><span style={{ width: 9, height: 9, borderRadius: 3, background: "var(--danger)" }} />coût</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--muted)" }}><span style={{ width: 9, height: 9, borderRadius: 3, background: "var(--accent)" }} />revenu</span>
            </div>
          </div>
          <BarChart data={series} keys={["revenue", "cost"]} colors={["var(--accent)", "var(--danger)"]} h={188} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            {series.filter((_, i) => i % 3 === 0).map(d => <span key={d.label} className="mono" style={{ fontSize: 9.5, color: "var(--faint)" }}>{d.label}</span>)}
          </div>
        </Card>

        <Card pad={22} style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--muted)" }}>Retour sur investissement</div>
          <div className="num" style={{ fontSize: 44, fontWeight: 800, color: roi >= 0 ? "var(--accent)" : "var(--danger)", letterSpacing: "-.02em", marginTop: 8 }}>{roi >= 0 ? "+" : ""}{roi}%</div>
          <div style={{ display: "grid", gap: 10, marginTop: 16 }}>
            <RoiLine label={manualRev > 0 ? "Revenu réel saisi" : "Revenu estimé"} value={eur(revenue)} color="var(--accent)" />
            <RoiLine label="Coût équipe" value={eur(teamCost)} color="var(--danger)" />
            <div style={{ height: 1, background: "var(--border)" }} />
            <RoiLine label="Marge brute" value={eur(margin)} color="var(--text)" bold />
          </div>
          <button onClick={() => setAddRev(true)} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7, marginTop: 14, padding: "9px", borderRadius: 9, background: "var(--surface-2)", border: "1px dashed var(--border-2)", color: "var(--accent)", fontSize: 12.5, fontWeight: 600, width: "100%" }}>
            {React.createElement(Icon.plus, { size: 14 })} Ajouter un revenu
          </button>
          {revTotal != null && <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 12, padding: "9px 12px", borderRadius: 9, background: "var(--cyan-soft)", border: "1px solid rgba(34,211,238,.3)", fontSize: 12 }}>
            {React.createElement(Icon.lock, { size: 14, color: "var(--accent-2)" })}
            <span style={{ flex: 1, color: "var(--muted)" }}>Revenu total <b style={{ color: "var(--text)" }}>défini manuellement</b> : <span className="num" style={{ color: "var(--accent-2)", fontWeight: 700 }}>{eur(revTotal)}</span> (n'accumule pas)</span>
            <button onClick={() => setRevTotal(null)} style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 7, padding: "5px 9px", color: "var(--accent)", fontSize: 11.5, fontWeight: 600, cursor: "pointer" }}>Revenir au cumul</button>
          </div>}
          {revTotal == null && revenues.length > 0 && <div style={{ display: "grid", gap: 7, marginTop: 12 }}>
            {revenues.map(r => (
              <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)", flex: "none" }} />
                <span style={{ flex: 1, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
                <span className="num" style={{ fontWeight: 600 }}>{eur(r.amount)}</span>
                <button onClick={() => setRevenues(rs => rs.filter(x => x.id !== r.id))} style={{ background: "none", border: "none", color: "var(--faint)", display: "grid", padding: 2, cursor: "pointer" }}>{React.createElement(Icon.x, { size: 13 })}</button>
              </div>
            ))}
          </div>}
        </Card>
      </div>

      {/* KPIs paiements */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 20 }} className="kpi-grid">
        <BillKpi icon="euro" tone="amber" label="Total dû" value={eur(totalOwed)} sub={`${pendingCount} personne(s)`} />
        <BillKpi icon="check" tone="green" label="Total payé" value={eur(totalPaid)} sub="cumul historique" />
        <BillKpi icon="hash" tone="cyan" label="Subs cumulés" value={num(totalSubs)} sub="par l'équipe" />
        <BillKpi icon="wallet" tone={pendingCount ? "amber" : "green"} label="À régler" value={pendingCount} sub={pendingCount ? "en attente" : "tout est à jour"} />
      </div>

      <Toolbar q={q} setQ={setQ} placeholder="Rechercher une personne…" />

      <Table head={<><Th>Personne</Th><Th>Base</Th><Th>Subs</Th><Th>Montant dû</Th><Th>Statut</Th><Th>Dernier paiement</Th><Th style={{ textAlign: "right" }}>Actions</Th></>}>
        {shown.map(r => {
          const o = DATA.opById(r.id);
          const st = statusOf(r), owed = owedOf(r);
          const [tone, label] = BILL_STATUS[st];
          const last = r.payments[0];
          return (
            <tr key={r.id}>
              <Td>
                <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <Avatar user={o} size={34} />
                  <div>
                    <div style={{ fontWeight: 600 }}>{o.name}</div>
                    <Badge tone={o.role === "Manager" ? "cyan" : "amber"} style={{ marginTop: 3 }}>{o.role}</Badge>
                  </div>
                </div>
              </Td>
              <Td><span style={{ color: "var(--muted)", fontSize: 12.5 }}>{r.type === "salary" ? "Salaire fixe" : `${r.rate.toFixed(2)} ${CUR_SYM()} / sub`}</span></Td>
              <Td>{r.type === "salary" ? <span style={{ color: "var(--faint)" }}>—</span>
                : <span className="num"><b>{num(r.subs - r.paidSubs)}</b><span style={{ color: "var(--faint)" }}> dûs / {num(r.subs)}</span></span>}</Td>
              <Td><span className="num" style={{ fontWeight: 700, fontSize: 14, color: owed > 0 ? "var(--busy)" : "var(--accent)" }}>{st === "na" ? "—" : eur(owed)}</span></Td>
              <Td><Badge tone={tone}>{label}</Badge></Td>
              <Td>{last
                ? <div style={{ lineHeight: 1.35 }}><span className="num" style={{ fontSize: 12.5 }}>{eur(last.amount)}</span><div className="mono" style={{ fontSize: 10.5, color: "var(--faint)" }}>{last.at}</div></div>
                : <span style={{ color: "var(--faint)" }}>aucun</span>}</Td>
              <Td>
                <div style={{ display: "flex", gap: 7, justifyContent: "flex-end" }}>
                  {r.type === "sub" && <button onClick={() => setAddSubs(r)} title="Ajouter des subs" style={iconBtn}>{React.createElement(Icon.plus, { size: 15 })}</button>}
                  <button onClick={() => setHistory(r)} title="Historique des paiements" style={iconBtn}>{React.createElement(Icon.receipt, { size: 15 })}</button>
                  {st !== "na" && owed > 0 && <Button size="sm" variant="primary" icon="euro" onClick={() => setPay(r)}>Payer</Button>}
                  {owed === 0 && st !== "na" && <Badge tone="green"><span style={{ display: "inline-flex" }}>{React.createElement(Icon.check, { size: 13 })}</span> à jour</Badge>}
                </div>
              </Td>
            </tr>
          );
        })}
      </Table>

      <p className="mono" style={{ fontSize: 11, color: "var(--faint)", marginTop: 14, display: "flex", alignItems: "center", gap: 7 }}>
        {React.createElement(Icon.lock, { size: 13 })} montant dû = (subs ramenés − subs déjà payés) × prix · chaque paiement est horodaté (preuve anti-litige).
      </p>

      {history && <HistoryModal row={history} onClose={() => setHistory(null)} />}
      {pay && <PayModal row={pay} onClose={() => setPay(null)} onConfirm={(d) => { recordPayment(pay.id, d); setPay(null); }} />}
      {addSubs && <AddSubsModal row={addSubs} onClose={() => setAddSubs(null)} onConfirm={(n) => { addSubsTo(addSubs.id, n); setAddSubs(null); }} />}
      {addPerson && <AddPersonModal existing={rows.map(r => r.id)} onClose={() => setAddPerson(false)} onConfirm={(row) => { createRow(row); setAddPerson(false); }} />}
      {addRev && <AddRevenueModal currentTotal={manualRev} onClose={() => setAddRev(false)} onConfirm={(rev) => {
        if (rev.mode === "total") { setRevTotal(rev.amount); }
        else { setRevTotal(null); setRevenues(rs => [{ id: "rv" + Date.now(), label: rev.label, amount: rev.amount, at: rev.at }, ...rs]); }
        setAddRev(false);
      }} />}
    </div>
  );
}

function RoiLine({ label, value, color, bold }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{label}</span>
      <span className="num" style={{ fontSize: bold ? 16 : 14, fontWeight: bold ? 800 : 700, color }}>{value}</span>
    </div>
  );
}

const iconBtn = { display: "grid", placeItems: "center", width: 30, height: 30, borderRadius: 8, background: "var(--surface-2)", border: "1px solid var(--border)", color: "var(--muted)" };

function BillKpi({ icon, tone, label, value, sub }) {
  const c = { green: "var(--accent)", cyan: "var(--accent-2)", amber: "var(--busy)" }[tone];
  return (
    <Card pad={18}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "color-mix(in srgb," + c + " 14%, transparent)", display: "grid", placeItems: "center", color: c }}>
        {React.createElement(Icon[icon], { size: 18 })}
      </div>
      <div className="num" style={{ fontSize: 25, fontWeight: 700, marginTop: 13, letterSpacing: "-.02em", whiteSpace: "nowrap" }}>{value}</div>
      <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 2 }}>{label}</div>
      <div className="mono" style={{ fontSize: 11, color: "var(--faint)", marginTop: 2 }}>{sub}</div>
    </Card>
  );
}

const fld = { width: "100%", padding: "11px 13px", background: "var(--bg-2)", border: "1px solid var(--border-2)", borderRadius: 9, color: "var(--text)", fontSize: 13.5, outline: "none" };
const labS = { fontSize: 12.5, fontWeight: 600, color: "var(--muted)" };

function HistoryModal({ row, onClose }) {
  const o = DATA.opById(row.id);
  const total = row.payments.reduce((a, p) => a + p.amount, 0);
  return (
    <Modal title={`Historique des paiements — ${o.name}`} onClose={onClose} width={520}
      footer={<Button variant="outline" icon="download" onClick={onClose}>Exporter le relevé</Button>}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 14px", borderRadius: 11, background: "var(--surface-2)", border: "1px solid var(--border)", marginBottom: 16 }}>
        <span style={{ fontSize: 12.5, color: "var(--muted)" }}>Total versé à ce jour</span>
        <span className="num" style={{ fontSize: 17, fontWeight: 700, color: "var(--accent)" }}>{eur(total)}</span>
      </div>
      {row.payments.length === 0
        ? <div style={{ textAlign: "center", color: "var(--faint)", padding: "30px 0", fontSize: 13 }}>Aucun paiement enregistré.</div>
        : <div style={{ display: "grid", gap: 0 }}>
            {row.payments.map((p, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 4px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <span style={{ width: 34, height: 34, borderRadius: 9, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", flex: "none" }}>{React.createElement(Icon.check, { size: 17 })}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{eur(p.amount)} {p.subs ? <span style={{ color: "var(--faint)", fontWeight: 400, fontSize: 12 }}>· {num(p.subs)} subs</span> : null} <span style={{ color: "var(--faint)", fontWeight: 400, fontSize: 12 }}>· {p.method}</span></div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--faint)", marginTop: 2 }}>réf {p.ref}</div>
                </div>
                <div className="mono" style={{ fontSize: 11.5, color: "var(--muted)", textAlign: "right" }}>{p.at}</div>
              </div>
            ))}
          </div>}
    </Modal>
  );
}

const METHODS = ["Virement SEPA", "PayPal", "Espèces", "Crypto (USDT)", "Revolut"];
function PayModal({ row, onClose, onConfirm }) {
  const o = DATA.opById(row.id);
  const owed = owedOf(row);
  const [amount, setAmount] = useBillState(owed);
  const [method, setMethod] = useBillState(METHODS[0]);
  const ref = "VIR-" + new Date().getFullYear().toString().slice(2) + (new Date().getMonth() + 1) + "-" + Math.floor(Math.random() * 9000 + 1000);
  const subsCovered = row.type === "sub" ? Math.min(row.subs - row.paidSubs, Math.round((+amount || 0) / row.rate)) : null;
  return (
    <Modal title={`Enregistrer un paiement — ${o.name}`} onClose={onClose} width={460}
      footer={<><Button variant="ghost" onClick={onClose}>Annuler</Button>
        <Button variant="primary" icon="check" disabled={!amount || amount <= 0} onClick={() => onConfirm({ amount: +amount, method, ref })}>Confirmer · {eur(+amount || 0)}</Button></>}>
      <div style={{ display: "grid", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "11px 13px", borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
          <Avatar user={o} size={32} />
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{o.name}</div><div className="mono" style={{ fontSize: 10.5, color: "var(--faint)" }}>dû : {eur(owed)}{row.type === "sub" ? ` · ${num(row.subs - row.paidSubs)} subs` : ""}</div></div>
        </div>
        <div><label style={labS}>Montant ({CUR_SYM()})</label>
          <input type="number" value={amount} onChange={e => setAmount(e.target.value)} style={{ ...fld, marginTop: 7 }} autoFocus />
          {subsCovered != null && <div className="mono" style={{ fontSize: 11, color: "var(--accent-2)", marginTop: 6 }}>≈ {num(subsCovered)} subs réglés · le reste dû se recalcule</div>}</div>
        <div><label style={labS}>Méthode</label>
          <select value={method} onChange={e => setMethod(e.target.value)} style={{ ...fld, marginTop: 7 }}>{METHODS.map(m => <option key={m}>{m}</option>)}</select></div>
        <div><label style={labS}>Référence</label>
          <input defaultValue={ref} style={{ ...fld, marginTop: 7 }} /></div>
        <div className="mono" style={{ fontSize: 11, color: "var(--faint)", display: "flex", alignItems: "center", gap: 7 }}>
          {React.createElement(Icon.clock, { size: 13 })} horodaté automatiquement à {nowStamp()}
        </div>
      </div>
    </Modal>
  );
}

function AddSubsModal({ row, onClose, onConfirm }) {
  const o = DATA.opById(row.id);
  const [n, setN] = useBillState(10);
  const extra = (+n || 0) * row.rate;
  return (
    <Modal title={`Ajouter des subs — ${o.name}`} onClose={onClose} width={420}
      footer={<><Button variant="ghost" onClick={onClose}>Annuler</Button>
        <Button variant="primary" icon="plus" disabled={!n || n <= 0} onClick={() => onConfirm(+n)}>Ajouter {num(+n || 0)} subs</Button></>}>
      <div style={{ display: "grid", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "11px 13px", borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
          <Avatar user={o} size={32} />
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{o.name}</div><div className="mono" style={{ fontSize: 10.5, color: "var(--faint)" }}>{r0(row)} · {row.rate.toFixed(2)} {CUR_SYM()}/sub</div></div>
        </div>
        <div><label style={labS}>Subs supplémentaires ramenés</label>
          <input type="number" value={n} onChange={e => setN(e.target.value)} style={{ ...fld, marginTop: 7 }} autoFocus /></div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "11px 13px", borderRadius: 10, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", fontSize: 12.5, color: "var(--accent)" }}>
          {React.createElement(Icon.euro, { size: 16 })} +{eur(extra)} ajoutés au montant dû (déduits automatiquement de ce qui reste à payer).
        </div>
      </div>
    </Modal>
  );
}
const r0 = (row) => `${num(row.subs)} subs · ${num(row.subs - row.paidSubs)} dûs`;

function AddPersonModal({ existing, onClose, onConfirm }) {
  // uniquement les personnes inscrites sur le site (comptes réels) — plus de liste fictive
  const candidates = DATA.realTeam().filter(o => o.role !== "Admin" && o.role !== "Owner");
  const [opId, setOpId] = useBillState(candidates.find(o => !existing.includes(o.id))?.id || (candidates[0] && candidates[0].id) || "");
  const [type, setType] = useBillState("sub");
  const [subs, setSubs] = useBillState(0);
  const [rate, setRate] = useBillState(0.60);
  const [salary, setSalary] = useBillState(1000);
  const owed = type === "sub" ? (+subs || 0) * (+rate || 0) : (+salary || 0);

  if (!candidates.length) return (
    <Modal title="Ajouter une personne à la facturation" onClose={onClose} width={440}
      footer={<Button variant="primary" onClick={onClose}>OK</Button>}>
      <div style={{ color: "var(--faint)", fontSize: 13, textAlign: "center", padding: "16px 0" }}>
        Personne d'inscrit pour l'instant — les membres doivent créer leur compte (page de connexion → S'inscrire), ils apparaîtront ici.
      </div>
    </Modal>
  );

  const submit = () => {
    const row = type === "sub"
      ? { id: opId, type: "sub", rate: +rate, subs: +subs, paidSubs: 0, payments: [] }
      : { id: opId, type: "salary", owed: +salary, payments: [] };
    onConfirm(row);
  };

  return (
    <Modal title="Ajouter une personne à la facturation" onClose={onClose} width={480}
      footer={<><Button variant="ghost" onClick={onClose}>Annuler</Button>
        <Button variant="primary" icon="check" onClick={submit}>Ajouter · dû {eur(owed)}</Button></>}>
      <div style={{ display: "grid", gap: 16 }}>
        <div><label style={labS}>Personne</label>
          <select value={opId} onChange={e => setOpId(e.target.value)} style={{ ...fld, marginTop: 7 }}>
            {candidates.map(o => <option key={o.id} value={o.id}>{o.name} · {o.role}{existing.includes(o.id) ? " (déjà listé)" : ""}</option>)}
          </select></div>
        <div><label style={labS}>Mode de rémunération</label>
          <div style={{ display: "flex", gap: 8, marginTop: 7 }}>
            {[["sub", "À la sub"], ["salary", "Salaire fixe"]].map(([v, l]) => (
              <button key={v} onClick={() => setType(v)} style={{ flex: 1, padding: "10px", borderRadius: 9, fontSize: 13, fontWeight: 600,
                background: type === v ? "var(--accent-soft)" : "var(--surface-2)", border: "1px solid " + (type === v ? "var(--accent-line)" : "var(--border)"), color: type === v ? "var(--accent)" : "var(--text)" }}>{l}</button>
            ))}
          </div></div>
        {type === "sub"
          ? <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div><label style={labS}>Subs ramenés</label>
                <input type="number" value={subs} onChange={e => setSubs(e.target.value)} placeholder="ex. 250" style={{ ...fld, marginTop: 7 }} autoFocus /></div>
              <div><label style={labS}>Prix / sub ({CUR_SYM()})</label>
                <input type="number" step="0.05" value={rate} onChange={e => setRate(e.target.value)} style={{ ...fld, marginTop: 7 }} /></div>
            </div>
          : <div><label style={labS}>Salaire dû ({CUR_SYM()})</label>
              <input type="number" value={salary} onChange={e => setSalary(e.target.value)} style={{ ...fld, marginTop: 7 }} /></div>}
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "12px 14px", borderRadius: 11, background: "var(--accent-soft)", border: "1px solid var(--accent-line)" }}>
          {React.createElement(Icon.euro, { size: 17, color: "var(--accent)" })}
          <span style={{ fontSize: 13, color: "var(--text)" }}>Montant dû calculé : <b className="num" style={{ color: "var(--accent)" }}>{eur(owed)}</b>{type === "sub" ? ` (${num(+subs || 0)} × ${(+rate || 0).toFixed(2)} ${CUR_SYM()})` : ""}</span>
        </div>
      </div>
    </Modal>
  );
}

function AddRevenueModal({ onClose, onConfirm, currentTotal }) {
  const [mode, setMode] = useBillState("add"); // 'add' = cumuler · 'total' = définir le total
  const [label, setLabel] = useBillState("");
  const [amount, setAmount] = useBillState("");
  const stamp = () => { const d = new Date(); const p = n => String(n).padStart(2, "0"); return `${p(d.getDate())}/${p(d.getMonth() + 1)} ${p(d.getHours())}:${p(d.getMinutes())}`; };
  const isTotal = mode === "total";
  return (
    <Modal title="Ajouter un revenu" onClose={onClose} width={440}
      footer={<><Button variant="ghost" onClick={onClose}>Annuler</Button>
        <Button variant="primary" icon="check" disabled={!amount || +amount <= 0} onClick={() => onConfirm({ mode, label: label.trim() || "Revenu", amount: +amount, at: stamp() })}>
          {isTotal ? "Définir le total" : "Ajouter"} · {eur(+amount || 0)}</Button></>}>
      <div style={{ display: "grid", gap: 16 }}>
        <div><label style={labS}>Type d'ajout</label>
          <div style={{ display: "flex", gap: 8, marginTop: 7 }}>
            {[["add", "Cumuler", "S'ajoute au total existant"], ["total", "Définir le total", "Fixe le revenu total (n'accumule pas)"]].map(([v, l]) => (
              <button key={v} onClick={() => setMode(v)} style={{ flex: 1, padding: "10px", borderRadius: 9, fontSize: 13, fontWeight: 600,
                background: mode === v ? "var(--accent-soft)" : "var(--surface-2)", border: "1px solid " + (mode === v ? "var(--accent-line)" : "var(--border)"), color: mode === v ? "var(--accent)" : "var(--text)" }}>{l}</button>
            ))}
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--faint)", marginTop: 7 }}>
            {isTotal ? `Remplace le revenu total affiché (actuel : ${eur(currentTotal || 0)}).` : "Ajoute une ligne et cumule avec les revenus existants."}
          </div>
        </div>
        {!isTotal && <div><label style={labS}>Source / libellé</label>
          <input value={label} onChange={e => setLabel(e.target.value)} placeholder="ex. prestation client, abonnement…" style={{ ...fld, marginTop: 7 }} autoFocus /></div>}
        <div><label style={labS}>{isTotal ? `Revenu total (${CUR_SYM()})` : `Montant (${CUR_SYM()})`}</label>
          <input type="number" value={amount} onChange={e => setAmount(e.target.value)} placeholder="0" style={{ ...fld, marginTop: 7 }} autoFocus={isTotal} /></div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "11px 13px", borderRadius: 10, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", fontSize: 12.5, color: "var(--accent)" }}>
          {React.createElement(Icon.chart, { size: 16 })} {isTotal ? "Définit le revenu total → recalcule ROI et marge." : "Ajouté aux revenus réels → recalcule ROI et marge."}
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { AdminBilling });