"use client";

import { useState, useTransition } from "react";
import { markOrderPaidAction, markOrderUnpaidAction, setOrderDepositAction, recordRefundAction } from "@/lib/actions/admin";
import { PAYMENT_METHODS, PAYMENT_METHOD_LABELS, type PaymentMethod, formatDateDE } from "@/lib/orderConstants";

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

export function PaymentStatusPanel({
  orderId,
  paid,
  paidAt,
  paymentMethod,
  paymentReference,
  reminderFeeTotal = 0,
  depositAmount = 0,
  depositPaid = false,
  depositPaidAt = null,
  refundedAmount = 0,
  refundedAt = null,
  refundNote = "",
}: {
  orderId: string;
  paid: boolean;
  paidAt: string | null;
  paymentMethod: string;
  paymentReference: string;
  reminderFeeTotal?: number;
  depositAmount?: number;
  depositPaid?: boolean;
  depositPaidAt?: string | null;
  refundedAmount?: number;
  refundedAt?: string | null;
  refundNote?: string;
}) {
  const [pending, startTransition] = useTransition();
  const [method, setMethod] = useState<PaymentMethod>("bank_transfer");
  const [depositInput, setDepositInput] = useState(depositAmount > 0 ? String(depositAmount) : "");
  const [refundAmountInput, setRefundAmountInput] = useState("");
  const [refundNoteInput, setRefundNoteInput] = useState("");

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">Zahlung</p>

      <div className="flex flex-wrap items-center justify-between gap-3 mb-3">
        <div>
          <span
            className={`text-xs uppercase tracking-[0.1em] border rounded-full px-2.5 py-1 ${
              paid ? "border-emerald-400/40 text-emerald-400" : "border-amber-400/40 text-amber-400"
            }`}
          >
            {paid ? "Bezahlt" : "Offen"}
          </span>
          {paid && (
            <span className="ml-2 text-[0.65rem] text-[var(--rk-ink-muted)]">
              {paymentMethod && PAYMENT_METHOD_LABELS[paymentMethod as PaymentMethod]}
              {paidAt && ` · seit ${formatDateDE(new Date(paidAt))}`}
            </span>
          )}
        </div>

        {paid ? (
          <button
            disabled={pending}
            onClick={() => startTransition(() => markOrderUnpaidAction(orderId))}
            className="text-xs border border-white/15 rounded-lg px-3 py-1.5 text-[var(--rk-ink-muted)] hover:border-white/50 transition-colors disabled:opacity-50"
          >
            Als offen markieren
          </button>
        ) : (
          <div className="flex items-center gap-2">
            <select
              value={method}
              onChange={(e) => setMethod(e.target.value as PaymentMethod)}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2 py-1.5 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
            >
              {PAYMENT_METHODS.map((m) => (
                <option key={m} value={m}>
                  {PAYMENT_METHOD_LABELS[m]}
                </option>
              ))}
            </select>
            <button
              disabled={pending}
              onClick={() => startTransition(() => markOrderPaidAction(orderId, method))}
              className="text-xs border border-emerald-400/40 text-emerald-400 rounded-lg px-3 py-1.5 hover:bg-emerald-400/10 transition-colors disabled:opacity-50"
            >
              Als bezahlt markieren
            </button>
          </div>
        )}
      </div>

      <p className="text-xs text-[var(--rk-ink-muted)]">
        Verwendungszweck (= Auftrags-ID): <span className="text-[var(--rk-ink)] font-mono">{paymentReference}</span>
      </p>
      {reminderFeeTotal > 0 && (
        <p className="text-xs text-amber-400 mt-1.5">
          Inkl. {fmt(reminderFeeTotal)} Mahngebühren aus bisherigen Mahnstufen — bereits im offenen Betrag der Rechnung
          enthalten.
        </p>
      )}

      {!paid && (
        <div className="mt-4 pt-4 border-t border-white/10">
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Anzahlung (optional)</p>
          {depositAmount > 0 && (
            <p className="text-xs mb-2">
              {fmt(depositAmount)}{" "}
              <span className={depositPaid ? "text-emerald-400" : "text-amber-400"}>
                {depositPaid ? `bezahlt${depositPaidAt ? ` seit ${formatDateDE(new Date(depositPaidAt))}` : ""}` : "offen"}
              </span>
            </p>
          )}
          <div className="flex items-center gap-2">
            <input
              type="number"
              min="0"
              step="0.01"
              value={depositInput}
              onChange={(e) => setDepositInput(e.target.value)}
              placeholder="Betrag €"
              className="w-28 bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:border-white/50"
            />
            <button
              disabled={pending || depositPaid}
              onClick={() => startTransition(() => setOrderDepositAction(orderId, Number(depositInput) || 0))}
              className="text-xs border border-white/15 rounded-lg px-3 py-1.5 text-[var(--rk-ink-muted)] hover:border-white/50 transition-colors disabled:opacity-50"
            >
              {depositAmount > 0 ? "Aktualisieren" : "Anzahlung verlangen"}
            </button>
          </div>
          {depositPaid && (
            <p className="text-xs text-[var(--rk-ink-muted)] mt-1.5">
              Anzahlung ist bereits bezahlt — kann hier nicht mehr geändert werden.
            </p>
          )}
        </div>
      )}

      <div className="mt-4 pt-4 border-t border-white/10">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Rückerstattung</p>
        {refundedAmount > 0 && (
          <p className="text-xs text-amber-400 mb-2">
            {fmt(refundedAmount)} erstattet{refundedAt ? ` am ${formatDateDE(new Date(refundedAt))}` : ""}
            {refundNote ? ` — ${refundNote}` : ""}
          </p>
        )}
        <div className="flex flex-wrap items-center gap-2">
          <input
            type="number"
            min="0"
            step="0.01"
            value={refundAmountInput}
            onChange={(e) => setRefundAmountInput(e.target.value)}
            placeholder="Betrag €"
            className="w-28 bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:border-white/50"
          />
          <input
            type="text"
            value={refundNoteInput}
            onChange={(e) => setRefundNoteInput(e.target.value)}
            placeholder="Notiz (optional)"
            className="flex-1 min-w-[8rem] bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:border-white/50"
          />
          <button
            disabled={pending || !refundAmountInput}
            onClick={() =>
              startTransition(() => {
                recordRefundAction(orderId, Number(refundAmountInput) || 0, refundNoteInput);
                setRefundAmountInput("");
                setRefundNoteInput("");
              })
            }
            className="text-xs border border-white/15 rounded-lg px-3 py-1.5 text-[var(--rk-ink-muted)] hover:border-white/50 transition-colors disabled:opacity-50"
          >
            Erfassen
          </button>
        </div>
        <p className="text-xs text-[var(--rk-ink-muted)] mt-1.5">
          Nur ein Nachweis für Buchhaltung/Statistik — die eigentliche Rücküberweisung läuft weiterhin über Stripe-
          Dashboard oder Bank, nicht automatisch von hier aus.
        </p>
      </div>
    </div>
  );
}