import { useQuery } from '@tanstack/react-query';
import { Route, Routes, Link } from 'react-router-dom';

import { api } from '@/api/client';
import { Dashboard } from '@/pages/Dashboard';

export function App() {
  const health = useQuery({ queryKey: ['health'], queryFn: api.health });

  return (
    <div className="min-h-screen flex flex-col">
      <header className="border-b border-slate-200 bg-white">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <Link to="/" className="text-xl font-semibold tracking-tight">
            fire-planner
          </Link>
          <div className="text-xs text-slate-500">
            api:{' '}
            <span className={health.data ? 'text-emerald-600' : 'text-amber-600'}>
              {health.isLoading
                ? '…'
                : health.data
                  ? `ok (queue=${health.data.queue_depth})`
                  : 'unreachable'}
            </span>
          </div>
        </div>
      </header>
      <main className="flex-1 max-w-7xl w-full mx-auto px-6 py-8">
        <Routes>
          <Route path="/" element={<Dashboard />} />
        </Routes>
      </main>
    </div>
  );
}