import { Routes, Route } from 'react-router-dom'
import Layout from '@/components/layout/Layout'
import Dashboard from '@/pages/Dashboard'
import Servers from '@/pages/Servers'
import Containers from '@/pages/Containers'
import Services from '@/pages/Services'
import Logs from '@/pages/Logs'
import Metrics from '@/pages/Metrics'
import Settings from '@/pages/Settings'
import Callback from '@/pages/Callback'
import { useAuth } from '@/hooks/useAuth'

function AuthGuard({ children }: { children: React.ReactNode }) {
  const { authenticated, loading } = useAuth()
  if (loading || !authenticated) {
    return (
      <div
        style={{
          background: 'hsl(222, 84%, 5%)',
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#94a3b8',
          fontFamily: 'system-ui, sans-serif',
          fontSize: '0.9375rem',
        }}
      >
        {loading ? 'Authenticating…' : 'Redirecting to login…'}
      </div>
    )
  }
  return <>{children}</>
}

export default function App() {
  return (
    <Routes>
      {/* Public — OIDC callback, no auth required */}
      <Route path="/callback" element={<Callback />} />

      {/* Protected routes */}
      <Route
        path="/"
        element={
          <AuthGuard>
            <Layout />
          </AuthGuard>
        }
      >
        <Route index element={<Dashboard />} />
        <Route path="servers" element={<Servers />} />
        <Route path="containers" element={<Containers />} />
        <Route path="services" element={<Services />} />
        <Route path="logs" element={<Logs />} />
        <Route path="metrics" element={<Metrics />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  )
}