// Banking page — mock data (real bank API integration pending)
const ACCOUNTS_MOCK = [
  { bank: "privat", name: "PrivatBank",  number: "•••• 4521", balance: 284730.50, delta: 12450,  subtitle: "Поточний" },
  { bank: "mono",   name: "Monobank",    number: "•••• 8843", balance: 87420.00,  delta: 3980,   subtitle: "ФОП-рахунок" },
  { bank: "pumb",   name: "ПУМБ",        number: "•••• 1907", balance: 142100.20, delta: -3280,  subtitle: "Розрахунковий" },
  { bank: "oschad", name: "Ощадбанк",    number: "•••• 6655", balance: 51200.00,  delta: 0,      subtitle: "Резервний" },
];

const TXNS_MOCK = [
  { id: 1, date: "Сьогодні, 14:32", desc: "Надходження · оплата замовлення №1247",   bank: "privat", amount:  12450,  balanceAfter: 284730.50 },
  { id: 2, date: "Сьогодні, 13:18", desc: "Виплата постачальнику · Apple UA",         bank: "privat", amount: -85000,  balanceAfter: 272280.50 },
  { id: 3, date: "Сьогодні, 12:40", desc: "Надходження · оплата замовлення №1250",   bank: "mono",   amount:  28900,  balanceAfter:  87420.00 },
  { id: 4, date: "Сьогодні, 11:10", desc: "Надходження · оплата замовлення №1251",   bank: "privat", amount:  18450,  balanceAfter: 357280.50 },
  { id: 5, date: "Сьогодні, 10:48", desc: "Виплата · Нова Пошта (доставка)",          bank: "pumb",   amount:  -3280,  balanceAfter: 142100.20 },
  { id: 6, date: "Вчора, 17:22",    desc: "Повернення · скасоване замовлення №1253",  bank: "privat", amount: -38500,  balanceAfter: 338830.50 },
  { id: 7, date: "Вчора, 16:05",    desc: "Надходження · оплата замовлення №1254",   bank: "mono",   amount:  92300,  balanceAfter:  58520.00 },
  { id: 8, date: "Вчора, 14:00",    desc: "Комісія банку",                             bank: "privat", amount:   -120,  balanceAfter: 377330.50 },
];

function fmtDelta(n) {
  const sign = n > 0 ? "+ " : "− ";
  return sign + Math.abs(n).toLocaleString("uk-UA").replace(/,/g, " ") + " ₴";
}
function fmtTxn(n) {
  const sign = n >= 0 ? "+ " : "− ";
  return sign + Math.abs(n).toLocaleString("uk-UA", { minimumFractionDigits: 2 }).replace(/,/g, " ").replace(/\./, ".") + " ₴";
}

function BalanceCard({ acc }) {
  return (
    <div style={{ background: "var(--bg-panel)", border: "1px solid var(--border-subtle)", borderRadius: 10, padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <BankMonogram bank={acc.bank} size={32}/>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-primary)" }}>{acc.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)" }}>{acc.number}</div>
          </div>
        </div>
        <span style={{ fontSize: 11, color: "var(--fg-muted)" }}>{acc.subtitle}</span>
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums", fontSize: 24, fontWeight: 600, color: "var(--fg-primary)", letterSpacing: "-0.01em" }}>{fmtBalance(acc.balance)}</div>
        {acc.delta !== 0 && (
          <div style={{ fontSize: 11, marginTop: 4, color: acc.delta > 0 ? "var(--credit)" : "var(--debit)" }}>{fmtDelta(acc.delta)} за сьогодні</div>
        )}
        {acc.delta === 0 && <div style={{ fontSize: 11, marginTop: 4, color: "var(--fg-muted)" }}>Без змін за сьогодні</div>}
      </div>
    </div>
  );
}

