import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import { Home, PawPrint, Activity, Heart, FlaskConical, Settings, ExternalLink } 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 './App.css'

function NavLink({ to, icon: Icon, label }) {
  const location = useLocation()
  const isActive = location.pathname === to
  return (
    <Link to={to} className={`nav-link${isActive ? ' active' : ''}`}>
      <Icon size={20} />
      <span>{label}</span>
    </Link>
  )
}

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

  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" />
            <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 />} />
        </Routes>
      </main>
    </div>
  )
}

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

export default App