/*
 * Root module router.
 *
 * Three modules — the packaging audit (the point of the app) plus About and
 * Contact. Which one is showing is held in the URL hash so a module can be linked
 * to and survives a reload; anything unrecognised falls back to the audit.
 *
 * Kept deliberately small: no router library, because adding one would mean
 * adding a build step to a repo that has none.
 *
 * IIFE-wrapped and published on window.ArkaApp — see AppShell.jsx.
 */

(function () {
  const {
    AppShell,
    AppShellSidebar,
    AppShellContent,
    AppShellTopbar,
    AppShellPage,
    SidebarLogo,
    SidebarGroup,
    SidebarNavItem,
    SidebarFooter,
    SidebarCollapseToggle,
    SidebarMobileTrigger,
    Icons,
  } = window.Shell;

  const MODULES = [
    {
      key: 'audit',
      label: 'Optimization analysis',
      group: 'Analysis',
      icon: Icons.Gauge,
      title: 'Optimization analysis',
    },
    { key: 'about', label: 'About', group: 'Information', icon: Icons.Info, title: 'About' },
    { key: 'contact', label: 'Contact', group: 'Information', icon: Icons.Mail, title: 'Contact' },
  ];

  const GROUPS = ['Analysis', 'Information'];

  const DEFAULT_KEY = 'audit';

  function keyFromHash() {
    const raw = (window.location.hash || '').replace(/^#\/?/, '');
    return MODULES.some(m => m.key === raw) ? raw : DEFAULT_KEY;
  }

  function ArkaApp() {
    const [active, setActive] = React.useState(keyFromHash);

    React.useEffect(() => {
      const sync = () => setActive(keyFromHash());
      window.addEventListener('hashchange', sync);
      return () => window.removeEventListener('hashchange', sync);
    }, []);

    const go = React.useCallback(key => {
      window.location.hash = `#/${key}`;
      setActive(key);
    }, []);

    const current = MODULES.find(m => m.key === active) || MODULES[0];

    return (
      <AppShell>
        <AppShellSidebar>
          <SidebarLogo title="ARKA" subtitle="Warehouse optimization" />
          <div className="flex-1 overflow-y-auto">
            {GROUPS.map(group => (
              <SidebarGroup key={group} label={group}>
                {MODULES.filter(m => m.group === group).map(m => (
                  <SidebarNavItem
                    key={m.key}
                    icon={m.icon}
                    label={m.label}
                    badge={m.badge}
                    active={m.key === active}
                    onClick={() => go(m.key)}
                  />
                ))}
              </SidebarGroup>
            ))}
          </div>
          <SidebarFooter>
            Ship less air.
            <br />© 2026 Arka.
          </SidebarFooter>
          <SidebarCollapseToggle />
        </AppShellSidebar>

        <AppShellContent>
          <AppShellTopbar>
            <div className="flex min-w-0 items-center gap-2">
              <SidebarMobileTrigger />
              <span className="truncate text-sm font-semibold tracking-tight text-foreground">
                {current.title}
              </span>
            </div>
            {/* Intentionally empty: the templates now sit beside the upload card,
                where the format they describe is actually being asked for, and the
                engine's liveness surfaces as an error on the upload itself. */}
          </AppShellTopbar>

          <AppShellPage>
            {active === 'audit' && <window.PackagingAudit />}
            {active === 'about' && <window.AboutModule />}
            {active === 'contact' && <window.ContactModule />}
          </AppShellPage>
        </AppShellContent>
      </AppShell>
    );
  }

  window.ArkaApp = ArkaApp;
})();