import React, { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
import { Navbar } from './components/Navbar';
import { Footer } from './components/Footer';
import { Home } from './pages/Home';
import { Features } from './pages/Features';
import { Pricing } from './pages/Pricing';
import { About } from './pages/About';
import Demo from './pages/Demo';
import Terms from './pages/Terms';
import Privacy from './pages/Privacy';
import RefundPolicy from './pages/RefundPolicy';
import NotFound from './pages/NotFound';
import { ClientLayout } from './pages/client/ClientLayout';
import { Dashboard as ClientDashboard } from './pages/client/Dashboard';
import { Profile as ClientProfile } from './pages/client/Profile';
import { Upgrades as ClientUpgrades } from './pages/client/Upgrades';
import { Invoices as ClientInvoices } from './pages/client/Invoices';
import { Support as ClientSupport } from './pages/client/Support';
import { ClientTicketDetail } from './pages/client/ClientTicketDetail';
import { AdminPanel } from './pages/AdminPanel';
import { AdminClientDetail } from './pages/AdminClientDetail';
import { AdminTicketDetail } from './pages/admin/AdminTicketDetail';
import { Login } from './pages/Login';
import { Register } from './pages/Register';
import { ForgotPassword } from './pages/ForgotPassword';
import { ResetPassword } from './pages/ResetPassword';
import { Dashboard } from './pages/admin/Dashboard';
import { Revenues } from './pages/admin/Revenues';
import { Clients } from './pages/admin/Clients';

import { Demos } from './pages/admin/Demos';
import { Tickets } from './pages/admin/Tickets';
import { Config } from './pages/admin/Config';
import { GoogleAnalyticsTracker } from './components/GoogleAnalyticsTracker';

import { Checkout } from './pages/Checkout';

// Scroll to top on route change
const ScrollToTop = () => {
  const { pathname } = useLocation();
  
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

const AppLayout = ({ isDarkMode, toggleDarkMode, children }: { isDarkMode: boolean, toggleDarkMode: () => void, children: React.ReactNode }) => {
  const { pathname } = useLocation();
  const isAuthPage = pathname === '/login' || pathname === '/register';
  const isAdminPage = pathname.startsWith('/admin');
  const hideNavFooter = isAuthPage || isAdminPage;
  const recaptchaKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;

  const content = (
    <div className={`${isDarkMode ? 'dark' : ''} transition-colors duration-500`}>
      <div className="min-h-screen bg-[#fafbfc] dark:bg-slate-950 selection:bg-blue-100 selection:text-blue-900 transition-colors duration-500 flex flex-col">
        {!hideNavFooter && <Navbar isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />}
        
        <main className="flex-grow flex flex-col">
          {children}
        </main>

        {!hideNavFooter && <Footer />}
      </div>
    </div>
  );

  if (!recaptchaKey) {
    return content;
  }

  return (
    <GoogleReCaptchaProvider reCaptchaKey={recaptchaKey}>
      {content}
    </GoogleReCaptchaProvider>
  );
};

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => setIsDarkMode(!isDarkMode);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  useEffect(() => {
    document.title = "Agendivo - CRM & Planification Professionnelle | Votre Solution Tout-en-Un";
    
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute("content", "Solution tout-en-un pour la gestion de rendez-vous, contrats et collaboration d'équipe. Agendivo centralise votre workflow pour une productivité maximale.");
    }
  }, []);

  return (
    <>
      <GoogleAnalyticsTracker />
      <ScrollToTop />
      <AppLayout isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/fonctionnalites" element={<Features />} />
          <Route path="/tarifs" element={<Pricing />} />
          <Route path="/about" element={<About />} />
          <Route path="/checkout" element={<Checkout />} />
          <Route path="/demo" element={<Demo />} />
          <Route path="/terms" element={<Terms />} />
          <Route path="/privacy" element={<Privacy />} />
          <Route path="/refund" element={<RefundPolicy />} />
          <Route path="/client" element={<ClientLayout />}>
            <Route index element={<ClientDashboard />} />
            <Route path="profile" element={<ClientProfile />} />
            <Route path="upgrades" element={<ClientUpgrades />} />
            <Route path="invoices" element={<ClientInvoices />} />
            <Route path="support" element={<ClientSupport />} />
            <Route path="support/:id" element={<ClientTicketDetail />} />
          </Route>
          <Route path="/admin" element={<AdminPanel />}>
            <Route index element={<Dashboard />} />
            <Route path="revenues" element={<Revenues />} />
            <Route path="clients" element={<Clients />} />
            <Route path="clients/:id" element={<AdminClientDetail />} />

            <Route path="demos" element={<Demos />} />
            <Route path="tickets" element={<Tickets />} />
            <Route path="tickets/:id" element={<AdminTicketDetail />} />
            <Route path="config" element={<Config />} />
          </Route>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/error" element={<NotFound />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </AppLayout>
    </>
  );
}