qrcode-generator/src/components/qr-forms/pdf-form.tsx

"use client";

import { Icon } from "@/components/icons";
import { FileField } from "@/components/qr-forms/file-field";
import type { QrFormProps } from "@/components/qr-forms/types";
import { Field, TextArea, TextInput } from "@/components/ui";
import { formatBytes } from "@/lib/uploads.shared";

export function PdfForm({ value, onChange, error, disabled }: QrFormProps) {
  const fileId = typeof value.fileId === "string" ? value.fileId : "";
  const filename = typeof value.filename === "string" ? value.filename : "";
  const size = typeof value.size === "number" ? value.size : 0;
  const title = typeof value.title === "string" ? value.title : "";
  const description =
    typeof value.description === "string" ? value.description : "";

  return (
    <div className="space-y-5">
      <div>
        <span className="mb-1.5 block text-sm font-medium text-slate-700">
          PDF-Datei
        </span>

        {fileId ? (
          <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
            <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-red-50 text-red-600">
              <Icon name="document" className="size-5" />
            </span>
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-medium text-slate-900">
                {filename || "Dokument"}
              </p>
              <p className="text-xs text-slate-500">
                {size > 0 ? formatBytes(size) : "PDF"}
              </p>
            </div>
            <button
              type="button"
              disabled={disabled}
              onClick={() =>
                onChange({ ...value, fileId: "", filename: "", size: 0 })
              }
              aria-label="Datei entfernen"
              className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:opacity-40"
            >
              <Icon name="trash" className="size-4" />
            </button>
          </div>
        ) : (
          <FileField
            kind="pdf"
            label="PDF auswählen"
            disabled={disabled}
            onUploaded={(file) =>
              onChange({
                ...value,
                fileId: file.fileId,
                filename: file.filename,
                size: file.size,
              })
            }
          />
        )}

        {error ? (
          <p role="alert" className="mt-2 text-sm text-red-600">
            {error}
          </p>
        ) : (
          <p className="mt-2 text-sm text-slate-500">
            Die Datei liegt anschließend hier und ist über den Code erreichbar.
            Sie lässt sich jederzeit austauschen, ohne den Code neu zu drucken.
          </p>
        )}
      </div>

      <Field
        label="Titel (optional)"
        htmlFor="pdf-title"
        hint="Steht über dem Dokument. Ohne Angabe gilt der Dateiname."
      >
        <TextInput
          id="pdf-title"
          value={title}
          disabled={disabled}
          maxLength={80}
          placeholder="Preisliste 2026"
          onChange={(event) => onChange({ ...value, title: event.target.value })}
        />
      </Field>

      <Field
        label="Kurzer Text (optional)"
        htmlFor="pdf-description"
        hint="Eine Zeile zur Einordnung."
      >
        <TextArea
          id="pdf-description"
          rows={2}
          value={description}
          disabled={disabled}
          maxLength={300}
          onChange={(event) =>
            onChange({ ...value, description: event.target.value })
          }
        />
      </Field>
    </div>
  );
}