breakpilot-lehrer/studio-v2/app/stundenplan/page.tsx

'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 text-sm ${
              isDark ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-200' : 'bg-emerald-50 border-emerald-200 text-emerald-900'
            }`}
          >
            <details>
              <summary className="cursor-pointer font-medium">
                Testumgebung — Anmeldung deaktiviert
              </summary>
              <div className="mt-2 space-y-2">
                <p>
                  Der school-service laeuft im Development-Mode und akzeptiert Requests
                  ohne JWT. Alle Aktionen werden einem festen Dev-User
                  zugeordnet (<code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-emerald-100'}`}>00000000-0000-0000-0000-000000000001</code>).
                </p>
                <p>
                  Fuer Production muss <code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-emerald-100'}`}>ENVIRONMENT=production</code> gesetzt werden — dann ist ein gueltiger
                  JWT in jedem Request Pflicht.
                </p>
                <details className="opacity-70">
                  <summary className="cursor-pointer text-xs">Manueller Token (falls noetig)</summary>
                  <div className="mt-2 flex gap-2">
                    <input
                      type="password"
                      value={token}
                      onChange={e => setToken(e.target.value)}
                      placeholder="Bearer-Token (optional)"
                      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-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium"
                    >
                      Speichern
                    </button>
                  </div>
                  {tokenSaved && (
                    <p className="mt-1 text-xs opacity-90">Token gespeichert. Seite neu laden.</p>
                  )}
                </details>
              </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>
  )
}