'use client'

// R-03 (Spec Kap. 21): die Vergleichsart wird vom Menschen DEKLARIERT — dieses
// Control ist der einzige Schreibweg (declareComparisonType validiert gegen
// die geschlossene Liste). Das System rät nie; solange niemand deklariert,
// zeigt der Kopf ehrlich „Vergleichsart nicht bestimmt".

import { useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import { declareComparisonType } from '@/app/qaf-differences/comparison-meta-actions'
import { comparisonTypeLabel } from '@/components/qaf-differences/qaf-v2-header'
import { DECLARED_COMPARISON_TYPES, type DeclaredComparisonType } from '@/lib/qaf-differences'

interface Props {
  comparisonId: string
  current: DeclaredComparisonType
}

export function QafV2DeclaredTypeControl({ comparisonId, current }: Props) {
  const router = useRouter()
  const [selected, setSelected] = useState<DeclaredComparisonType>(current)
  const [fehlerDe, setFehlerDe] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  const uebernehmen = () => {
    setFehlerDe(null)
    startTransition(async () => {
      const res = await declareComparisonType(comparisonId, selected)
      if (!res.ok) {
        setFehlerDe(res.error)
        return
      }
      // Server-Daten haben sich echt geändert (Kopf liest die Deklaration) —
      // der eine legitime router.refresh()-Fall laut CLAUDE.md.
      router.refresh()
    })
  }

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-center gap-2">
        <label htmlFor="declared-type" className="text-sm text-muted-foreground">
          Vergleichsart deklarieren:
        </label>
        <select
          id="declared-type"
          value={selected}
          onChange={(e) => setSelected(e.target.value as DeclaredComparisonType)}
          className="rounded-[2px] border border-border bg-background px-2 py-1 text-sm"
        >
          {DECLARED_COMPARISON_TYPES.map((t) => (
            <option key={t} value={t}>
              {comparisonTypeLabel(t)}
            </option>
          ))}
        </select>
        <button
          type="button"
          onClick={uebernehmen}
          disabled={pending || selected === current}
          className="rounded-[2px] bg-primary px-3 py-1 text-sm text-primary-foreground disabled:opacity-50"
        >
          {pending ? 'Speichert…' : 'Übernehmen'}
        </button>
      </div>
      {fehlerDe === null ? null : (
        <p role="alert" className="text-sm text-destructive">
          {fehlerDe}
        </p>
      )}
    </div>
  )
}