import { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import CallLogs from './pages/CallLogs';
import CrmSettings from './pages/CrmSettings';
import KnowledgeBase from './pages/KnowledgeBase';
import CompanyRegistration from './pages/CompanyRegistration';
import Appointments from './pages/Appointments';
import VoiceSimulator from './pages/VoiceSimulator';
import Billing from './pages/Billing';
import Login from './pages/Login';
import { useAuthStore } from './store/authStore';

const ROUTE_TITLES: Record<string, string> = {
  '/login': 'Sign In & Free Trial — Churchill AI Voice Command Center',
  '/dashboard': 'Executive Overview — Churchill AI Command Center',
  '/calls': 'Live Call Logs & Transcripts — Churchill AI',
  '/appointments': 'Calendar & Appointments — Churchill AI',
  '/simulator': 'Interactive Voice Agent Simulator — Churchill AI',
  '/crm': 'Integrations & CRM Hub — Churchill AI',
  '/knowledge-base': 'Hybrid Vector RAG Knowledge Base — Churchill AI',
  '/company-registration': 'AI Agent Builder & Onboarding — Churchill AI',
  '/billing': 'Billing, Team RBAC & GDPR Center — Churchill AI',
};

function RouteSeoManager() {
  const location = useLocation();

  useEffect(() => {
    const title =
      ROUTE_TITLES[location.pathname] || 'Churchill AI — Enterprise Voice Command Center';
    document.title = title;
  }, [location.pathname]);

  return null;
}

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuthStore();
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return <>{children}</>;
}

function App() {
  return (
    <Router>
      <RouteSeoManager />
      <Routes>
        <Route path="/login" element={<Login />} />
        
        <Route path="/" element={
          <ProtectedRoute>
            <Layout />
          </ProtectedRoute>
        }>
          <Route index element={<Navigate to="/dashboard" replace />} />
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="calls" element={<CallLogs />} />
          <Route path="appointments" element={<Appointments />} />
          <Route path="simulator" element={<VoiceSimulator />} />
          <Route path="crm" element={<CrmSettings />} />
          <Route path="knowledge-base" element={<KnowledgeBase />} />
          <Route path="company-registration" element={<CompanyRegistration />} />
          <Route path="billing" element={<Billing />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;