import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import {
  SidebarProvider,
  SidebarInset,
  useSidebar,
} from '@/components/ui/sidebar';

import {
  Menu,
} from 'lucide-react';

import LoginPage from './pages/LoginPage';
import HomePage from './pages/HomePage';
import ProtectedRoute from './components/ProtectedRoute';
import AdminRoute from './components/AdminRoute';
import NavBar from './components/NavBar';
import AdminUsersPage from './pages/AdminUsersPage';
import RegisterPage from './pages/RegisterPage';
import TimeClockPage from './pages/TimeClockPage';
import WeeklySummaryPage from './pages/WeeklySummaryPage';
import { useAuth } from './context/useAuth';

// Composant personnalisé pour le trigger mobile avec icône menu
function MobileSidebarTrigger() {
  const { isMobile, toggleSidebar, open } = useSidebar();
  const { user } = useAuth();

  if (!isMobile || !user) return null;

  return (
    <div className="flex shrink-0 items-center justify-end gap-2 px-4 pt-4">
      <button
        onClick={toggleSidebar}
        className="rounded-md bg-sidebar-primary p-3 text-sidebar-primary-foreground transition-colors hover:bg-sidebar-primary/80"
        aria-label={open ? 'Fermer le menu' : 'Ouvrir le menu'}
      >
        <Menu className="size-6" />
      </button>
    </div>
  );
}

function App() {
  return (
    <SidebarProvider>

      <NavBar />

      <SidebarInset className="flex h-svh flex-col overflow-hidden">

        <MobileSidebarTrigger />

        {/* Zone restante entre header et footer */}
        <main className="flex-1 overflow-hidden">

          {/* Marges autour de la page */}
          <div className="h-full w-full p-4 md:p-12">

            {/* SEULE zone scrollable */}
            <div className="page-route h-full w-full overflow-y-auto">
              <Routes>

                <Route
                  path="/login"
                  element={<LoginPage />}
                />

                <Route
                  path="/register"
                  element={<RegisterPage />}
                />

                <Route
                  path="/pointage"
                  element={
                    <ProtectedRoute>
                      <TimeClockPage />
                    </ProtectedRoute>
                  }
                />

                <Route
                  path="/"
                  element={
                    <ProtectedRoute>
                      <HomePage />
                    </ProtectedRoute>
                  }
                />

                <Route
                  path="/users"
                  element={
                    <AdminRoute>
                      <AdminUsersPage />
                    </AdminRoute>
                  }
                />

                <Route
                  path="/weekly-summary"
                  element={
                    <ProtectedRoute>
                      <WeeklySummaryPage />
                    </ProtectedRoute>
                  }
                />

                <Route
                  path="*"
                  element={<Navigate to="/" replace />}
                />

              </Routes>
            </div>

          </div>

        </main>

        <footer className="site-footer shrink-0 border-t border-border bg-muted py-2">
          <p className="text-center text-sm text-muted-foreground">
            &copy; 2026 Le Fournil du Bocage. Tous droits réservés.
          </p>
        </footer>

      </SidebarInset>
    </SidebarProvider>
  );
}

export default App;