/* =====================================================
   Betting Tracker — Bankroll page
   Multiple wallets, balances (initial vs current from
   settled bets), deposits/withdrawals ledger, and the
   staking-strategy panel (flat / % / Kelly) with a live
   suggested next stake.
   ===================================================== */

function Bankroll() {
  const { state, dispatch, t } = useTracker();
  const cur = state.settings.currency;
  const [txnModal, setTxnModal] = useState(null); // {bankrollId, type}
  const [walletModal, setWalletModal] = useState(null);

  const totalInitial = state.bankrolls.reduce((s, w) => s + w.initial, 0);
  const totalCurrent = TRK.bankrollBalance(state);
  const netDep = TRK.netDeposits(state);
  const pnl = TRK.summarize(state.bets).profit;
  const growth = netDep ? (totalCurrent - netDep) / netDep * 100 : 0;

  const setSetting = (k, v) => dispatch({ type: "set-setting", key: k, value: v });

  const booksUsed = (id) => state.bets.filter((x) => x.bankrollId === id && x.book)
    .map((x) => x.book).filter((v, i, a) => a.indexOf(v) === i).join(" \u00b7 ");

  const txns = state.transactions.slice().sort((a, b) => TRK.byDate(b, a));

  return (
    <div className="trk-page">
      <SectionHead title={t("bank.title")} sub={t("bank.sub")} />

      {/* top totals */}
      <Panel pad={26} className="trk-bankcard">
        <div className="trk-bank-topbar">
          <div className="trk-stat__cap">{t("bank.current")}</div>
          <label className="trk-bank-cur">
            <span>{t("bank.currency")}</span>
            <Select value={cur} onChange={(v) => setSetting("currency", v)} options={TRK.CURRENCIES} />
          </label>
        </div>
        <div className="trk-bank-hero2">
          <div className="trk-bank-hero__val">{TRK.fmtMoney(totalCurrent, cur)}</div>
          <div className={"trk-bank-hero__delta " + (growth >= 0 ? "is-pos" : "is-neg")}>
            {TRK.fmtSignedPct(growth, 1)} · {t("bank.growth")}
          </div>
        </div>
        <div className="trk-bank-tiles">
          <div><span>{t("bank.deposited")}</span><b>{TRK.fmtMoney(netDep, cur)}</b></div>
          <div><span>{t("bank.pnl")}</span><b className={pnl >= 0 ? "trk-pos" : "trk-neg"}>{TRK.fmtMoney(pnl, cur)}</b></div>
          <div><span>{t("bank.initial")}</span><b>{TRK.fmtMoney(totalInitial, cur)}</b></div>
        </div>
      </Panel>

      {/* wallets */}
      <Panel pad={26}>
        <SectionHead title={t("bank.wallets")}
          right={<Btn size="sm" variant="ghost" icon="plus" onClick={() => setWalletModal({ name: "", initial: 500, currency: cur })}>{t("bank.addWallet")}</Btn>} />
        <div className="trk-wallets">
          {state.bankrolls.map((w) => {
            const bal = TRK.bankrollBalance(state, w.id);
            const dep = TRK.netDeposits(state, w.id);
            const wp = bal - dep;
            const g = dep ? wp / dep * 100 : 0;
            return (
              <div className="trk-wallet" key={w.id}>
                <div className="trk-wallet__head">
                  <div className="icon-tile"><Icon name="wallet" size={18} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="trk-wallet__name">{w.name}</div>
                    <div className="trk-wallet__book">{booksUsed(w.id) || t("bank.noBookYet")}</div>
                  </div>
                  <button className="trk-iconbtn trk-iconbtn--sm" onClick={() => setWalletModal({ ...w })} aria-label={t("bank.editWallet")}><Icon name="edit" size={14} /></button>
                </div>
                <div className="trk-wallet__bal">{TRK.fmtMoney(bal, cur)}</div>
                <div className="trk-wallet__row"><span>{t("bank.pnl")}</span><b className={wp >= 0 ? "trk-pos" : "trk-neg"}>{TRK.fmtMoney(TRK.round(wp), cur)}</b></div>
                <div className="trk-wallet__row"><span>{t("bank.growth")}</span><b className={g >= 0 ? "trk-pos" : "trk-neg"}>{TRK.fmtSignedPct(g, 1)}</b></div>
                <div className="trk-wallet__actions">
                  <button className="trk-minibtn" onClick={() => setTxnModal({ bankrollId: w.id, type: "deposit", amount: 100, note: "" })}>+ {t("bank.deposit")}</button>
                  <button className="trk-minibtn" onClick={() => setTxnModal({ bankrollId: w.id, type: "withdrawal", amount: 100, note: "" })}>− {t("bank.withdrawal")}</button>
                </div>
              </div>
            );
          })}
        </div>
      </Panel>

      {/* cash flow ledger */}
      <Panel pad={26}>
        <SectionHead title={t("bank.cashflow")}
          right={<Btn size="sm" variant="ghost" icon="plus" onClick={() => setTxnModal({ bankrollId: state.bankrolls[0].id, type: "deposit", amount: 100, note: "" })}>{t("bank.addTxn")}</Btn>} />
        {txns.length ? (
          <div className="table-wrap trk-tablewrap">
            <table className="table trk-table">
              <thead>
                <tr>
                  <th style={{ textAlign: "left" }}>{t("col.date")}</th>
                  <th style={{ textAlign: "left" }}>{t("bank.type")}</th>
                  <th style={{ textAlign: "left" }}>{t("bank.wallets")}</th>
                  <th style={{ textAlign: "left" }}>{t("bank.note")}</th>
                  <th style={{ textAlign: "right" }}>{t("bank.amount")}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {txns.map((tx) => {
                  const w = state.bankrolls.find((x) => x.id === tx.bankrollId);
                  const dep = tx.type === "deposit";
                  return (
                    <tr key={tx.id} onClick={() => setTxnModal({ ...tx })} style={{ cursor: "pointer" }}>
                      <td style={{ textAlign: "left", color: "var(--text-dim)" }}>{TRK.fmtDate(tx.date)}</td>
                      <td style={{ textAlign: "left" }}>
                        <span className={"trk-txntype " + (dep ? "is-in" : "is-out")}>{dep ? t("bank.deposit") : t("bank.withdrawal")}</span>
                      </td>
                      <td style={{ textAlign: "left" }} className="trk-cellsub2">{w ? w.name : "\u2014"}</td>
                      <td style={{ textAlign: "left" }} className="trk-cellsub2">{tx.note || "\u2014"}</td>
                      <td style={{ textAlign: "right", fontWeight: 700 }} className={dep ? "trk-pos" : "trk-neg"}>
                        {(dep ? "+" : "\u2212") + TRK.fmtMoney(tx.amount, cur).replace("\u2212", "")}</td>
                      <td style={{ width: 34 }}>
                        <button className="trk-iconbtn trk-iconbtn--sm" onClick={(e) => { e.stopPropagation(); dispatch({ type: "delete-txn", id: tx.id }); }} aria-label="Delete"><Icon name="trash" size={14} /></button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ) : <EmptyState icon="bankroll" title="No transactions yet." />}
      </Panel>

      {/* add transaction modal */}
      <Modal open={!!txnModal} onClose={() => setTxnModal(null)}
        title={txnModal ? (txnModal.type === "deposit" ? t("bank.deposit") : t("bank.withdrawal")) : ""}
        footer={txnModal && (
          <>
            <Btn variant="ghost" onClick={() => setTxnModal(null)}>{t("form.cancel")}</Btn>
            <Btn variant="primary" icon="check" onClick={() => {
              const base = { bankrollId: txnModal.bankrollId, type: txnModal.type, date: txnModal.date || TRK.today(), amount: parseFloat(txnModal.amount) || 0, note: txnModal.note };
              if (txnModal.id) dispatch({ type: "update-txn", txn: { ...base, id: txnModal.id } });
              else dispatch({ type: "add-txn", txn: { ...base, id: "t" + Math.random().toString(36).slice(2, 7) } });
              setTxnModal(null);
            }}>{t("form.saveShort")}</Btn>
          </>
        )}>
        {txnModal && (
          <div className="trk-form__grid">
            <Field label={t("bank.type")}>
              <Select value={txnModal.type} onChange={(v) => setTxnModal({ ...txnModal, type: v })}
                options={[{ value: "deposit", label: t("bank.deposit") }, { value: "withdrawal", label: t("bank.withdrawal") }]} />
            </Field>
            <Field label={t("bank.wallets")}>
              <Select value={txnModal.bankrollId} onChange={(v) => setTxnModal({ ...txnModal, bankrollId: v })}
                options={state.bankrolls.map((w) => ({ value: w.id, label: w.name }))} />
            </Field>
            <Field label={t("col.date")}>
              <Input type="date" value={txnModal.date || TRK.today()} onChange={(e) => setTxnModal({ ...txnModal, date: e.target.value })} />
            </Field>
            <Field label={t("bank.amount") + " (" + cur + ")"}>
              <Input type="number" value={txnModal.amount} onChange={(e) => setTxnModal({ ...txnModal, amount: e.target.value })} />
            </Field>
            <Field label={t("bank.note")} span>
              <Input value={txnModal.note} placeholder="Top-up / profit skim" onChange={(e) => setTxnModal({ ...txnModal, note: e.target.value })} />
            </Field>
          </div>
        )}
      </Modal>

      {/* add / edit bankroll modal */}
      <Modal open={!!walletModal} onClose={() => setWalletModal(null)} title={walletModal && walletModal.id ? t("bank.editWallet") : t("bank.addWallet")}
        footer={walletModal && (
          <>
            {walletModal.id && state.bankrolls.length > 1 && (
              <button className="trk-dangerlink" style={{ marginRight: "auto" }} onClick={() => { dispatch({ type: "delete-wallet", id: walletModal.id }); setWalletModal(null); }}><Icon name="trash" size={15} /> {t("form.delete")}</button>
            )}
            <Btn variant="ghost" onClick={() => setWalletModal(null)}>{t("form.cancel")}</Btn>
            <Btn variant="primary" icon="check" onClick={() => {
              const w = walletModal;
              const wallet = { id: w.id || ("bk" + Math.random().toString(36).slice(2, 6)), name: w.name || "Bankroll", initial: parseFloat(w.initial) || 0, currency: w.currency || cur };
              dispatch(w.id ? { type: "update-wallet", wallet } : { type: "add-wallet", wallet });
              setWalletModal(null);
            }}>{t("form.saveShort")}</Btn>
          </>
        )}>
        {walletModal && (
          <div className="trk-form__grid">
            <Field label={t("setup.name")} span><Input value={walletModal.name} placeholder={t("bank.namePh")} onChange={(e) => setWalletModal({ ...walletModal, name: e.target.value })} /></Field>
            <Field label={t("bank.initial") + " (" + (walletModal.currency || cur) + ")"}><Input type="number" value={walletModal.initial} onChange={(e) => setWalletModal({ ...walletModal, initial: e.target.value })} /></Field>
            <Field label={t("bank.currency")}><Select value={walletModal.currency || cur} onChange={(v) => setWalletModal({ ...walletModal, currency: v })} options={TRK.CURRENCIES} /></Field>
          </div>
        )}
      </Modal>
    </div>
  );
}

Object.assign(window, { Bankroll });