Wabenhain/src/components/admin-video-field.tsx

"use client";

import { useRef, useState, type ChangeEvent } from "react";
import { useI18n } from "@/i18n/i18n-provider";

interface AdminVideoFieldProps {
  /** Formularfeld-Name, unter dem der aktuelle Videopfad beim Speichern des
   * umgebenden <form> mitgeschickt wird (siehe admin/actions/content.ts). */
  name: string;
  label: string;
  initialValue: string;
}

/**
 * Video-Upload-Feld fuer admin/inhalte (Content-Registry-Feldtyp "video",
 * aktuell nur home.hero.video). Analog zu AdminImageField: laedt die Datei
 * sofort per fetch() an app/api/admin/upload-video hoch und haelt den
 * zurueckgegebenen Pfad in einem versteckten Formularfeld — das eigentliche
 * Speichern passiert weiterhin ueber das umgebende
 * <form action={updateSiteContentAction}>.
 */
export function AdminVideoField({ name, label, initialValue }: AdminVideoFieldProps) {
  const { t } = useI18n();
  const [value, setValue] = useState(initialValue);
  const [status, setStatus] = useState<"idle" | "uploading" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  async function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    setStatus("uploading");
    setErrorMessage("");
    try {
      const body = new FormData();
      body.append("file", file);
      const response = await fetch("/api/admin/upload-video", { method: "POST", body });
      const data: { path?: string; error?: string } = await response.json();
      if (!response.ok || !data.path) {
        throw new Error(data.error ?? t.adminVideoField.uploadError);
      }
      setValue(data.path);
      setStatus("idle");
    } catch (error: unknown) {
      setStatus("error");
      setErrorMessage(error instanceof Error ? error.message : t.adminVideoField.uploadError);
    } finally {
      if (inputRef.current) inputRef.current.value = "";
    }
  }

  return (
    <div>
      <span className="text-sm text-ink/70">{label}</span>
      <input type="hidden" name={name} value={value} />
      <div className="mt-2 flex items-center gap-4">
        {value ? (
          <video src={value} className="h-20 w-32 object-cover border border-ink/10" muted loop autoPlay playsInline />
        ) : (
          <div className="h-20 w-32 border border-dashed border-ink/20 flex items-center justify-center text-center text-[10px] text-ink/40 px-1">
            {t.adminVideoField.none}
          </div>
        )}
        <div>
          <input
            ref={inputRef}
            type="file"
            accept="video/mp4,video/webm"
            onChange={handleFileChange}
            disabled={status === "uploading"}
            className="hidden"
          />
          <button
            type="button"
            onClick={() => inputRef.current?.click()}
            disabled={status === "uploading"}
            className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
          >
            {t.adminVideoField.chooseFile}
          </button>
          {status === "uploading" ? (
            <p className="mt-1 text-xs text-ink/70">{t.adminVideoField.uploading}</p>
          ) : null}
          {status === "error" ? <p className="mt-1 text-xs text-red-700">{errorMessage}</p> : null}
          {value ? (
            <button
              type="button"
              onClick={() => setValue("")}
              className="mt-1 text-xs text-ink/70 underline"
            >
              {t.adminVideoField.remove}
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
}