'use client'

import { useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import { ASSIGNMENT_ROLES } from '@/lib/personnel/terms'
import { addAssignmentAction, removeAssignmentAction } from '../actions'

type Zuordnung = {
  id: string
  role: string
  user: { id: string; displayName: string }
}

/**
 * Mitglieder der Abteilung, die an dieser Personalakte hängen.
 *
 * Wie die Beteiligten einer Fallakte ist das zugleich der Weg zum
 * ausnahmsweisen Zugang — der Hinweis steht deshalb direkt am Formular.
 */
export function Assignments({
  personnelFileId,
  assignments,
  members,
  canEdit,
}: {
  personnelFileId: string
  assignments: Zuordnung[]
  members: { id: string; displayName: string }[]
  canEdit: boolean
}) {
  const [open, setOpen] = useState(false)
  const [role, setRole] = useState<string>('HANDLER')
  const [userId, setUserId] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  return (
    <div>
      {assignments.length === 0 ? (
        <p className="text-text-dim">{de.assignment.empty}</p>
      ) : (
        <ul className="border-t border-line">
          {assignments.map((zuordnung) => (
            <li
              key={zuordnung.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.assignment.roles[zuordnung.role] ?? zuordnung.role}
              </span>
              <span className="grow text-sm">{zuordnung.user.displayName}</span>
              {canEdit ? (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() =>
                    startTransition(async () => {
                      const result = await removeAssignmentAction({
                        personnelFileId,
                        assignmentId: zuordnung.id,
                      })
                      if (!result.ok) setError(result.error)
                    })
                  }
                  className="font-condensed text-2xs text-text-dim"
                >
                  {de.assignment.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.assignment.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"
              >
                {ASSIGNMENT_ROLES.map((value) => (
                  <option key={value} value={value}>
                    {de.assignment.roles[value] ?? value}
                  </option>
                ))}
              </select>
              <select
                value={userId}
                onChange={(event) => setUserId(event.target.value)}
                aria-label={de.participant.pickUser}
                className="border border-line bg-raised px-2 py-1 text-2xs"
              >
                <option value="">—</option>
                {members.map((member) => (
                  <option key={member.id} value={member.id}>
                    {member.displayName}
                  </option>
                ))}
              </select>
              <button
                type="button"
                disabled={pending || !userId}
                onClick={() =>
                  startTransition(async () => {
                    setError(null)
                    const result = await addAssignmentAction({ personnelFileId, userId, role })
                    if (result.ok) {
                      setUserId('')
                      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"
              >
                {de.assignment.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.assignment.add}
          </button>
        )
      ) : null}
    </div>
  )
}