"use client";

import { useActionState, useEffect, useRef, useState } from "react";
import { createConventionAction } from "@/lib/actions/conventions";

export function NewConventionForm() {
  const [state, formAction, pending] = useActionState(createConventionAction, {});
  const formRef = useRef<HTMLFormElement>(null);
  const wasPending = useRef(false);
  const [preview, setPreview] = useState<string | null>(null);
  const [logoPreview, setLogoPreview] = useState<string | null>(null);

  useEffect(() => {
    return () => {
      if (preview) URL.revokeObjectURL(preview);
    };
  }, [preview]);

  useEffect(() => {
    return () => {
      if (logoPreview) URL.revokeObjectURL(logoPreview);
    };
  }, [logoPreview]);

  // Nach erfolgreichem Anlegen Formular + Vorschau zurücksetzen.
  useEffect(() => {
    if (wasPending.current && !pending && !state.error) {
      formRef.current?.reset();
      setPreview((url) => {
        if (url) URL.revokeObjectURL(url);
        return null;
      });
      setLogoPreview((url) => {
        if (url) URL.revokeObjectURL(url);
        return null;
      });
    }
    wasPending.current = pending;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pending, state.error]);

  function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    setPreview((url) => {
      if (url) URL.revokeObjectURL(url);
      const file = e.target.files?.[0];
      return file ? URL.createObjectURL(file) : null;
    });
  }

  function onLogoChange(e: React.ChangeEvent<HTMLInputElement>) {
    setLogoPreview((url) => {
      if (url) URL.revokeObjectURL(url);
      const file = e.target.files?.[0];
      return file ? URL.createObjectURL(file) : null;
    });
  }

  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"
    >
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="name"
          placeholder="Name, z. B. DoKomi 2026"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="location"
          placeholder="Ort"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <label className="flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Start</span>
          <input
            name="startDate"
            type="date"
            required
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Ende (optional, sonst wie Start)</span>
          <input
            name="endDate"
            type="date"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
      </div>
      <input
        name="infoUrl"
        placeholder="Link zur Convention-Website (optional)"
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <input
        name="notes"
        placeholder="Hinweis (optional, z. B. Nur Samstag verfügbar)"
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Foto (optional) — Hintergrund der „nächste Convention"-Karte auf der öffentlichen Seite
        </span>
        <input
          name="image"
          type="file"
          accept="image/jpeg,image/png,image/webp"
          onChange={onFileChange}
          className="text-sm"
        />
      </label>
      {preview && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={preview} alt="" className="h-32 w-full max-w-md rounded-lg border border-white/15 object-cover" />
      )}
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Logo (optional) — wird über der freien Fläche der Foto-Karte eingeblendet; darf länglich sein, Transparenz bleibt erhalten
        </span>
        <input
          name="logo"
          type="file"
          accept="image/jpeg,image/png,image/webp,image/svg+xml"
          onChange={onLogoChange}
          className="text-sm"
        />
      </label>
      {logoPreview && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={logoPreview}
          alt=""
          className="h-20 w-auto max-w-[16rem] rounded-lg border border-white/15 bg-[var(--rk-bg)] object-contain p-2"
        />
      )}
      <div className="flex flex-wrap gap-4">
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" name="slotsAvailable" defaultChecked className="h-3.5 w-3.5" />
          Slots frei (sonst Warteliste)
        </label>
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" name="visible" defaultChecked className="h-3.5 w-3.5" />
          Sofort sichtbar
        </label>
      </div>
      <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"
      >
        Convention anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}