"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import {
  updatePortfolioItemAction,
  deletePortfolioItemAction,
  setFeaturedAction,
  setVisibleAction,
  movePortfolioItemAction,
} from "@/lib/actions/portfolio";
import { toDatetimeLocal } from "@/lib/datetimeLocal";
import { TagInput } from "@/components/admin/TagInput";

export function PortfolioItemRow({
  item,
  featuredCount,
  categories,
}: {
  item: {
    id: string;
    title: string;
    titleEn: string;
    category: string;
    images: string[];
    coverImage: string;
    description: string;
    descriptionEn: string;
    eventLabel: string;
    modelInstagram: string[];
    tags: string[];
    visible: boolean;
    featured: boolean;
    publishedAt: string;
  };
  featuredCount: number;
  categories: { id: string; name: string }[];
}) {
  const [pending, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const coverImage = item.coverImage || item.images[0];
  const scheduled = new Date(item.publishedAt).getTime() > Date.now();

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      await updatePortfolioItemAction(item.id, data);
      router.refresh();
    });
  }

  const featuredCapped = !item.featured && featuredCount >= 3;

  return (
    <details
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5"
      onToggle={(e) => setOpen(e.currentTarget.open)}
    >
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="flex items-center gap-3 min-w-0">
          {coverImage && (
            <Image
              src={coverImage}
              alt=""
              width={48}
              height={48}
              className="rounded-lg object-cover border border-white/15 shrink-0"
            />
          )}
          <div className="min-w-0">
            <p className="flex items-center gap-2 text-sm truncate">
              {item.title}
              {scheduled && item.visible && (
                <span className="shrink-0 rounded-full border border-[var(--rk-accent)]/40 px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.08em] text-[var(--rk-accent)]">
                  ⏳ Geplant
                </span>
              )}
            </p>
            <p className="text-xs text-[var(--rk-ink-muted)]">
              {scheduled &&
                `geplant für ${new Date(item.publishedAt).toLocaleString("de-DE", {
                  day: "2-digit",
                  month: "2-digit",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })} · `}
              {item.category} · {item.images.length} Bild{item.images.length !== 1 ? "er" : ""} · Bearbeiten ▾
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3 shrink-0" onClick={(e) => e.stopPropagation()}>
          <div className="flex flex-col gap-0.5">
            <button
              disabled={pending}
              onClick={() => startTransition(async () => { await movePortfolioItemAction(item.id, "up"); router.refresh(); })}
              className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-50"
              title="Nach oben"
            >
              ▲
            </button>
            <button
              disabled={pending}
              onClick={() => startTransition(async () => { await movePortfolioItemAction(item.id, "down"); router.refresh(); })}
              className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-50"
              title="Nach unten"
            >
              ▼
            </button>
          </div>
          <label className={`flex items-center gap-1.5 text-xs ${featuredCapped ? "opacity-40" : ""}`}>
            <input
              type="checkbox"
              checked={item.featured}
              disabled={pending || featuredCapped}
              onChange={(e) => startTransition(async () => { await setFeaturedAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Featured
          </label>
          <label className="flex items-center gap-1.5 text-xs">
            <input
              type="checkbox"
              checked={item.visible}
              disabled={pending}
              onChange={(e) => startTransition(async () => { await setVisibleAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Sichtbar
          </label>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm(`Beitrag „${item.title}" wirklich löschen?`)) {
                startTransition(async () => {
                  await deletePortfolioItemAction(item.id);
                  router.refresh();
                });
              }
            }}
            className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
          >
            Löschen
          </button>
        </div>
      </summary>

      {open && (
      <form
        onSubmit={(e) => {
          e.preventDefault();
          submit(e.currentTarget);
        }}
        className="mt-4 flex flex-col gap-3"
      >
        <input type="hidden" name="visible" value={item.visible ? "on" : "off"} />
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <input
            name="title"
            defaultValue={item.title}
            placeholder="Titel"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <input
            name="titleEn"
            defaultValue={item.titleEn}
            placeholder="Titel (Englisch, optional)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
        <select
          name="category"
          defaultValue={item.category}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        >
          {/* Falls der Beitrag noch eine Kategorie trägt, deren Verwaltungs-
              Eintrag inzwischen gelöscht wurde, bleibt sie hier trotzdem als
              Option erhalten, statt beim Speichern unbemerkt zu wechseln. */}
          {!categories.some((c) => c.name === item.category) && item.category && (
            <option value={item.category}>{item.category} (gelöscht)</option>
          )}
          {categories.map((c) => (
            <option key={c.id} value={c.name}>
              {c.name}
            </option>
          ))}
        </select>
        <textarea
          name="description"
          defaultValue={item.description}
          placeholder="Beschreibung"
          rows={4}
          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"
        />
        <textarea
          name="descriptionEn"
          defaultValue={item.descriptionEn}
          placeholder="Beschreibung (Englisch, 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"
            defaultValue={item.eventLabel}
            placeholder="Event"
            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"
            defaultValue={item.modelInstagram.join(", ")}
            placeholder="Model-Instagram(s), Komma-getrennt"
            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" defaultValue={item.tags.join(", ")} placeholder="Tag eingeben, dann Enter" />

        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
            Veröffentlichen am <span className="normal-case tracking-normal">(Zukunft = geplant, erscheint automatisch)</span>
          </span>
          <input
            name="publishedAt"
            type="datetime-local"
            defaultValue={toDatetimeLocal(item.publishedAt)}
            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] sm:self-start"
          />
        </label>

        <div className="flex flex-col gap-2 border-t border-white/10 pt-3">
          <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Bilder</p>
          <div className="flex flex-wrap gap-2">
            {item.images.map((img) => (
              <div key={img} className="relative">
                <Image
                  src={img}
                  alt=""
                  width={64}
                  height={64}
                  className={`rounded-lg object-cover border ${img === coverImage ? "border-white" : "border-white/15"}`}
                />
                <label
                  className="absolute -top-1.5 -right-1.5 bg-[var(--rk-bg)] border border-white/20 rounded-full flex items-center justify-center w-5 h-5 cursor-pointer"
                  title="Entfernen"
                >
                  <input type="checkbox" name="removeImages" value={img} className="h-3 w-3" />
                </label>
                <label
                  className="absolute -bottom-1.5 -left-1.5 bg-[var(--rk-bg)] border border-white/20 rounded-full flex items-center justify-center w-5 h-5 cursor-pointer"
                  title="Als Vorschaubild festlegen"
                >
                  <input type="radio" name="coverImage" value={img} defaultChecked={img === coverImage} className="h-3 w-3" />
                </label>
              </div>
            ))}
          </div>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            ✕ oben rechts entfernt ein Bild, ○ unten links legt das Vorschaubild fest (weiß umrandet — wird überall als
            Titelbild gezeigt, z. B. in der Übersicht und als „Featured" auf der Startseite). Neue Bilder hinzufügen:
          </p>
          <input name="newImages" type="file" accept="image/jpeg,image/png,image/webp" multiple className="text-sm" />
        </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"
        >
          Speichern
        </button>
      </form>
      )}
    </details>
  );
}