import { useState } from 'react'
import { LayoutDashboard, Disc, Settings, LogOut, Sun, Moon } from 'lucide-react'
import { useDarkMode } from './context/ThemeContext'
import Dashboard from './pages/Dashboard'
import MetadataPreview from './pages/MetadataPreview'
import SettingsPage from './pages/Settings'

type Page = 'dashboard' | 'metadata' | 'settings'

function App() {
  const [page, setPage] = useState<Page>('dashboard')
  const { theme, toggleTheme } = useDarkMode()

  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'metadata', label: 'Metadaten', icon: Disc },
    { id: 'settings', label: 'Einstellungen', icon: Settings },
  ]

  return (
    <div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
      <div className="flex h-screen overflow-hidden">
        {/* Sidebar */}
        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
          <div className="p-6">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
                <Disc size={28} className="text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold tracking-tight">Rippy</h1>
                <p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
              </div>
            </div>
          </div>

          <button
            onClick={toggleTheme}
            className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
            title={theme === 'dark' ? 'Light Mode' : 'Light Mode'}
          >
            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
          </button>

          <nav className="flex-1 px-3 py-2 space-y-1">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => setPage(item.id as Page)}
                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
                  page === item.id
                    ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
                }`}
              >
                <item.icon size={20} />
                <span className="font-medium">{item.label}</span>
              </button>
            ))}
          </nav>

          <div className="p-4 border-t border-slate-800 dark:border-slate-700">
            <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-700">
              <LogOut size={20} />
              <span className="text-sm">Abmelden</span>
            </button>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
          <div className="max-w-7xl mx-auto p-6">
            {page === 'dashboard' && <Dashboard />}
            {page === 'metadata' && <MetadataPreview />}
            {page === 'settings' && <SettingsPage />}
          </div>
        </main>
      </div>
    </div>
  )
}

export default App