'use client'

import { useState, useTransition } from 'react'
import Link from 'next/link'
import { de } from '@/lib/i18n/de'
import { PARTICIPANT_ROLES } from '@/lib/cases/terms'
import { addParticipantAction, removeParticipantAction } from '../actions'

type Beteiligter = {
  id: string
  role: string
  userId: string | null
  displayName: string | null
  personnelFileId: string | null
}

/**
 * Beteiligte einer Akte.
 *
 * Der Hinweis über dem Formular ist wichtig und steht deshalb dort und nicht
 * in einer Hilfeseite: wer hier eingetragen wird, liest die Akte unabhängig
 * von seiner Freigabestufe.
 */
export function Participants({
  caseNumber,
  participants,
  canEdit,
  members,
  files,
}: {
  caseNumber: string
  participants: Beteiligter[]
  canEdit: boolean
  members: { id: string; displayName: string }[]
  files: { id: string; displayName: string }[]
}) {
  const [open, setOpen] = useState(false)
  const [role, setRole] = useState<string>('INVESTIGATOR')
  const [target, setTarget] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  function add() {
    if (!target) return
    setError(null)
    const [art, id] = target.split(':')
    startTransition(async () => {
      const result = await addParticipantAction({
        caseNumber,
        role,
        ...(art === 'user' ? { userId: id } : { personnelFileId: id }),
      })
      if (result.ok) {
        setTarget('')
        setOpen(false)
      } else {
        setError(result.error)
      }
    })
  }

  return (
    <div>
      {participants.length === 0 ? (
        <p className="text-text-dim">{de.participant.empty}</p>
      ) : (
        <ul className="border-t border-line">
          {participants.map((person) => (
            <li
              key={person.id}
              className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line py-2"
            >
              <span className="font-condensed text-2xs text-text-dim">
                {de.participant.roles[person.role] ?? person.role}
              </span>
              <span className="grow text-sm">
                {person.personnelFileId ? (
                  <Link href={`/personalakten/${person.personnelFileId}`}>
                    {person.displayName ?? de.common.unknown}
                  </Link>
                ) : (
                  (person.displayName ?? de.common.unknown)
                )}
              </span>
              {canEdit ? (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() =>
                    startTransition(async () => {
                      const result = await removeParticipantAction({
                        caseNumber,
                        participantId: person.id,
                      })
                      if (!result.ok) setError(result.error)
                    })
                  }
                  className="font-condensed text-2xs text-text-dim"
                >
                  {de.participant.remove}
                </button>
              ) : null}
            </li>
          ))}
        </ul>
      )}

      {error ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{error}</p> : null}

      {canEdit ? (
        open ? (
          <div className="mt-4 border border-line p-3">
            <p className="max-w-(--container-measure) text-2xs text-text-dim">
              {de.participant.hint}
            </p>
            <div className="mt-3 flex flex-wrap items-center gap-2">
              <select
                value={role}
                onChange={(event) => setRole(event.target.value)}
                aria-label={de.participant.role}
                className="border border-line bg-raised px-2 py-1 text-2xs"
              >
                {PARTICIPANT_ROLES.map((value) => (
                  <option key={value} value={value}>
                    {de.participant.roles[value] ?? value}
                  </option>
                ))}
              </select>
              <select
                value={target}
                onChange={(event) => setTarget(event.target.value)}
                aria-label={de.participant.person}
                className="border border-line bg-raised px-2 py-1 text-2xs"
              >
                <option value="">—</option>
                <optgroup label={de.participant.pickUser}>
                  {members.map((member) => (
                    <option key={member.id} value={`user:${member.id}`}>
                      {member.displayName}
                    </option>
                  ))}
                </optgroup>
                <optgroup label={de.participant.pickPersonnel}>
                  {files.map((file) => (
                    <option key={file.id} value={`file:${file.id}`}>
                      {file.displayName}
                    </option>
                  ))}
                </optgroup>
              </select>
              <button
                type="button"
                disabled={pending || !target}
                onClick={add}
                className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
              >
                {de.participant.add}
              </button>
              <button
                type="button"
                onClick={() => setOpen(false)}
                className="font-condensed text-2xs text-text-dim"
              >
                {de.common.cancel}
              </button>
            </div>
          </div>
        ) : (
          <button
            type="button"
            onClick={() => setOpen(true)}
            className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
          >
            {de.participant.add}
          </button>
        )
      ) : null}
    </div>
  )
}