"use client";

import { useState, useTransition } from "react";
import { useTranslations, useLocale } from "next-intl";
import { createCheckoutSessionAction } from "@/lib/actions/payments";

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

export function PayOnlineButton({
  orderId,
  depositAmount = 0,
  depositPaid = false,
  variant = "full",
}: {
  orderId: string;
  depositAmount?: number;
  depositPaid?: boolean;
  variant?: "full" | "compact";
}) {
  const t = useTranslations("orders");
  const locale = useLocale();
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState("");

  const hasOpenDeposit = depositAmount > 0 && !depositPaid;

  const startCheckout = () =>
    startTransition(async () => {
      setError("");
      const result = await createCheckoutSessionAction(orderId, locale === "en" ? "en" : "de");
      if ("url" in result) {
        window.location.href = result.url;
      } else {
        setError(result.error);
      }
    });

  const buttonLabel = pending
    ? "…"
    : hasOpenDeposit
      ? t("payOnlineDepositButton", { amount: fmt(depositAmount) })
      : t("payOnlineButton");

  if (variant === "compact") {
    return (
      <span className="inline-flex flex-wrap items-center gap-2">
        <button
          disabled={pending}
          onClick={startCheckout}
          className="rounded-lg bg-[var(--rk-accent)] px-3.5 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] text-[#141413] transition-opacity hover:opacity-90 disabled:opacity-50"
        >
          {buttonLabel}
        </button>
        {error && <span className="text-xs text-red-400">{error}</span>}
      </span>
    );
  }

  return (
    <div className="mt-3 pt-3 border-t border-white/10">
      {depositPaid && depositAmount > 0 && (
        <p className="mb-2 text-xs text-emerald-400">{t("depositPaidNote", { amount: fmt(depositAmount) })}</p>
      )}
      <button
        disabled={pending}
        onClick={startCheckout}
        className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        {buttonLabel}
      </button>
      <p className="mt-2 text-xs text-[var(--rk-ink-muted)]">{t("payOnlineHint")}</p>
      {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
    </div>
  );
}