/* Finance features — 11-18 */

/* ─── 11. CIBC Reconciliation ─────────────────────────────────────── */
const CibcRecon = () => {
  const toast = (typeof useToastX === "function") ? useToastX() : null;
  const [matches, setMatches] = useState([
    { id: "tx-001", date: "10 mai", desc: "AMZN PAYMENT 5520", amount: 18400, status: "matched", confidence: 99, mapped: "Virement Amazon NA" },
    { id: "tx-002", date: "10 mai", desc: "WIRE-T/T SHENZHEN AROMA", amount: -4200, status: "matched", confidence: 95, mapped: "INV-2026-0412" },
    { id: "tx-003", date: "09 mai", desc: "PAYROLL CDN 5MAI", amount: -12500, status: "matched", confidence: 100, mapped: "Salaires équipe" },
    { id: "tx-004", date: "08 mai", desc: "UNKNOWN VEND 8421", amount: -340.50, status: "review", confidence: 72, mapped: "Inconnu · proposé : Hosting Cloudflare" },
    { id: "tx-005", date: "08 mai", desc: "AMZN ADV CHRG", amount: -2890, status: "matched", confidence: 98, mapped: "PPC Amazon mai" },
    { id: "tx-006", date: "07 mai", desc: "DEPOSIT REF 9921", amount: 880, status: "unmatched", confidence: 0, mapped: null },
  ]);
  const mapOne = (id) => {
    const label = (prompt("Mapper cette transaction sur :") || "").trim();
    if (!label) return;
    setMatches((arr) => arr.map((m) => m.id === id ? { ...m, status: "matched", confidence: 100, mapped: label } : m));
    toast?.push?.({ tone: "good", title: "Transaction mappée", body: label });
  };
  const validateAll = () => {
    const n = matches.filter((m) => m.status !== "matched").length;
    setMatches((arr) => arr.map((m) => m.status === "review" ? { ...m, status: "matched", confidence: 100, mapped: m.mapped?.replace(/^Inconnu · proposé : /, "") || "Validé" } : m));
    toast?.push?.({ tone: "good", title: `${n} transaction(s) validée(s)` });
  };
  const resync = () => toast?.push?.({ tone: "good", title: "Resync CIBC lancée", body: "Récupération des nouvelles transactions…" });
  const summary = {
    matched:    matches.filter((m) => m.status === "matched").length,
    review:     matches.filter((m) => m.status === "review").length,
    unmatched:  matches.filter((m) => m.status === "unmatched").length,
  };
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Réconciliation bancaire CIBC</div>
          <div className="page-sub">Matching automatique · {summary.matched} matchées · {summary.review} à revoir · {summary.unmatched} non-matchées</div>
        </div>
        <div className="row">
          <button onClick={resync} className="btn"><Icon name="refresh" size={13}/> Resync</button>
          <button onClick={validateAll} className="btn" data-variant="primary"><Icon name="check" size={13}/> Valider tout</button>
        </div>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <KpiCard label="Matchées auto"      value={summary.matched.toString()} sparkColor="var(--green)" delta={12.3}/>
        <KpiCard label="À revoir"            value={summary.review.toString()}   sparkColor="var(--amber)" muted/>
        <KpiCard label="Non-matchées"        value={summary.unmatched.toString()} sparkColor="var(--red)"   muted/>
        <KpiCard label="Précision moyenne"   value="95.2 %" delta={1.2}/>
      </div>
      <div className="card" style={{ marginTop: 14, padding: 0 }}>
        <table className="table">
          <thead><tr><th>Date</th><th>Description CIBC</th><th style={{textAlign:"right"}}>Montant</th><th>Mappé sur</th><th>Confiance</th><th>Statut</th><th></th></tr></thead>
          <tbody>
            {matches.map((m) => (
              <tr key={m.id}>
                <td className="mono muted">{m.date}</td>
                <td className="mono" style={{ fontSize: 11.5 }}>{m.desc}</td>
                <td className="num" style={{ textAlign: "right", color: m.amount > 0 ? "var(--green)" : "var(--text)" }}>{m.amount > 0 ? "+" : ""}${m.amount.toFixed(2)}</td>
                <td className="muted">{m.mapped || "—"}</td>
                <td>
                  {m.confidence > 0 ? (
                    <div className="row" style={{ gap: 6 }}>
                      <div style={{ width: 60, height: 5, background: "var(--bg-3)", borderRadius: 999, overflow: "hidden" }}>
                        <div style={{ width: m.confidence + "%", height: "100%", background: m.confidence >= 90 ? "var(--green)" : m.confidence >= 70 ? "var(--amber)" : "var(--red)" }}/>
                      </div>
                      <span className="num" style={{ fontSize: 11 }}>{m.confidence}%</span>
                    </div>
                  ) : <span className="muted">—</span>}
                </td>
                <td><Badge tone={m.status === "matched" ? "green" : m.status === "review" ? "amber" : "red"} dot>{m.status === "matched" ? "Matché" : m.status === "review" ? "À revoir" : "Non-matché"}</Badge></td>
                <td>
                  {m.status !== "matched" && <button onClick={() => mapOne(m.id)} className="btn" data-size="sm">Mapper →</button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* ─── 12. Cashflow 90j with scenarios ─────────────────────────────── */
const Cashflow90 = () => {
  const [scenario, setScenario] = useState("base");
  // Compute starting cash + daily flows from real persisted finance/expenses data
  const fin = (() => { try { return JSON.parse(localStorage.getItem("kcc:finances") || "null"); } catch { return null; } })();
  const expenses = (() => { try { return JSON.parse(localStorage.getItem("kcc:expenses") || "[]"); } catch { return []; } })();
  const openAcc = (() => { try { return JSON.parse(localStorage.getItem("kcc:openAccounts") || "[]"); } catch { return []; } })();
  const startCash = Number(fin?.cash ?? fin?.balance ?? 184000);
  // Daily run-rate from last-30d expenses + projected revenue from open accounts margin
  const last30Exp = expenses
    .filter(e => e?.date && (Date.now() - new Date(e.date).getTime()) < 30*86400000)
    .reduce((s, e) => s + (Number(e.amount) || 0), 0);
  const dailyBurn = (last30Exp || 12000) / 30; // fallback
  const dailyRev = Number(fin?.dailyRevenue) || dailyBurn * 1.35; // assume positive net
  const openLiab = openAcc.reduce((s, a) => s + (Number(a.amount) || 0), 0);
  const baseDays = Array.from({ length: 90 }, (_, i) => startCash + (dailyRev - dailyBurn) * (i + 1) + Math.sin(i / 5) * (dailyBurn * 0.3));
  const optimist = baseDays.map((v, i) => v + i * (dailyRev * 0.05));
  const pessimist = baseDays.map((v, i) => v - openLiab * (i / 180) - i * (dailyBurn * 0.04));
  const data = scenario === "base" ? baseDays : scenario === "optimist" ? optimist : pessimist;
  const w = 800, h = 220;
  const min = Math.min(...pessimist.concat(baseDays, optimist));
  const max = Math.max(...optimist.concat(baseDays));
  const norm = (v) => h - ((v - min) / (max - min)) * (h - 20) - 10;
  const buildPath = (arr) => arr.map((v, i) => `${(i / 89) * w},${norm(v)}`).join(" ");
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Cashflow prévisionnel 90 jours</div>
          <div className="page-sub">Solde projeté · 3 scénarios · ajustez les leviers ci-dessous</div>
        </div>
        <div className="row">
          {[["base", "Réaliste"], ["optimist", "Optimiste"], ["pessimist", "Pessimiste"]].map(([id, label]) => (
            <button key={id} onClick={() => setScenario(id)} className="btn" data-size="sm" data-variant={scenario === id ? "primary" : "ghost"}>{label}</button>
          ))}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 14 }}>
        <KpiCard label="Solde courant"           prefix="$" value={fmtMoney(startCash)} sparkColor="var(--accent)" delta={4.2}/>
        <KpiCard label="Solde projeté J+30"      prefix="$" value={fmtMoney(data[29])} sparkColor="var(--green)" delta={((data[29] - startCash) / startCash) * 100}/>
        <KpiCard label="Solde projeté J+60"      prefix="$" value={fmtMoney(data[59])} sparkColor="var(--green)" delta={((data[59] - startCash) / startCash) * 100}/>
        <KpiCard label="Solde projeté J+90"      prefix="$" value={fmtMoney(data[89])} sparkColor={data[89] > startCash ? "var(--green)" : "var(--red)"} delta={((data[89] - startCash) / startCash) * 100} muted={data[89] < startCash}/>
      </div>

      <div className="card">
        <div className="card-head"><div><div className="card-title">Solde de trésorerie · 90 prochains jours</div></div></div>
        <div className="card-body">
          <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: "block", height: 240 }}>
            <polygon points={`0,${h} ${buildPath(pessimist)} ${w},${h}`} fill="var(--red)" opacity="0.06"/>
            <polygon points={`0,${h} ${buildPath(optimist)} ${w},${h}`} fill="var(--green)" opacity="0.06"/>
            <polyline points={buildPath(optimist)} fill="none" stroke="var(--green)" strokeWidth="1" strokeDasharray="3 3" vectorEffect="non-scaling-stroke"/>
            <polyline points={buildPath(pessimist)} fill="none" stroke="var(--red)" strokeWidth="1" strokeDasharray="3 3" vectorEffect="non-scaling-stroke"/>
            <polyline points={buildPath(data)} fill="none" stroke="var(--accent)" strokeWidth="2" vectorEffect="non-scaling-stroke"/>
          </svg>
          <div className="row" style={{ gap: 16, marginTop: 12, fontSize: 11 }}>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 16, height: 2, background: "var(--accent)" }}/>Scénario actif</span>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 16, height: 2, background: "var(--green)", borderTop: "1px dashed var(--green)" }}/>Optimiste</span>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 16, height: 2, background: "var(--red)", borderTop: "1px dashed var(--red)" }}/>Pessimiste</span>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ─── 13. Multi-currency dashboard ────────────────────────────────── */
