// theSitrep · app shell: sidebar, topbar with role switcher, tweaks panel.

const NAV = [
  { id: 'dashboard',        label: 'Dashboard',          icon: 'activity',        path: 'dashboard',        kbd: 'G D' },
  { id: 'devs',             label: 'Developer Profiles', icon: 'users',           path: 'devs',             kbd: 'G P' },
  { id: 'ticket-forensics', label: 'Ticket Forensics',   icon: 'git-branch',      path: 'ticket-forensics', kbd: 'G F' },
  { id: 'commitment-trends', label: 'Commitment Trends', icon: 'trending-up',     path: 'commitment-trends', kbd: 'G T' },
  { id: 'hotspots',         label: 'Risk Hotspots',      icon: 'flame',           path: 'hotspots',         kbd: 'G H' },
  { id: 'signals',          label: 'Signals',            icon: 'sparkles',        path: 'signals',          kbd: 'G S' },
  { id: 'disengagement',    label: 'Disengagement',      icon: 'alert-triangle',  path: 'disengagement',    kbd: 'G E' },
];

// One searchable select used inside the Developer Profiles sidebar layer.
// Renders a labelled button; when open, an in-flow search box + option list
// (kept in normal flow so the sidebar's overflow:hidden never clips it).
function SidebarSelect({ icon, label, placeholder, searchPlaceholder, options, selectedId, isOpen, onToggle, onPick, emptyText }) {
  const [q, setQ] = useState('');
  const inputRef = useRef(null);
  useEffect(() => {
    if (isOpen) { setQ(''); setTimeout(() => inputRef.current?.focus(), 30); }
  }, [isOpen]);
  const Q = q.trim().toLowerCase();
  const filtered = Q ? options.filter(o => (o.label + ' ' + (o.sub || '')).toLowerCase().includes(Q)) : options;
  const current = options.find(o => o.id === selectedId);
  return (
    <div className={`sb-select ${isOpen ? 'open' : ''}`}>
      <button type="button" className="sb-select-btn" onClick={onToggle} aria-expanded={isOpen}>
        <Icon name={icon} size={13} className="sb-select-ic" />
        <span className="sb-select-text">
          <span className="sb-select-eyebrow">{label}</span>
          <span className="sb-select-value">{current ? current.label : placeholder}</span>
        </span>
        <Icon name="chevron-down" size={12} className="sb-select-caret" />
      </button>
      {isOpen && (
        <div className="sb-select-panel">
          <div className="sb-select-search">
            <Icon name="search" size={12} />
            <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} placeholder={searchPlaceholder} aria-label={searchPlaceholder} />
          </div>
          <div className="sb-select-opts">
            {filtered.map(o => (
              <button key={o.id} type="button" className={`sb-opt ${o.id === selectedId ? 'active' : ''}`} onClick={() => onPick(o)}>
                {o.initials && <Avatar initials={o.initials} size={18} />}
                <span className="sb-opt-body">
                  <span className="sb-opt-label">{o.label}</span>
                  {o.sub && <span className="sb-opt-sub">{o.sub}</span>}
                </span>
                {o.id === selectedId && <Icon name="check" size={12} className="sb-opt-check" />}
              </button>
            ))}
            {filtered.length === 0 && <div className="sb-select-empty">{emptyText || 'No matches'}</div>}
          </div>
        </div>
      )}
    </div>
  );
}

