"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  updateDiscountCodeAction,
  setDiscountCodeActiveAction,
  deleteDiscountCodeAction,
} from "@/lib/actions/discounts";
import { formatDateDE } from "@/lib/orderConstants";

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

export function DiscountCodeRow({
  item,
  conventions,
}: {
  item: {
    id: string;
    code: string;
    type: "percent" | "fixed";
    value: number;
    maxUses: number | null;
    usedCount: number;
    validUntil: string | null;
    stammkundenOnly: boolean;
    neukundenOnly: boolean;
    conventionId: string | null;
    conventionName: string | null;
    active: boolean;
    note: string;
    ownerName?: string;
  };
  conventions: { id: string; name: string }[];
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  const expired = item.validUntil ? new Date(item.validUntil).getTime() < Date.now() : false;
  const exhausted = item.maxUses !== null && item.usedCount >= item.maxUses;

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      await updateDiscountCodeAction(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 flex items-center gap-2 flex-wrap">
          <span className="text-sm font-mono">{item.code}</span>
          <span className="text-xs text-[var(--rk-ink-muted)]">
            {item.type === "percent" ? `${item.value}%` : fmt(item.value)}
            {" · "}
            {item.usedCount}
            {item.maxUses !== null ? ` / ${item.maxUses}` : ""} verwendet
            {item.validUntil ? ` · gültig bis ${formatDateDE(new Date(item.validUntil))}` : ""}
          </span>
          {item.stammkundenOnly && (
            <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-emerald-400/40 text-emerald-400 rounded-full px-2 py-0.5">
              Nur Stammkunden
            </span>
          )}
          {item.neukundenOnly && (
            <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-sky-400/40 text-sky-400 rounded-full px-2 py-0.5">
              Nur Neukunden
            </span>
          )}
          {item.conventionName && (
            <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-[var(--rk-accent)]/40 text-[var(--rk-accent)] rounded-full px-2 py-0.5">
              Nur {item.conventionName}
            </span>
          )}
          {item.ownerName && (
            <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-fuchsia-400/40 text-fuchsia-400 rounded-full px-2 py-0.5">
              Empfehlungsprämie · {item.ownerName}
            </span>
          )}
          {(expired || exhausted) && (
            <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-amber-400/40 text-amber-400 rounded-full px-2 py-0.5">
              {expired ? "Abgelaufen" : "Aufgebraucht"}
            </span>
          )}
        </div>
        <div className="flex items-center gap-3 shrink-0" onClick={(e) => e.stopPropagation()}>
          <label className="flex items-center gap-1.5 text-xs">
            <input
              type="checkbox"
              checked={item.active}
              disabled={pending}
              onChange={(e) => startTransition(async () => { await setDiscountCodeActiveAction(item.id, e.target.checked); router.refresh(); })}
              className="h-3.5 w-3.5"
            />
            Aktiv
          </label>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm("Diesen Rabattcode wirklich löschen?")) {
                startTransition(async () => {
                  await deleteDiscountCodeAction(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>

      {item.note && <p className="mt-2 text-xs text-[var(--rk-ink-muted)]">{item.note}</p>}

      <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">
          <select
            name="type"
            defaultValue={item.type}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          >
            <option value="percent">Prozent %</option>
            <option value="fixed">Fester Betrag €</option>
          </select>
          <input
            name="value"
            type="number"
            min="0"
            step="0.01"
            defaultValue={item.value}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label className="text-xs text-[var(--rk-ink-muted)] mb-1 block">Max. Benutzungen</label>
            <input
              name="maxUses"
              type="number"
              min="1"
              step="1"
              defaultValue={item.maxUses ?? ""}
              placeholder="unbegrenzt"
              className="w-full bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </div>
          <div>
            <label className="text-xs text-[var(--rk-ink-muted)] mb-1 block">Gültig bis</label>
            <input
              name="validUntil"
              type="date"
              defaultValue={item.validUntil ? item.validUntil.slice(0, 10) : ""}
              className="w-full bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </div>
        </div>
        <input
          name="note"
          defaultValue={item.note}
          placeholder="Notiz (optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        {conventions.length > 0 && (
          <label className="flex flex-col gap-1 text-xs text-[var(--rk-ink-muted)]">
            Nur für eine bestimmte Convention (optional)
            <select
              name="conventionId"
              defaultValue={item.conventionId ?? ""}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
            >
              <option value="">— keine Einschränkung —</option>
              {conventions.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </label>
        )}
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" name="stammkundenOnly" defaultChecked={item.stammkundenOnly} className="h-3.5 w-3.5" />
          Nur für Stammkunden einlösbar
        </label>
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" name="neukundenOnly" defaultChecked={item.neukundenOnly} className="h-3.5 w-3.5" />
          Nur für Neukunden einlösbar (kein vorheriger Auftrag)
        </label>
        <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>
  );
}