import { AuthLayout } from './components/auth/AuthLayout';
import { AppShell } from './components/layout/AppShell';
import { BackupsView } from './components/backups/BackupsView';
import { DashboardView } from './components/dashboard/DashboardView';
import { PhotosView } from './components/photos/PhotosView';
import { SettingsView } from './components/settings/SettingsView';
import { NavigationProvider, useNavigation } from './contexts/NavigationContext';
import { SessionProvider, useSession } from './contexts/SessionContext';
import { ThemeProvider } from './contexts/ThemeContext';

/** Content router — a plain state switch (NavigationContext.nav), no react-router. */
function AppContent() {
  const { nav } = useNavigation();

  switch (nav) {
    case 'dashboard':
      return <DashboardView />;
    case 'photos':
      return <PhotosView />;
    case 'backups':
      return <BackupsView />;
    case 'settings':
      return <SettingsView />;
  }
}

function Root() {
  const { view } = useSession();

  if (view === 'auth') return <AuthLayout />;

  return (
    <NavigationProvider>
      <AppShell>
        <AppContent />
      </AppShell>
    </NavigationProvider>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <SessionProvider>
        <Root />
      </SessionProvider>
    </ThemeProvider>
  );
}