import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './lib/queryClient';
import { AuthProvider, useAuth } from './auth/AuthProvider';
import { LandingPage } from './components/landing/LandingPage';
import { DashboardPage } from './components/dashboard/DashboardPage';
import { LaserDivider } from './components/layout/LaserDivider';

function AuthenticatedLayout() {
  return (
    <div className="h-screen w-screen overflow-hidden bg-slate-950 text-slate-100 flex flex-row select-none">
      {/* Fixed-width vertical navigation pane on the left */}
      <aside className="w-64 sm:w-72 md:w-80 shrink-0 h-full relative flex flex-col">
        {/* Navigation placeholder / empty clean pane */}
      </aside>

      {/* Laser beam divider with central light source */}
      <LaserDivider />

      {/* Content pane occupying the rest of the screen */}
      <main className="flex-1 h-full min-w-0 relative flex flex-col overflow-y-auto">
        <DashboardPage />
      </main>
    </div>
  );
}

function AppRoutes() {
  const { isAuthenticated, isLoading, login } = useAuth();

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-950 text-slate-400 text-xs">
        <div className="flex flex-col items-center gap-3">
          <div className="h-6 w-6 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
          <span>Loading session...</span>
        </div>
      </div>
    );
  }

  return (
    <Routes>
      <Route
        path="/"
        element={
          isAuthenticated ? (
            <Navigate to="/dashboard" replace />
          ) : (
            <LandingPage onLogin={login} isLoading={isLoading} />
          )
        }
      />
      <Route
        path="/dashboard"
        element={
          isAuthenticated ? (
            <AuthenticatedLayout />
          ) : (
            <LandingPage onLogin={login} isLoading={isLoading} />
          )
        }
      />
      <Route
        path="*"
        element={<Navigate to={isAuthenticated ? "/dashboard" : "/"} replace />}
      />
    </Routes>
  );
}

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