import { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AmbientBackground } from './components/AmbientBackground';
import { Toast } from './components/Toast';
import { VideoGenerationPage } from './components/VideoGenerationPage';
import { ProtectedRoute } from './components/ProtectedRoute';
import { LandingPage } from './pages/LandingPage';

import { AdminLayout } from './pages/AdminLayout';
import { DashboardPage } from './pages/DashboardPage';
import { TeamsPage } from './pages/TeamsPage';
import { UsersPage } from './pages/UsersPage';
import { RecordsPage } from './pages/RecordsPage';
import { SettingsPage } from './pages/SettingsPage';
import { AuditLogsPage } from './pages/AuditLogsPage';
import { ProfilePage } from './pages/ProfilePage';
import { AssetsPage } from './pages/AssetsPage';

import { TeamAdminLayout } from './pages/TeamAdminLayout';
import { TeamDashboardPage } from './pages/TeamDashboardPage';
import { TeamMembersPage } from './pages/TeamMembersPage';
import { AdminAssetsPage } from './pages/AdminAssetsPage';
import { TeamAssetsPage } from './pages/TeamAssetsPage';

import { useAuthStore } from './store/auth';

export default function App() {
  const initialize = useAuthStore((s) => s.initialize);

  useEffect(() => {
    initialize();
  }, [initialize]);

  return (
    <BrowserRouter>
      <AmbientBackground />
      <Toast />
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LandingPage autoLogin />} />
        <Route
          path="/app"
          element={
            <ProtectedRoute requireTeamMember>
              <VideoGenerationPage />
            </ProtectedRoute>
          }
        />
        <Route
          path="/assets"
          element={
            <ProtectedRoute requireTeamMember>
              <AssetsPage />
            </ProtectedRoute>
          }
        />
        <Route
          path="/profile"
          element={
            <ProtectedRoute requireTeamMember>
              <ProfilePage />
            </ProtectedRoute>
          }
        />
        {/* Super Admin routes */}
        <Route
          path="/admin"
          element={
            <ProtectedRoute requireAdmin>
              <AdminLayout />
            </ProtectedRoute>
          }
        >
          <Route index element={<Navigate to="/admin/dashboard" replace />} />
          <Route path="dashboard" element={<DashboardPage />} />
          <Route path="teams" element={<TeamsPage />} />
          <Route path="users" element={<UsersPage />} />
          <Route path="records" element={<RecordsPage />} />
          <Route path="settings" element={<SettingsPage />} />
          <Route path="logs" element={<AuditLogsPage />} />
          <Route path="assets" element={<AdminAssetsPage />} />
        </Route>
        {/* Team Admin routes */}
        <Route
          path="/team"
          element={
            <ProtectedRoute requireTeamAdmin>
              <TeamAdminLayout />
            </ProtectedRoute>
          }
        >
          <Route index element={<Navigate to="/team/dashboard" replace />} />
          <Route path="dashboard" element={<TeamDashboardPage />} />
          <Route path="members" element={<TeamMembersPage />} />
          <Route path="assets" element={<TeamAssetsPage />} />
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}