kino-app/frontend/src/App.js

import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
import { Toaster } from "sonner";
import { AuthProvider, useAuth } from "./lib/auth";
import { ProfileProvider, useProfile } from "./lib/profile";
import ProtectedRoute from "./components/ProtectedRoute";
import Navbar from "./components/Navbar";
import GrainOverlay from "./components/GrainOverlay";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Browse from "./pages/Browse";
import MyList from "./pages/MyList";
import Search from "./pages/Search";
import Player from "./pages/Player";
import Requests from "./pages/Requests";
import Admin from "./pages/Admin";
import AdminUpload from "./pages/AdminUpload";
import Settings from "./pages/Settings";
import RadarrImport from "./pages/RadarrImport";
import ProfileSelect from "./pages/ProfileSelect";
import TranscodeQueue from "./pages/TranscodeQueue";

const ProfileGate = ({ children }) => {
  const { user, loading: authLoading } = useAuth();
  const { active, loading: profLoading } = useProfile();
  const loc = useLocation();
  if (authLoading || profLoading) {
    return <div className="min-h-screen flex items-center justify-center bg-[#050505] text-[#8A8A8A]">Loading…</div>;
  }
  if (!user) return <Navigate to="/login" state={{ from: loc.pathname }} replace />;
  if (!active) return <Navigate to="/profile" replace />;
  return children;
};

const AdminGate = ({ children }) => {
  const { user, loading } = useAuth();
  if (loading) return <div className="min-h-screen flex items-center justify-center bg-[#050505] text-[#8A8A8A]">Loading…</div>;
  if (!user) return <Navigate to="/login" replace />;
  if (!user.is_admin) return <Navigate to="/browse" replace />;
  return children;
};

const Shell = ({ children }) => {
  const { user } = useAuth();
  const { active } = useProfile();
  const loc = useLocation();
  const hideChrome = loc.pathname.startsWith("/watch") || loc.pathname === "/login" || loc.pathname === "/register" || loc.pathname === "/profile";
  return (
    <>
      {!hideChrome && user && active && <Navbar />}
      {children}
      <GrainOverlay />
    </>
  );
};

const RootRedirect = () => {
  const { user, loading } = useAuth();
  const { active, loading: pl } = useProfile();
  if (loading || pl) return <div className="min-h-screen flex items-center justify-center bg-[#050505] text-[#8A8A8A]">Loading…</div>;
  if (!user) return <Navigate to="/login" replace />;
  if (!active) return <Navigate to="/profile" replace />;
  return <Navigate to="/browse" replace />;
};

function App() {
  return (
    <div className="App min-h-screen bg-[#050505]">
      <BrowserRouter>
        <AuthProvider>
          <ProfileProvider>
            <Shell>
              <Routes>
                <Route path="/" element={<RootRedirect />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="/profile" element={<ProtectedRoute><ProfileSelect /></ProtectedRoute>} />
                <Route path="/browse" element={<ProfileGate><Browse /></ProfileGate>} />
                <Route path="/my-list" element={<ProfileGate><MyList /></ProfileGate>} />
                <Route path="/search" element={<ProfileGate><Search /></ProfileGate>} />
                <Route path="/watch/:id" element={<ProfileGate><Player /></ProfileGate>} />
                <Route path="/requests" element={<ProfileGate><Requests /></ProfileGate>} />
                <Route path="/admin" element={<AdminGate><Admin /></AdminGate>} />
                <Route path="/admin/upload" element={<AdminGate><AdminUpload /></AdminGate>} />
                <Route path="/admin/settings" element={<AdminGate><Settings /></AdminGate>} />
                <Route path="/admin/radarr" element={<AdminGate><RadarrImport /></AdminGate>} />
                <Route path="/admin/queue" element={<AdminGate><TranscodeQueue /></AdminGate>} />
                <Route path="*" element={<Navigate to="/" replace />} />
              </Routes>
            </Shell>
            <Toaster position="bottom-right" theme="dark" toastOptions={{
              style: { background: "#0F0F0F", border: "1px solid #222", color: "#F2F2F2" },
            }} />
          </ProfileProvider>
        </AuthProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;