'use client';

import React from 'react';
import { AppShell } from '@/ui/AppShell';
import { ControlBar } from '@/ui/ControlBar';
import { TopNav } from '@/ui/TopNav';
import { ContentViewport } from '@/ui/ContentViewport';
import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
import { GlobalFooterTemplate } from './GlobalFooterTemplate';
import { HeaderContentTemplate } from './HeaderContentTemplate';
import { Box } from '@/ui/Box';
import { usePathname } from 'next/navigation';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { routes } from '@/lib/routing/RouteConfig';

export interface RootAppShellViewData {
  children: React.ReactNode;
}

/**
 * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
 * It follows the "Telemetry Workspace" structure:
 * - ControlBar = header/control bar
 * - DashboardRail = sidebar rail
 * - ContentViewport = content area
 */
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
  const pathname = usePathname();
  const { data: session } = useCurrentSession();
  const isAuthenticated = !!session;
  
  // Hide sidebar on landing page for unauthenticated users
  const isLandingPage = pathname === routes.public.home;
  const showSidebar = isAuthenticated && !isLandingPage;

  return (
    <AppShell>
      <ControlBar>
        <TopNav>
          <HeaderContentTemplate />
        </TopNav>
      </ControlBar>
      
      <Box display="flex" flexGrow={1} overflow="hidden">
        {showSidebar && <GlobalSidebarTemplate />}
        
        <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
          <ContentViewport fullWidth={!showSidebar}>
            {children}
          </ContentViewport>
          <GlobalFooterTemplate />
        </Box>
      </Box>
    </AppShell>
  );
}