"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { updatePriceTemplateAction, deletePriceTemplateAction, movePriceTemplateAction } from "@/lib/actions/priceTemplates";

const fmt = (n: number) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(n);

export function PriceTemplateRow({
  item,
}: {
  item: { id: string; name: string; defaultAmount: number; note: string };
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      await updatePriceTemplateAction(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="min-w-0">
          <p className="text-sm truncate">
            {item.name} <span className="text-[var(--rk-ink-muted)]">· {fmt(item.defaultAmount)}</span>
          </p>
          <p className="text-xs text-[var(--rk-ink-muted)]">Bearbeiten ▾</p>
        </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 movePriceTemplateAction(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 movePriceTemplateAction(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>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm(`Vorlage „${item.name}" wirklich löschen?`)) {
                startTransition(async () => {
                  await deletePriceTemplateAction(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="name"
            defaultValue={item.name}
            placeholder="Name"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <input
            name="defaultAmount"
            type="number"
            min="0"
            step="1"
            defaultValue={item.defaultAmount}
            placeholder="Standardbetrag in €"
            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="note"
          defaultValue={item.note}
          placeholder="Notiztext"
          rows={2}
          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>
  );
}