import * as React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider } from '@/lib/auth';
import { RequireAuth } from '@/components/RequireAuth';
import { AppShell } from '@/components/layout/AppShell';
import Login from '@/pages/Login';
import Agents from '@/pages/Agents';
import AgentDetail from '@/pages/AgentDetail';
import Credentials from '@/pages/Credentials';
import AuditLog from '@/pages/AuditLog';
import Health from '@/pages/Health';
import { UsagePanel } from '@/components/UsagePanel';

/** Top-level router — defines all application routes. */
export default function App(): React.JSX.Element {
  return (
    <AuthProvider>
      <Routes>
        <Route path="/dashboard/login" element={<Login />} />
        <Route element={<RequireAuth />}>
          <Route element={<AppShell />}>
            <Route path="/dashboard/agents" element={<Agents />} />
            <Route path="/dashboard/agents/:agentId" element={<AgentDetail />} />
            <Route path="/dashboard/agents/:agentId/credentials" element={<Credentials />} />
            <Route path="/dashboard/audit" element={<AuditLog />} />
            <Route path="/dashboard/health" element={<Health />} />
            <Route path="/dashboard/usage" element={<UsagePanel />} />
          </Route>
        </Route>
        <Route path="/dashboard" element={<Navigate to="/dashboard/agents" replace />} />
        <Route path="*" element={<Navigate to="/dashboard/agents" replace />} />
      </Routes>
    </AuthProvider>
  );
}