'use client'

import { useActionState } from 'react'
import { de } from '@/lib/i18n/de'
import { createPersonnelAction, type ActionResult } from '../actions'

/**
 * Neue Personalakte.
 *
 * Das Discord-Konto ist **optional**. Personen ohne Konto — Zeugen, ehemalige
 * Mitarbeiter, Externe — brauchen genauso eine Akte, und ihr Name ist dann das
 * einzige, was sie identifiziert.
 */
export function NewPersonnelForm({
  members,
  levels,
  defaultLevel,
}: {
  members: { id: string; displayName: string }[]
  levels: { level: number; name: string }[]
  defaultLevel: number
}) {
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    createPersonnelAction,
    null,
  )

  return (
    <form action={action} className="mt-6 space-y-5">
      <Feld id="displayName" label={de.personnel.name} required minLength={2} />

      <div>
        <label htmlFor="userId" className="font-condensed text-xs text-text-dim">
          {de.personnel.linkedAccount}
        </label>
        <select
          id="userId"
          name="userId"
          defaultValue=""
          className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
        >
          <option value="">{de.personnel.noAccount}</option>
          {members.map((member) => (
            <option key={member.id} value={member.id}>
              {member.displayName}
            </option>
          ))}
        </select>
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <Feld id="serviceNumber" label={de.personnel.serviceNumber} />
        <Feld id="rank" label={de.personnel.rank} />
        <Feld id="department" label={de.personnel.department} />
        <Feld id="status" label={de.personnel.status} />
      </div>

      <div>
        <label htmlFor="note" className="font-condensed text-xs text-text-dim">
          {de.personnel.note}
        </label>
        <textarea
          id="note"
          name="note"
          rows={3}
          className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
        />
        <p className="mt-1 text-2xs text-text-dim">{de.personnel.noteHelp}</p>
      </div>

      <div>
        <label htmlFor="classification" className="font-condensed text-xs text-text-dim">
          {de.clearance.classification}
        </label>
        {/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
        <select
          id="classification"
          name="classification"
          defaultValue={defaultLevel}
          className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
        >
          {levels.map((level) => (
            <option key={level.level} value={level.level}>
              {level.level} · {level.name}
            </option>
          ))}
        </select>
      </div>

      {state && !state.ok ? (
        <p className="font-condensed text-2xs text-stamp-4">{state.error}</p>
      ) : null}

      <button
        type="submit"
        disabled={pending}
        className="border border-line bg-raised px-4 py-2 font-condensed text-sm text-accent disabled:text-text-dim"
      >
        {pending ? de.common.loading : de.personnel.create}
      </button>
    </form>
  )
}

function Feld({
  id,
  label,
  required,
  minLength,
}: {
  id: string
  label: string
  required?: boolean
  minLength?: number
}) {
  return (
    <div>
      <label htmlFor={id} className="font-condensed text-xs text-text-dim">
        {label}
      </label>
      <input
        id={id}
        name={id}
        required={required}
        minLength={minLength}
        maxLength={120}
        className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
      />
    </div>
  )
}