"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  updateQuickReviewAction,
  deleteQuickReviewAction,
  setQuickReviewVisibleAction,
  moveQuickReviewAction,
} from "@/lib/actions/quickReviews";
import { shortDisplayName } from "@/lib/formatName";

export function QuickReviewRow({
  item,
}: {
  item: { id: string; authorName: string; rating: number; visible: boolean };
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

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

  return (
    <details className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5">
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="flex items-center gap-3 min-w-0">
          <div className="w-10 h-10 rounded-full border border-white/15 bg-white/5 flex items-center justify-center text-xs shrink-0" style={{ color: "#f5c518" }}>
            {item.rating}★
          </div>
          <div className="min-w-0">
            <p className="text-sm truncate">{item.authorName}</p>
            <p className="text-xs text-[var(--rk-ink-muted)] truncate">
              Erscheint als „{shortDisplayName(item.authorName)}" · 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 moveQuickReviewAction(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 moveQuickReviewAction(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 setQuickReviewVisibleAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Sichtbar
          </label>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm(`Kurzbewertung von „${item.authorName}" wirklich löschen?`)) {
                startTransition(async () => { await deleteQuickReviewAction(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"
      >
        <input
          name="authorName"
          defaultValue={item.authorName}
          placeholder="Voller Name"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <div>
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-1.5">Sternebewertung</p>
          <select
            name="rating"
            defaultValue={item.rating}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          >
            {[1, 2, 3, 4, 5].map((n) => (
              <option key={n} value={n}>
                {n} ★
              </option>
            ))}
          </select>
        </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>
  );
}