import { Routes, Route, NavLink } from 'react-router-dom'
import Home from './pages/Home.jsx'
import Solver from './pages/Solver.jsx'
import EnginePage from './pages/EnginePage.jsx'
import RocketPage from './pages/RocketPage.jsx'
import KnowledgebaseFuelsPage from './pages/KnowledgebaseFuelsPage.jsx'
import KnowledgebaseEquationsPage from './pages/KnowledgebaseEquationsPage.jsx'
import KnowledgebaseAblativesPage from './pages/KnowledgebaseAblativesPage.jsx'

export default function App() {
  return (
    <div className="h-screen flex flex-col bg-slate-950 text-slate-100 overflow-hidden">
      <header className="flex items-center gap-4 px-5 py-3 border-b border-slate-700 bg-slate-900 shrink-0">
        <span className="text-2xl">🚀</span>
        <span className="text-lg font-bold text-white">RocketTools</span>
        <nav className="flex items-center gap-1 ml-6">
          <NavLink
            to="/"
            end
            className={({ isActive }) =>
              `px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                isActive
                  ? 'bg-slate-700 text-white'
                  : 'text-slate-400 hover:text-white hover:bg-slate-800'
              }`
            }
          >
            Home
          </NavLink>
          <NavLink
            to="/solver"
            className={({ isActive }) =>
              `px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                isActive
                  ? 'bg-slate-700 text-white'
                  : 'text-slate-400 hover:text-white hover:bg-slate-800'
              }`
            }
          >
            Solver
          </NavLink>

          {/* Design dropdown — CSS-only hover */}
          <div className="relative group">
            <button className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors text-slate-400 hover:text-white hover:bg-slate-800 group-hover:text-white group-hover:bg-slate-800">
              Design ▾
            </button>
            <div className="absolute hidden group-hover:block top-full left-0 mt-0.5 bg-slate-800 border border-slate-700 rounded-md shadow-lg z-50 min-w-[120px]">
              <NavLink
                to="/design/engine"
                className={({ isActive }) =>
                  `block px-4 py-2 text-sm transition-colors ${
                    isActive
                      ? 'bg-slate-700 text-white'
                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
                  }`
                }
              >
                Engine
              </NavLink>
              <NavLink
                to="/design/rocket"
                className={({ isActive }) =>
                  `block px-4 py-2 text-sm transition-colors ${
                    isActive
                      ? 'bg-slate-700 text-white'
                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
                  }`
                }
              >
                Rocket
              </NavLink>
            </div>
          </div>

          {/* Knowledgebase dropdown — CSS-only hover */}
          <div className="relative group">
            <button className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors text-slate-400 hover:text-white hover:bg-slate-800 group-hover:text-white group-hover:bg-slate-800">
              Knowledgebase ▾
            </button>
            <div className="absolute hidden group-hover:block top-full left-0 mt-0.5 bg-slate-800 border border-slate-700 rounded-md shadow-lg z-50 min-w-[160px]">
              <NavLink
                to="/knowledgebase/fuels"
                className={({ isActive }) =>
                  `block px-4 py-2 text-sm transition-colors ${
                    isActive
                      ? 'bg-slate-700 text-white'
                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
                  }`
                }
              >
                Fuels / Oxidisers
              </NavLink>
              <NavLink
                to="/knowledgebase/ablatives"
                className={({ isActive }) =>
                  `block px-4 py-2 text-sm transition-colors ${
                    isActive
                      ? 'bg-slate-700 text-white'
                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
                  }`
                }
              >
                Ablative Materials
              </NavLink>
              <NavLink
                to="/knowledgebase/equations"
                className={({ isActive }) =>
                  `block px-4 py-2 text-sm transition-colors ${
                    isActive
                      ? 'bg-slate-700 text-white'
                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
                  }`
                }
              >
                Equations
              </NavLink>
            </div>
          </div>
        </nav>
      </header>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/solver" element={<Solver />} />
        <Route path="/design/engine" element={<EnginePage />} />
        <Route path="/design/rocket" element={<RocketPage />} />
        <Route path="/knowledgebase/fuels" element={<KnowledgebaseFuelsPage />} />
        <Route path="/knowledgebase/equations" element={<KnowledgebaseEquationsPage />} />
        <Route path="/knowledgebase/ablatives" element={<KnowledgebaseAblativesPage />} />
      </Routes>
    </div>
  )
}