/* eslint-disable */
// Shell.jsx — Operator Console layout used by Mint, Burn, Dashboard screens.

const NAV_MAIN = [
  { key: 'dashboard',   label: 'Dashboard',    iconKey: 'dashboard' },
  { key: 'mint',        label: 'Mint',         iconKey: 'arrowUp' },
  { key: 'burn',        label: 'Burn',         iconKey: 'arrowDown' },
  { key: 'transactions',label: 'Transactions', iconKey: 'audit' },
];
const NAV_ACCOUNT = [
  { key: 'banks',     label: 'Bank Accounts',  iconKey: 'bank' },
  { key: 'wallets',   label: 'Wallet Addresses', iconKey: 'link' },
  { key: 'apikeys',   label: 'API Keys',       iconKey: 'spark' },
  { key: 'security',  label: 'Security',       iconKey: 'shield' },
];

const ConsoleSidebar = ({ current, customer = 'Binance Asia Pte.' }) => (
  <aside style={{
    width: 240, flexShrink: 0,
    background: 'var(--bg-surface)',
    borderRight: '1px solid var(--border-subtle)',
    display: 'flex', flexDirection: 'column',
    padding: '18px 12px',
  }}>
    {/* logo */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '2px 10px 18px' }}>
      <img src="design_system/assets/kgst-mark-square.png" alt="KGST"
        style={{ width: 30, height: 30, borderRadius: 5 }} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span style={{ fontWeight: 700, letterSpacing: '0.04em', fontSize: 13 }}>KGST</span>
        <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)' }}>Institutional Console</span>
      </div>
    </div>

    {/* customer / env card */}
    <div style={{
      padding: '10px 12px', marginBottom: 14,
      background: 'var(--ink-2)', borderRadius: 8,
      border: '1px solid var(--border-subtle)',
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <span className="kgst-caption" style={{ color: 'var(--bone-3)', fontSize: 9.5 }}>Customer</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <SealDot size={12} />
        <span style={{ fontSize: 12, fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{customer}</span>
        <Icons.chevronDown size={12} style={{ color: 'var(--bone-2)' }} />
      </div>
    </div>

    <NavGroup items={NAV_MAIN} current={current} />
    <div style={{ height: 18 }} />
    <div className="kgst-caption" style={{ color: 'var(--bone-2)', padding: '0 12px 6px', fontSize: 9.5 }}>Account</div>
    <NavGroup items={NAV_ACCOUNT} current={current} />

    <div style={{ flex: 1 }} />

    {/* footer / user */}
    <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 12, marginTop: 12 }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '6px 8px', borderRadius: 8,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--wine-500), var(--ink-4))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--gold-200)', fontWeight: 700, fontSize: 11,
          border: '1px solid var(--border-gold)',
        }}>LZ</div>
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2, flex: 1, minWidth: 0 }}>
          <span style={{ fontSize: 12, fontWeight: 500 }}>Lin Zhao</span>
          <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)' }}>Treasury · Admin</span>
        </div>
        <Icons.chevronDown size={12} style={{ color: 'var(--bone-2)' }} />
      </div>
    </div>
  </aside>
);

const NavGroup = ({ items, current }) => (
  <nav style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
    {items.map(item => {
      const active = item.key === current;
      const Ico = Icons[item.iconKey];
      return (
        <div key={item.key} style={{
          display: 'flex', alignItems: 'center', gap: 11,
          padding: '8px 12px', borderRadius: 6,
          background: active ? 'rgba(201,152,64,0.10)' : 'transparent',
          color: active ? 'var(--gold-200)' : 'var(--fg-secondary)',
          font: '500 12.5px var(--font-sans)',
          position: 'relative',
        }}>
          {active ? <span style={{
            position: 'absolute', left: -12, top: 7, bottom: 7,
            width: 2, borderRadius: 999, background: 'var(--gold-400)',
          }} /> : null}
          <span style={{ display: 'inline-flex' }}>{Ico ? <Ico size={15} /> : null}</span>
          <span style={{ flex: 1 }}>{item.label}</span>
          {item.badge ? <Pill tone="wine" dot={false} style={{ padding: '1px 6px', fontSize: 9.5 }}>{item.badge}</Pill> : null}
        </div>
      );
    })}
  </nav>
);

