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

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

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">
          <div className="flex items-center gap-6">
            <Link to="/" className="text-xl font-semibold tracking-tight">
              fire-planner
            </Link>
            <nav className="flex gap-4 text-sm">
              <NavTab to="/">Dashboard</NavTab>
              <NavTab to="/what-if">What if</NavTab>
            </nav>
          </div>
          <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 />} />
          <Route path="/what-if" element={<WhatIf />} />
        </Routes>
      </main>
    </div>
  );
}

function NavTab({ to, children }: { to: string; children: React.ReactNode }) {
  return (
    <NavLink
      to={to}
      end
      className={({ isActive }) =>
        `${isActive ? 'text-slate-900 font-medium' : 'text-slate-500 hover:text-slate-800'}`
      }
    >
      {children}
    </NavLink>
  );
}