/* Navigation shell.
 *
 * Phone (<768px): bottom tab bar pinned with safe-area inset.
 * Desktop (≥768px): left sidebar with the same five destinations plus
 * coach identity at top.
 *
 * Routes are hash-based and tracked in app.jsx; AppShell only renders
 * the chrome.
 */
(function () {
  const { useState, useEffect } = React;
  const { Icons, Avatar, coach, tokens } = window.CC;

  const TABS = [
    { id: "capture", label: "Capture", path: "/", icon: Icons.home },
    { id: "hub", label: "Knowledge", path: "/hub/recent", icon: Icons.book, prefix: "/hub" },
    { id: "events", label: "Events", path: "/events", icon: Icons.calendar },
    { id: "workouts", label: "Workouts", path: "/workouts", icon: Icons.dumbbell },
    { id: "meetings", label: "Meetings", path: "/meetings", icon: Icons.mic },
  ];

  function AppShell({ route, children }) {
    const me = coach.get() || "simon";

    const isActive = (tab) => {
      if (tab.prefix) return route.startsWith(tab.prefix);
      return route === tab.path || (tab.path === "/" && route === "/");
    };

    return (
      <div className="cc-shell">
        <aside className="cc-shell__side">
          <a href="#/" className="cc-shell__brand">
            <span className="cc-shell__brand-dot" />
            <span className="cc-shell__brand-name">Co-Pilot</span>
          </a>
          <div className="cc-shell__me">
            <Avatar coach={me} size={32} label={coach.label(me)} />
            <div className="cc-shell__me-name">{coach.label(me)}</div>
          </div>
          <nav className="cc-shell__nav">
            {TABS.map((tab) => (
              <a
                key={tab.id}
                href={`#${tab.path}`}
                className={`cc-shell__nav-link ${
                  isActive(tab) ? "is-active" : ""
                }`}
              >
                <span className="cc-shell__nav-icon">{tab.icon(20)}</span>
                <span className="cc-shell__nav-label">{tab.label}</span>
              </a>
            ))}
          </nav>
          <div className="cc-shell__side-foot">
            <a href="#/settings" className="cc-shell__settings">
              {Icons.settings(16)} <span>Settings</span>
            </a>
          </div>
        </aside>
        <main className="cc-shell__main">{children}</main>
        <nav className="cc-shell__bottom">
          {TABS.map((tab) => (
            <a
              key={tab.id}
              href={`#${tab.path}`}
              className={`cc-shell__bottom-link ${
                isActive(tab) ? "is-active" : ""
              }`}
              aria-label={tab.label}
            >
              <span>{tab.icon(22)}</span>
              <span className="cc-shell__bottom-label">{tab.label}</span>
            </a>
          ))}
        </nav>
      </div>
    );
  }

  window.CC = window.CC || {};
  window.CC.AppShell = AppShell;
})();