'use client'

import { useActionState, useState } from 'react'
import { de } from '@/lib/i18n/de'
import { createDocumentAction, type ActionResult } from '@/app/(app)/dokumente/actions'

/**
 * Dokument anlegen, an einer Fallakte oder an einer Personalakte.
 *
 * Die Vorlagenliste kommt vom Server und enthält nur, was an dieser Stelle
 * erlaubt ist. Geprüft wird das trotzdem noch einmal beim Anlegen — die
 * Auswahl im Formular ist eine Bequemlichkeit, keine Sicherung.
 */
export function NewDocument({
  templates,
  levels,
  defaultLevel,
  caseNumber,
  personnelFileId,
}: {
  templates: { key: string; name: string; description: string | null; layout: string }[]
  levels: { level: number; name: string }[]
  defaultLevel: number
  caseNumber?: string
  personnelFileId?: string
}) {
  const [open, setOpen] = useState(false)
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    createDocumentAction,
    null,
  )

  if (templates.length === 0) return null

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

  return (
    <form action={action} className="border border-line p-4">
      {caseNumber ? <input type="hidden" name="caseNumber" value={caseNumber} /> : null}
      {personnelFileId ? (
        <input type="hidden" name="personnelFileId" value={personnelFileId} />
      ) : null}

      <p className="font-condensed text-xs text-text-dim">{de.document.createTitle}</p>

      <div className="mt-3 grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="templateKey" className="font-condensed text-2xs text-text-dim">
            {de.document.kind}
          </label>
          <select
            id="templateKey"
            name="templateKey"
            required
            className="mt-1 block w-full 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-2xs text-text-dim">
            {de.clearance.classification}
          </label>
          <select
            id="classification"
            name="classification"
            defaultValue={defaultLevel}
            className="mt-1 block w-full 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>

        <div className="sm:col-span-2">
          <label htmlFor="doc-title" className="font-condensed text-2xs text-text-dim">
            {de.document.title}
          </label>
          <input
            id="doc-title"
            name="title"
            maxLength={200}
            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
          />
        </div>
      </div>

      <p className="mt-2 text-2xs text-text-dim">{de.document.createHint}</p>

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

      <div className="mt-3 flex gap-3">
        <button
          type="submit"
          disabled={pending}
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {pending ? de.common.loading : de.document.create}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {de.common.cancel}
        </button>
      </div>
    </form>
  )
}