import type { ReactNode } from "react";
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { AuthProvider, useAuth } from "./auth/AuthContext";
import { LoadingState } from "./components/Feedback";
import { AdminPage } from "./pages/AdminPage";
import { DisplayPage } from "./pages/DisplayPage";
import { PublicDisplayCenterPage } from "./pages/PublicDisplayCenterPage";
import { LoginPage } from "./pages/LoginPage";
import { HistoryPage } from "./pages/HistoryPage";
import { StaffPage } from "./pages/StaffPage";
import { VisitorPage } from "./pages/VisitorPage";
import { VisitorLookupPage } from "./pages/VisitorLookupPage";
import { VisitorPhonePage } from "./pages/VisitorPhonePage";

function RequireStaff({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth();
  const location = useLocation();
  if (loading) return <main className="route-loading"><LoadingState label="正在确认访问权限" /></main>;
  if (!user) return <Navigate to="/staff/login" replace state={{ from: `${location.pathname}${location.search}` }} />;
  return children;
}

function RequireAdmin({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth();
  if (loading) return <main className="route-loading"><LoadingState label="正在确认管理权限" /></main>;
  if (!user) return <Navigate to="/admin/login" replace />;
  return children;
}

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/staff" replace />} />
        <Route path="/login" element={<Navigate to="/staff/login" replace />} />
        <Route path="/staff/login" element={<AuthProvider portal="staff"><LoginPage portal="staff" /></AuthProvider>} />
        <Route path="/staff" element={<AuthProvider portal="staff"><RequireStaff><StaffPage /></RequireStaff></AuthProvider>} />
        <Route path="/staff/tickets" element={<AuthProvider portal="staff"><RequireStaff><StaffPage /></RequireStaff></AuthProvider>} />
        <Route path="/staff/me" element={<AuthProvider portal="staff"><RequireStaff><StaffPage /></RequireStaff></AuthProvider>} />
          <Route path="/staff/verify" element={<Navigate to="/staff" replace />} />
          <Route path="/visitor" element={<VisitorLookupPage />} />
          <Route path="/visitor/phone" element={<VisitorPhonePage />} />
          <Route path="/visitor/:token" element={<VisitorPage />} />
          <Route path="/display/:token" element={<DisplayPage />} />
          <Route path="/admin/login" element={<AuthProvider portal="admin"><LoginPage portal="admin" /></AuthProvider>} />
          <Route path="/admin" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/history" element={<AuthProvider portal="admin"><RequireAdmin><HistoryPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/projects" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/projects/new" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/projects/:projectId" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/accounts" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/accounts/new" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/accounts/:accountId" element={<AuthProvider portal="admin"><RequireAdmin><AdminPage /></RequireAdmin></AuthProvider>} />
          <Route path="/admin/display" element={<PublicDisplayCenterPage />} />
          <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}