'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 { PeriodsManager } from './_components/PeriodsManager'
import { CurriculumManager } from './_components/CurriculumManager'
import { AssignmentsManager } from './_components/AssignmentsManager'
import { RegelnHub } from './_components/regeln/RegelnHub'
import { PlanHub } from './_components/plan/PlanHub'
import { HelpPanel } from './_components/HelpPanel'
import { setStundenplanToken, getStundenplanToken } from '@/lib/stundenplan/api'

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

const TABS: { id: Tab; label: string }[] = [
  { id: 'plan', label: 'Plan' },
  { 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>('plan')
  const [token, setToken] = useState(getStundenplanToken())
  const [tokenSaved, setTokenSaved] = useState(false)

  const handleSaveToken = () => {
    setStundenplanToken(token)
    setTokenSaved(true)
    setTimeout(() => setTokenSaved(false), 2500)
  }

  return (
    <div className={`min-h-screen flex relative overflow-hidden ${
      isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      {/* Background blobs — same effect as /korrektur to keep the visual
          language consistent across studio-v2 pages. */}
      <div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'}`} />
      <div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'}`} />
      <div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'}`} />

      <div className="relative z-10 p-4"><Sidebar selectedTab="stundenplan" /></div>

      <main className="flex-1 relative z-10 p-6 overflow-y-auto">
        <div className="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, Regeln und Plan-Generierung fuer den Schul-Stundenplan
              </p>
            </div>
            <div className="flex items-center gap-3">
              <ThemeToggle />
              <LanguageDropdown />
            </div>
          </header>

          <HelpPanel />

          <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">
                Anmeldung noch nicht integriert — Dev-Token setzen
              </summary>
              <div className="mt-3 space-y-2 text-sm">
                <p>
                  Bis die volle BreakPilot-Anmeldung an dieses Modul angebunden ist, muss
                  ein gueltiger JWT-Token manuell hinterlegt werden. Ohne Token antwortet
                  die API mit <code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-amber-100'}`}>Authorization header required</code>.
                </p>
                <ol className="list-decimal list-inside space-y-1 opacity-90">
                  <li>An BreakPilot anmelden (z.B. ueber das Lehrer-Login)</li>
                  <li>Im Browser DevTools → Application/Storage → Cookies oder localStorage den
                      JWT-Token kopieren (Feldname kann je nach Login-Flow variieren)</li>
                  <li>Token unten einfuegen, Speichern, Seite neu laden</li>
                </ol>
                <div className="mt-2 flex gap-2">
                  <input
                    type="password"
                    value={token}
                    onChange={e => setToken(e.target.value)}
                    placeholder="Bearer-Token (ohne 'Bearer '-Prefix)"
                    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>
                {tokenSaved && (
                  <p className={`text-xs ${isDark ? 'text-emerald-300' : 'text-emerald-700'}`}>
                    Token gespeichert. Seite neu laden, um die Aenderung zu uebernehmen.
                  </p>
                )}
              </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 shadow-lg'
                      : 'bg-indigo-600 text-white shadow-lg'
                    : isDark
                      ? 'bg-white/5 text-white/70 hover:bg-white/15'
                      : 'bg-white/70 text-slate-700 hover:bg-white border border-slate-200'
                }`}
              >
                {t.label}
              </button>
            ))}
          </nav>

          <section>
            {tab === 'plan' && <PlanHub />}
            {tab === 'klassen' && <KlassenManager />}
            {tab === 'lehrer' && <LehrerManager />}
            {tab === 'faecher' && <FaecherManager />}
            {tab === 'raeume' && <RaeumeManager />}
            {tab === 'periods' && <PeriodsManager />}
            {tab === 'curriculum' && <CurriculumManager />}
            {tab === 'assignments' && <AssignmentsManager />}
            {tab === 'regeln' && <RegelnHub />}
          </section>
        </div>
      </main>
    </div>
  )
}