'use client'

import { useEffect, useState, useTransition } from 'react'
import {
  VALIDATION_LABEL_DE,
  validateOptionInput,
  type FieldDefinition,
  type FieldOption,
} from '@/lib/intake/field-builder'
import {
  createFieldOption,
  deleteFieldOption,
  loadFieldOptions,
  updateFieldOption,
} from '@/app/admin/intake-fields/actions'

type Props = {
  definition: FieldDefinition
  onCancel: () => void
}

type LoadState =
  | { phase: 'loading' }
  | { phase: 'ready'; options: FieldOption[] }
  | { phase: 'error'; error: string }

export default function IntakeFieldOptionsModal({ definition, onCancel }: Props) {
  const [state, setState] = useState<LoadState>({ phase: 'loading' })
  const [refreshCounter, setRefreshCounter] = useState(0)
  const [newValue, setNewValue] = useState('')
  const [newLabelDe, setNewLabelDe] = useState('')
  const [newLabelEn, setNewLabelEn] = useState('')
  const [newSort, setNewSort] = useState(0)
  const [addError, setAddError] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()

  useEffect(() => {
    function onEsc(ev: KeyboardEvent) {
      if (ev.key === 'Escape' && !isPending) onCancel()
    }
    window.addEventListener('keydown', onEsc)
    return () => window.removeEventListener('keydown', onEsc)
  }, [onCancel, isPending])

  useEffect(() => {
    let cancelled = false
    setState({ phase: 'loading' })
    ;(async () => {
      const result = await loadFieldOptions(definition.id)
      if (cancelled) return
      if (!result.ok || !result.data) {
        setState({ phase: 'error', error: result.ok ? 'no_data' : result.error })
      } else {
        setState({ phase: 'ready', options: result.data })
      }
    })()
    return () => {
      cancelled = true
    }
  }, [definition.id, refreshCounter])

  const addValidation = validateOptionInput({
    option_value: newValue,
    label_de: newLabelDe,
    label_en: newLabelEn || null,
    sort_order: newSort,
    is_active: true,
  })

  function handleAdd(ev: React.FormEvent) {
    ev.preventDefault()
    if (!addValidation.ok) return
    setAddError(null)
    startTransition(async () => {
      const result = await createFieldOption(definition.id, definition.field_type, {
        option_value: newValue,
        label_de: newLabelDe,
        label_en: newLabelEn || null,
        sort_order: newSort,
        is_active: true,
      })
      if (!result.ok) {
        setAddError(result.error)
        return
      }
      setNewValue('')
      setNewLabelDe('')
      setNewLabelEn('')
      setNewSort((s) => s + 10)
      setRefreshCounter((c) => c + 1)
    })
  }

  function handleDelete(id: string) {
    startTransition(async () => {
      const result = await deleteFieldOption(id)
      if (result.ok) setRefreshCounter((c) => c + 1)
    })
  }

  function handleToggleActive(opt: FieldOption) {
    startTransition(async () => {
      const result = await updateFieldOption(opt.id, {
        option_value: opt.option_value,
        label_de: opt.label_de,
        label_en: opt.label_en,
        sort_order: opt.sort_order,
        is_active: !opt.is_active,
      })
      if (result.ok) setRefreshCounter((c) => c + 1)
    })
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="opts-title"
      className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4"
      onClick={onCancel}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-card border border-border rounded-md shadow-lg w-full max-w-xl p-5 space-y-4 max-h-[90vh] overflow-y-auto"
      >
        <header>
          <h2 id="opts-title" className="text-base font-bold text-foreground">
            Optionen — {definition.label_de}
          </h2>
          <p className="text-xs text-muted-foreground mt-1">
            <code className="text-[11px]">{definition.field_key}</code> · {definition.field_type}
          </p>
        </header>

        {state.phase === 'loading' && (
          <p className="text-sm text-muted-foreground">Lade Optionen…</p>
        )}
        {state.phase === 'error' && (
          <p className="text-sm text-destructive">Fehler: {state.error}</p>
        )}
        {state.phase === 'ready' && (
          <section className="space-y-2">
            {state.options.length === 0 ? (
              <p className="text-xs text-muted-foreground italic">Noch keine Optionen.</p>
            ) : (
              <ul className="divide-y divide-border border border-border rounded-sm">
                {state.options.map((opt) => (
                  <li
                    key={opt.id}
                    className={`flex items-center gap-3 px-3 py-2 ${opt.is_active ? '' : 'opacity-50'}`}
                  >
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-bold text-foreground truncate">{opt.label_de}</div>
                      <div className="text-[11px] text-muted-foreground font-condensed">
                        <code>{opt.option_value}</code> · Sort {opt.sort_order}
                        {opt.label_en && ` · EN: ${opt.label_en}`}
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => handleToggleActive(opt)}
                      disabled={isPending}
                      className={`px-2 py-1 text-[11px] font-condensed border rounded-sm hover:bg-muted disabled:opacity-50 ${opt.is_active ? 'bg-success/10 border-success/40 text-success' : 'border-border text-muted-foreground'}`}
                    >
                      {opt.is_active ? 'Aktiv' : 'Inaktiv'}
                    </button>
                    <button
                      type="button"
                      onClick={() => handleDelete(opt.id)}
                      disabled={isPending}
                      className="px-2 py-1 text-[11px] font-condensed text-destructive border border-destructive/30 rounded-sm hover:bg-destructive/10 disabled:opacity-50"
                    >
                      Löschen
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </section>
        )}

        <form onSubmit={handleAdd} className="space-y-2 pt-3 border-t border-border">
          <h3 className="text-xs font-condensed font-bold text-foreground">Neue Option</h3>
          <div className="grid grid-cols-2 gap-2">
            <input
              type="text"
              value={newValue}
              onChange={(e) => setNewValue(e.target.value)}
              placeholder="option_value (intern)"
              disabled={isPending}
              required
              className="px-3 py-2 text-sm font-mono bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
            <input
              type="number"
              value={newSort}
              min={0}
              step={1}
              onChange={(e) => setNewSort(Number(e.target.value))}
              placeholder="Sort"
              disabled={isPending}
              className="px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>
          <input
            type="text"
            value={newLabelDe}
            onChange={(e) => setNewLabelDe(e.target.value)}
            placeholder="Label (DE) — sichtbar im Formular"
            disabled={isPending}
            required
            className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <input
            type="text"
            value={newLabelEn}
            onChange={(e) => setNewLabelEn(e.target.value)}
            placeholder="Label (EN, optional)"
            disabled={isPending}
            className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
          />

          {!addValidation.ok && newValue && newLabelDe && (
            <p className="text-xs text-destructive">
              {VALIDATION_LABEL_DE[addValidation.error] ?? addValidation.error}
            </p>
          )}
          {addError && (
            <p className="text-xs text-destructive" role="alert">
              Anlegen fehlgeschlagen: {addError}
            </p>
          )}

          <button
            type="submit"
            disabled={!addValidation.ok || isPending}
            className="px-3 py-1.5 text-sm font-condensed font-bold text-white bg-primary rounded-sm hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            + Option hinzufügen
          </button>
        </form>

        <footer className="flex items-center justify-end gap-2 pt-2 border-t border-border">
          <button
            type="button"
            onClick={onCancel}
            disabled={isPending}
            className="px-3 py-1.5 text-sm font-condensed text-foreground border border-border rounded-sm hover:bg-muted disabled:opacity-50"
          >
            Schließen
          </button>
        </footer>
      </div>
    </div>
  )
}