'use client'

import { useState, useTransition } from 'react'
import { settingsText } from '@/lib/i18n/admin'
import { caseText } from '@/lib/i18n/cases'
import { savePolicy } from './actions'

const POLICIES = ['APPEND_ONLY', 'GRACE_WINDOW', 'OPEN'] as const

/**
 * Nicht optimistisch: die Richtlinie wirkt sofort für alle Akten.
 * Bestätigungsdialog, Wartezustand am Knopf, klare Rückmeldung.
 * Siehe docs/09-performance-und-ux.md.
 */
export function PolicyForm({
  initial,
}: {
  initial: { entryEditPolicy: string; entryEditGraceMinutes: number; entryEditMarkGrace: boolean }
}) {
  const [policy, setPolicy] = useState(initial.entryEditPolicy)
  const [grace, setGrace] = useState(initial.entryEditGraceMinutes)
  const [mark, setMark] = useState(initial.entryEditMarkGrace)
  const [saved, setSaved] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  function submit() {
    if (!confirm(settingsText.confirm)) return
    setError(null)
    startTransition(async () => {
      const result = await savePolicy({
        entryEditPolicy: policy,
        entryEditGraceMinutes: grace,
        entryEditMarkGrace: mark,
      })
      if (result.ok) setSaved(true)
      else setError(result.error)
    })
  }

  return (
    <div className="mt-6 space-y-6">
      <fieldset>
        <legend className="font-condensed text-xs text-text-dim">{settingsText.policy}</legend>
        <div className="mt-2 space-y-2">
          {POLICIES.map((value) => (
            <label key={value} className="flex items-start gap-2 text-sm">
              <input
                type="radio"
                name="policy"
                value={value}
                checked={policy === value}
                onChange={() => {
                  setPolicy(value)
                  setSaved(false)
                }}
                className="mt-1"
              />
              <span>{settingsText.policies[value]}</span>
            </label>
          ))}
        </div>
      </fieldset>

      <label className="block">
        <span className="font-condensed text-xs text-text-dim">{settingsText.graceMinutes}</span>
        <input
          type="number"
          min={0}
          max={1440}
          value={grace}
          disabled={policy !== 'GRACE_WINDOW'}
          onChange={(event) => {
            setGrace(Number(event.target.value))
            setSaved(false)
          }}
          className="mt-1.5 block w-24 field font-mono disabled:text-text-dim"
        />
      </label>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={mark}
          onChange={(event) => {
            setMark(event.target.checked)
            setSaved(false)
          }}
        />
        <span>{settingsText.markGrace}</span>
      </label>

      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={submit}
          disabled={pending}
          className="btn btn-primary"
        >
          {pending ? caseText.saving : settingsText.save}
        </button>
        {saved ? (
          <span className="font-condensed text-2xs text-text-dim">{settingsText.saved}</span>
        ) : null}
        {error ? <span className="font-condensed text-2xs text-stamp-4">{error}</span> : null}
      </div>
    </div>
  )
}