import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
import Layout from '@/components/Layout';
import Extensions from '@/pages/Extensions';
import Faq from '@/pages/Faq';
import Dictation from '@/pages/Dictation';
import Encounter from '@/pages/Encounter';
import Soap from '@/pages/Soap';
import SickVisit from '@/pages/SickVisit';
import HospitalCourse from '@/pages/HospitalCourse';
import ChartReview from '@/pages/ChartReview';
import WellVisit from '@/pages/WellVisit';
import VaxSchedule from '@/pages/VaxSchedule';
import Catchup from '@/pages/Catchup';
import Settings from '@/pages/Settings';

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
});

function Home() {
  return (
    <div className="max-w-3xl mx-auto p-6 space-y-4">
      <h1 className="text-2xl font-semibold">Pediatric AI Scribe — React client</h1>
      <p className="text-sm text-muted-foreground">
        This is the new React tree. The legacy vanilla-JS app still lives at{' '}
        <a href="/" className="underline">/</a>.
      </p>
      <p className="text-sm text-muted-foreground">Ported tabs so far:</p>
      <ul className="list-disc pl-6 text-sm space-y-1">
        <li><Link to="/encounter" className="underline">Encounter HPI</Link></li>
        <li><Link to="/dictation" className="underline">Dictation HPI</Link></li>
        <li><Link to="/soap" className="underline">SOAP Note</Link></li>
        <li><Link to="/sickvisit" className="underline">Sick Visit</Link></li>
        <li><Link to="/extensions" className="underline">Extensions & Pagers</Link></li>
        <li><Link to="/faq" className="underline">FAQ</Link></li>
      </ul>
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter basename="/app">
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/encounter" element={<Encounter />} />
            <Route path="/dictation" element={<Dictation />} />
            <Route path="/soap" element={<Soap />} />
            <Route path="/sickvisit" element={<SickVisit />} />
            <Route path="/hospital" element={<HospitalCourse />} />
            <Route path="/chart" element={<ChartReview />} />
            <Route path="/wellvisit" element={<WellVisit />} />
            <Route path="/vaxschedule" element={<VaxSchedule />} />
            <Route path="/catchup" element={<Catchup />} />
            <Route path="/extensions" element={<Extensions />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/faq" element={<Faq />} />
            {/* catch-all falls back to home while more tabs port over */}
            <Route path="*" element={<Navigate to="/" replace />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}