const ConsoleTopBar = ({ breadcrumbs = [], actions }) => (
  <header style={{
    height: 52, display: 'flex', alignItems: 'center',
    padding: '0 24px', borderBottom: '1px solid var(--border-subtle)',
    background: 'rgba(20,18,16,0.72)',
    flexShrink: 0,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, color: 'var(--fg-secondary)', fontSize: 12.5 }}>
      {breadcrumbs.map((b, i) => (
        <React.Fragment key={i}>
          {i > 0 ? <Icons.chevronRight size={11} style={{ color: 'var(--fg-tertiary)' }} /> : null}
          <span style={{ color: i === breadcrumbs.length - 1 ? 'var(--fg-primary)' : 'var(--fg-secondary)' }}>{b}</span>
        </React.Fragment>
      ))}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      {actions}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 11px', height: 30, background: 'var(--ink-2)', borderRadius: 6,
        border: '1px solid var(--border-subtle)', color: 'var(--bone-3)', fontSize: 11.5, minWidth: 220,
      }}>
        <Icons.search size={13} />
        <span>Search address, tx hash, request ID…</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, padding: '1px 5px', border: '1px solid var(--border-subtle)', borderRadius: 3, color: 'var(--fg-tertiary)' }}>⌘K</span>
      </div>
      <IconButton icon={<Icons.bell size={14} />} label="Notifications" style={{ width: 30, height: 30 }} />
    </div>
  </header>
);

const SignBadge = () => (
  <div style={{
    position: 'absolute', right: 18, bottom: 16,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '7px 14px 7px 14px', borderRadius: 999,
    background: 'rgba(20,18,16,0.65)',
    border: '1px solid var(--border-subtle)',
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    fontSize: 11.5, color: 'var(--fg-tertiary)',
    letterSpacing: '0.04em', textTransform: 'uppercase',
    pointerEvents: 'none', zIndex: 50,
  }}>
    <span>Built by</span>
    <img src="design_system/assets/sign-logo.png" alt="Sign"
      style={{ height: 16, width: 'auto', display: 'block', opacity: 0.95 }} />
  </div>
);

const ConsoleShell = ({ children, current, breadcrumbs, customer, topActions }) => (
  <div style={{
    display: 'flex', height: '100%', width: '100%', background: 'var(--bg-base)', color: 'var(--fg-primary)',
    fontFamily: 'var(--font-sans)', position: 'relative',
  }}>
    <ConsoleSidebar current={current} customer={customer} />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
      <ConsoleTopBar breadcrumbs={breadcrumbs} actions={topActions} />
      <main style={{ flex: 1, padding: '24px 28px 32px', overflow: 'hidden', position: 'relative' }}>{children}</main>
    </div>
    <SignBadge />
  </div>
);

// PageHeader still accepts an `eyebrow` prop for backward compatibility, but
// we no longer render it — the small "S2.2 · …" labels above each title were
// useful as design metadata while sketching and add noise in the final
// mockups. Strip them at the component level to avoid touching every screen.
const PageHeader = ({ eyebrow, title, sub, actions, meta }) => (
  <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 22 }}>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
      <h1 className="kgst-h1" style={{ margin: 0, fontSize: 26, letterSpacing: '-0.015em' }}>{title}</h1>
      {sub ? <p style={{ margin: 0, color: 'var(--fg-secondary)', maxWidth: 640, fontSize: 13 }}>{sub}</p> : null}
      {meta ? <div style={{ display: 'flex', gap: 16, marginTop: 4, color: 'var(--fg-tertiary)', fontSize: 12 }}>{meta}</div> : null}
    </div>
    {actions ? <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>{actions}</div> : null}
  </div>
);

Object.assign(window, { ConsoleShell, ConsoleSidebar, ConsoleTopBar, PageHeader, SignBadge });