'use client'

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

export function NewCaseForm({
  templates,
  levels,
  people,
  defaultLevel,
}: {
  templates: { key: string; name: string }[]
  levels: { level: number; name: string }[]
  people: { id: string; displayName: string }[]
  defaultLevel: number
}) {
  const [state, action, pending] = useActionState<CreateState, FormData>(createCaseAction, {})

  return (
    <form action={action} className="mt-6 space-y-5">
      <div>
        <label htmlFor="title" className="font-condensed text-xs text-text-dim">
          {de.case.title}
        </label>
        <input
          id="title"
          name="title"
          required
          minLength={3}
          maxLength={200}
          className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
        />
      </div>

      <div>
        <label htmlFor="templateKey" className="font-condensed text-xs text-text-dim">
          {de.case.type}
        </label>
        <select
          id="templateKey"
          name="templateKey"
          required
          className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
        >
          {templates.map((template) => (
            <option key={template.key} value={template.key}>
              {template.name}
            </option>
          ))}
        </select>
      </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>

      {people.length > 0 ? (
        <div>
          <label htmlFor="personnelFileId" className="font-condensed text-xs text-text-dim">
            {de.case.subject}
          </label>
          {/* Gleich beim Anlegen verknüpfen erspart den zweiten Schritt, den
              man sonst vergisst. Nachträglich geht es genauso. */}
          <select
            id="personnelFileId"
            name="personnelFileId"
            defaultValue=""
            className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
          >
            <option value="">{de.case.subjectNone}</option>
            {people.map((person) => (
              <option key={person.id} value={person.id}>
                {person.displayName}
              </option>
            ))}
          </select>
        </div>
      ) : null}

      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={pending}
          className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
        >
          {pending ? de.case.saving : de.case.create}
        </button>
        {state.error ? (
          <span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
        ) : null}
      </div>
    </form>
  )
}