import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { Video, List, Music, Settings } from 'lucide-react';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import BGMPage from './pages/BGMPage';

function NavLink({ to, icon: Icon, children }) {
  const location = useLocation();
  const isActive = location.pathname === to;

  return (
    <Link
      to={to}
      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
        isActive
          ? 'bg-red-600 text-white'
          : 'text-gray-400 hover:text-white hover:bg-gray-800'
      }`}
    >
      <Icon size={20} />
      <span>{children}</span>
    </Link>
  );
}

function Layout({ children }) {
  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="bg-gray-900 border-b border-gray-800 px-6 py-4">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link to="/" className="flex items-center gap-3">
            <Video className="text-red-500" size={32} />
            <h1 className="text-xl font-bold">Shorts Maker</h1>
          </Link>
          <nav className="flex items-center gap-2">
            <NavLink to="/" icon={Video}>새 작업</NavLink>
            <NavLink to="/jobs" icon={List}>작업 목록</NavLink>
            <NavLink to="/bgm" icon={Music}>BGM 관리</NavLink>
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 px-6 py-8">
        <div className="max-w-7xl mx-auto">
          {children}
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 border-t border-gray-800 px-6 py-4 text-center text-gray-500 text-sm">
        Shorts Maker - 중국 쇼츠 영상 한글 자막 변환기
      </footer>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/jobs" element={<JobsPage />} />
          <Route path="/bgm" element={<BGMPage />} />
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;