'use client'

import { useState, useEffect, useCallback } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { teacherUnavailableDayApi, teachersApi } from '@/lib/stundenplan/api'
import type { TeacherUnavailableDay, TimetableTeacher } from '@/app/stundenplan/types'

const DAYS = [
  { v: 1, label: 'Montag' },
  { v: 2, label: 'Dienstag' },
  { v: 3, label: 'Mittwoch' },
  { v: 4, label: 'Donnerstag' },
  { v: 5, label: 'Freitag' },
  { v: 6, label: 'Samstag' },
  { v: 7, label: 'Sonntag' },
]

type FormState = Omit<TeacherUnavailableDay, 'id' | 'created_by_user_id' | 'created_at'>

const initialForm: FormState = {
  teacher_id: '',
  day_of_week: 1,
  is_hard: true,
  weight: 100,
  active: true,
  note: '',
}

export function TeacherUnavailableDayEditor() {
  const { isDark } = useTheme()
  const [items, setItems] = useState<TeacherUnavailableDay[]>([])
  const [teachers, setTeachers] = useState<TimetableTeacher[]>([])
  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<FormState>(initialForm)

  const load = useCallback(async () => {
    setLoading(true); setError(null)
    try {
      const [rules, t] = await Promise.all([teacherUnavailableDayApi.list(), teachersApi.list()])
      setItems(rules || [])
      setTeachers(t || [])
    } 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 teacherUnavailableDayApi.create(form)
      setForm(initialForm)
      setShowForm(false)
      await load()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Anlegen fehlgeschlagen')
    } finally { setSubmitting(false) }
  }

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

  const teacherLabel = (id: string): string => {
    const t = teachers.find(x => x.id === id)
    return t ? `${t.last_name}, ${t.first_name} (${t.short_code})` : id.slice(0, 8) + '…'
  }

  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' : 'bg-white border-slate-300 text-slate-900'

  return (
    <div className="space-y-4" data-testid="teacher-unavailable-day-editor">
      <div className="flex items-center justify-between">
        <div>
          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Lehrer: Tag nicht verfuegbar
          </h3>
          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            Beispiel: „Lehrer X kann Montags nie".
          </p>
        </div>
        <button
          onClick={() => setShowForm(s => !s)}
          disabled={teachers.length === 0}
          className={`px-4 py-2 rounded-xl font-medium transition-colors disabled:opacity-50 ${isDark ? 'bg-indigo-500 hover:bg-indigo-600 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'}`}
        >
          {showForm ? 'Abbrechen' : '+ Neue Regel'}
        </button>
      </div>

      {teachers.length === 0 && !loading && (
        <div className={`p-3 rounded-xl text-sm ${isDark ? 'bg-amber-500/10 border border-amber-500/30 text-amber-200' : 'bg-amber-50 border border-amber-200 text-amber-900'}`}>
          Zuerst Lehrer anlegen, dann koennen Regeln vergeben werden.
        </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-3 gap-3">
            <div>
              <label className="block text-sm mb-1 opacity-70">Lehrer</label>
              <select required value={form.teacher_id} onChange={e => setForm({ ...form, teacher_id: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}>
                <option value="">— bitte waehlen —</option>
                {teachers.map(t => <option key={t.id} value={t.id}>{t.last_name}, {t.first_name}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm mb-1 opacity-70">Wochentag</label>
              <select value={form.day_of_week} onChange={e => setForm({ ...form, day_of_week: parseInt(e.target.value) })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}>
                {DAYS.map(d => <option key={d.v} value={d.v}>{d.label}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm mb-1 opacity-70">Gewichtung (0-100)</label>
              <input type="number" min={0} max={100} value={form.weight} onChange={e => setForm({ ...form, weight: parseInt(e.target.value) || 0 })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
            </div>
            <div className="flex items-center gap-2">
              <input type="checkbox" id="is_hard" checked={form.is_hard} onChange={e => setForm({ ...form, is_hard: e.target.checked })} className="w-5 h-5" />
              <label htmlFor="is_hard" className="text-sm">Harte Regel (muss eingehalten werden)</label>
            </div>
            <div className="flex items-center gap-2">
              <input type="checkbox" id="active" checked={form.active} onChange={e => setForm({ ...form, active: e.target.checked })} className="w-5 h-5" />
              <label htmlFor="active" className="text-sm">Aktiv</label>
            </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">Begruendung (optional)</label>
            <input value={form.note || ''} onChange={e => setForm({ ...form, note: e.target.value })} placeholder="z.B. Zweitjob in Praxis" 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>
      ) : items.length === 0 ? (
        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Keine Regeln vorhanden.</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">Lehrer</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Tag</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Hart</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Weight</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Aktiv</th>
                <th className="text-left px-4 py-3 text-sm font-medium opacity-70">Notiz</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody>
              {items.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">{teacherLabel(c.teacher_id)}</td>
                  <td className="px-4 py-3">{DAYS.find(d => d.v === c.day_of_week)?.label || c.day_of_week}</td>
                  <td className="px-4 py-3">{c.is_hard ? '✓' : '—'}</td>
                  <td className="px-4 py-3">{c.weight}</td>
                  <td className="px-4 py-3">{c.active ? '✓' : '—'}</td>
                  <td className="px-4 py-3 text-sm opacity-70">{c.note || '—'}</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>
  )
}