function Banking({ isMobile }) {
  if (isMobile) {
    return (
      <div style={{ flex: 1, overflowY: "auto", padding: "12px 16px", display: "flex", flexDirection: "column", gap: 18 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 10 }}>Рахунки</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {ACCOUNTS_MOCK.map(a => (
              <div key={a.bank} style={{ background: "var(--bg-panel)", border: "1px solid var(--border-subtle)", borderRadius: 12, padding: 14 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <BankMonogram bank={a.bank} size={32}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-primary)" }}>{a.name}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)" }}>{a.number} · {a.subtitle}</div>
                  </div>
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums", fontSize: 22, fontWeight: 600, color: "var(--fg-primary)", letterSpacing: "-0.01em" }}>{fmtBalance(a.balance)}</div>
                {a.delta !== 0 && <div style={{ fontSize: 11, marginTop: 3, color: a.delta > 0 ? "var(--credit)" : "var(--debit)" }}>{fmtDelta(a.delta)} за сьогодні</div>}
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 10 }}>Останні транзакції</div>
          <div style={{ background: "var(--bg-panel)", border: "1px solid var(--border-subtle)", borderRadius: 12, overflow: "hidden" }}>
            {TXNS_MOCK.slice(0, 6).map((t, i) => {
              const acc = ACCOUNTS_MOCK.find(a => a.bank === t.bank);
              return (
                <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderBottom: i < 5 ? "1px solid var(--border-subtle)" : "none" }}>
                  <BankMonogram bank={t.bank} size={28}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: "var(--fg-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.desc}</div>
                    <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>{t.date}</div>
                  </div>
                  <span style={{ fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums", fontSize: 13, fontWeight: 600, color: t.amount >= 0 ? "var(--credit)" : "var(--debit)", flexShrink: 0 }}>
                    {fmtTxn(t.amount)}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, overflow: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 24 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-secondary)", marginBottom: 12 }}>Рахунки</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 12 }}>
          {ACCOUNTS_MOCK.map(a => <BalanceCard key={a.bank} acc={a}/>)}
        </div>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-secondary)" }}>Транзакції</div>
          <div style={{ display: "flex", gap: 8 }}>
            <Button variant="secondary" size="sm" leftIcon="filter">Усі банки</Button>
            <Button variant="secondary" size="sm" leftIcon="calendar">Останні 7 днів</Button>
          </div>
        </div>
        <div style={{ background: "var(--bg-panel)", border: "1px solid var(--border-subtle)", borderRadius: 10, overflow: "hidden" }}>
          <div style={{ display: "flex", padding: "10px 16px", borderBottom: "1px solid var(--border-subtle)", background: "rgba(255,255,255,.02)" }}>
            {[["0 0 150px","Дата"],["3 1 0","Опис"],["0 0 140px","Банк"],["0 0 150px","Сума"],["0 0 160px","Баланс після"]].map(([flex,label]) => (
              <span key={label} style={{ flex, fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)", textAlign: label === "Сума" || label === "Баланс після" ? "right" : "left" }}>{label}</span>
            ))}
          </div>
          {TXNS_MOCK.map(t => {
            const acc = ACCOUNTS_MOCK.find(a => a.bank === t.bank);
            return (
              <div key={t.id} style={{ display: "flex", padding: "12px 16px", borderBottom: "1px solid var(--border-subtle)", alignItems: "center" }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--bg-hover)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                <span style={{ flex: "0 0 150px", fontSize: 12, color: "var(--fg-muted)" }}>{t.date}</span>
                <span style={{ flex: "3 1 0", fontSize: 13, color: "var(--fg-primary)" }}>{t.desc}</span>
                <span style={{ flex: "0 0 140px", display: "flex", alignItems: "center", gap: 8 }}>
                  <BankMonogram bank={t.bank} size={20}/>
                  <span style={{ fontSize: 12, color: "var(--fg-secondary)" }}>{acc?.name}</span>
                </span>
                <span style={{ flex: "0 0 150px", fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums", fontSize: 13, fontWeight: 500, color: t.amount >= 0 ? "var(--credit)" : "var(--debit)", textAlign: "right" }}>{fmtTxn(t.amount)}</span>
                <span style={{ flex: "0 0 160px", fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums", fontSize: 13, color: "var(--fg-secondary)", textAlign: "right" }}>{fmtBalance(t.balanceAfter)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.Banking = Banking;