const MultiCurrency = () => {
  const toast = (typeof useToastX === "function") ? useToastX() : null;
  const fx = [
    { pair: "USD/CAD", rate: 1.371, change: 0.4 },
    { pair: "CNY/CAD", rate: 0.189, change: -0.2 },
    { pair: "EUR/CAD", rate: 1.482, change: 0.1 },
  ];
  const balances = [
    { ccy: "CAD", amount: 142800, flag: "🇨🇦", banks: "CIBC Business · Wise CAD" },
    { ccy: "USD", amount: 34200,  flag: "🇺🇸", banks: "Wise USD · Amazon US payout" },
    { ccy: "CNY", amount: 18600,  flag: "🇨🇳", banks: "Wise CNY (T/T fournisseurs)" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Multi-devises</div>
          <div className="page-sub">Soldes consolidés · taux du jour · alertes de mouvement</div>
        </div>
        <button onClick={() => toast?.push?.({ tone: "good", title: "Taux de change resynchronisés", body: "Source : BoC / ECB" })} className="btn"><Icon name="refresh" size={13}/> Resync taux</button>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 14 }}>
        {fx.map((f) => (
          <div key={f.pair} className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: ".08em" }}>{f.pair}</div>
            <div className="num" style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>{f.rate.toFixed(4)}</div>
            <div className="mono" style={{ fontSize: 11, color: f.change >= 0 ? "var(--green)" : "var(--red)", marginTop: 2 }}>{f.change >= 0 ? "+" : ""}{f.change.toFixed(2)}% (24h)</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div className="card-head"><div><div className="card-title">Soldes par devise</div><div className="card-sub">Équivalent CAD au taux du jour</div></div></div>
        <table className="table">
          <thead><tr><th>Devise</th><th>Banques</th><th style={{textAlign:"right"}}>Solde local</th><th style={{textAlign:"right"}}>Équivalent CAD</th></tr></thead>
          <tbody>
            {balances.map((b) => {
              const rate = b.ccy === "CAD" ? 1 : fx.find((f) => f.pair.startsWith(b.ccy))?.rate || 1;
              return (
                <tr key={b.ccy}>
                  <td><span style={{ fontSize: 16, marginRight: 8 }}>{b.flag}</span><span className="mono" style={{ fontWeight: 600 }}>{b.ccy}</span></td>
                  <td className="muted">{b.banks}</td>
                  <td className="num" style={{ textAlign: "right" }}>${b.amount.toLocaleString()}</td>
                  <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>${(b.amount * rate).toLocaleString("fr-CA", { maximumFractionDigits: 0 })}</td>
                </tr>
              );
            })}
            <tr style={{ background: "var(--bg-2)" }}>
              <td style={{ fontWeight: 600 }}>Total consolidé</td><td/><td/>
              <td className="num" style={{ textAlign: "right", fontWeight: 700, color: "var(--accent)" }}>${(142800 + 34200 * 1.371 + 18600 * 0.189).toLocaleString("fr-CA", { maximumFractionDigits: 0 })}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* ─── 14. Taxes (TPS/TVQ + US sales tax) ───────────────────────── */
const Taxes = () => {
  const usStates = [
    { st: "CA", name: "California",  due: 4820, status: "à déclarer" },
    { st: "NY", name: "New York",    due: 2410, status: "à déclarer" },
    { st: "TX", name: "Texas",       due: 1880, status: "déclarée" },
    { st: "FL", name: "Florida",     due: 1640, status: "déclarée" },
    { st: "WA", name: "Washington",  due: 980,  status: "à déclarer" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Taxes</div>
          <div className="page-sub">TPS/TVQ Canada · sales tax US par état · échéances</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><div><div className="card-title">Canada · TPS/TVQ</div><div className="card-sub">Période Q1 2026 · échéance 30 juin</div></div></div>
          <div className="card-body">
            {[
              ["TPS collectée (5%)",       6420, "var(--text)"],
              ["TVQ collectée (9.975%)", 12810, "var(--text)"],
              ["CTI/RTI récupérables",   -3240, "var(--green)"],
              ["Net à verser",            15990, "var(--accent)"],
            ].map(([l, v, c], i) => (
              <div key={l} className="between" style={{ padding: "9px 0", borderTop: i ? "1px solid var(--border-subtle)" : "none", fontSize: 13 }}>
                <span style={{ color: i === 3 ? "var(--text)" : "var(--text-muted)", fontWeight: i === 3 ? 600 : 400 }}>{l}</span>
                <span className="num" style={{ color: c, fontWeight: i === 3 ? 700 : 500 }}>{v < 0 ? "-" : ""}${Math.abs(v).toLocaleString()}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 0 }}>
          <div className="card-head"><div><div className="card-title">USA · Sales tax par état</div><div className="card-sub">Nexus actif dans 5 états · {usStates.filter((s) => s.status === "à déclarer").length} déclarations à faire</div></div></div>
          <table className="table">
            <thead><tr><th>État</th><th style={{textAlign:"right"}}>Dû</th><th>Statut</th></tr></thead>
            <tbody>
              {usStates.map((s) => (
                <tr key={s.st}>
                  <td><span className="mono" style={{ fontWeight: 600 }}>{s.st}</span> <span className="muted">{s.name}</span></td>
                  <td className="num" style={{ textAlign: "right" }}>${s.due.toLocaleString()}</td>
                  <td><Badge tone={s.status === "déclarée" ? "green" : "amber"} dot>{s.status}</Badge></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

/* ─── 15. Profit sharing (3 cofondateurs) ────────────────────────── */
const ProfitShare = () => {
  const toast = (typeof useToastX === "function") ? useToastX() : null;
  const monthNet = 36900;
  const reserve = 0.30; // 30% in reserve
  const distributable = monthNet * (1 - reserve);
  const shares = [
    { user: "clarens", pct: 33.33, role: "CFO" },
    { user: "kevin",   pct: 33.33, role: "COO" },
    { user: "carly",   pct: 33.34, role: "CPO" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Partage de profits</div>
          <div className="page-sub">Distribution mensuelle · réserve 30% · 3 cofondateurs égaux</div>
        </div>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 14 }}>
        <KpiCard label="Profit net mai" prefix="$" value={fmtMoney(monthNet)} delta={6.4}/>
        <KpiCard label="Réserve (30%)"  prefix="$" value={fmtMoney(monthNet * reserve)} muted/>
        <KpiCard label="Distribuable"    prefix="$" value={fmtMoney(distributable)} delta={6.4} sparkColor="var(--green)"/>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div className="card-head"><div><div className="card-title">Distribution proposée</div></div></div>
        <table className="table">
          <thead><tr><th>Cofondateur</th><th>Rôle</th><th style={{textAlign:"right"}}>%</th><th style={{textAlign:"right"}}>Montant CAD</th><th style={{textAlign:"right"}}>YTD</th><th>Statut</th></tr></thead>
          <tbody>
            {shares.map((s) => (
              <tr key={s.user}>
                <td><span className="row" style={{ gap: 8 }}><Avatar user={s.user} size="sm"/>{({clarens:"Clarens",kevin:"Kevin",carly:"Carly"})[s.user]}</span></td>
                <td className="muted">{s.role}</td>
                <td className="num" style={{ textAlign: "right" }}>{s.pct.toFixed(2)}%</td>
                <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>${(distributable * s.pct / 100).toLocaleString("fr-CA", { maximumFractionDigits: 0 })}</td>
                <td className="num" style={{ textAlign: "right" }}>${(distributable * s.pct / 100 * 5).toLocaleString("fr-CA", { maximumFractionDigits: 0 })}</td>
                <td><Badge tone="amber" dot>En attente vote</Badge></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="row" style={{ padding: 14, gap: 8, borderTop: "1px solid var(--border-subtle)" }}>
          <button onClick={() => toast?.push?.({ tone: "good", title: "Conventions de partage", body: "Édition des règles ouverte." })} className="btn" data-variant="ghost">Modifier conventions</button>
          <button onClick={() => toast?.push?.({ tone: "good", title: "Distribution approuvée", body: "Profit-share du mois validé." })} className="btn" data-variant="primary" style={{ marginLeft: "auto" }}><Icon name="check" size={13}/> Approuver distribution</button>
        </div>
      </div>
    </div>
  );
};

/* ─── 16. Anomaly detection feed ──────────────────────────────────── */
const Anomalies = () => {
  const toast = (typeof useToastX === "function") ? useToastX() : null;
  // Detect anomalies from real expense data: outliers (>3x median), duplicates, unusual categories
  const expenses = (() => { try { return JSON.parse(localStorage.getItem("kcc:expenses") || "[]"); } catch { return []; } })();
  const detected = (() => {
    const out = [];
    const amounts = expenses.map(e => Number(e.amount) || 0).filter(x => x > 0).sort((a, b) => a - b);
    const median = amounts.length ? amounts[Math.floor(amounts.length / 2)] : 0;
    const threshold = median * 3;
    expenses.forEach((e) => {
      const amt = Number(e.amount) || 0;
      if (median > 0 && Math.abs(amt) > threshold) {
        out.push({
          sev: "red",
          ts: e.date || "—",
          what: `Dépense $${amt.toFixed(2)} sur ${e.vendor || e.category || "—"} inhabituelle (${(amt / median).toFixed(1)}× médiane)`,
          what2: "Vérifier · ratio dépasse 3× la médiane",
        });
      }
    });
    // Duplicate detection: same vendor + same amount within 7 days
    const seen = new Map();
    expenses.forEach((e) => {
      const key = `${e.vendor}|${e.amount}`;
      if (seen.has(key)) {
        const prev = seen.get(key);
        const dt = Math.abs(new Date(e.date) - new Date(prev.date));
        if (dt < 7 * 86400000) {
          out.push({ sev: "amber", ts: e.date, what: `Possible doublon $${e.amount} chez ${e.vendor}`, what2: "2 transactions identiques en moins de 7 jours" });
        }
      }
      seen.set(key, e);
    });
    return out;
  })();
  const fallback = [
    { sev: "amber", ts: "—", what: "Aucune anomalie détectée sur les dépenses persistées", what2: "Importez/ajoutez des dépenses pour activer la détection" },
  ];
  const anomalies = detected.length ? detected : fallback;
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Anomalies détectées</div>
          <div className="page-sub">JARVIS scanne toutes les 10min · {anomalies.length} anomalies actives</div>
        </div>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {anomalies.map((a, i) => (
          <div key={i} style={{ display: "flex", gap: 14, padding: 16, borderTop: i ? "1px solid var(--border-subtle)" : "none" }}>
            <span style={{ width: 6, marginTop: 6, height: 6, borderRadius: 999, background: `var(--${a.sev})`, boxShadow: `0 0 0 4px var(--${a.sev}-soft)`, flexShrink: 0 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 550 }}>{a.what}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-dim)", marginTop: 3 }}>{a.what2}</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-faint)", whiteSpace: "nowrap" }}>{a.ts}</span>
            <button onClick={() => toast?.push?.({ tone: "warn", title: "Examen de l'anomalie", body: a.what })} className="btn" data-size="sm" data-variant="ghost">Examiner →</button>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ─── 17. Debts & credit lines ────────────────────────────────────── */
const Debts = () => {
  // Real lines: fixed credit facilities + dynamic open accounts from localStorage
  const openAcc = (() => { try { return JSON.parse(localStorage.getItem("kcc:openAccounts") || "[]"); } catch { return []; } })();
  const FIXED = [
    { kind: "CIBC ligne de crédit",  total: 250000, used: 38400, rate: 8.45, dueDate: "31 mars 2027" },
    { kind: "Brex carte",             total: 50000,  used: 12300, rate: 0,    dueDate: "Paiement mensuel" },
  ];
  const dynamic = openAcc.map((a) => ({
    kind: `Compte ouvert · ${a.supplier || a.name || "Fournisseur"}`,
    total: Number(a.limit ?? a.creditLimit ?? a.total ?? a.amount * 2) || 25000,
    used: Number(a.amount ?? a.balance ?? a.used) || 0,
    rate: Number(a.rate) || 0,
    dueDate: a.terms || a.dueDate || "Net 30",
  }));
  const lines = dynamic.length ? FIXED.concat(dynamic) : FIXED.concat([
    { kind: "Compte ouvert · (aucun)", total: 1, used: 0, rate: 0, dueDate: "—" }
  ]);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Dettes & lignes de crédit</div>
          <div className="page-sub">Capacité totale, utilisation, taux, échéances</div>
        </div>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {lines.map((l, i) => {
          const pct = (l.used / l.total) * 100;
          return (
            <div key={i} className="card" style={{ padding: 18 }}>
              <div className="between" style={{ marginBottom: 10 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{l.kind}</span>
                <Badge tone={pct < 50 ? "green" : pct < 75 ? "amber" : "red"} dot>{pct.toFixed(0)}% utilisé</Badge>
              </div>
              <div className="num" style={{ fontSize: 22, fontWeight: 600 }}>${l.used.toLocaleString()} <span style={{ fontSize: 13, color: "var(--text-dim)", fontWeight: 400 }}>/ ${l.total.toLocaleString()}</span></div>
              <div style={{ height: 6, background: "var(--bg-3)", borderRadius: 999, marginTop: 10, overflow: "hidden" }}>
                <div style={{ width: pct + "%", height: "100%", background: pct < 50 ? "var(--green)" : pct < 75 ? "var(--amber)" : "var(--red)" }}/>
              </div>
              <div className="row" style={{ gap: 18, marginTop: 12, fontSize: 11.5, color: "var(--text-dim)" }}>
                <span>Taux · <span className="num" style={{ color: "var(--text)" }}>{l.rate ? l.rate.toFixed(2) + "%" : "0"}</span></span>
                <span>Échéance · <span style={{ color: "var(--text)" }}>{l.dueDate}</span></span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { CibcRecon, Cashflow90, MultiCurrency, Taxes, ProfitShare, Anomalies, Debts });