'use client'

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

const LANGS: { code: string; name: string }[] = [
  { code: 'de', name: 'Deutsch' },
  { code: 'en', name: 'English' },
  { code: 'tr', name: 'Tuerkce' },
  { code: 'ar', name: 'العربية' },
  { code: 'uk', name: 'Українська' },
  { code: 'ru', name: 'Русский' },
  { code: 'pl', name: 'Polski' },
  { code: 'fr', name: 'Francais' },
]

export function ParentManager() {
  const { isDark } = useTheme()
  const [items, setItems] = useState<ParentInviteListItem[]>([])
  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 [lastInvite, setLastInvite] = useState<InviteParentResponse | null>(null)
  const [form, setForm] = useState({
    email: '',
    preferred_language: 'de',
    child_first_name: '',
    child_last_name: '',
    tt_class_id: '',
  })

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const [list, cls] = await Promise.all([calendarApi.listParents(), classesApi.list()])
      setItems(list || [])
      setClasses(cls || [])
      setError(null)
    } 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 {
      const res = await calendarApi.inviteParent(form)
      setLastInvite(res)
      setForm({ ...form, child_first_name: '', child_last_name: '' })
      await load()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Einladen fehlgeschlagen')
    } finally {
      setSubmitting(false)
    }
  }

  const handleDelete = async (childId: string) => {
    if (!confirm('Eltern-Zuordnung wirklich loeschen?')) return
    try { await calendarApi.deleteParentChild(childId); await load() }
    catch (e) { setError(e instanceof Error ? e.message : 'Loeschen fehlgeschlagen') }
  }

  const fullLink = (path: string) =>
    typeof window === 'undefined' ? path : `${window.location.origin}${path}`

  const copyLink = (path: string) => {
    navigator.clipboard?.writeText(fullLink(path))
  }

  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={`rounded-2xl border backdrop-blur-xl p-4 ${cardClass}`} data-testid="parent-manager">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-lg font-semibold">Eltern verwalten ({items.length})</h3>
        <button
          onClick={() => setShowForm(s => !s)}
          disabled={classes.length === 0}
          data-testid="parent-invite-toggle"
          className={`px-3 py-1.5 rounded-lg text-sm font-medium disabled:opacity-50 ${isDark ? 'bg-indigo-500 hover:bg-indigo-600 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'}`}
        >
          {showForm ? 'Abbrechen' : '+ Eltern einladen'}
        </button>
      </div>

      {classes.length === 0 && (
        <p className={`text-sm mb-2 ${isDark ? 'text-amber-200' : 'text-amber-900'}`}>
          Zuerst Klassen im Stundenplan-Modul anlegen.
        </p>
      )}

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

      {showForm && (
        <form onSubmit={handleSubmit} className="mb-4 grid grid-cols-1 md:grid-cols-3 gap-2">
          <input required type="email" placeholder="Eltern-E-Mail" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} data-testid="parent-email" className={`px-3 py-2 rounded-lg border ${inputClass}`} />
          <input required placeholder="Vorname Kind" value={form.child_first_name} onChange={e => setForm({ ...form, child_first_name: e.target.value })} data-testid="parent-child-first" className={`px-3 py-2 rounded-lg border ${inputClass}`} />
          <input required placeholder="Nachname Kind" value={form.child_last_name} onChange={e => setForm({ ...form, child_last_name: e.target.value })} data-testid="parent-child-last" className={`px-3 py-2 rounded-lg border ${inputClass}`} />
          <select required value={form.tt_class_id} onChange={e => setForm({ ...form, tt_class_id: e.target.value })} data-testid="parent-class" className={`px-3 py-2 rounded-lg border ${inputClass}`}>
            <option value="">— Klasse waehlen —</option>
            {classes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <select value={form.preferred_language} onChange={e => setForm({ ...form, preferred_language: e.target.value })} className={`px-3 py-2 rounded-lg border ${inputClass}`}>
            {LANGS.map(l => <option key={l.code} value={l.code}>{l.name}</option>)}
          </select>
          <button type="submit" disabled={submitting} data-testid="parent-invite-submit" className="px-4 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium disabled:opacity-50">
            {submitting ? 'Erstellt…' : 'Einladen'}
          </button>
        </form>
      )}

      {lastInvite && (
        <div className={`mb-3 p-3 rounded-lg ${isDark ? 'bg-emerald-500/20 border border-emerald-500/40' : 'bg-emerald-50 border border-emerald-200'}`} data-testid="parent-invite-link">
          <div className="text-sm font-medium mb-1">Einladungs-Link fuer {lastInvite.parent.email}</div>
          <div className="flex gap-2 items-center">
            <code className={`flex-1 text-xs px-2 py-1 rounded overflow-x-auto ${isDark ? 'bg-white/10' : 'bg-white'}`}>
              {fullLink(lastInvite.magic_url)}
            </code>
            <button onClick={() => copyLink(lastInvite.magic_url)} className="text-xs px-2 py-1 rounded bg-indigo-500 hover:bg-indigo-600 text-white">Kopieren</button>
          </div>
          <p className="text-xs opacity-70 mt-1">Gueltig bis {new Date(lastInvite.expires_at).toLocaleString('de-DE')}</p>
        </div>
      )}

      {loading ? (
        <div className="opacity-60 py-4 text-center text-sm">Laedt…</div>
      ) : items.length === 0 ? (
        <div className="opacity-60 py-4 text-center text-sm">Keine eingeladenen Eltern.</div>
      ) : (
        <table className="w-full text-sm">
          <thead className={isDark ? 'opacity-70' : 'opacity-70'}>
            <tr>
              <th className="text-left py-2">E-Mail</th>
              <th className="text-left py-2">Kind</th>
              <th className="text-left py-2">Klasse</th>
              <th className="text-left py-2">Sprache</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {items.map(it => (
              <tr key={it.child_id} className={isDark ? 'border-t border-white/10' : 'border-t border-slate-200'}>
                <td className="py-2">{it.email}</td>
                <td className="py-2">{it.child_first_name} {it.child_last_name}</td>
                <td className="py-2">{it.class_name}</td>
                <td className="py-2">{it.preferred_language}</td>
                <td className="py-2 text-right">
                  <button onClick={() => handleDelete(it.child_id)} className="text-xs text-red-400 hover:text-red-300">Loeschen</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}