const { useState } = React;

const IC = {
  home: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
  crypto: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.5 9h3.5a2 2 0 010 4H9.5m0-4v4m0 0h3.5a2 2 0 010 4H9.5m0-4v4m0-8V7m0 10v2"/></svg>,
  portfolio: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
  broker: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/></svg>,
  video: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>,
  insider: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="17 11 19 13 23 9"/></svg>,
  collapse: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>,
  expand: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>,
  chart: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>,
};

const NAV = [
  { id: 'inicio',       es: 'Inicio',          en: 'Home',         icon: IC.home },
  { id: 'criptomonedas',es: 'Criptomonedas',   en: 'Crypto',       icon: IC.crypto },
  { id: 'portafolios',  es: 'Portafolios',      en: 'Portfolios',   icon: IC.portfolio },
  { id: 'brokers',      es: 'Brokers',          en: 'Brokers',      icon: IC.broker },
  { id: 'videos',       es: 'Videos',           en: 'Videos',       icon: IC.video },
  { id: 'compradores',  es: 'Compradores',      en: 'Insiders',     icon: IC.insider },
];

function Sidebar({ collapsed, onCollapse, activePage, onNav, lang }) {
  const w = collapsed ? 64 : 260;
  return (
    <aside style={{
      width: w, minWidth: w, height: '100vh',
      background: 'var(--bg2)',
      borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column',
      transition: 'width 0.25s ease, min-width 0.25s ease',
      overflow: 'hidden', flexShrink: 0, position: 'relative', zIndex: 100,
    }}>
      {/* Logo area */}
      <div style={{
        height: 'var(--hh)', display: 'flex', alignItems: 'center',
        padding: collapsed ? '0 14px' : '0 16px',
        borderBottom: '1px solid var(--border)',
        gap: 10, flexShrink: 0,
      }}>
        <img src="uploads/logo-1777404535649.jpeg" alt="IWS"
          style={{ width: 32, height: 32, borderRadius: 6, objectFit: 'cover', flexShrink: 0 }} />
        {!collapsed && (
          <div style={{ overflow: 'hidden' }}>
            <div style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 800, fontSize: 13, color: 'var(--text)', whiteSpace: 'nowrap', letterSpacing: '0.02em' }}>INSIDE WALL ST.</div>
            <div style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.08em', whiteSpace: 'nowrap' }}>DESCIFRANDO EL MERCADO</div>
          </div>
        )}
      </div>

      {/* Nav items */}
      <nav style={{ flex: 1, padding: '8px 0', overflow: 'hidden auto' }}>
        {!collapsed && (
          <div style={{ padding: '8px 16px 4px', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--muted)', textTransform: 'uppercase' }}>
            {lang === 'es' ? 'Menú' : 'Menu'}
          </div>
        )}
        {NAV.map(item => {
          const active = activePage === item.id;
          return (
            <button key={item.id} onClick={() => onNav(item.id)}
              title={collapsed ? (lang === 'es' ? item.es : item.en) : ''}
              style={{
                width: '100%', display: 'flex', alignItems: 'center',
                gap: 12, padding: collapsed ? '10px 0' : '9px 16px',
                justifyContent: collapsed ? 'center' : 'flex-start',
                background: active ? 'rgba(201,168,76,0.1)' : 'transparent',
                borderLeft: active && !collapsed ? '2px solid var(--gold)' : '2px solid transparent',
                color: active ? 'var(--gold)' : 'var(--text2)',
                border: 'none', cursor: 'pointer',
                transition: 'all 0.15s',
                fontFamily: 'DM Sans, sans-serif',
                fontSize: 13, fontWeight: active ? 600 : 400,
              }}
              onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.color = 'var(--text)'; }}}
              onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text2)'; }}}
            >
              <span style={{ color: active ? 'var(--gold)' : 'var(--muted)', flexShrink: 0 }}>{item.icon}</span>
              {!collapsed && <span style={{ whiteSpace: 'nowrap' }}>{lang === 'es' ? item.es : item.en}</span>}
            </button>
          );
        })}
      </nav>

      {/* Collapse toggle */}
      <button onClick={onCollapse}
        style={{
          display: 'flex', alignItems: 'center', justifyContent: collapsed ? 'center' : 'flex-end',
          padding: '12px 16px', gap: 8, background: 'transparent', border: 'none',
          borderTop: '1px solid var(--border)', color: 'var(--muted)',
          cursor: 'pointer', transition: 'color 0.15s', width: '100%',
          fontFamily: 'DM Sans, sans-serif', fontSize: 12,
        }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}
      >
        {!collapsed && <span>Colapsar</span>}
        {collapsed ? IC.expand : IC.collapse}
      </button>
    </aside>
  );
}

function TopBar({ onMenuClick, lang, onLangToggle, pageTitle, onOpenAuth }) {
  return (
    <header style={{
      height: 'var(--hh)', background: 'var(--bg2)',
      borderBottom: '1px solid var(--border)',
      display: 'flex', alignItems: 'center',
      padding: '0 20px', gap: 12, flexShrink: 0,
    }}>
      <button onClick={onMenuClick} className="btn btn-ghost" style={{ padding: 8 }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <span style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 15, color: 'var(--text)', flex: 1 }}>{pageTitle}</span>
      <ThemeToggle />
      <button onClick={onLangToggle} className="btn btn-outline btn-sm" style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, letterSpacing: '0.05em' }}>
        {lang === 'es' ? 'EN' : 'ES'}
      </button>
      <UserMenu lang={lang} onOpenAuth={onOpenAuth} />
    </header>
  );
}

Object.assign(window, { Sidebar, TopBar, NAV });