// ============================================================
// Persistent chrome — TabBar + ActionMenu popup
// ============================================================

function TabBar({ tabs, active, onChange, summary }) {
  return (
    <nav className="tabbar">
      <div className="tabbar-inner">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab ${active === tab.id ? 'active' : ''}`}
            onClick={() => onChange(tab.id)}
          >
            <span className="tab-label">{tab.label}</span>
            {tab.badge && (
              <span className={`tab-badge ${tab.badgeKind || ''}`}>{tab.badge}</span>
            )}
          </button>
        ))}
        <div className="tabbar-summary">{summary}</div>
      </div>
    </nav>
  );
}

// ------------------------------------------------------------
// ActionMenu — popup triggered from topbar
// ------------------------------------------------------------

function ActionMenu({ onRefresh, dataMode }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const h = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const esc = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('mousedown', h);
    window.addEventListener('keydown', esc);
    return () => {
      window.removeEventListener('mousedown', h);
      window.removeEventListener('keydown', esc);
    };
  }, [open]);

  const items = [
    { label: 'Refresh state', shortcut: 'R', onClick: () => { setOpen(false); onRefresh(); } },
    { label: 'Open repo', shortcut: '↗', onClick: () => {
      setOpen(false);
      window.open(`https://github.com/StaithValanthis/btc-agents`, '_blank');
    }},
    { label: 'Disconnect GitHub', danger: true, onClick: () => {
      localStorage.removeItem('gh_token');
      location.reload();
    }, disabled: !localStorage.getItem('gh_token') },
  ];

  return (
    <div className="action-menu" ref={ref}>
      <button className="action-btn" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="action-icon">⋯</span>
      </button>
      {open && (
        <div className="action-popup">
          {items.map((item, i) => (
            <button
              key={i}
              className={`action-item ${item.danger ? 'danger' : ''}`}
              onClick={item.onClick}
              disabled={item.disabled}
            >
              <span>{item.label}</span>
              {item.shortcut && <span className="action-shortcut">{item.shortcut}</span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { TabBar, ActionMenu });