// BulderApp.jsx — Mobile banking UI kit for Bulder Bank
// Matches real app screenshots: big numeric displays, colored category circles,
// photographic savings cards, stacked section groups, custom tab bar glyphs.

// Tokens sourced from Figma: Foundations/Semantic tokens (dark mode)
const BB = {
  bg: '#0F1729',       // bg-background · dark-blue-800
  surface: '#1A2037',  // bg-surface · dark-blue-700
  surface2: '#262F47', // bg-surface-container · dark-blue-600
  pink: '#FE4D5B',     // color-bulder / color-error · red-500
  pinkSoft: '#FFA8AF', // red-300
  royal: '#0926D6',    // royal-blue (CTA)
  royalDeep: '#071EA8',
  fg: '#FAFBFF',       // fg-primary · grey-100
  fg2: '#D1D7E5',      // fg-secondary · grey-500
  fg3: '#9298A7',      // fg-tertiary · grey-800
  stroke: 'rgba(255,255,255,0.06)', divider: 'rgba(255,255,255,0.05)',
  green: '#85FF86',    // color-positive · green-500
  amber: '#FFAD33',    // color-warning
  red: '#FE4D5B',
  // category accents (from real app)
  // category accents — from Foundations 9-step primitive scales
  catPurple: '#9361F8', catBlue: '#0926D6', catPink: '#E04F90',
  catGreen: '#61D562', catRed: '#BD2A37', catOrange: '#FFAD33',
  catAmber: '#FAE84E', catNavy: '#262F47',
};

// ── Category circle icon ──────────────────────────────────────
function CatCircle({ bg, glyph, size = 38 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 999, background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 700, fontSize: size * 0.42, flexShrink: 0,
    }}>{glyph}</div>
  );
}

// ── Top bar ───────────────────────────────────────────────────
function AppTopBar({ title, avatar = true, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '60px 20px 18px' }}>
      {avatar && <div style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center' }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#B8BECC" strokeWidth="1.5"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#B8BECC" strokeWidth="1.5" strokeLinecap="round"/></svg>
      </div>}
      <div style={{ flex: 1, fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: BB.fg }}>{title}</div>
      <div style={{ display: 'flex', gap: 8 }}>{right}</div>
    </div>
  );
}

function RoundBtn({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.08)',
      border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', padding: 0, color: '#fff',
    }}>{children}</button>
  );
}

// ── Hero number (very large, like real app) ───────────────────
function HeroNumber({ label, amount, suffix, centered = true }) {
  return (
    <div style={{ textAlign: centered ? 'center' : 'left', padding: '8px 20px 24px' }}>
      <div style={{ fontSize: 13, color: BB.fg2, marginBottom: 8 }}>{label}</div>
      <div style={{ fontSize: 54, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1, color: BB.fg, fontVariantNumeric: 'tabular-nums' }}>
        {amount}{suffix && <span style={{ fontSize: 28, fontWeight: 400, marginLeft: 6, color: BB.fg2 }}>{suffix}</span>}
      </div>
    </div>
  );
}

// ── Section card group (stacked rows in rounded container) ────
function SectionGroup({ children, style = {} }) {
  return (
    <div style={{ margin: '0 16px 14px', background: BB.surface, borderRadius: 18, overflow: 'hidden', ...style }}>
      {children}
    </div>
  );
}

function GroupRow({ icon, title, subtitle, right, badge, divider = true }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
      borderBottom: divider ? `1px solid ${BB.divider}` : 'none',
    }}>
      {icon}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 500, color: BB.fg }}>{title}</div>
        {subtitle && <div style={{ fontSize: 12, color: BB.fg3, marginTop: 2 }}>{subtitle}</div>}
      </div>
      {badge}
      {right}
    </div>
  );
}

// ── Section header (small caps style) ─────────────────────────
function SectionLabel({ children }) {
  return <div style={{ padding: '18px 20px 8px', fontSize: 12, fontWeight: 600, color: BB.fg3, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{children}</div>;
}

// ── Transaction / category row ────────────────────────────────
function MoneyRow({ name, sub, amount, icon, positive }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: `1px solid ${BB.divider}` }}>
      {icon}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, color: BB.fg }}>{name}</div>
        {sub && <div style={{ fontSize: 12, color: BB.fg3, marginTop: 2 }}>{sub}</div>}
      </div>
      <div style={{ fontSize: 15, fontWeight: 500, color: positive ? BB.green : BB.fg, fontVariantNumeric: 'tabular-nums' }}>{amount}</div>
    </div>
  );
}

