'use client'

import { useMemo, useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import {
  BLOCK_LABELS,
  FIELD_TYPE_LABEL,
  SELECT_TYPES,
  VALIDATION_LABEL_DE,
  type FieldDefinition,
} from '@/lib/intake/field-builder'
import {
  setFieldDefinitionActive,
  setFieldDefinitionRequired,
  moveFieldDefinitionSortOrder,
} from '@/app/admin/intake-fields/actions'
import IntakeFieldEditModal from './intake-field-edit-modal'
import IntakeFieldCreateModal from './intake-field-create-modal'
import IntakeFieldOptionsModal from './intake-field-options-modal'

type Props = {
  initialDefinitions: FieldDefinition[]
}

type EditTarget =
  | { kind: 'edit'; def: FieldDefinition }
  | { kind: 'options'; def: FieldDefinition }
  | { kind: 'create' }
  | null

const BLOCK_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9]

export default function IntakeFieldsClient({ initialDefinitions }: Props) {
  const router = useRouter()
  const [defs] = useState<FieldDefinition[]>(initialDefinitions)
  const [blockFilter, setBlockFilter] = useState<number | 'all'>('all')
  const [showInactive, setShowInactive] = useState(false)
  const [target, setTarget] = useState<EditTarget>(null)
  const [errorMsg, setErrorMsg] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()

  const filtered = useMemo(() => {
    return defs.filter((d) => {
      if (blockFilter !== 'all' && d.block !== blockFilter) return false
      if (!showInactive && !d.is_active) return false
      return true
    })
  }, [defs, blockFilter, showInactive])

  const grouped = useMemo(() => {
    const map = new Map<number, FieldDefinition[]>()
    for (const d of filtered) {
      if (!map.has(d.block)) map.set(d.block, [])
      map.get(d.block)!.push(d)
    }
    return Array.from(map.entries()).sort(([a], [b]) => a - b)
  }, [filtered])

  function handleSavedRefresh() {
    setTarget(null)
    router.refresh()
  }

  function toggleActive(def: FieldDefinition) {
    setErrorMsg(null)
    startTransition(async () => {
      const result = await setFieldDefinitionActive(def.id, !def.is_active)
      if (!result.ok) setErrorMsg(`Aktiv-Toggle fehlgeschlagen: ${result.error}`)
      else router.refresh()
    })
  }

  function toggleRequired(def: FieldDefinition) {
    setErrorMsg(null)
    startTransition(async () => {
      const result = await setFieldDefinitionRequired(def.id, !def.is_required)
      if (!result.ok) setErrorMsg(`Required-Toggle fehlgeschlagen: ${result.error}`)
      else router.refresh()
    })
  }

  function move(def: FieldDefinition, delta: 1 | -1) {
    setErrorMsg(null)
    startTransition(async () => {
      const result = await moveFieldDefinitionSortOrder(def.id, delta)
      if (!result.ok) setErrorMsg(`Sortieren fehlgeschlagen: ${result.error}`)
      else router.refresh()
    })
  }

  return (
    <div className="space-y-5">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-lg font-bold text-foreground">Intake-Felder verwalten</h1>
          <p className="text-xs text-muted-foreground mt-1">
            {defs.length} Definitionen · {defs.filter((d) => d.is_active).length} aktiv
          </p>
        </div>
        <button
          type="button"
          onClick={() => setTarget({ kind: 'create' })}
          className="px-3 py-1.5 text-sm font-condensed font-bold text-white bg-primary rounded-sm hover:bg-primary/90"
        >
          + Neues Feld
        </button>
      </header>

      <div className="flex flex-wrap items-center gap-3 text-xs">
        <label className="flex items-center gap-1.5 font-condensed">
          Block:
          <select
            value={blockFilter === 'all' ? 'all' : String(blockFilter)}
            onChange={(e) => setBlockFilter(e.target.value === 'all' ? 'all' : Number(e.target.value))}
            className="px-2 py-1 bg-background border border-border rounded-sm"
          >
            <option value="all">Alle</option>
            {BLOCK_OPTIONS.map((b) => (
              <option key={b} value={b}>
                {b} — {BLOCK_LABELS[b]?.replace(/^Block \d+ — /, '') ?? ''}
              </option>
            ))}
          </select>
        </label>
        <label className="flex items-center gap-1.5 font-condensed">
          <input
            type="checkbox"
            checked={showInactive}
            onChange={(e) => setShowInactive(e.target.checked)}
          />
          Inaktive zeigen
        </label>
        <span className="text-muted-foreground ml-auto">
          Lock: <code className="text-[11px]">field_key</code> und <code className="text-[11px]">field_type</code> nach Anlage nicht editierbar
        </span>
      </div>

      {errorMsg && (
        <div role="alert" className="px-3 py-2 bg-destructive/10 border border-destructive/30 text-destructive text-xs rounded-sm">
          {errorMsg}
        </div>
      )}

      {grouped.length === 0 ? (
        <p className="text-sm text-muted-foreground italic">Keine Definitionen für diesen Filter.</p>
      ) : (
        grouped.map(([block, items]) => (
          <section key={block} className="bg-card border border-border rounded-md overflow-hidden">
            <header className="px-4 py-2 bg-muted/40 border-b border-border">
              <h2 className="text-sm font-bold text-foreground">
                {BLOCK_LABELS[block] ?? `Block ${block}`}
              </h2>
              <p className="text-[11px] text-muted-foreground">{items.length} Felder</p>
            </header>
            <ul className="divide-y divide-border">
              {items.map((def) => (
                <li
                  key={def.id}
                  className={`flex flex-wrap items-center gap-3 px-4 py-2 ${def.is_active ? '' : 'opacity-50 bg-muted/20'}`}
                  aria-busy={isPending}
                >
                  <div className="flex flex-col min-w-[200px] flex-1">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-bold text-foreground">{def.label_de}</span>
                      {def.is_required && (
                        <span className="text-[10px] font-condensed font-bold text-destructive">PFLICHT</span>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-[11px] text-muted-foreground font-condensed">
                      <code>{def.field_key}</code>
                      <span>·</span>
                      <span>{FIELD_TYPE_LABEL[def.field_type]}</span>
                      <span>·</span>
                      <span>Sort {def.sort_order}</span>
                      {def.visible_if !== null && def.visible_if !== undefined && (
                        <span className="text-warning">· bedingt sichtbar</span>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => move(def, -1)}
                      disabled={isPending || def.sort_order === 0}
                      className="px-2 py-1 text-xs border border-border rounded-sm hover:bg-muted disabled:opacity-50"
                      aria-label="Sort hoch"
                    >
                      ↑
                    </button>
                    <button
                      type="button"
                      onClick={() => move(def, 1)}
                      disabled={isPending}
                      className="px-2 py-1 text-xs border border-border rounded-sm hover:bg-muted disabled:opacity-50"
                      aria-label="Sort runter"
                    >
                      ↓
                    </button>
                  </div>

                  <button
                    type="button"
                    onClick={() => toggleRequired(def)}
                    disabled={isPending}
                    className={`px-2 py-1 text-[11px] font-condensed border rounded-sm hover:bg-muted disabled:opacity-50 ${def.is_required ? 'bg-destructive/10 border-destructive/40 text-destructive' : 'border-border text-muted-foreground'}`}
                  >
                    {def.is_required ? 'Pflicht' : 'Optional'}
                  </button>

                  <button
                    type="button"
                    onClick={() => toggleActive(def)}
                    disabled={isPending}
                    className={`px-2 py-1 text-[11px] font-condensed border rounded-sm hover:bg-muted disabled:opacity-50 ${def.is_active ? 'bg-success/10 border-success/40 text-success' : 'border-border text-muted-foreground'}`}
                  >
                    {def.is_active ? 'Aktiv' : 'Inaktiv'}
                  </button>

                  {SELECT_TYPES.has(def.field_type) && (
                    <button
                      type="button"
                      onClick={() => setTarget({ kind: 'options', def })}
                      className="px-2 py-1 text-[11px] font-condensed text-primary border border-primary/30 rounded-sm hover:bg-primary/10"
                    >
                      Optionen
                    </button>
                  )}

                  <button
                    type="button"
                    onClick={() => setTarget({ kind: 'edit', def })}
                    className="px-2 py-1 text-[11px] font-condensed text-foreground border border-border rounded-sm hover:bg-muted"
                  >
                    Bearbeiten
                  </button>
                </li>
              ))}
            </ul>
          </section>
        ))
      )}

      {target?.kind === 'edit' && (
        <IntakeFieldEditModal
          definition={target.def}
          onCancel={() => setTarget(null)}
          onSaved={handleSavedRefresh}
        />
      )}
      {target?.kind === 'create' && (
        <IntakeFieldCreateModal
          onCancel={() => setTarget(null)}
          onSaved={handleSavedRefresh}
        />
      )}
      {target?.kind === 'options' && (
        <IntakeFieldOptionsModal
          definition={target.def}
          onCancel={() => setTarget(null)}
        />
      )}
    </div>
  )
}

export { VALIDATION_LABEL_DE }