function Sidebar({ collapsed, setCollapsed, currentView, currentId, navigate, role, openCmd, disengagementActive }) {
  const isActive = (p) => currentView === p;
  const signalsCount = DATA.signals.length;
  // Sidebar navigation has two layers: the main menu and a drill-in
  // "Developer Profiles" layer with team + developer searchable selects.
  const [navLayer, setNavLayer] = useState(currentView === 'dev' ? 'devs' : 'main');
  const [selectedTeam, setSelectedTeam] = useState('all');
  const [openDrop, setOpenDrop] = useState(null); // null | 'team' | 'dev'

  const teams = useMemo(() => Array.from(new Set(DATA.engineers.map(e => e.team))).sort(), []);
  const teamOptions = useMemo(
    () => [{ id: 'all', label: 'All teams' }, ...teams.map(t => ({ id: t, label: t }))],
    [teams]
  );
  const devOptions = useMemo(() => {
    const list = selectedTeam === 'all' ? DATA.engineers : DATA.engineers.filter(e => e.team === selectedTeam);
    return list.map(e => ({ id: e.id, label: e.name, sub: e.team, initials: e.initials }));
  }, [selectedTeam]);

  const showDevsLayer = navLayer === 'devs' && !collapsed;
  const enterDevsLayer = () => {
    if (collapsed) setCollapsed(false);
    setNavLayer('devs');
    setOpenDrop(null);
  };

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        {collapsed ? (
          <button className="collapse-btn" onClick={() => setCollapsed(false)} title="Expand sidebar" style={{ margin: '0 auto' }}>
            <Icon name="chevron-right" size={14} />
          </button>
        ) : (
          <>
            <div className="workspace">
              <div style={{ minWidth: 0, flex: 1 }}>
                <div className="ws-logo" role="img" aria-label="theSitrep" />
                <div className="ws-sub">Evidence layer · Alex's team</div>
              </div>
              <div className="ws-tag">v0.1</div>
            </div>
            <button className="collapse-btn" onClick={() => setCollapsed(true)} title="Collapse sidebar">
              <Icon name="panel-left" size={14} />
            </button>
          </>
        )}
      </div>

      <div className="sidebar-search" onClick={openCmd} title="Search · ⌘K">
        <Icon name="search" size={13} />
        <span className="ss-text">Search & jump…</span>
        <span className="ss-kbd"><span className="kbd">⌘</span><span className="kbd">K</span></span>
      </div>

      <nav className="nav-section">
        {showDevsLayer ? (
          <div className="nav-devs-layer">
            <button type="button" className="nav-back" onClick={() => { setNavLayer('main'); setOpenDrop(null); }}>
              <Icon name="chevron-left" size={14} />
              <span>Menu</span>
            </button>
            <div className="nav-layer-title">Developer Profiles</div>
            <SidebarSelect
              icon="users"
              label="Team"
              placeholder="All teams"
              searchPlaceholder="Search teams…"
              options={teamOptions}
              selectedId={selectedTeam}
              isOpen={openDrop === 'team'}
              onToggle={() => setOpenDrop(o => (o === 'team' ? null : 'team'))}
              onPick={(o) => { setSelectedTeam(o.id); setOpenDrop(null); }}
              emptyText="No teams match."
            />
            <div className="nav-dev-list">
              {devOptions.map(o => {
                const active = currentView === 'dev' && currentId === o.id;
                return (
                  <button
                    key={o.id}
                    type="button"
                    className={`sb-opt ${active ? 'active' : ''}`}
                    onClick={() => navigate('#/dev/' + o.id)}
                  >
                    <Avatar initials={o.initials} size={18} />
                    <span className="sb-opt-body">
                      <span className="sb-opt-label">{o.label}</span>
                      <span className="sb-opt-sub">{o.sub}</span>
                    </span>
                    {active && <Icon name="check" size={12} className="sb-opt-check" />}
                  </button>
                );
              })}
              {devOptions.length === 0 && <div className="sb-select-empty">No developers in this team.</div>}
            </div>
          </div>
        ) : (
          NAV.map(n => {
            if (n.id === 'devs') {
              return (
                <button
                  key={n.id}
                  type="button"
                  className={`nav-row nav-row-btn ${currentView === 'dev' ? 'active' : ''}`}
                  onClick={enterDevsLayer}
                  title={n.label}
                >
                  <span className="nav-icon"><Icon name={n.icon} size={15} /></span>
                  <span className="nav-label-text">{n.label}</span>
                  <span className="nav-caret"><Icon name="chevron-right" size={13} /></span>
                </button>
              );
            }
            return (
              <a key={n.id} href={'#/' + n.path} className={`nav-row ${isActive(n.path) ? 'active' : ''}`}>
                <span className="nav-icon"><Icon name={n.icon} size={15} /></span>
                <span className="nav-label-text">{n.label}</span>
                {n.id === 'disengagement' && (
                  <span className={`nav-disengaged ${disengagementActive ? 'active' : ''}`}>{disengagementActive ? '1' : '·'}</span>
                )}
                {n.id === 'signals' && (
                  <span className={`nav-signals ${signalsCount > 0 ? 'active' : ''}`}>{signalsCount > 0 ? signalsCount : '·'}</span>
                )}
              </a>
            );
          })
        )}
      </nav>

      <div className="sidebar-foot">
        <div className="profile-row">
          <Avatar initials={DATA.viewer.initials} size={26} />
          <div className="profile-meta sidebar-foot-content">
            <div className="pn">{DATA.viewer.name}</div>
            <div className="pr">{DATA.viewer.role} · {DATA.viewer.team}</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ currentView, currentId, navigate, role, theme, setTheme, openTweaks, openCmd }) {
  const crumbs = useMemo(() => {
    if (currentView === 'dev' && currentId) {
      const d = DATA.devById(currentId);
      return [
        { label: 'Developer Profiles' },
        { label: d ? d.name : currentId, cur: true },
      ];
    }
    if (currentView === 'ticket' && currentId) {
      return [
        { label: 'Tickets', href: '#/dashboard' },
        { label: currentId, cur: true },
      ];
    }
    const map = {
      dashboard: [{ label: 'Dashboard', cur: true }],
      'ticket-forensics': [{ label: 'Ticket Forensics', cur: true }],
      'commitment-trends': [{ label: 'Commitment trends', cur: true }],
      signals: [{ label: 'Signals', cur: true }],
      disengagement: [{ label: 'Disengagement', cur: true }],
      hotspots: [{ label: 'Risk Hotspots', cur: true }],
    };
    return map[currentView] || [{ label: 'Dashboard', cur: true }];
  }, [currentView, currentId]);

  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><Icon name="chevron-right" size={11} /></span>}
            {c.href ? <a href={c.href}>{c.label}</a> : <span className={c.cur ? 'cur' : ''}>{c.label}</span>}
          </React.Fragment>
        ))}
      </div>

      <div className="topbar-actions">
        <button className="btn ghost icon" onClick={openCmd} title="Search · ⌘K">
          <Icon name="command" size={14} />
        </button>
        <button className="btn ghost icon" title="Notifications">
          <Icon name="bell" size={14} />
        </button>
        <button className="btn ghost icon" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="Toggle theme">
          <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={14} />
        </button>
        <button className="btn ghost icon" onClick={openTweaks} title="Tweaks">
          <Icon name="sliders" size={14} />
        </button>
      </div>
    </div>
  );
}

