import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './hooks/useAuth';
import Navbar from './components/Navbar';

import Home            from './pages/Home';
import Projects        from './pages/Projects';
import ProjectDetail   from './pages/ProjectDetail';
import Shop            from './pages/Shop';
import ProductDetail   from './pages/ProductDetail';
import Login           from './pages/Auth/Login';
import Register        from './pages/Auth/Register';
import Dashboard       from './pages/Dashboard/Index';
import ProjectNew      from './pages/Dashboard/ProjectNew';
import ProjectEdit     from './pages/Dashboard/ProjectEdit';
import MyOrders        from './pages/Dashboard/MyOrders';
import MySales         from './pages/Dashboard/MySales';
import AdminIndex      from './pages/Admin/Index';
import AdminProjects   from './pages/Admin/Projects';
import AdminUsers      from './pages/Admin/Users';
import AdminLogs       from './pages/Admin/Logs';

function RequireAuth({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="spinner" />;
  if (!user) return <Navigate to="/auth/login" replace />;
  return children;
}

function RequireAdmin({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="spinner" />;
  if (!user || user.role !== 'admin') return <Navigate to="/" replace />;
  return children;
}

function AppRoutes() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/"                  element={<Home />} />
        <Route path="/projects"          element={<Projects />} />
        <Route path="/projects/:id"      element={<ProjectDetail />} />
        <Route path="/shop"              element={<Shop />} />
        <Route path="/shop/:id"          element={<ProductDetail />} />
        <Route path="/auth/login"        element={<Login />} />
        <Route path="/auth/register"     element={<Register />} />

        <Route path="/dashboard" element={<RequireAuth><Dashboard /></RequireAuth>} />
        <Route path="/dashboard/projects/new"  element={<RequireAuth><ProjectNew /></RequireAuth>} />
        <Route path="/dashboard/projects/:id"  element={<RequireAuth><ProjectEdit /></RequireAuth>} />
        <Route path="/dashboard/orders"        element={<RequireAuth><MyOrders /></RequireAuth>} />
        <Route path="/dashboard/sales"         element={<RequireAuth><MySales /></RequireAuth>} />

        <Route path="/admin"          element={<RequireAdmin><AdminIndex /></RequireAdmin>} />
        <Route path="/admin/projects" element={<RequireAdmin><AdminProjects /></RequireAdmin>} />
        <Route path="/admin/users"    element={<RequireAdmin><AdminUsers /></RequireAdmin>} />
        <Route path="/admin/logs"     element={<RequireAdmin><AdminLogs /></RequireAdmin>} />

        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </>
  );
}

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