headquarter/apps/web/src/components/app-shell.tsx

import { useCallback, useEffect } from "react";
import { Link, NavLink, Outlet, useLocation } from "react-router-dom";

import { getUserSessions } from "../api/sessions";
import type { Session } from "../api/sessions";
import { useTheme } from "../hooks/use-theme";
import { useAuth } from "../state/auth";
import { useSessions } from "../state/sessions";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { Icon } from "./icon";
import { MobileNav } from "./mobile-nav";
import type { IconName } from "../utils/icons";

const NAV_ITEMS: { to: string; label: string; icon: IconName; badge?: "sessions" }[] = [
  { to: "/", label: "Home", icon: "dashboard" },
  { to: "/sessions", label: "Sessions", icon: "terminal", badge: "sessions" },
  { to: "/projects", label: "Projects", icon: "projects" },
  { to: "/tool-workshop", label: "Tool Workshop", icon: "settings" },
  { to: "/config-profiles", label: "Config Profiles", icon: "folder" },
  { to: "/settings", label: "Settings", icon: "settings" }
];

const SessionItem = ({ session }: { session: Session }) => {
  const isRunning = session.status === "running";

  return (
    <a
      href={session.url ?? `/projects/${session.project_id}`}
      target={session.url ? "_blank" : undefined}
      rel={session.url ? "noopener noreferrer" : undefined}
      className="nav-item session-item"
      title={`${session.display_name} (${session.status})`}
    >
      <span className={`session-status ${isRunning ? "running" : ""}`} />
      <Icon name={session.tool_icon as IconName} size="sm" />
      <span className="session-name">{session.display_name}</span>
    </a>
  );
};

export const AppShell = () => {
  useTheme();
  const { user, logout } = useAuth();
  const { sessions, setAllSessions } = useSessions();
  const location = useLocation();
  const isMobile = useMobileViewport();
  const isMobileTerminal = isMobile && location.pathname.includes("/instances/") && location.pathname.includes("/terminal");

  const loadSessions = useCallback(async () => {
    try {
      const data = await getUserSessions();
      setAllSessions(data);
    } catch {
      // Silently fail - sessions are optional
    }
  }, [setAllSessions]);

  useEffect(() => {
    void loadSessions();
    // Poll every 30 seconds (reduced from 10s to avoid ERR_NETWORK_CHANGED from Docker network changes)
    const interval = setInterval(() => {
      void loadSessions();
    }, 30000);
    return () => clearInterval(interval);
  }, [loadSessions]);

  if (isMobileTerminal) {
    return (
      <div className="shell mobile-terminal-shell">
        <Outlet />
      </div>
    );
  }

  return (
    <div className="shell">
      <header className="shell-header">
        <Link className="brand" to="/">
          Headquarter
        </Link>
        <div className="header-actions">
          <Link className="user-chip" to="/profile">
            {user?.name ?? "User"}
          </Link>
          <button
            className="ghost-button"
            onClick={() => {
              void logout();
            }}
            type="button"
          >
            <Icon name="logout" size="sm" />
            Logout
          </button>
        </div>
      </header>

      <div className="shell-body">
        {!isMobile && (
          <aside className="shell-nav" aria-label="Primary navigation">
            {NAV_ITEMS.map((item) => {
              const activeCount = sessions.filter((s) => s.status === "running").length;
              return (
                <NavLink
                  key={item.to}
                  to={item.to}
                  className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
                  end={item.to === "/"}
                >
                  <Icon name={item.icon} size="sm" />
                  {item.label}
                  {item.badge === "sessions" && activeCount > 0 && (
                    <span className="nav-badge">{activeCount}</span>
                  )}
                </NavLink>
              );
            })}
            
            {sessions.length > 0 && (
              <>
                <div className="nav-divider" />
                <div className="nav-section-title">Live sessions</div>
                {sessions.map((session) => (
                  <SessionItem key={session.id} session={session} />
                ))}
              </>
            )}
          </aside>
        )}

        <main className={`shell-content ${isMobile ? "mobile" : ""}`}>
          <Outlet />
        </main>
      </div>

      {isMobile && (
        <MobileNav sessionCount={sessions.filter((s) => s.status === "running").length} />
      )}
    </div>
  );
};