breakpilot-lehrer/studio-v2/app/schulkalender/_components/EventModal.tsx

'use client'

import { useState } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { calendarApi } from '@/lib/schulkalender/api'
import type { CreateSchoolEvent, SchoolEventType } from '@/app/schulkalender/types'
import { EVENT_TYPE_LABEL } from '@/app/schulkalender/types'

interface EventModalProps {
  defaultDate: string // YYYY-MM-DD
  onClose: () => void
  onCreated: () => void
}

const initial = (date: string): CreateSchoolEvent => ({
  title: '',
  event_type: 'fortbildung',
  is_school_free: false,
  start_date: date,
  end_date: date,
  visible_to_parents: true,
  notify_parents: false,
  notify_students: false,
  notification_lead_days: [7, 1],
})

export function EventModal({ defaultDate, onClose, onCreated }: EventModalProps) {
  const { isDark } = useTheme()
  const [form, setForm] = useState<CreateSchoolEvent>(initial(defaultDate))
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)
    setError(null)
    try {
      await calendarApi.createEvent(form)
      onCreated()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Anlegen fehlgeschlagen')
    } finally {
      setSaving(false)
    }
  }

  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white 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="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="event-modal">
      <form
        onSubmit={handleSubmit}
        className={`w-full max-w-2xl rounded-2xl border p-6 space-y-3 max-h-[90vh] overflow-y-auto ${cardClass}`}
      >
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold">Neuer Termin</h2>
          <button type="button" onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
        </div>

        <div>
          <label className="block text-sm mb-1 opacity-70">Titel</label>
          <input
            required
            value={form.title}
            onChange={e => setForm({ ...form, title: e.target.value })}
            placeholder="z.B. SCHILF: Digitale Tafeln"
            className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
            data-testid="event-title"
          />
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm mb-1 opacity-70">Typ</label>
            <select
              value={form.event_type}
              onChange={e => setForm({ ...form, event_type: e.target.value as SchoolEventType })}
              className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
              data-testid="event-type"
            >
              {(Object.keys(EVENT_TYPE_LABEL) as SchoolEventType[]).map(k => (
                <option key={k} value={k}>{EVENT_TYPE_LABEL[k]}</option>
              ))}
            </select>
          </div>
          <div className="flex items-end gap-2">
            <input
              type="checkbox"
              id="is-school-free"
              checked={form.is_school_free || false}
              onChange={e => setForm({ ...form, is_school_free: e.target.checked })}
              className="w-5 h-5"
            />
            <label htmlFor="is-school-free" className="text-sm">Unterrichtsfrei</label>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm mb-1 opacity-70">Von</label>
            <input type="date" required value={form.start_date} onChange={e => setForm({ ...form, start_date: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
          </div>
          <div>
            <label className="block text-sm mb-1 opacity-70">Bis</label>
            <input type="date" required value={form.end_date} onChange={e => setForm({ ...form, end_date: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
          </div>
          <div>
            <label className="block text-sm mb-1 opacity-70">Startzeit (optional)</label>
            <input type="time" value={form.start_time || ''} onChange={e => setForm({ ...form, start_time: e.target.value || null })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
          </div>
          <div>
            <label className="block text-sm mb-1 opacity-70">Endzeit (optional)</label>
            <input type="time" value={form.end_time || ''} onChange={e => setForm({ ...form, end_time: e.target.value || null })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
          </div>
        </div>

        <div>
          <label className="block text-sm mb-1 opacity-70">Beschreibung (optional)</label>
          <textarea
            value={form.description || ''}
            onChange={e => setForm({ ...form, description: e.target.value })}
            rows={2}
            className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
          />
        </div>

        <div className="space-y-2 pt-2 border-t border-white/10">
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={form.visible_to_parents ?? true}
              onChange={e => setForm({ ...form, visible_to_parents: e.target.checked })}
              className="w-5 h-5"
            />
            Eltern sehen diesen Termin
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={form.notify_parents ?? false}
              onChange={e => setForm({ ...form, notify_parents: e.target.checked })}
              className="w-5 h-5"
            />
            Eltern per Mail/Chat erinnern
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={form.notify_students ?? false}
              onChange={e => setForm({ ...form, notify_students: e.target.checked })}
              className="w-5 h-5"
            />
            Schueler per Chat erinnern
          </label>
        </div>

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

        <div className="flex gap-2 pt-2">
          <button
            type="submit"
            disabled={saving}
            data-testid="event-save"
            className="flex-1 px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium disabled:opacity-50"
          >
            {saving ? 'Speichert…' : 'Anlegen'}
          </button>
          <button type="button" onClick={onClose} className={`px-4 py-2 rounded-lg ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'}`}>
            Abbrechen
          </button>
        </div>
      </form>
    </div>
  )
}