"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { updateFaqItemAction, deleteFaqItemAction, setFaqVisibleAction, moveFaqItemAction } from "@/lib/actions/faq";
import { categoryBadgeStyle } from "@/lib/colorHash";

export function FaqItemRow({
  item,
}: {
  item: {
    id: string;
    question: string;
    questionEn: string;
    answer: string;
    answerEn: string;
    category: string;
    categoryEn: string;
    visible: boolean;
  };
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

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

  const badge = categoryBadgeStyle(item.category);

  return (
    <details className={`bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 transition-opacity ${item.visible ? "" : "opacity-60"}`}>
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="min-w-0 flex items-center gap-3">
          <span
            className="shrink-0 text-[0.65rem] uppercase tracking-[0.08em] border rounded-full px-2 py-0.5"
            style={{ borderColor: badge.borderColor, color: badge.color }}
          >
            {item.category || "—"}
          </span>
          <div className="min-w-0">
            <p className="text-sm truncate">{item.question}</p>
            <p className="text-xs text-[var(--rk-ink-muted)]">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 moveFaqItemAction(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 moveFaqItemAction(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">
            <input
              type="checkbox"
              checked={item.visible}
              disabled={pending}
              onChange={(e) => startTransition(async () => { await setFaqVisibleAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Sichtbar
          </label>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm("Diese Frage wirklich löschen?")) {
                startTransition(async () => {
                  await deleteFaqItemAction(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>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          submit(e.currentTarget);
        }}
        className="mt-4 flex flex-col gap-3"
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <input
            name="question"
            defaultValue={item.question}
            placeholder="Frage (Deutsch)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <input
            name="category"
            defaultValue={item.category}
            placeholder="Kategorie"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
        <textarea
          name="answer"
          defaultValue={item.answer}
          placeholder="Antwort (Deutsch)"
          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"
        />
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <input
            name="questionEn"
            defaultValue={item.questionEn}
            placeholder="Frage (Englisch, 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="categoryEn"
            defaultValue={item.categoryEn}
            placeholder="Kategorie (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>
        <textarea
          name="answerEn"
          defaultValue={item.answerEn}
          placeholder="Antwort (Englisch, optional)"
          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"
        />
        <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>
  );
}