'use client'

import { useMemo, useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import { isInputField, looksLikeFields, type TemplateField } from '@/lib/templates/fields'
import { saveTemplate } from './actions'

type Vorlage = {
  key: string
  name: string
  description: string | null
  version: number
  numberPrefix: string
  numberPadding: number
  fields: unknown
}

/**
 * Vorlagen-Editor.
 *
 * Die Bausteine werden als JSON bearbeitet. Das ist bewusst: ein
 * Baukasten-Editor mit Ziehen und Ablegen wäre eine eigene Phase, und die
 * Vorlagen ändern sich selten. Geprüft wird gegen dasselbe Schema wie
 * serverseitig, und die Vorschau zeigt sofort, was dabei herauskommt.
 *
 * Nicht optimistisch: eine neue Version wirkt auf alle künftigen Akten.
 */
export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
  const [name, setName] = useState(vorlage.name)
  const [description, setDescription] = useState(vorlage.description ?? '')
  const [numberPrefix, setNumberPrefix] = useState(vorlage.numberPrefix)
  const [numberPadding, setNumberPadding] = useState(vorlage.numberPadding)
  const [json, setJson] = useState(() => JSON.stringify(vorlage.fields, null, 2))
  const [result, setResult] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  const geparst = useMemo(() => {
    try {
      const roh = JSON.parse(json) as unknown
      // Nur eine grobe Formprüfung für die Vorschau. Ob die Vorlage
      // gespeichert werden darf, entscheidet allein der Server.
      if (!looksLikeFields(roh)) {
        return { ok: false as const, fehler: de.templateAdmin.fieldsInvalid }
      }
      return { ok: true as const, fields: roh }
    } catch {
      return { ok: false as const, fehler: de.templateAdmin.invalid }
    }
  }, [json])

  function submit() {
    if (!geparst.ok) return
    setError(null)
    setResult(null)
    startTransition(async () => {
      const antwort = await saveTemplate({
        key: vorlage.key,
        name,
        description: description || undefined,
        numberPrefix,
        numberPadding,
        fields: geparst.fields,
      })
      if (antwort.ok) setResult(de.templateAdmin.saved(antwort.version))
      else setError(antwort.error)
    })
  }

  return (
    <section className="border-b border-line py-6">
      <div className="flex flex-wrap items-baseline gap-x-3">
        <h2 className="font-condensed">{vorlage.name}</h2>
        <span className="font-mono text-2xs text-text-dim">{vorlage.key}</span>
        <span className="font-condensed text-2xs text-text-dim">
          {de.templateAdmin.version(vorlage.version)}
        </span>
      </div>

      <div className="mt-4 grid gap-4 lg:grid-cols-2">
        <div className="space-y-3 text-xs">
          <label className="block">
            <span className="font-condensed text-text-dim">{de.case.title}</span>
            <input
              value={name}
              onChange={(event) => setName(event.target.value)}
              className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
            />
          </label>

          <label className="block">
            <span className="font-condensed text-text-dim">{de.case.type}</span>
            <input
              value={description}
              onChange={(event) => setDescription(event.target.value)}
              className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
            />
          </label>

          <div className="flex gap-3">
            <label className="block">
              <span className="font-condensed text-text-dim">{de.templateAdmin.numberPrefix}</span>
              <input
                value={numberPrefix}
                onChange={(event) => setNumberPrefix(event.target.value)}
                className="mt-1 block w-32 border border-line bg-raised px-2 py-1 font-mono text-sm"
              />
            </label>
            <label className="block">
              <span className="font-condensed text-text-dim">{de.templateAdmin.numberPadding}</span>
              <input
                type="number"
                min={1}
                max={8}
                value={numberPadding}
                onChange={(event) => setNumberPadding(Number(event.target.value))}
                className="mt-1 block w-20 border border-line bg-raised px-2 py-1 font-mono text-sm"
              />
            </label>
          </div>

          <label className="block">
            <span className="font-condensed text-text-dim">{de.templateAdmin.fieldsLabel}</span>
            <textarea
              value={json}
              onChange={(event) => setJson(event.target.value)}
              rows={16}
              spellCheck={false}
              className="mt-1 block w-full border border-line bg-raised px-2 py-1 font-mono text-2xs"
            />
            <span className="mt-1 block text-2xs text-text-dim">{de.templateAdmin.fieldsHelp}</span>
          </label>

          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={submit}
              disabled={pending || !geparst.ok}
              className="border border-line bg-raised px-3 py-1.5 font-condensed text-accent disabled:text-text-dim"
            >
              {pending ? de.case.saving : de.templateAdmin.save}
            </button>
            {result ? <span className="font-condensed text-2xs text-text-dim">{result}</span> : null}
            {!geparst.ok ? (
              <span className="font-condensed text-2xs text-stamp-4">{geparst.fehler}</span>
            ) : null}
            {error ? <span className="font-condensed text-2xs text-stamp-4">{error}</span> : null}
          </div>
        </div>

        <div className="border border-line p-4">
          <p className="font-condensed text-xs text-text-dim">{de.templateAdmin.preview}</p>
          <p className="mt-1 text-2xs text-text-dim">{de.templateAdmin.previewIntro}</p>
          <div className="mt-4">
            {geparst.ok ? <Vorschau fields={geparst.fields} /> : null}
          </div>
        </div>
      </div>
    </section>
  )
}

/** „So sieht eine neue Akte damit aus", ohne etwas zu speichern. */
function Vorschau({ fields }: { fields: TemplateField[] }) {
  if (fields.length === 0) return <p className="text-2xs text-text-dim">{de.section.empty}</p>

  return (
    <dl className="space-y-4">
      {fields.map((field) => (
        <div key={field.key}>
          <dt className="flex flex-wrap items-baseline gap-x-2">
            <span className="font-condensed text-2xs text-text-dim">{field.label}</span>
            <span className="font-mono text-2xs text-text-dim">{field.type}</span>
            {field.minClearance ? (
              <span className="font-mono text-2xs text-stamp-3">≥ {field.minClearance}</span>
            ) : null}
            {isInputField(field) && field.requiredToClose ? (
              <span className="font-condensed text-2xs text-stamp-3">
                {de.section.requiredToClose}
              </span>
            ) : null}
          </dt>
          <dd className="mt-1">
            {!isInputField(field) ? (
              <p className="text-2xs text-text-dim italic">
                {field.text ? field.text.slice(0, 120) : de.templateAdmin.staticBlock}
              </p>
            ) : field.type === 'longtext' ? (
              <div className="h-12 border border-line bg-raised" />
            ) : field.type === 'select' || field.type === 'multiselect' ? (
              <p className="text-2xs text-text-dim">{(field.options ?? []).join(' · ')}</p>
            ) : (
              <div className="h-6 w-48 border border-line bg-raised" />
            )}
          </dd>
        </div>
      ))}
    </dl>
  )
}