import React, { useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './index.css';

import { AuthProvider } from './contexts/AuthContext';
import ProtectedRoute from './components/app/ProtectedRoute';
import { initPostHog } from './services/posthog';
import { supabase } from './lib/supabase';

// Initialize PostHog analytics
initPostHog();

// Initialize Supabase auth listener
supabase.auth.onAuthStateChange((event, session) => {
  console.log('Auth state changed:', event, session ? 'Session exists' : 'No session');
  if (event === 'PASSWORD_RECOVERY') {
    console.log('Password recovery mode activated');
  }
});

// Landing page
import App from './App';

// Auth pages
import Login from './pages/Login';
import Register from './pages/Register';
import EmailConfirmation from './pages/EmailConfirmation';
import ResetPassword from './pages/ResetPassword';
// Add other auth pages as needed: ForgotPassword, etc.

// Legal pages
import PrivacyPolicy from './pages/PrivacyPolicy';
import TermsOfService from './pages/TermsOfService';

// App pages
import Dashboard from './pages/Dashboard';
import Bills from './pages/Bills';
import BillDetail from './pages/BillDetail';
import MonitoringPage from './pages/Monitoring';
import AutoMemo from './pages/AutoMemo';
import ImpactForecast from './pages/ImpactForecast';
import SentimentDashboard from './pages/SentimentDashboard';
import Users from './pages/Users';
import Profile from './pages/Profile';
import Settings from './pages/Settings';
// Add other app pages as needed

// Ensure dark mode is applied
document.documentElement.classList.add('dark');

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Router>
      <AuthProvider>
        <Routes>
          {/* Public routes */}
          <Route path="/" element={<App />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Register />} />
          <Route path="/register" element={<Register />} />
          <Route path="/email-confirmation" element={<EmailConfirmation />} />
          <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/privacy" element={<PrivacyPolicy />} />
          <Route path="/terms" element={<TermsOfService />} />
          {/* Add other public routes as needed */}
          
          {/* Protected routes */}
          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/bills" element={<Bills />} />
            <Route path="/bills/:id" element={<BillDetail />} />
            <Route path="/monitoring" element={<MonitoringPage />} />
            <Route path="/auto-memo" element={<AutoMemo />} />
            <Route path="/auto-memo/:billId" element={<AutoMemo />} />
            <Route path="/impact-forecast" element={<ImpactForecast />} />
            <Route path="/impact-forecast/:billId" element={<ImpactForecast />} />
            <Route path="/sentiment-dashboard" element={<SentimentDashboard />} />
            <Route path="/sentiment-dashboard/:topic" element={<SentimentDashboard />} />
            <Route path="/users" element={<Users />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/settings" element={<Settings />} />
            {/* Add other protected routes as needed */}
          </Route>
        </Routes>
      </AuthProvider>
    </Router>
  </React.StrictMode>
)