// ── Progress bar (chunky green, like real app) ───────────────
function ProgressBar({ value, max = 100, height = 12 }) {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div style={{ background: BB.surface2, borderRadius: 999, height, overflow: 'hidden' }}>
      <div style={{ width: `${pct}%`, height: '100%', background: `linear-gradient(90deg, ${BB.green}, #5EE081)`, borderRadius: 999, position: 'relative' }}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
          <defs>
            <pattern id="chevs" width="10" height="12" patternUnits="userSpaceOnUse">
              <path d="M0 2 L4 6 L0 10" stroke="white" strokeWidth="1.5" fill="none" opacity="0.6"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#chevs)"/>
        </svg>
      </div>
    </div>
  );
}

// ── Info banner (royal blue) ──────────────────────────────────
function InfoBanner({ icon, title, body, onClose }) {
  return (
    <div style={{ margin: '0 16px 12px', background: BB.royal, borderRadius: 16, padding: 16, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        {icon && <div style={{ width: 22, height: 22, borderRadius: 999, border: '1.5px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, marginTop: 2 }}>i</div>}
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#fff' }}>{title}</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.92)', marginTop: 3, lineHeight: 1.4 }}>{body}</div>
        </div>
        {onClose && <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#fff', fontSize: 18, cursor: 'pointer', padding: 0, opacity: 0.8 }}>×</button>}
      </div>
    </div>
  );
}

// ── Photo savings goal card ───────────────────────────────────
function SavingsGoalCard({ title, current, target, image, small = false }) {
  return (
    <div style={{
      borderRadius: 16, overflow: 'hidden', position: 'relative', height: small ? 130 : 160,
      background: `linear-gradient(180deg, rgba(11,17,48,0) 0%, rgba(11,17,48,0.75) 100%), url(${image}) center/cover`,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 14,
    }}>
      <div style={{ fontSize: small ? 16 : 18, fontWeight: 600, color: '#fff' }}>{title}</div>
      <div>
        {target && <div style={{ fontSize: 13, color: '#fff', marginBottom: 6, fontVariantNumeric: 'tabular-nums' }}>{current} {target && <span style={{ opacity: 0.8 }}>av {target}</span>}</div>}
        {!target && <div style={{ fontSize: 20, fontWeight: 500, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{current}</div>}
        {target && <ProgressBar value={parseInt(current.replace(/\s/g,''))} max={parseInt(target.replace(/\s/g,''))} height={8} />}
      </div>
    </div>
  );
}

// ── Tab bar with real Bulder glyphs ───────────────────────────
const TabGlyph = {
  hjem: (active) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill={active ? BB.pink : BB.fg}>
      <path d="M6 4 L20 12 L6 20 Z"/>
    </svg>
  ),
  spare: (active) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? BB.pink : BB.fg} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 13a7 5 0 0 1 7-5h2a6 4 0 0 1 6 4v2a6 5 0 0 1-2 4v2h-2v-1.5h-4V20H10v-1.5a6 5 0 0 1-3-2.5H5z"/>
      <circle cx="17" cy="11" r="0.6" fill={active ? BB.pink : BB.fg}/>
    </svg>
  ),
  betale: (active) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? BB.pink : BB.fg} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 6 L6 18"/><path d="M9 6 L18 6 L18 15"/>
    </svg>
  ),
  bolig: (active) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill={active ? BB.pink : BB.fg}>
      <path d="M12 3 L3 11 L5 11 L5 20 L10 20 L10 14 L14 14 L14 20 L19 20 L19 11 L21 11 Z"/>
    </svg>
  ),
  bulder: (active) => (
    <svg width="22" height="22" viewBox="0 0 64 64">
      <path fillRule="evenodd" clipRule="evenodd" d="M32.11 9L1 40.11V55.66L39.90 16.78L47.66 24.55L32.11 40.11H47.66L63.22 24.55L47.66 9H32.11ZM47.66 40.11L32.11 55.66H47.66L63.22 40.11H47.66Z" fill={active ? BB.pink : BB.fg}/>
    </svg>
  ),
};

function TabBar({ current, onChange }) {
  const tabs = [
    { k: 'hjem', label: 'Hjem' },
    { k: 'spare', label: 'Spare' },
    { k: 'betale', label: 'Betale' },
    { k: 'bolig', label: 'Bolig' },
    { k: 'bulder', label: 'Bulder' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(11,17,48,0.92)', backdropFilter: 'blur(20px)',
      borderTop: `1px solid ${BB.stroke}`, display: 'flex',
      paddingTop: 8, paddingBottom: 28,
    }}>
      {tabs.map(t => {
        const active = current === t.k;
        return (
          <button key={t.k} onClick={() => onChange(t.k)} style={{
            flex: 1, background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '6px 0',
            color: active ? BB.pink : BB.fg,
          }}>
            {TabGlyph[t.k](active)}
            <span style={{ fontSize: 11, fontWeight: 500 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, {
  BB, CatCircle, AppTopBar, RoundBtn, HeroNumber,
  SectionGroup, GroupRow, SectionLabel, MoneyRow,
  ProgressBar, InfoBanner, SavingsGoalCard, TabGlyph, TabBar,
});