// Minimal tweaks panel · density + theme.
function TweaksPanel({ open, onClose, theme, setTheme, density, setDensity }) {
  if (!open) return null;
  return (
    <>
      <div className="tweaks-scrim" onClick={onClose} />
      <div className="tweaks-panel">
        <div className="tp-section">
          <div className="tp-h">Theme</div>
          <div className="tp-row">
            <span>Mode</span>
            <div className="tp-opts">
              {['dark','light'].map(t => (
                <button key={t} className={theme === t ? 'active' : ''} onClick={() => setTheme(t)}>{t}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="tp-section">
          <div className="tp-h">Density</div>
          <div className="tp-row">
            <span>Row spacing</span>
            <div className="tp-opts">
              {['compact','comfortable','cozy'].map(d => (
                <button key={d} className={density === d ? 'active' : ''} onClick={() => setDensity(d)}>{d}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="tp-section" style={{ fontSize: 11, color: 'var(--text-3)' }}>
          theSitrep shows ground truth.<br />Every label has receipts.
        </div>
      </div>
    </>
  );
}

// Lightweight ⌘K command palette
function CommandPalette({ open, onClose, navigate, role }) {
  const [q, setQ] = useState('');
  const [idx, setIdx] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    if (open) { setQ(''); setIdx(0); setTimeout(() => inputRef.current?.focus(), 30); }
  }, [open]);

  const flat = useMemo(() => {
    const pageItems = [
      { label: 'Dashboard', icon: 'activity', go: '#/dashboard' },
      { label: 'Ticket Forensics', icon: 'git-branch', go: '#/ticket-forensics' },
      { label: 'Commitment Trends', icon: 'trending-up', go: '#/commitment-trends' },
      { label: 'Risk Hotspots', icon: 'flame', go: '#/hotspots' },
      { label: 'Signals', icon: 'sparkles', go: '#/signals' },
      { label: 'Disengagement', icon: 'alert-triangle', go: '#/disengagement' },
    ];
    const devItems = DATA.engineers.slice(0, 8).map(d => ({
      label: d.name, sub: `${d.role} · ${d.team}`, icon: 'user', go: '#/dev/' + d.id,
    }));
    const ticketItems = DATA.tickets.slice(0, 8).map(t => ({
      label: t.id, sub: t.title, icon: 'git-branch', go: '#/ticket/' + t.id,
    }));
    const items = [...pageItems, ...devItems, ...ticketItems];
    if (!q) return items;
    const Q = q.toLowerCase();
    return items.filter(it => (it.label + ' ' + (it.sub || '')).toLowerCase().includes(Q));
  }, [q, role]);

  useEffect(() => { setIdx(0); }, [q]);

  const run = (it) => { navigate(it.go); onClose(); };

  useEffect(() => {
    if (!open) return;
    const h = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(i => Math.min(flat.length - 1, i + 1)); }
      else if (e.key === 'ArrowUp')   { e.preventDefault(); setIdx(i => Math.max(0, i - 1)); }
      else if (e.key === 'Enter')     { e.preventDefault(); if (flat[idx]) run(flat[idx]); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open, flat, idx]);

  if (!open) return null;

  return (
    <div className="cmd-scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}
         style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 80, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '12vh', backdropFilter: 'blur(4px)' }}>
      <div onMouseDown={e => e.stopPropagation()} style={{ width: 'min(620px, 92vw)', background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
          <Icon name="search" size={16} />
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} placeholder="Jump to page, person, ticket…"
                 style={{ flex: 1, background: 'transparent', border: 0, outline: 0, fontSize: 15, color: 'var(--text)' }} />
          <span className="kbd">esc</span>
        </div>
        <div style={{ maxHeight: '50vh', overflowY: 'auto', padding: '6px 0' }}>
          {flat.length === 0 ? <div className="empty">No results</div> : flat.map((it, i) => (
            <div key={it.label + i}
                 onMouseEnter={() => setIdx(i)}
                 onClick={() => run(it)}
                 style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', cursor: 'pointer', background: i === idx ? 'var(--surface-2)' : 'transparent' }}>
              <Icon name={it.icon} size={14} className="ci-icon" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13 }}>{it.label}</div>
                {it.sub && <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{it.sub}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, TweaksPanel, CommandPalette, NAV });