import { Routes, Route, useNavigate, Navigate } from "react-router-dom";
import { AppShell } from "./components/AppShell";
import { AuthProvider, useAuth } from "./context/AuthContext";
import HomePage from "./pages/HomePage";
import LoginPage from "./pages/LoginPage";
import Dashboard from "./pages/Dashboard";
import CaseDetailPage from "./pages/CaseDetail";
import PipelineCaseDetail from "./pages/PipelineCaseDetail";
import ShellEditorPage from "./pages/ShellEditorPage";

// Admin pages
import AdminDashboard from "./pages/admin/AdminDashboard";
import AdminUsers from "./pages/admin/AdminUsers";
import AdminCases from "./pages/admin/AdminCases";
import AdminActivity from "./pages/admin/AdminActivity";

// Import pipeline styles
import "./components/pipeline/pipeline.css";

// Protected route wrapper - redirects to login if not authenticated
function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, isLoading } = useAuth();
  
  if (isLoading) {
    return (
      <div className="bf-loading-screen">
        <div className="bf-loading-spinner"></div>
        <p>Loading...</p>
      </div>
    );
  }
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return <>{children}</>;
}

// Admin route wrapper - requires admin role
function AdminRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, isAdmin, isLoading } = useAuth();
  
  if (isLoading) {
    return (
      <div className="bf-loading-screen">
        <div className="bf-loading-spinner"></div>
        <p>Loading...</p>
      </div>
    );
  }
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  if (!isAdmin) {
    return <Navigate to="/cases" replace />;
  }
  
  return <>{children}</>;
}

function AppRoutes() {
  return (
    <Routes>
      {/* Public routes */}
      <Route path="/" element={<HomePage />} />
      <Route path="/login" element={<LoginPage />} />
      
      {/* Protected routes - wrapped in AppShell */}
      <Route
        path="/cases"
        element={
          <ProtectedRoute>
            <AppShell>
              <DashboardWrapper />
            </AppShell>
          </ProtectedRoute>
        }
      />
      <Route
        path="/cases/:caseId"
        element={
          <ProtectedRoute>
            <AppShell>
              <PipelineCaseDetail />
            </AppShell>
          </ProtectedRoute>
        }
      />
      <Route
        path="/cases-legacy/:caseId"
        element={
          <ProtectedRoute>
            <AppShell>
              <CaseDetailPage />
            </AppShell>
          </ProtectedRoute>
        }
      />
      <Route
        path="/editor"
        element={
          <ProtectedRoute>
            <AppShell>
              <ShellEditorPage />
            </AppShell>
          </ProtectedRoute>
        }
      />
      
      {/* Admin routes */}
      <Route
        path="/admin"
        element={
          <AdminRoute>
            <AppShell>
              <AdminDashboard />
            </AppShell>
          </AdminRoute>
        }
      />
      <Route
        path="/admin/users"
        element={
          <AdminRoute>
            <AppShell>
              <AdminUsers />
            </AppShell>
          </AdminRoute>
        }
      />
      <Route
        path="/admin/cases"
        element={
          <AdminRoute>
            <AppShell>
              <AdminCases />
            </AppShell>
          </AdminRoute>
        }
      />
      <Route
        path="/admin/activity"
        element={
          <AdminRoute>
            <AppShell>
              <AdminActivity />
            </AppShell>
          </AdminRoute>
        }
      />
      
      {/* Legacy redirects */}
      <Route path="/dashboard" element={<Navigate to="/cases" replace />} />
      
      {/* Catch-all redirect */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <AppRoutes />
    </AuthProvider>
  );
}

function DashboardWrapper() {
  const nav = useNavigate();
  return <Dashboard onView={(id: string) => nav(`/cases/${encodeURIComponent(id)}`)} />;
}
