import { useState, useEffect } from 'react'
import { LayoutDashboard, Disc, Settings, Sun, Moon, Terminal, BookOpen } from 'lucide-react'
import { api } from './lib/api'
import { useDarkMode } from './context/ThemeContext'
import Dashboard from './pages/Dashboard'
import AnleitungPage from './pages/Anleitung'
import SettingsPage from './pages/Settings'
import LogsPage from './pages/Logs'
import FirstRunWizard from './components/FirstRunWizard'

// Metadaten-Seite entfernt (24.07., Abnahme durch den Commander): die
// Korrektur läuft komplett über das „Nicht korrekt?"-Popup am Dashboard.
type Page = 'dashboard' | 'anleitung' | 'settings' | 'logs'

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

  useEffect(() => {
    api.get('/setup')
      .then(r => setSetupDone(!!r.data.done))
      .catch(() => setSetupDone(true)) // API nicht erreichbar → kein Wizard-Zwang
  }, [])

  if (setupDone === false) {
    return <FirstRunWizard onDone={() => setSetupDone(true)} />
  }

  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'anleitung', label: 'Anleitung', icon: BookOpen },
    { id: 'logs', label: 'Logs', icon: Terminal },
    { 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>

          {/* Abmelden-Knopf entfernt (23.07.): es gibt (noch) keinen
              Login-Flow im UI — ein toter Knopf gaukelt nur einen vor. */}

          <footer className="px-4 py-4 text-center text-xs text-slate-500 border-t border-slate-800">
            Created with <span className="text-rose-400">❤️</span> by LucyAI, Claude and KrBrZ
          </footer>
        </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 === 'anleitung' && <AnleitungPage />}
            {page === 'logs' && <LogsPage />}
            {page === 'settings' && <SettingsPage />}
          </div>
        </main>
      </div>
    </div>
  )
}

export default App