const { Wordmark, Button, IconButton, Tooltip } = window.OctanexDesignSystem_0e3b75;
const Icon = window.OxIcon;

const NAV = [
  { id: 'dashboard', path: 'обзор', icon: 'layout-dashboard' },
  { id: 'smm', path: 'smm', icon: 'megaphone' },
  { id: 'market', path: 'market', icon: 'shopping-bag' },
  { id: 'ai', path: 'ai', icon: 'bot' },
];

function Shell({ screen, setScreen, balance, user, onTopUp, onLogout, children }) {
  const uName = (user && user.name) || '—';
  const uInitial = uName.trim()[0] || '·';
  const uId = (user && user.id) || '';
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--bg-page)' }}>
      <aside style={{
        width: 'var(--sidebar-width)', flex: 'none', display: 'flex', flexDirection: 'column',
        background: 'var(--surface-1)', borderRight: '1px solid var(--border-hairline)',
        padding: '20px 12px', position: 'sticky', top: 0, height: '100vh',
      }}>
        <div style={{ padding: '0 10px 20px' }}><Wordmark size={19} /></div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {NAV.map((n) => {
            const active = n.id === screen;
            return (
              <button key={n.id} type="button" onClick={() => setScreen(n.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px',
                borderRadius: 8, cursor: 'pointer', textAlign: 'left',
                background: active ? 'var(--accent-dim)' : 'transparent',
                border: `1px solid ${active ? 'var(--border-accent-dim)' : 'transparent'}`,
                color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
                fontFamily: 'var(--font-mono)', fontSize: 12.5,
                transition: 'all var(--dur-fast) var(--ease-out)',
              }}>
                <span style={{ color: active ? 'var(--green-400)' : 'var(--text-muted)', display: 'flex' }}><Icon name={n.icon} size={15} /></span>
                <span><span style={{ color: 'var(--green-500)' }}>o/</span>{n.path}</span>
              </button>
            );
          })}
        </nav>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12, padding: '0 4px' }}>
          <div style={{
            border: '1px solid var(--border-hairline)', borderRadius: 10, padding: 12,
            background: 'var(--surface-card)',
          }}>
            <span className="ox-label">баланс</span>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, fontWeight: 600, margin: '6px 0 2px' }}>
              {balance.rub.toLocaleString('ru-RU')} <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>₽</span>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', marginBottom: 10 }}>
              {balance.ton.toFixed(1)} <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>TON</span>
            </div>
            <Button size="sm" onClick={onTopUp} style={{ width: '100%' }}><Icon name="plus" size={13} /> пополнить</Button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 6px' }}>
            <span style={{
              width: 28, height: 28, borderRadius: '50%', flex: 'none', display: 'grid', placeItems: 'center',
              background: 'var(--accent-dim-2)', border: '1px solid var(--border-accent-dim)',
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--green-300)',
            }}>{uInitial}</span>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{uName}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>id {uId}</div>
            </div>
            <Tooltip content="выйти" side="top">
              <IconButton label="выйти" size="sm" icon={<Icon name="log-out" size={14} />} onClick={onLogout} />
            </Tooltip>
          </div>
        </div>
      </aside>

      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <header style={{
          height: 'var(--topbar-height)', flex: 'none', display: 'flex', alignItems: 'center', gap: 14,
          padding: '0 28px', borderBottom: '1px solid var(--border-hairline)',
          position: 'sticky', top: 0, zIndex: 40,
          background: 'rgba(4, 7, 5, 0.8)', backdropFilter: 'blur(var(--blur-bar))', WebkitBackdropFilter: 'blur(var(--blur-bar))',
        }}>
          <span className="ox-path" style={{ fontSize: 12 }}>
            <span className="sep">o/</span>ctanex <span style={{ color: 'var(--text-muted)' }}>/ {NAV.find((n) => n.id === screen)?.path || screen}</span>
          </span>
          <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--text-secondary)', border: '1px solid var(--border-hairline)', borderRadius: 999, padding: '4px 10px',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green-400)', boxShadow: '0 0 8px var(--green-400)' }}></span>
              все системы online
            </span>
            <Tooltip content="уведомления" side="bottom">
              <IconButton label="уведомления" icon={<Icon name="bell" size={16} />} />
            </Tooltip>
          </span>
        </header>
        <main style={{ flex: 1, padding: '28px 32px 48px', minWidth: 0 }}>{children}</main>
      </div>
    </div>
  );
}

function ScreenTitle({ greeting, title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
      <div>
        {greeting && (
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--green-400)', marginBottom: 8 }}>
            {greeting}<span className="ox-caret"></span>
          </div>
        )}
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--size-display)', fontWeight: 600, letterSpacing: 'var(--tracking-display)' }}>{title}</h1>
      </div>
      {right && <div style={{ display: 'flex', gap: 10, flex: 'none' }}>{right}</div>}
    </div>
  );
}

Object.assign(window, { Shell, ScreenTitle, OX_NAV: NAV });