// src/App.tsx
import React, { lazy, Suspense } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ToastContainer } from 'react-toastify';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

// Contexts
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { DateProvider } from './contexts/DateContext';
import { SelectionProvider } from './contexts/SelectionContext';
import { TutorialProvider } from './contexts/TutorialContext';

// Components
import ProtectedRoute from './components/Auth/ProtectedRoute';
import ErrorBoundary from './components/common/ErrorBoundary';
import Layout from './components/Layout';

import useZoom from './hooks/useZoom';

import { DisplayConfigProvider } from './contexts/DisplayConfigContext';
import PrintReportEspaceH from './pages/PrintReportEspaceH';

// Lazy loaded pages
const AuthPage = lazy(() => import('./pages/Auth'));
const ConfirmPasswordReset = lazy(() => import('./pages/ConfirmPasswordReset'));
const Synthesis = lazy(() => import('./pages/Synthesis'));
const Planning = lazy(() => import('./pages/Planning'));
const Targets = lazy(() => import('./pages/Targets'));
const Revenue = lazy(() => import('./pages/Revenue'));
const Hours = lazy(() => import('./pages/Hours'));
const Productivity = lazy(() => import('./pages/Productivity'));
const Rent = lazy(() => import('./pages/Rent'));
const CommercialGestures = lazy(() => import('./pages/CommercialGestures'));
const Parts = lazy(() => import('./pages/Parts'));
const Crescendo = lazy(() => import('./pages/Crescendo'));
const Entries = lazy(() => import('./pages/Entries'));
const VideoCheck = lazy(() => import('./pages/VideoCheck'));
const Quality = lazy(() => import('./pages/Quality'));
const HistoricalResults = lazy(() => import('./pages/HistoricalResults'));
const Admin = lazy(() => import('./pages/Admin'));
const Help = lazy(() => import('./pages/Help'));
const Profile = lazy(() => import('./pages/Profile'));
const TutorielsVideo = lazy(() => import('./pages/TutorielsVideo'));
const PrintReport = lazy(() => import('./pages/PrintReport'));
const PrintAdditionalSalesReport = lazy(() => import('./pages/PrintAdditionalSalesReport'));
const PrintProductivityReport = lazy(() => import('./pages/PrintProductivityReport'));
const PrintQualityReport = lazy(() => import('./pages/PrintQualityReport'));

// Configuration du client React Query
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      refetchOnWindowFocus: true,
    },
  },
});

const AppContent: React.FC = () => {
  const { user, loading } = useAuth();
  const dateProviderKey = user && user.id ? `user-${user.id}` : 'logged-out';
  const zoomLevel = useZoom();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[300px]">
        <div className="flex flex-col items-center gap-6">
          <div className="relative">
            <div className="loading-spinner-modern"></div>
            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary-400 to-accent-400 opacity-20 animate-pulse"></div>
          </div>
          <div className="text-center">
            <p className="text-lg font-semibold text-gray-700 animate-pulse">Chargement...</p>
            <div className="flex justify-center mt-2 space-x-1">
              <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
              <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
              <div className="w-2 h-2 bg-primary-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <DateProvider key={dateProviderKey}>
      <Suspense fallback={<div className="flex items-center justify-center h-screen">Chargement de la page...</div>}>
        <Routes>
          {/* Routes publiques */}
          <Route path="/login" element={<AuthPage />} />
          <Route path="/confirm-password-reset" element={<ConfirmPasswordReset />} />

          {/* Routes protégées avec zoom */}
          <Route
            element={
              <ProtectedRoute>
                <div
                  className="fixed top-0 left-0 origin-top-left overflow-visible bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50"
                  style={{
                    width: `${100 / zoomLevel}%`,
                    height: `${100 / zoomLevel}%`,
                    transform: `scale(${zoomLevel})`
                  }}
                >
                  <div className="absolute top-0 left-0 w-full h-full">
                    <Layout />
                  </div>
                </div>
              </ProtectedRoute>
            }
          >
            <Route path="/" element={<Navigate to="/synthesis" replace />} />
            <Route path="/planning" element={<Planning />} />
            <Route path="/targets" element={<Targets />} />
            <Route path="/synthesis" element={<Synthesis />} />
            <Route path="/revenue" element={<Revenue />} />
            <Route path="/hours" element={<Hours />} />
            <Route path="/productivity" element={<Productivity />} />
            <Route path="/crescendo" element={<Crescendo />} />
            <Route path="/entries" element={<Entries />} />
            <Route path="/videocheck" element={<VideoCheck />} />
            <Route path="/quality" element={<Quality />} />
            <Route path="/rent" element={<Rent />} />
            <Route path="/commercial-gestures" element={<CommercialGestures />} />
            <Route path="/parts" element={<Parts />} />
            <Route path="/historical-results" element={<HistoricalResults />} />
            <Route path="/admin" element={<Admin />} />
            <Route path="/help" element={<Help />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/tutoriels-video" element={<TutorielsVideo />} />
          </Route>

          {/* Routes print */}
          <Route path="/print-report" element={<ProtectedRoute><PrintReport /></ProtectedRoute>} />
          <Route path="/print-additional-sales-report" element={<ProtectedRoute><PrintAdditionalSalesReport /></ProtectedRoute>} />
          <Route path="/print-productivity-report" element={<ProtectedRoute><PrintProductivityReport /></ProtectedRoute>} />
          <Route path="/print-quality-report" element={<ProtectedRoute><PrintQualityReport /></ProtectedRoute>} />
          <Route path="/print-report-espace-h" element={<PrintReportEspaceH />} />

          {/* Catch-all */}
          <Route path="*" element={<Navigate to="/synthesis" replace />} />
        </Routes>
      </Suspense>

      <ToastContainer />
    </DateProvider>
  );
};

const App: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary>
        <I18nextProvider i18n={i18n}>
          <Router>
            <AuthProvider>
              <TutorialProvider>
                <SelectionProvider>
                  <DisplayConfigProvider>
                    <AppContent />
                  </DisplayConfigProvider>
                </SelectionProvider>
              </TutorialProvider>
            </AuthProvider>
          </Router>
        </I18nextProvider>
      </ErrorBoundary>
    </QueryClientProvider>
  );
};

export default App;