"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { redeemDiscountCodeAction } from "@/lib/actions/discounts";
import { getPayableAmount } from "@/lib/discounts";

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

export function DiscountCodeRedeem({
  orderId,
  hasPriceProposal,
  discountCode,
  discountAmount,
  manualDiscountAmount = 0,
  manualDiscountNote = "",
  creditApplied = 0,
  latestAmount,
  showPayable,
}: {
  orderId: string;
  hasPriceProposal: boolean;
  discountCode: string;
  discountAmount: number;
  manualDiscountAmount?: number;
  manualDiscountNote?: string;
  creditApplied?: number;
  latestAmount: number;
  showPayable: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const [code, setCode] = useState("");
  const [error, setError] = useState("");
  const router = useRouter();

  const totalDiscount = discountAmount + manualDiscountAmount + creditApplied;

  if (discountCode || manualDiscountAmount > 0 || creditApplied > 0) {
    return (
      <div className="border-t border-white/10 pt-3 mt-3">
        {discountCode && (
          <p className="text-sm text-emerald-400">
            Rabattcode <span className="font-mono">{discountCode}</span> eingelöst: −{fmt(discountAmount)}
          </p>
        )}
        {manualDiscountAmount > 0 && (
          <p className="text-sm text-emerald-400">
            Rabatt gewährt: −{fmt(manualDiscountAmount)}
            {manualDiscountNote && <span className="text-[var(--rk-ink-muted)]"> · {manualDiscountNote}</span>}
          </p>
        )}
        {creditApplied > 0 && (
          <p className="text-sm text-emerald-400">Guthaben eingesetzt: −{fmt(creditApplied)}</p>
        )}
        {showPayable && (
          <p className="mt-1 text-sm">Zu zahlen: {fmt(getPayableAmount(latestAmount, totalDiscount))}</p>
        )}
        {!discountCode && hasPriceProposal && (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              setError("");
              startTransition(async () => {
                const result = await redeemDiscountCodeAction(orderId, code);
                if (result.error) setError(result.error);
                else {
                  setCode("");
                  router.refresh();
                }
              });
            }}
            className="mt-3 flex flex-wrap gap-2 items-center"
          >
            <input
              type="text"
              placeholder="Rabattcode"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              className="w-36 bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-xs uppercase focus:outline-none focus:border-white/50"
            />
            <button
              type="submit"
              disabled={pending || !code.trim()}
              className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
            >
              Einlösen
            </button>
            {error && <p className="w-full text-xs text-red-400">{error}</p>}
          </form>
        )}
      </div>
    );
  }

  if (!hasPriceProposal) return null;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setError("");
        startTransition(async () => {
          const result = await redeemDiscountCodeAction(orderId, code);
          if (result.error) setError(result.error);
          else {
            setCode("");
            router.refresh();
          }
        });
      }}
      className="border-t border-white/10 pt-3 mt-3 flex flex-wrap gap-2 items-center"
    >
      <input
        type="text"
        placeholder="Rabattcode"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        className="w-36 bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-xs uppercase focus:outline-none focus:border-white/50"
      />
      <button
        type="submit"
        disabled={pending || !code.trim()}
        className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
      >
        Einlösen
      </button>
      {error && <p className="w-full text-xs text-red-400">{error}</p>}
    </form>
  );
}