'use client'

import { useState } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { Sidebar } from '@/components/Sidebar'
import { ThemeToggle } from '@/components/ThemeToggle'
import { LanguageDropdown } from '@/components/LanguageDropdown'
import { KlassenManager } from './_components/KlassenManager'
import { LehrerManager } from './_components/LehrerManager'
import { FaecherManager } from './_components/FaecherManager'
import { RaeumeManager } from './_components/RaeumeManager'
import { TeacherUnavailableDayEditor } from './_components/regeln/TeacherUnavailableDayEditor'
import { setStundenplanToken, getStundenplanToken } from '@/lib/stundenplan/api'

type Tab = 'klassen' | 'lehrer' | 'faecher' | 'raeume' | 'periods' | 'curriculum' | 'assignments' | 'regeln'

const TABS: { id: Tab; label: string }[] = [
  { id: 'klassen', label: 'Klassen' },
  { id: 'lehrer', label: 'Lehrer' },
  { id: 'faecher', label: 'Faecher' },
  { id: 'raeume', label: 'Raeume' },
  { id: 'periods', label: 'Zeitraster' },
  { id: 'curriculum', label: 'Stundentafel' },
  { id: 'assignments', label: 'Lehrauftraege' },
  { id: 'regeln', label: 'Regeln (Constraints)' },
]

export default function StundenplanPage() {
  const { isDark } = useTheme()
  const [tab, setTab] = useState<Tab>('klassen')
  const [token, setToken] = useState(getStundenplanToken())

  const handleSaveToken = () => {
    setStundenplanToken(token)
    alert('Token gespeichert. Seite neu laden um die Aenderung zu uebernehmen.')
  }

  return (
    <div className={`flex min-h-screen p-4 gap-4 ${isDark ? 'bg-slate-900' : 'bg-slate-50'}`}>
      <Sidebar selectedTab="stundenplan" />

      <main className="flex-1 max-w-7xl mx-auto">
        <header className="flex items-center justify-between mb-6">
          <div>
            <h1 className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
              Stundenplan
            </h1>
            <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
              Stammdaten und Regeln fuer den Solver
            </p>
          </div>
          <div className="flex items-center gap-3">
            <ThemeToggle />
            <LanguageDropdown />
          </div>
        </header>

        <div
          className={`mb-4 p-3 rounded-xl border backdrop-blur-xl ${
            isDark ? 'bg-amber-500/10 border-amber-500/30 text-amber-200' : 'bg-amber-50 border-amber-200 text-amber-900'
          }`}
        >
          <details>
            <summary className="cursor-pointer text-sm font-medium">
              Dev: JWT-Token setzen (Anmeldung noch nicht integriert)
            </summary>
            <div className="mt-2 flex gap-2">
              <input
                type="password"
                value={token}
                onChange={e => setToken(e.target.value)}
                placeholder="Bearer-Token"
                className={`flex-1 px-3 py-1.5 rounded-lg text-sm ${
                  isDark ? 'bg-white/10 border border-white/20 text-white' : 'bg-white border border-slate-300 text-slate-900'
                }`}
              />
              <button
                onClick={handleSaveToken}
                className="px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium"
              >
                Speichern
              </button>
            </div>
          </details>
        </div>

        <nav className="flex flex-wrap gap-2 mb-6">
          {TABS.map(t => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${
                tab === t.id
                  ? isDark
                    ? 'bg-white/20 text-white'
                    : 'bg-indigo-100 text-indigo-900'
                  : isDark
                    ? 'bg-white/5 text-white/70 hover:bg-white/10'
                    : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'
              }`}
            >
              {t.label}
            </button>
          ))}
        </nav>

        <section>
          {tab === 'klassen' && <KlassenManager />}
          {tab === 'lehrer' && <LehrerManager />}
          {tab === 'faecher' && <FaecherManager />}
          {tab === 'raeume' && <RaeumeManager />}
          {tab === 'regeln' && <TeacherUnavailableDayEditor />}
          {(tab === 'periods' || tab === 'curriculum' || tab === 'assignments') && (
            <div
              className={`rounded-2xl border backdrop-blur-xl p-8 text-center ${
                isDark ? 'bg-white/5 border-white/10 text-white/60' : 'bg-white/80 border-black/10 text-slate-500'
              }`}
              data-testid="not-implemented"
            >
              <p className="text-lg">Noch nicht implementiert: {TABS.find(t => t.id === tab)?.label}</p>
              <p className="text-sm mt-2">
                Folgt dem gleichen Muster wie Klassen / Lehrer / Faecher / Raeume.
              </p>
            </div>
          )}
        </section>
      </main>
    </div>
  )
}