"use client";

import { useActionState, useEffect, useRef, useState } from "react";
import { createPortfolioItemAction } from "@/lib/actions/portfolio";
import { toDatetimeLocal } from "@/lib/datetimeLocal";
import { TagInput } from "@/components/admin/TagInput";

export function NewPortfolioItemForm({ categories }: { categories: { id: string; name: string }[] }) {
  const [state, formAction, pending] = useActionState(createPortfolioItemAction, {});
  const formRef = useRef<HTMLFormElement>(null);
  const wasPending = useRef(false);

  const [previews, setPreviews] = useState<string[]>([]);
  const [coverIndex, setCoverIndex] = useState(0);
  const [publishedAt, setPublishedAt] = useState("");
  useEffect(() => setPublishedAt(toDatetimeLocal(new Date())), []);
  const scheduled = publishedAt !== "" && new Date(publishedAt).getTime() > Date.now();

  // Objekt-URLs sind nur im Browser-Speicher gültig — beim Verlassen/
  // Neuauswählen wieder freigeben, sonst sammeln sich pro Auswahl neue an.
  useEffect(() => {
    return () => previews.forEach((url) => URL.revokeObjectURL(url));
  }, [previews]);

  // Formular + Vorschau nach erfolgreichem Anlegen zurücksetzen (der Datei-
  // Input lässt sich nicht per React-State leeren, nur per echtem Reset).
  useEffect(() => {
    if (wasPending.current && !pending && !state.error) {
      formRef.current?.reset();
      previews.forEach((url) => URL.revokeObjectURL(url));
      setPreviews([]);
      setCoverIndex(0);
      setPublishedAt(toDatetimeLocal(new Date()));
    }
    wasPending.current = pending;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pending, state.error]);

  function onFilesChange(e: React.ChangeEvent<HTMLInputElement>) {
    previews.forEach((url) => URL.revokeObjectURL(url));
    const files = Array.from(e.target.files ?? []);
    setPreviews(files.map((f) => URL.createObjectURL(f)));
    setCoverIndex(0);
  }

  return (
    <form
      ref={formRef}
      action={formAction}
      encType="multipart/form-data"
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8"
    >
      <input type="hidden" name="coverIndex" value={coverIndex} />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="title"
          placeholder="Titel, z. B. 🩵 MaoMao — The Apothecary Diaries"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <select
          name="category"
          defaultValue={categories[0]?.name ?? ""}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        >
          {categories.length === 0 && <option value="">Erst oben eine Kategorie anlegen</option>}
          {categories.map((c) => (
            <option key={c.id} value={c.name}>
              {c.name}
            </option>
          ))}
        </select>
      </div>
      <textarea
        name="description"
        placeholder="Beschreibung (optional)"
        rows={3}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="eventLabel"
          placeholder="Event (optional, z. B. DoKomi 2026)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="modelInstagram"
          placeholder="Model-Instagram(s), Komma-getrennt (optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <TagInput name="tags" placeholder="Tag eingeben, dann Enter (optional)" />
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Bilder (mind. 1, mehrere möglich)</span>
        <input
          name="images"
          type="file"
          accept="image/jpeg,image/png,image/webp"
          multiple
          required
          onChange={onFilesChange}
          className="text-sm"
        />
      </label>
      {previews.length > 0 && (
        <div className="flex flex-col gap-1.5">
          <div className="flex flex-wrap gap-2">
            {previews.map((src, i) => (
              // eslint-disable-next-line @next/next/no-img-element
              <button
                key={src}
                type="button"
                onClick={() => setCoverIndex(i)}
                title="Als Vorschaubild festlegen"
                className={`rounded-lg overflow-hidden border ${i === coverIndex ? "border-white ring-2 ring-white" : "border-white/15"}`}
              >
                <img src={src} alt="" width={64} height={64} className="w-16 h-16 object-cover" />
              </button>
            ))}
          </div>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            Anklicken legt das Vorschaubild fest (weiß umrandet) — wird überall als Titelbild gezeigt.
          </p>
        </div>
      )}
      <label className="flex flex-col gap-1.5 text-sm sm:max-w-xs">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Veröffentlichen am</span>
        <input
          name="publishedAt"
          type="datetime-local"
          value={publishedAt}
          onChange={(e) => setPublishedAt(e.target.value)}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 [color-scheme:dark]"
        />
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="visible" defaultChecked className="h-3.5 w-3.5" />
        Freigeben
      </label>
      <p className="-mt-1 text-xs text-[var(--rk-ink-muted)]">
        {scheduled
          ? "Freigegeben + Datum in der Zukunft = geplant. Der Beitrag erscheint automatisch zum gewählten Zeitpunkt im öffentlichen Portfolio."
          : "Freigegeben = sofort im öffentlichen Portfolio. Für einen geplanten Beitrag ein Datum in der Zukunft wählen. Ohne Häkchen bleibt er verborgen."}
      </p>
      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Beitrag anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}