// Sidebar — workspace switcher, nav items, account
const { useState, useRef, useEffect } = React;

function useClickOutside(ref, onOutside) {
  useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onOutside();
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [ref, onOutside]);
}

const WORKSPACES = [
  { id: 'acme',     name: 'ACME, Inc',         mark: 'A', plan: 'Business', current: true },
  { id: 'membrane', name: 'Membrane Agency',   mark: 'M', plan: 'Business' },
  { id: 'sandbox',  name: 'Membrane Sandbox',  mark: 'S', plan: 'Free' },
];

const NAV_ITEMS = [
  { id: 'discovery',   label: 'Discovery',     icon: 'Discovery',    badge: null,  hotkey: 'D' },
  { id: 'jobs',        label: 'Agent Jobs',    icon: 'Jobs',         badge: '24',  hotkey: 'J' },
  { id: 'integrations',label: 'Integrations',  icon: 'Integrations', badge: null,  hotkey: 'I' },
  { id: 'data',        label: 'Data',          icon: 'Data',         badge: null,  hotkey: 'A' },
  { id: 'rules',       label: 'Business Rules',icon: 'Rules',        badge: '7',   hotkey: 'R' },
];

function WorkspaceSwitcher({ collapsed, current, onPick }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useClickOutside(ref, () => setOpen(false));
  const Chev = Icons.ChevDown;
  return (
    <div className="ws-switcher" ref={ref}>
      <button className="ws-trigger" onClick={() => setOpen(!open)} aria-label="Switch workspace">
        <span className="ws-mark">{current.mark}</span>
        <span className="ws-name">{current.name}</span>
        <Chev size={12} className="ws-chev"/>
      </button>
      {!collapsed && (
        <button className="collapse-btn" onClick={() => window.dispatchEvent(new CustomEvent('toggle-sidebar'))} aria-label="Collapse sidebar" title="Collapse sidebar  ⌘\\">
          <Icons.Sidebar size={14}/>
        </button>
      )}
      <button className="expand-rail-btn" onClick={() => window.dispatchEvent(new CustomEvent('toggle-sidebar'))} aria-label="Expand sidebar">
        <Icons.Chevron size={11}/>
      </button>
      <div className="popover" data-open={open}>
        <div className="pop-label">Workspaces</div>
        {WORKSPACES.map(w => (
          <button key={w.id} className="pop-item" onClick={() => { onPick(w); setOpen(false); }}>
            <span className="ws-mark" style={{
              background: w.id === 'membrane' ? 'linear-gradient(135deg, oklch(0.55 0.10 180), oklch(0.45 0.10 200))' :
                          w.id === 'sandbox'  ? 'linear-gradient(135deg, oklch(0.62 0.08 250), oklch(0.50 0.10 270))' :
                                                'linear-gradient(135deg, oklch(0.65 0.13 40), oklch(0.55 0.13 20))'
            }}>{w.mark}</span>
            <div className="pop-stack">
              <span className="name">{w.name}</span>
              <span className="pop-meta">{w.plan} · {w.id === current.id ? 'Active' : 'Switch to'}</span>
            </div>
            {w.id === current.id && <Icons.Check size={14} className="check"/>}
          </button>
        ))}
        <div className="pop-divider"/>
        <button className="pop-item">
          <span style={{width:20,height:20,borderRadius:5,border:'1px dashed var(--border-strong)',display:'grid',placeItems:'center',color:'var(--fg-tertiary)'}}>
            <Icons.Plus size={11}/>
          </span>
          <span>Create workspace</span>
        </button>
        <button className="pop-item">
          <span style={{width:20,height:20,borderRadius:5,display:'grid',placeItems:'center',color:'var(--fg-tertiary)'}}>
            <Icons.Building size={14}/>
          </span>
          <span>Workspace settings</span>
        </button>
      </div>
    </div>
  );
}

function NavItem({ item, active, collapsed, onClick }) {
  const Ico = Icons[item.icon];
  return (
    <button className="nav-item" data-active={active} onClick={onClick}>
      <Ico size={15} className="icon"/>
      <span className="label">{item.label}</span>
      {item.badge && <span className="badge">{item.badge}</span>}
      {!item.badge && item.hotkey && <span className="kbd"><span className="kbd-key" style={{height:16, minWidth:16, fontSize:9}}>G</span><span className="kbd-key" style={{height:16, minWidth:16, fontSize:9}}>{item.hotkey}</span></span>}
      {collapsed && (
        <span className="tooltip">
          {item.label}
          <span className="kbd-key">G</span><span className="kbd-key">{item.hotkey}</span>
        </span>
      )}
    </button>
  );
}

function AccountMenu({ collapsed }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useClickOutside(ref, () => setOpen(false));
  return (
    <div className="account" ref={ref}>
      <button className="acc-trigger" onClick={() => setOpen(!open)}>
        <span className="avatar">JR</span>
        <span className="acc-text">
          <span className="acc-name">Julian Reyes</span>
          <span className="acc-meta">Admin · Online</span>
        </span>
        <span className="acc-cog" onClick={(e) => { e.stopPropagation(); window.dispatchEvent(new CustomEvent('open-settings')); }} title="Settings">
          <Icons.Cog size={13}/>
        </span>
      </button>
      <div className="acc-popover" data-open={open}>
        <div className="acc-header">
          <span className="avatar" style={{width:28, height:28, fontSize:11}}>JR</span>
          <div style={{display:'flex', flexDirection:'column', minWidth:0}}>
            <span className="name">Julian Reyes</span>
            <span className="email">julian@membrane.agency</span>
          </div>
        </div>
        <button className="pop-item"><Icons.User size={14}/><span>Profile</span></button>
        <button className="pop-item"><Icons.Cog size={14}/><span>Account settings</span><span className="pop-meta" style={{marginLeft:'auto'}}>⌘,</span></button>
        <button className="pop-item"><Icons.Theme size={14}/><span>Appearance</span><span className="pop-meta" style={{marginLeft:'auto'}}>Light</span></button>
        <button className="pop-item"><Icons.Help size={14}/><span>Help & shortcuts</span><span className="pop-meta" style={{marginLeft:'auto'}}>?</span></button>
        <div className="pop-divider"/>
        <button className="pop-item" style={{color:'var(--danger)'}}><Icons.Logout size={14}/><span>Log out</span></button>
      </div>
    </div>
  );
}

function Sidebar({ activeNav, onNav, collapsed, currentWs, setCurrentWs }) {
  return (
    <aside className="sidebar">
      <WorkspaceSwitcher collapsed={collapsed} current={currentWs} onPick={setCurrentWs}/>
      <nav className="nav">
        {NAV_ITEMS.map(item => (
          <NavItem key={item.id} item={item} active={activeNav === item.id} collapsed={collapsed} onClick={() => onNav(item.id)}/>
        ))}
      </nav>
      <AccountMenu collapsed={collapsed}/>
    </aside>
  );
}

Object.assign(window, { Sidebar, NAV_ITEMS, WORKSPACES });