// App shell: sidebar nav + top bar + page transitions.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

const NAV = [
  { id: 'home',         label: 'Home',         icon: 'home' },
  { id: 'chat',         label: 'Ask NalarX',   icon: 'chat' },
  { id: 'integrations', label: 'Integrations', icon: 'plug' },
  { id: 'sso',          label: 'SSO & Access', icon: 'shield' },
];

// Original wordmark — abstract geometric mark, not derived from any product
const Wordmark = ({ accent }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden>
      <rect x="2" y="2" width="20" height="20" rx="5" fill={accent || 'var(--ink)'} />
      <path d="M8 16V8l8 8V8" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
    <div style={{ fontWeight: 600, fontSize: 14.5, letterSpacing: '-0.01em' }}>
      NalarX
    </div>
  </div>
);

const SidebarItem = ({ item, active, onClick }) => (
  <button
    onClick={onClick}
    style={{
      display: 'flex', alignItems: 'center', gap: 10,
      width: '100%', height: 32, padding: '0 10px',
      border: 0, borderRadius: 7,
      background: active ? 'var(--bg-hover)' : 'transparent',
      color: active ? 'var(--ink)' : 'var(--ink-3)',
      fontSize: 13, fontWeight: active ? 550 : 450,
      cursor: 'pointer', textAlign: 'left',
      transition: 'background .12s, color .12s',
    }}
    onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--bg-sunken)'; }}
    onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
  >
    <Icon name={item.icon} size={15} />
    <span>{item.label}</span>
    {item.badge && (
      <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)' }}>
        {item.badge}
      </span>
    )}
  </button>
);

const Sidebar = ({ route, setRoute, persona, setPersona, vertical, setVertical, onNewConn }) => {
  const VV = window.NX_DATA.VERTICALS;
  const verticalKeys = Object.keys(VV);

  return (
    <aside style={{
      width: 240, flex: '0 0 240px',
      borderRight: '0.5px solid var(--line)',
      background: 'var(--bg)',
      display: 'flex', flexDirection: 'column',
      padding: '14px 10px',
      gap: 14,
    }}>
      <div style={{ padding: '4px 8px 4px' }}>
        <Wordmark />
      </div>

      {/* Workspace + persona */}
      <div style={{
        background: 'var(--bg-elev)',
        border: '0.5px solid var(--line)',
        borderRadius: 9,
        padding: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 22, height: 22, borderRadius: 5,
              background: 'var(--accent-soft)',
              color: 'var(--accent-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 600, fontSize: 11,
            }}>BC</div>
            <div style={{ lineHeight: 1.2 }}>
              <div style={{ fontSize: 12.5, fontWeight: 550 }}>BankCorp</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{VV[vertical].short} workspace</div>
            </div>
          </div>
          <Icon name="chevron-down" size={13} style={{ color: 'var(--ink-4)' }} />
        </div>
        {/* Persona segmented */}
        <div style={{
          display: 'flex', gap: 0, padding: 2,
          background: 'var(--bg-sunken)',
          borderRadius: 6, fontSize: 11.5,
        }}>
          {['Analyst', 'Admin'].map(p => (
            <button key={p}
              onClick={() => setPersona(p.toLowerCase())}
              style={{
                flex: 1, height: 22, border: 0, borderRadius: 5,
                background: persona === p.toLowerCase() ? 'var(--bg-elev)' : 'transparent',
                color: persona === p.toLowerCase() ? 'var(--ink)' : 'var(--ink-3)',
                fontSize: 11.5, fontWeight: 500,
                cursor: 'pointer',
                boxShadow: persona === p.toLowerCase() ? '0 1px 2px rgba(0,0,0,.06)' : 'none',
              }}
            >{p}</button>
          ))}
        </div>
      </div>

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {NAV.map(item => (
          <SidebarItem key={item.id} item={item}
            active={route === item.id} onClick={() => setRoute(item.id)} />
        ))}
      </nav>

      {/* Vertical pack switcher */}
      <div style={{ marginTop: 4 }}>
        <div style={{
          fontSize: 10.5, fontWeight: 600, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: 'var(--ink-4)',
          padding: '0 10px 6px',
        }}>Vertical pack</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {verticalKeys.map(k => (
            <button key={k}
              onClick={() => setVertical(k)}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                width: '100%', height: 28, padding: '0 10px',
                border: 0, borderRadius: 6,
                background: vertical === k ? 'var(--accent-soft)' : 'transparent',
                color: vertical === k ? 'var(--accent-ink)' : 'var(--ink-3)',
                fontSize: 12.5, fontWeight: vertical === k ? 550 : 450,
                cursor: 'pointer', textAlign: 'left',
              }}
              onMouseEnter={(e) => { if (vertical !== k) e.currentTarget.style.background = 'var(--bg-sunken)'; }}
              onMouseLeave={(e) => { if (vertical !== k) e.currentTarget.style.background = 'transparent'; }}
            >
              <span style={{
                width: 6, height: 6, borderRadius: 50,
                background: vertical === k ? 'var(--accent)' : 'var(--ink-5)',
              }} />
              {VV[k].label}
            </button>
          ))}
        </div>
      </div>

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

      <button
        onClick={onNewConn}
        className="nx-btn"
        style={{ justifyContent: 'center', height: 32, fontWeight: 500 }}
      >
        <Icon name="plus" size={14} />
        Add connection
      </button>

      {/* Footer user */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '6px 8px', borderTop: '0.5px solid var(--line)',
        marginTop: -2, paddingTop: 10,
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: '50%',
          background: 'oklch(0.78 0.08 50)',
          color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 600, fontSize: 11,
        }}>R</div>
        <div style={{ lineHeight: 1.2, flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500 }}>Rian Saputra</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{persona === 'admin' ? 'Workspace admin' : 'Analyst'}</div>
        </div>
        <Icon name="menu-dots" size={14} style={{ color: 'var(--ink-4)' }} />
      </div>
    </aside>
  );
};

const TopBar = ({ vertical, route }) => {
  const VV = window.NX_DATA.VERTICALS;
  const titles = {
    home:         'Overview',
    chat:         'Ask NalarX',
    integrations: 'Integrations',
    sso:          'SSO & Access',
  };
  return (
    <header style={{
      height: 48, flex: '0 0 48px',
      borderBottom: '0.5px solid var(--line)',
      background: 'var(--bg)',
      display: 'flex', alignItems: 'center',
      padding: '0 24px', gap: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
        <span style={{ color: 'var(--ink-4)' }}>{VV[vertical].short}</span>
        <Icon name="chevron-right" size={12} style={{ color: 'var(--ink-5)' }} />
        <span style={{ fontWeight: 550 }}>{titles[route]}</span>
      </div>
      <div style={{ flex: 1 }} />
      <div className="nx-mono" style={{
        display: 'flex', alignItems: 'center', gap: 6,
        color: 'var(--ink-3)', fontSize: 11.5,
      }}>
        <span className="nx-pulse-dot" />
        18 sources synced
      </div>
      <button className="nx-btn sm ghost"><Icon name="search" size={14} /> Search<span className="nx-kbd" style={{ marginLeft: 4 }}>⌘K</span></button>
    </header>
  );
};

window.Sidebar = Sidebar;
window.TopBar = TopBar;
window.Wordmark = Wordmark;