"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { updateBundleAction, deleteBundleAction, setBundleActiveAction, moveBundleAction } from "@/lib/actions/bundles";

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

export function BundleRow({
  item,
}: {
  item: {
    id: string;
    title: string;
    titleEn: string;
    description: string;
    descriptionEn: string;
    price: number;
    compareAtPrice: number;
    active: boolean;
  };
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

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

  return (
    <details className={`bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 ${item.active ? "" : "opacity-60"}`}>
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="min-w-0">
          <p className="text-sm truncate">
            {item.title} <span className="text-[var(--rk-ink-muted)]">· {fmt(item.price)}</span>
            {item.compareAtPrice > item.price && (
              <span className="ml-1.5 text-xs text-emerald-400">spart {fmt(item.compareAtPrice - item.price)}</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 moveBundleAction(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 moveBundleAction(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.active}
              disabled={pending}
              onChange={(e) => startTransition(async () => { await setBundleActiveAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Sichtbar
          </label>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm(`Paket „${item.title}" wirklich löschen?`)) {
                startTransition(async () => {
                  await deleteBundleAction(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="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>
        <textarea
          name="description"
          defaultValue={item.description}
          placeholder="Was ist enthalten? (Deutsch)"
          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"
        />
        <textarea
          name="descriptionEn"
          defaultValue={item.descriptionEn}
          placeholder="Was ist enthalten? (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="price"
            type="number"
            min="0"
            step="0.01"
            defaultValue={item.price}
            placeholder="Paketpreis in €"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <input
            name="compareAtPrice"
            type="number"
            min="0"
            step="0.01"
            defaultValue={item.compareAtPrice || ""}
            placeholder="Regulärer Preis (optional)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </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>
  );
}