'use client'

import { useState, useEffect, useCallback } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { classesApi } from '@/lib/stundenplan/api'
import type { TimetableClass, CreateTimetableClass } from '@/app/stundenplan/types'

export function KlassenManager() {
  const { isDark } = useTheme()
  const [classes, setClasses] = useState<TimetableClass[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showForm, setShowForm] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [form, setForm] = useState<CreateTimetableClass>({
    name: '',
    grade_level: 5,
    student_count: 0,
    notes: '',
  })

  const load = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await classesApi.list()
      setClasses(data || [])
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Laden fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { load() }, [load])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)
    try {
      await classesApi.create(form)
      setForm({ name: '', grade_level: 5, student_count: 0, notes: '' })
      setShowForm(false)
      await load()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Anlegen fehlgeschlagen')
    } finally {
      setSubmitting(false)
    }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('Klasse wirklich loeschen?')) return
    try {
      await classesApi.remove(id)
      await load()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Loeschen fehlgeschlagen')
    }
  }

  const cardClass = isDark
    ? 'bg-white/10 border-white/20 text-white'
    : 'bg-white/80 border-black/10 text-slate-900'
  const inputClass = isDark
    ? 'bg-white/10 border-white/20 text-white placeholder-white/40'
    : 'bg-white border-slate-300 text-slate-900 placeholder-slate-400'

  return (
    <div className="space-y-4" data-testid="klassen-manager">
      <div className="flex items-center justify-between">
        <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Klassen ({classes.length})
        </h2>
        <button
          onClick={() => setShowForm(s => !s)}
          className={`px-4 py-2 rounded-xl font-medium transition-colors ${
            isDark
              ? 'bg-indigo-500 hover:bg-indigo-600 text-white'
              : 'bg-indigo-600 hover:bg-indigo-700 text-white'
          }`}
        >
          {showForm ? 'Abbrechen' : '+ Neue Klasse'}
        </button>
      </div>

      {error && (
        <div className="p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">
          {error}
        </div>
      )}

      {showForm && (
        <form
          onSubmit={handleSubmit}
          className={`p-4 rounded-2xl border backdrop-blur-xl ${cardClass}`}
        >
          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div>
              <label className="block text-sm mb-1 opacity-70">Name</label>
              <input
                required
                value={form.name}
                onChange={e => setForm({ ...form, name: e.target.value })}
                placeholder="z.B. 5a"
                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
              />
            </div>
            <div>
              <label className="block text-sm mb-1 opacity-70">Klassenstufe</label>
              <input
                type="number"
                min={1}
                max={13}
                required
                value={form.grade_level}
                onChange={e => setForm({ ...form, grade_level: parseInt(e.target.value) || 0 })}
                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
              />
            </div>
            <div>
              <label className="block text-sm mb-1 opacity-70">Schueleranzahl</label>
              <input
                type="number"
                min={0}
                value={form.student_count}
                onChange={e => setForm({ ...form, student_count: parseInt(e.target.value) || 0 })}
                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
              />
            </div>
            <div className="flex items-end">
              <button
                type="submit"
                disabled={submitting}
                className="w-full px-4 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium disabled:opacity-50"
              >
                {submitting ? 'Speichert...' : 'Anlegen'}
              </button>
            </div>
          </div>
          <div className="mt-3">
            <label className="block text-sm mb-1 opacity-70">Notizen (optional)</label>
            <input
              value={form.notes || ''}
              onChange={e => setForm({ ...form, notes: e.target.value })}
              className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
            />
          </div>
        </form>
      )}

      {loading ? (
        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
          Laedt…
        </div>
      ) : classes.length === 0 ? (
        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
          Noch keine Klassen angelegt.
        </div>
      ) : (
        <div className={`rounded-2xl border backdrop-blur-xl overflow-hidden ${cardClass}`}>
          <table className="w-full">
            <thead className={isDark ? 'bg-white/5' : 'bg-slate-100'}>
              <tr>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Name</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Stufe</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Schueler</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Notizen</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody>
              {classes.map(c => (
                <tr key={c.id} className={isDark ? 'border-t border-white/10' : 'border-t border-slate-200'}>
                  <td className="px-4 py-3 font-medium">{c.name}</td>
                  <td className="px-4 py-3">{c.grade_level}</td>
                  <td className="px-4 py-3">{c.student_count}</td>
                  <td className="px-4 py-3 text-sm opacity-70">{c.notes || '—'}</td>
                  <td className="px-4 py-3 text-right">
                    <button
                      onClick={() => handleDelete(c.id)}
                      className="text-red-400 hover:text-red-300 text-sm"
                    >
                      Loeschen
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}