/* eslint-disable */
// ConsoleShell.jsx — interactive console chrome shared by Mint, Burn, Dashboard.
// Replaces the static ConsoleShell from components/Shell.jsx — adds clickable
// sidebar navigation that routes between flows.

const PROTO_NAV_MAIN = [
  { key: 'dashboard',    en: 'Dashboard',     ru: 'Дашборд',           iconKey: 'dashboard', go: () => navigateTo('dashboard', 'home') },
  { key: 'mint',         en: 'Mint',          ru: 'Эмиссия',            iconKey: 'arrowUp',   go: () => navigateTo('mint', 'initiate') },
  { key: 'burn',         en: 'Burn',          ru: 'Погашение', iconKey: 'arrowDown', go: () => navigateTo('burn', 'initiate') },
  { key: 'transactions', en: 'Transactions',  ru: 'Транзакции', iconKey: 'audit', go: () => navigateTo('dashboard', 'transactions') },
];
const PROTO_NAV_ACCOUNT = [
  { key: 'banks',    en: 'Bank Accounts',    ru: 'Банковские счета', iconKey: 'bank',    go: () => navigateTo('dashboard', 'banks') },
  { key: 'wallets',  en: 'Wallet Addresses', ru: 'Адреса кошельков', iconKey: 'link',    go: () => navigateTo('dashboard', 'wallets') },
  { key: 'apikeys',  en: 'API Keys',         ru: 'API-ключи',                                                                iconKey: 'spark',   go: () => navigateTo('dashboard', 'apikeys') },
  { key: 'security', en: 'Security',         ru: 'Безопасность',                                iconKey: 'shield',  go: () => navigateTo('dashboard', 'security') },
];

const ProtoSidebar = ({ current }) => {
  const t = useT();
  return (
  <aside style={{
    width: 240, flexShrink: 0,
    background: 'var(--bg-surface)',
    borderRight: '1px solid var(--border-subtle)',
    display: 'flex', flexDirection: 'column',
    padding: '18px 12px',
    height: '100%',
  }}>
    <div
      onClick={() => navigateTo('dashboard', 'home')}
      style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '2px 10px 18px', cursor: 'pointer' }}
    >
      <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)' }}>{t('Institutional Console', 'Институциональная консоль')}</span>
      </div>
    </div>

    <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 }}>{t('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' }}>
          Binance Asia Pte.
        </span>
        <Icons.chevronDown size={12} style={{ color: 'var(--bone-2)' }} />
      </div>
    </div>

    <ProtoNavGroup items={PROTO_NAV_MAIN} current={current} />
    <div style={{ height: 18 }} />
    <div className="kgst-caption" style={{ color: 'var(--bone-2)', padding: '0 12px 6px', fontSize: 9.5 }}>{t('Account', 'Аккаунт')}</div>
    <ProtoNavGroup items={PROTO_NAV_ACCOUNT} current={current} />

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

    <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, cursor: 'pointer',
      }}>
        <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)' }}>{t('Treasury · Admin', 'Казначейство · Админ')}</span>
        </div>
        <Icons.chevronDown size={12} style={{ color: 'var(--bone-2)' }} />
      </div>
    </div>
  </aside>
  );
};

const ProtoNavGroup = ({ items, current }) => {
  const t = useT();
  return (
  <nav style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
    {items.map(item => {
      const active = item.key === current;
      const Ico = Icons[item.iconKey];
      const label = t(item.en, item.ru);
      return (
        <div
          key={item.key}
          onClick={item.go}
          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', cursor: 'pointer',
            transition: 'background 120ms ease, color 120ms ease',
          }}
          onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'rgba(255,244,219,0.04)'; e.currentTarget.style.color = 'var(--fg-primary)'; } }}
          onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg-secondary)'; } }}
        >
          {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 }}>{label}</span>
        </div>
      );
    })}
  </nav>
  );
};

const ProtoTopBar = ({ breadcrumbs = [], actions }) => {
  const t = useT();
  return (
  <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>{t('Search address, tx hash, request ID…', 'Поиск адреса, хэша, 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>
      <LangToggle />
      <IconButton icon={<Icons.bell size={14} />} label={t('Notifications', 'Уведомления')} style={{ width: 30, height: 30 }} />
    </div>
  </header>
  );
};

// Main shell — sidebar + topbar + scrollable content
const ProtoConsoleShell = ({ children, current, breadcrumbs, topActions }) => (
  <div style={{
    display: 'flex', height: '100%', width: '100%', background: 'var(--bg-base)', color: 'var(--fg-primary)',
    fontFamily: 'var(--font-sans)', position: 'relative',
  }}>
    <ProtoSidebar current={current} />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
      <ProtoTopBar breadcrumbs={breadcrumbs} actions={topActions} />
      <main style={{ flex: 1, padding: '24px 28px 40px', overflow: 'auto', position: 'relative' }}>
        {children}
      </main>
    </div>
  </div>
);

window.ProtoConsoleShell = ProtoConsoleShell;