"use client";

import { useActionState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  createPortfolioCategoryAction,
  renamePortfolioCategoryAction,
  deletePortfolioCategoryAction,
  movePortfolioCategoryAction,
} from "@/lib/actions/portfolio";
import { RenameField } from "@/components/admin/RenameField";
import { DeleteEntityButton } from "@/components/admin/DeleteEntityButton";

type Category = { id: string; name: string };

export function PortfolioCategoryPanel({
  categories,
  canEdit,
  canDelete,
}: {
  categories: Category[];
  canEdit: boolean;
  canDelete: boolean;
}) {
  const [state, formAction, pending] = useActionState(createPortfolioCategoryAction, {});
  const [rowPending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 mb-8">
      <p className="text-sm font-medium">Kategorien</p>
      <p className="text-xs text-[var(--rk-ink-muted)] mt-1 mb-4">
        Steht beim Anlegen/Bearbeiten eines Beitrags als Auswahlliste zur Verfügung. Die Reihenfolge hier bestimmt
        auch die Reihenfolge der Filter-Buttons auf der öffentlichen Portfolio-Seite.
      </p>

      {canEdit && (
        <form action={formAction} className="flex flex-wrap gap-2 items-center mb-4">
          <input
            name="name"
            placeholder="z. B. Portrait"
            required
            className="flex-1 min-w-[12rem] bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <button
            type="submit"
            disabled={pending}
            className="text-xs border border-white/30 rounded-lg px-4 py-2 hover:border-white disabled:opacity-50"
          >
            Hinzufügen
          </button>
        </form>
      )}
      {state.error && <p className="text-xs text-red-400 mb-3">{state.error}</p>}

      <div className="flex flex-wrap gap-2">
        {categories.map((cat, i) => (
          <div key={cat.id} className="flex items-center gap-1.5 border border-white/10 rounded-full pl-3 pr-1.5 py-1">
            {canEdit ? (
              <RenameField id={cat.id} name={cat.name} action={renamePortfolioCategoryAction} textClassName="text-xs" />
            ) : (
              <span className="text-xs">{cat.name}</span>
            )}
            {canEdit && (
              <>
                <button
                  type="button"
                  disabled={rowPending || i === 0}
                  onClick={() => startTransition(async () => { await movePortfolioCategoryAction(cat.id, "up"); router.refresh(); })}
                  className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30 px-0.5"
                  title="Nach oben"
                >
                  ↑
                </button>
                <button
                  type="button"
                  disabled={rowPending || i === categories.length - 1}
                  onClick={() => startTransition(async () => { await movePortfolioCategoryAction(cat.id, "down"); router.refresh(); })}
                  className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30 px-0.5"
                  title="Nach unten"
                >
                  ↓
                </button>
              </>
            )}
            {canDelete && (
              <DeleteEntityButton
                id={cat.id}
                action={deletePortfolioCategoryAction}
                confirmMessage={`Kategorie „${cat.name}" löschen? Bestehende Beiträge behalten sie als Text, sie verschwindet nur aus dieser Liste.`}
              />
            )}
          </div>
        ))}
        {categories.length === 0 && <p className="text-xs text-[var(--rk-ink-muted)]">Noch keine Kategorien angelegt.</p>}
      </div>
    </div>
  );
}