import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import AuditLogViewer from './components/audit/AuditLogViewer';
import './App.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      gcTime: 10 * 60 * 1000, // 10 minutes
      retry: (failureCount, error: any) => {
        if (error?.status >= 400 && error?.status < 500) {
          return false;
        }
        return failureCount < 3;
      },
    },
  },
});

function App() {
  return (
    <div className="min-h-screen bg-base-200">
      <div className="container mx-auto px-4 py-8">
        <header className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-base-content">
                Control Center
              </h1>
              <p className="text-base-content/60 mt-1">
                Audit Log Viewer & Compliance Management
              </p>
            </div>
            <div className="flex items-center space-x-4">
              <div className="badge badge-primary">
                Cedar Policy Engine
              </div>
              <div className="badge badge-secondary">
                v1.0.0
              </div>
            </div>
          </div>
        </header>

        <Routes>
          <Route path="/" element={<Navigate to="/audit" replace />} />
          <Route path="/audit" element={<AuditLogViewer />} />
          <Route path="/audit/:logId" element={<AuditLogViewer />} />
          <Route path="*" element={<Navigate to="/audit" replace />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;