/* ============================================================
   AIGENT — App shell components (reusable across screens)
   Sidebar · Topbar · Dropdown · AccountSwitcher · UserMenu
   Depends on icons.jsx + shell.css. Exposed on window.
   ============================================================ */

const { useState, useRef, useEffect } = React;
const {
  CoachIcon, HeadsetIcon, ChartIcon, FileTextIcon, HelpIcon,
  BuildingIcon, ChevronDownIcon, CheckIcon, UserCircleIcon, SettingsIcon, LogoutIcon,
} = window;

const NAV_ITEMS = [
  { id: "coach-builder", label: "Coach Builder", Icon: CoachIcon },
  { id: "call-monitor", label: "Call Monitor", Icon: HeadsetIcon },
  { id: "performance", label: "Performance Analytics", Icon: ChartIcon },
  { id: "reports", label: "Reports", Icon: FileTextIcon },
];

function Sidebar({ active, onNavigate }) {
  return (
    <aside className="sidebar">
      <div className="brand"><div className="wordmark"><b>ai</b><span>gent</span></div></div>
      <nav className="nav">
        {NAV_ITEMS.map(({ id, label, Icon }) => (
          <a key={id} href="#" className={"nav-item" + (active === id ? " active" : "")}
             aria-current={active === id ? "page" : undefined}
             onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(id); }}>
            <span className="ic"><Icon /></span>
            <span className="lbl">{label}</span>
          </a>
        ))}
      </nav>
      <div className="nav-spacer"></div>
      <div className="nav-divider"></div>
      <a href="#" className={"nav-item" + (active === "help" ? " active" : "")}
         aria-current={active === "help" ? "page" : undefined}
         onClick={(e) => { e.preventDefault(); onNavigate && onNavigate("help"); }}>
        <span className="ic"><HelpIcon size={19} /></span>
        <span className="lbl">Help</span>
      </a>
    </aside>
  );
}

/* generic dropdown: renders a trigger; manages open + outside-click */
function Dropdown({ renderTrigger, children, align = "right", menuWidth = 224 }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); };
  }, []);
  return (
    <div className="dd" ref={ref}>
      {renderTrigger({ open, toggle: () => setOpen((o) => !o) })}
      {open && (
        <div className={"pop-menu " + align} style={{ minWidth: menuWidth }} onClick={() => setOpen(false)}>
          {children}
        </div>
      )}
    </div>
  );
}

function AccountSwitcher({ value, options, onChange }) {
  const current = options.find((o) => o.id === value) || options[0];
  return (
    <Dropdown menuWidth={252} renderTrigger={({ open, toggle }) => (
      <button className={"switcher" + (open ? " open" : "")} onClick={toggle}>
        <span className="ic"><BuildingIcon /></span>
        <span className="acct-kicker">Account ·</span>
        <span>{current.name}</span>
        <span className="chev"><ChevronDownIcon size={15} /></span>
      </button>
    )}>
      {options.map((o) => (
        <div key={o.id} className="pop-item" onClick={() => onChange(o.id)}>
          <span className="ic"><BuildingIcon /></span>
          <span>{o.name}{o.sub && <span className="sub"> · {o.sub}</span>}</span>
          {o.id === current.id && <span className="check"><CheckIcon size={15} /></span>}
        </div>
      ))}
    </Dropdown>
  );
}

function UserMenu({ name, email, initials }) {
  return (
    <Dropdown menuWidth={216} renderTrigger={({ open, toggle }) => (
      <div className={"usermenu" + (open ? " open" : "")} onClick={toggle} role="button" tabIndex={0}>
        <span className="avatar">{initials}</span>
        <span className="uname">{name}</span>
        <span className="chev"><ChevronDownIcon size={15} /></span>
      </div>
    )}>
      <div className="pop-head">
        <div className="nm">{name}</div>
        <div className="em">{email}</div>
      </div>
      <div className="pop-item"><span className="ic"><UserCircleIcon /></span> Profile</div>
      <div className="pop-item"><span className="ic"><SettingsIcon /></span> Account settings</div>
      <div className="pop-divider"></div>
      <div className="pop-item danger"><span className="ic"><LogoutIcon /></span> Sign out</div>
    </Dropdown>
  );
}

function Topbar({ section, sectionIcon, account, accounts, onAccount, user }) {
  const SecIcon = sectionIcon;
  return (
    <header className="topbar">
      <div className="topbar-left">
        {SecIcon && <span className="ic"><SecIcon size={18} /></span>}
        {section}
      </div>
      <div className="topbar-right">
        <AccountSwitcher value={account} options={accounts} onChange={onAccount} />
        <div className="topbar-sep"></div>
        <UserMenu {...user} />
      </div>
    </header>
  );
}

function AppShell({ active, section, sectionIcon, account, accounts, onAccount, user, onNavigate, children }) {
  return (
    <div className="shell">
      <Sidebar active={active} onNavigate={onNavigate} />
      <div className="main-col">
        <Topbar section={section} sectionIcon={sectionIcon} account={account}
                accounts={accounts} onAccount={onAccount} user={user} />
        <main className="content">{children}</main>
      </div>
    </div>
  );
}

function Tabs({ tabs, active, onChange }) {
  return (
    <div className="tabs" role="tablist">
      {tabs.map((t) => (
        <button key={t.id} role="tab" aria-selected={active === t.id}
          className={"tab" + (active === t.id ? " active" : "")} onClick={() => onChange(t.id)}>
          {t.label}
          {t.badge != null && <span className={"tab-badge" + (t.alert ? " alert" : "")}>{t.badge}</span>}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { NAV_ITEMS, Sidebar, Dropdown, AccountSwitcher, UserMenu, Topbar, AppShell, Tabs });