import { useEffect } from 'react'
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import { Home, PawPrint, Activity, Heart, FlaskConical, Settings, ExternalLink, SearchX } from 'lucide-react'
import Dashboard from './pages/Dashboard'
import DogList from './pages/DogList'
import DogDetail from './pages/DogDetail'
import PedigreeView from './pages/PedigreeView'
import LitterList from './pages/LitterList'
import LitterDetail from './pages/LitterDetail'
import BreedingCalendar from './pages/BreedingCalendar'
import PairingSimulator from './pages/PairingSimulator'
import SettingsPage from './pages/SettingsPage'
import ExternalDogs from './pages/ExternalDogs'
import { useSettings } from './hooks/useSettings'
import { ToastProvider, useToast } from './components/Toast'
import { ConfirmProvider } from './components/ConfirmDialog'
import './App.css'

// `match` lets a nav item claim extra path prefixes (e.g. Dogs owns /pedigree/:id)
function NavLink({ to, icon: Icon, label, match = [] }) {
  const location = useLocation()
  const prefixes = [to, ...match]
  const isActive = to === '/'
    ? location.pathname === '/'
    : prefixes.some(p => location.pathname === p || location.pathname.startsWith(p + '/'))
  return (
    <Link to={to} className={`nav-link${isActive ? ' active' : ''}`}>
      <Icon size={20} />
      <span>{label}</span>
    </Link>
  )
}

function NotFound() {
  return (
    <div className="container" style={{ textAlign: 'center', padding: '4rem 1rem' }}>
      <SearchX size={48} color="var(--text-muted)" style={{ marginBottom: '1rem' }} />
      <h2 style={{ marginBottom: '0.5rem' }}>Page not found</h2>
      <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>
        That page doesn't exist or may have been moved.
      </p>
      <Link to="/" className="btn btn-primary">Back to Dashboard</Link>
    </div>
  )
}

function AppInner() {
  const { settings, loadError } = useSettings()
  const toast = useToast()
  const kennelName = settings?.kennel_name || 'BREEDR'

  useEffect(() => {
    if (loadError) toast.error('Failed to load kennel settings — using defaults')
  }, [loadError, toast])

  return (
    <div className="app">
      <nav className="navbar">
        <div className="container">
          <div className="nav-brand">
            <img
              src="/static/br-logo.png"
              alt="BREEDR Logo"
              className="brand-logo"
            />
            <span className="brand-text">{kennelName}</span>
          </div>
          <div className="nav-links">
            <NavLink to="/" icon={Home} label="Dashboard" />
            <NavLink to="/dogs" icon={PawPrint} label="Dogs" match={['/pedigree']} />
            <NavLink to="/external" icon={ExternalLink} label="External" />
            <NavLink to="/litters" icon={Activity} label="Litters" />
            <NavLink to="/breeding" icon={Heart} label="Breeding" />
            <NavLink to="/pairing" icon={FlaskConical} label="Pairing" />
            <NavLink to="/settings" icon={Settings} label="Settings" />
          </div>
        </div>
      </nav>

      <main className="main-content">
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/dogs" element={<DogList />} />
          <Route path="/dogs/:id" element={<DogDetail />} />
          <Route path="/external" element={<ExternalDogs />} />
          <Route path="/pedigree/:id" element={<PedigreeView />} />
          <Route path="/litters" element={<LitterList />} />
          <Route path="/litters/:id" element={<LitterDetail />} />
          <Route path="/breeding" element={<BreedingCalendar />} />
          <Route path="/pairing" element={<PairingSimulator />} />
          <Route path="/settings" element={<SettingsPage />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </div>
  )
}

function App() {
  return (
    <Router>
      <ToastProvider>
        <ConfirmProvider>
          <AppInner />
        </ConfirmProvider>
      </ToastProvider>
    </Router>
  )
}

export default App