'use client'

import { useState, useTransition } from 'react'
import { linkText, participantText } from '@/lib/i18n/cases'
import { commonText } from '@/lib/i18n/common'
import { personnelText } from '@/lib/i18n/people'
import { PARTICIPANT_ROLES } from '@/lib/cases/terms'
import { linkCaseToPersonAction } from '../actions'

/**
 * Einen Fall von der Personalakte aus verknüpfen.
 *
 * Derselbe Vorgang wie „Beteiligte eintragen" auf der Fallakte, nur von der
 * anderen Seite gedacht: dort sucht man die Person, hier den Fall. Deshalb ein
 * Eingabefeld für das Aktenzeichen und keine Auswahlliste — eine Liste aller
 * sichtbaren Fälle wäre auf einer Personalakte am falschen Ort.
 */
export function LinkCase({ personnelFileId }: { personnelFileId: string }) {
  const [open, setOpen] = useState(false)
  const [caseNumber, setCaseNumber] = useState('')
  const [role, setRole] = useState<string>('SUBJECT')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
      >
        {personnelText.linkCase}
      </button>
    )
  }

  return (
    <div className="mt-4 border border-line p-3">
      <p className="max-w-(--container-measure) text-2xs text-text-dim">
        {personnelText.linkCaseHint}
      </p>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <select
          value={role}
          onChange={(event) => setRole(event.target.value)}
          aria-label={participantText.role}
          className="border border-line bg-raised px-2 py-1 text-2xs"
        >
          {PARTICIPANT_ROLES.map((value) => (
            <option key={value} value={value}>
              {participantText.roles[value] ?? value}
            </option>
          ))}
        </select>
        <input
          value={caseNumber}
          onChange={(event) => setCaseNumber(event.target.value)}
          placeholder={linkText.target}
          aria-label={linkText.target}
          className="border border-line bg-raised px-2 py-1 font-mono text-2xs"
        />
        <button
          type="button"
          disabled={pending || caseNumber.trim() === ''}
          onClick={() =>
            startTransition(async () => {
              setError(null)
              const result = await linkCaseToPersonAction({
                personnelFileId,
                caseNumber,
                role,
              })
              if (result.ok) {
                setCaseNumber('')
                setOpen(false)
              } else {
                setError(result.error)
              }
            })
          }
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {personnelText.linkCase}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {commonText.cancel}
        </button>
      </div>
      {error ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{error}</p> : null}
    </div>
  )
}