import { BrowserRouter, Routes, Route, Navigate, Link, useLocation, useParams } from 'react-router-dom';
import VideosPage from './pages/VideosPage.jsx';
import VideoEditorPage from './pages/VideoEditorPage.jsx';
import AssetsPage from './pages/AssetsPage.jsx';
import ErrorBoundary from './components/ErrorBoundary.jsx';

function VideoDetailRedirect() {
  const { id } = useParams();
  return <Navigate to={`/videos/${id}/edit`} replace />;
}

function Nav() {
  const { pathname } = useLocation();

  return (
    <nav className="nav">
      <Link to="/" className="nav-logo">GNOMMO EDITOR</Link>
      <div className="nav-spacer" />
      <Link to="/" className={`nav-link${pathname === '/' ? ' active' : ''}`}>VIDEOS</Link>
      <Link to="/assets" className={`nav-link${pathname.startsWith('/assets') ? ' active' : ''}`}>ASSETS</Link>
    </nav>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<VideosPage />} />
        <Route path="/videos/:id" element={<VideoDetailRedirect />} />
        <Route path="/videos/:id/edit" element={
          <ErrorBoundary label="video editor">
            <VideoEditorPage />
          </ErrorBoundary>
        } />
        <Route path="/assets" element={
          <ErrorBoundary label="assets page">
            <AssetsPage />
          </ErrorBoundary>
        } />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}
