'use client'

import { useActionState, useEffect, useState } from 'react'
import { exportText } from '@/lib/i18n/export'
import { useStream } from '@/components/realtime/useStream'
import { requestExportAction, type ExportState } from '@/app/(app)/export/actions'

/**
 * Export anfordern und auf das Ergebnis warten.
 *
 * Kein Fortschrittsbalken, der eine Zahl erfindet: der Auftrag hat drei
 * Zustände, und die stehen da. Fertig meldet der Ereignisstrom, dann steht
 * der Knopf zum Herunterladen bereit - automatisch losladen wäre unhöflich,
 * wenn jemand die Seite inzwischen wieder verlassen hat und zurückkommt.
 */
export type ExportPanelTarget =
  | { kind: 'CASE'; caseNumber: string }
  | { kind: 'DOCUMENT'; documentNumber: string }
  | { kind: 'PERSONNEL'; personnelFileId: string }
  | { kind: 'DEPARTMENT'; departmentKey: string }

export function ExportPanel({
  target,
  topic,
  levels,
  defaultLevel,
}: {
  target: ExportPanelTarget
  /** Eigenes Nutzerthema: der Export geht nur den Auftraggeber an. */
  topic: string
  /**
   * Wählbare Höchststufen. Nur beim Dossier gesetzt - eine einzelne Akte hat
   * genau eine Stufe, da gäbe es nichts zu wählen.
   */
  levels?: { level: number; name: string }[]
  defaultLevel?: number
}) {
  const [state, action, pending] = useActionState<ExportState | null, FormData>(
    requestExportAction,
    null,
  )
  const [fertig, setFertig] = useState<string | null>(null)
  const [gescheitert, setGescheitert] = useState(false)

  useStream([topic], {
    'export.ready': (data) => {
      const ereignis = data as { id: string }
      if (state?.jobId && ereignis.id !== state.jobId) return
      setFertig(ereignis.id)
    },
  })

  // Nach der Freigabe eines wartenden Auftrags kommt das Ereignis später; bis
  // dahin bleibt der Hinweis stehen.
  useEffect(() => {
    if (state?.status === 'READY' && state.jobId) setFertig(state.jobId)
    if (state?.status === 'FAILED') setGescheitert(true)
  }, [state])

  const wartetAufFreigabe = state?.status === 'PENDING_APPROVAL'

  return (
    <div className="border border-line p-4">
      <form action={action}>
        <input type="hidden" name="kind" value={target.kind} />
        {target.kind === 'CASE' ? (
          <input type="hidden" name="caseNumber" value={target.caseNumber} />
        ) : target.kind === 'DOCUMENT' ? (
          <input type="hidden" name="documentNumber" value={target.documentNumber} />
        ) : target.kind === 'PERSONNEL' ? (
          <input type="hidden" name="personnelFileId" value={target.personnelFileId} />
        ) : (
          <input type="hidden" name="departmentKey" value={target.departmentKey} />
        )}

        {levels ? (
          <div className="mb-4">
            <label htmlFor="maxLevel" className="field-label">
              {exportText.maxLevel}
            </label>
            <select
              id="maxLevel"
              name="maxLevel"
              defaultValue={defaultLevel ?? levels[levels.length - 1]?.level ?? 0}
              className="field"
            >
              {levels.map((stufe) => (
                <option key={stufe.level} value={stufe.level}>
                  {stufe.level} · {stufe.name}
                </option>
              ))}
            </select>
            <p className="field-hint">{exportText.maxLevelHint}</p>
          </div>
        ) : null}

        <button
          type="submit"
          disabled={pending || Boolean(state?.jobId)}
          className="btn btn-sm btn-primary"
        >
          {pending ? exportText.preparing : exportText.asPdf}
        </button>
      </form>

      <div className="mt-3 text-2xs">
        {state?.error ? <p className="text-stamp-4">{state.error}</p> : null}

        {wartetAufFreigabe ? (
          <div>
            <p className="font-condensed text-stamp-3">{exportText.waitingApproval}</p>
            <p className="mt-1 text-text-dim">{exportText.waitingApprovalHint}</p>
          </div>
        ) : null}

        {state?.jobId && !fertig && !wartetAufFreigabe && !gescheitert ? (
          <p className="text-text-dim">{exportText.preparing}</p>
        ) : null}

        {gescheitert ? <p className="text-stamp-4">{exportText.failed}</p> : null}

        {fertig ? (
          <a
            href={`/api/exports/${fertig}`}
            className="border border-line bg-raised px-3 py-1 font-condensed text-accent"
          >
            {exportText.download}
          </a>
        ) : null}
      </div>
    </div>
  )
}