import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { useAuth } from './auth';
import Layout from './components/Layout';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Clients from './pages/Clients';
import ClientDetail from './pages/ClientDetail';
import Engagements from './pages/Engagements';
import EngagementDetail from './pages/EngagementDetail';
import Tasks from './pages/Tasks';
import Calendar from './pages/Calendar';
import Email from './pages/Email';
import Projects from './pages/Projects';
import ProjectDetail from './pages/ProjectDetail';
import Time from './pages/Time';
import Invoices from './pages/Invoices';
import InvoiceDetail from './pages/InvoiceDetail';
import Finance from './pages/Finance';
import Racks from './pages/Racks';
import RackDetail from './pages/RackDetail';
import Networking from './pages/Networking';
import Diagrams from './pages/Diagrams';
import Market from './pages/Market';
import Ai from './pages/Ai';
import Notifications from './pages/Notifications';
import Search from './pages/Search';
import Settings from './pages/Settings';
import Placeholder from './pages/Placeholder';

function Spinner() {
  return (
    <div className="h-full flex items-center justify-center">
      <div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
    </div>
  );
}

function RequireAuth({ children }) {
  const { user, loading } = useAuth();
  const location = useLocation();
  if (loading) return <Spinner />;
  if (!user) return <Navigate to="/login" state={{ from: location }} replace />;
  return children;
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/*"
        element={
          <RequireAuth>
            <Layout>
              <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/clients" element={<Clients />} />
                <Route path="/clients/:id" element={<ClientDetail />} />
                <Route path="/engagements" element={<Engagements />} />
                <Route path="/engagements/:id" element={<EngagementDetail />} />
                <Route path="/tasks" element={<Tasks />} />
                <Route path="/calendar" element={<Calendar />} />
                <Route path="/email" element={<Email />} />
                <Route path="/projects" element={<Projects />} />
                <Route path="/projects/:id" element={<ProjectDetail />} />
                <Route path="/time" element={<Time />} />
                <Route path="/invoices" element={<Invoices />} />
                <Route path="/invoices/:id" element={<InvoiceDetail />} />
                <Route path="/finance" element={<Finance />} />
                <Route path="/racks" element={<Racks />} />
                <Route path="/racks/:id" element={<RackDetail />} />
                <Route path="/networking" element={<Networking />} />
                <Route path="/diagrams" element={<Diagrams />} />
                <Route path="/market" element={<Market />} />
                <Route path="/ai" element={<Ai />} />
                <Route path="/notifications" element={<Notifications />} />
                <Route path="/search" element={<Search />} />
                <Route path="/settings" element={<Settings />} />
                <Route path="*" element={<Placeholder />} />
              </Routes>
            </Layout>
          </RequireAuth>
        }
      />
    </Routes>
  );
}
