import React, { useEffect, useState } from 'react';
import { Routes, Route, Link, useLocation } from 'react-router-dom';
import { systemApi } from './api/client';
import Dashboard from './pages/Dashboard';
import ExperimentDetail from './pages/ExperimentDetail';
import AnimalDetail from './pages/AnimalDetail';
import DailyStatusDetail from './pages/DailyStatusDetail';

function Navbar() {
  return (
    <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
      <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
        <Link to="/" className="flex items-center gap-2 font-bold text-gray-900 hover:text-blue-700 transition-colors">
          <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
          </svg>
          Animal Experiments DB
        </Link>
        <nav className="text-sm text-gray-500">
          <Link to="/" className="hover:text-blue-600 transition-colors">Dashboard</Link>
        </nav>
      </div>
    </header>
  );
}

function NotFound() {
  return (
    <div className="max-w-5xl mx-auto px-4 py-20 text-center">
      <h1 className="text-4xl font-bold text-gray-300 mb-4">404</h1>
      <p className="text-gray-500 mb-6">Page not found.</p>
      <Link to="/" className="text-blue-600 hover:underline">← Return to Dashboard</Link>
    </div>
  );
}

function Footer() {
  const [dbTimezone, setDbTimezone] = useState(null);
  useEffect(() => {
    systemApi.info().then((d) => setDbTimezone(d.dbTimezone)).catch(() => {});
  }, []);
  return (
    <footer className="border-t border-gray-200 mt-12 py-3">
      <div className="max-w-5xl mx-auto px-4 text-xs text-gray-400 text-right">
        Database timezone: <span className="font-mono">{dbTimezone ?? '…'}</span>
      </div>
    </footer>
  );
}

export default function App() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      <Navbar />
      <main className="flex-1">
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/experiments/:id" element={<ExperimentDetail />} />
          <Route path="/animals/:id" element={<AnimalDetail />} />
          <Route path="/daily-statuses/:id" element={<DailyStatusDetail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      <Footer />
    </div>
  );
}
