import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'
import {
  LayoutDashboard,
  Leaf,
  Image,
  Play,
  Download,
  Settings,
} from 'lucide-react'
import { clsx } from 'clsx'

import Dashboard from './pages/Dashboard'
import Species from './pages/Species'
import Images from './pages/Images'
import Jobs from './pages/Jobs'
import Export from './pages/Export'
import SettingsPage from './pages/Settings'

const navItems = [
  { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
  { to: '/species', icon: Leaf, label: 'Species' },
  { to: '/images', icon: Image, label: 'Images' },
  { to: '/jobs', icon: Play, label: 'Jobs' },
  { to: '/export', icon: Download, label: 'Export' },
  { to: '/settings', icon: Settings, label: 'Settings' },
]

function Sidebar() {
  return (
    <aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
      <div className="p-4 border-b border-gray-200">
        <h1 className="text-xl font-bold text-green-600 flex items-center gap-2">
          <Leaf className="w-6 h-6" />
          PlantScraper
        </h1>
      </div>
      <nav className="p-4">
        <ul className="space-y-2">
          {navItems.map((item) => (
            <li key={item.to}>
              <NavLink
                to={item.to}
                className={({ isActive }) =>
                  clsx(
                    'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors',
                    isActive
                      ? 'bg-green-50 text-green-700'
                      : 'text-gray-600 hover:bg-gray-100'
                  )
                }
              >
                <item.icon className="w-5 h-5" />
                {item.label}
              </NavLink>
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  )
}

export default function App() {
  return (
    <BrowserRouter>
      <div className="flex min-h-screen">
        <Sidebar />
        <main className="flex-1 p-8">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/species" element={<Species />} />
            <Route path="/images" element={<Images />} />
            <Route path="/jobs" element={<Jobs />} />
            <Route path="/export" element={<Export />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  )
}