"use client";

import { useEffect, useRef, useState } from "react";
import { useActionState } from "react";
import { useRouter } from "next/navigation";
import { manualCreditBookingAction } from "@/lib/actions/credit";
import { formatEUR } from "@/lib/orderConstants";

const TYPE_LABELS: Record<string, string> = {
  manual_admin: "Manuelle Buchung",
  cancellation_refund: "Storno-Rückerstattung",
  referral_reward: "Empfehlungsprämie",
  order_redemption: "Einlösung bei Auftrag",
};

export function CreditBookingPanel({
  clientId,
  balance,
  ledger,
  orders,
}: {
  clientId: string;
  balance: number;
  ledger: {
    id: string;
    amount: number;
    balanceAfter: number;
    type: string;
    reason: string;
    createdByName: string | null;
    createdAt: string;
  }[];
  orders: { id: string; label: string; payableAmount: number }[];
}) {
  const router = useRouter();
  const [state, formAction, pending] = useActionState(manualCreditBookingAction.bind(null, clientId), {});
  const [orderId, setOrderId] = useState("");
  const amountRef = useRef<HTMLInputElement>(null);

  // Betrag ist ein unkontrolliertes Feld (per ref statt State) — so kann das
  // Zurücksetzen nach Erfolg per Ref-Mutation statt per setState im Effekt
  // passieren (vermeidet kaskadierende Renders, gleiches Muster wie
  // ClientAccountPanel.tsx, das hier nur router.refresh() aufruft).
  useEffect(() => {
    if (state.success) {
      if (amountRef.current) amountRef.current.value = "";
      router.refresh();
    }
  }, [state, router]);

  const selectedOrder = orders.find((o) => o.id === orderId);

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 mb-8">
      <div className="flex items-baseline justify-between gap-3 mb-4">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Kontoguthaben</p>
        <p className="text-lg font-medium text-[var(--rk-ink)]">{formatEUR(balance)}</p>
      </div>

      <form action={formAction} className="flex flex-col gap-3">
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-[var(--rk-ink-muted)]">Bezug zu Auftrag (optional, für Storno-Rückerstattungen)</span>
          <select
            name="relatedOrderId"
            value={orderId}
            onChange={(e) => setOrderId(e.target.value)}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          >
            <option value="">— kein Bezug —</option>
            {orders.map((o) => (
              <option key={o.id} value={o.id}>
                {o.label} ({formatEUR(o.payableAmount)})
              </option>
            ))}
          </select>
        </label>

        {selectedOrder && (
          <div className="flex flex-wrap gap-2 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Schnellauswahl:</span>
            <button
              type="button"
              onClick={() => {
                if (amountRef.current) amountRef.current.value = selectedOrder.payableAmount.toFixed(2);
              }}
              className="border border-white/30 rounded-lg px-2.5 py-1 hover:border-white transition-colors"
            >
              100% zurück ({formatEUR(selectedOrder.payableAmount)})
            </button>
            <button
              type="button"
              onClick={() => {
                if (amountRef.current) amountRef.current.value = (selectedOrder.payableAmount * 0.75).toFixed(2);
              }}
              className="border border-white/30 rounded-lg px-2.5 py-1 hover:border-white transition-colors"
            >
              75% zurück, 25% einbehalten ({formatEUR(selectedOrder.payableAmount * 0.75)})
            </button>
          </div>
        )}

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <label className="flex flex-col gap-1.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">
              Betrag in € (negativ zum Abbuchen) <span className="text-[var(--rk-accent)]">*</span>
            </span>
            <input
              name="amount"
              type="text"
              inputMode="decimal"
              ref={amountRef}
              defaultValue=""
              placeholder="z. B. 25.00 oder -10.00"
              required
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">
              Grund <span className="text-[var(--rk-accent)]">*</span>
            </span>
            <input
              name="reason"
              type="text"
              required
              maxLength={500}
              placeholder="z. B. Storno vor Beginn, Planung bereits erfolgt"
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
            />
          </label>
        </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"
        >
          Buchen
        </button>
        {state.error && <p className="text-sm text-red-400">{state.error}</p>}
        {state.success && <p className="text-sm text-emerald-400">Gebucht.</p>}
      </form>

      {ledger.length > 0 && (
        <div className="mt-5 pt-4 border-t border-white/10">
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Verlauf</p>
          <ul className="flex flex-col gap-2">
            {ledger.map((entry) => (
              <li key={entry.id} className="text-sm flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
                <span>
                  <span className={entry.amount > 0 ? "text-emerald-400" : "text-red-400"}>
                    {entry.amount > 0 ? "+" : ""}
                    {formatEUR(entry.amount)}
                  </span>{" "}
                  <span className="text-[var(--rk-ink-muted)]">
                    · {TYPE_LABELS[entry.type] || entry.type} · {entry.reason}
                    {entry.createdByName ? ` · ${entry.createdByName}` : ""}
                  </span>
                </span>
                <span className="text-xs text-[var(--rk-ink-muted)] shrink-0">
                  {new Date(entry.createdAt).toLocaleDateString("de-DE")}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}