lotteryFront/src/features/hall/hall-wallet-strip.tsx

"use client";

import { Wallet } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import { getWalletBalance } from "@/api/wallet";
import { Skeleton } from "@/components/ui/skeleton";
import {
  TransferInDialog,
  TransferOutDialog,
} from "@/features/wallet/wallet-transfer-dialogs";
import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
import { formatMinorAsCurrency } from "@/lib/money";
import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
import { cn } from "@/lib/utils";
import { useNetworkConnectionStore } from "@/stores/network-connection-store";
import type { WalletBalanceData } from "@/types/api/wallet-balance";

export function HallWalletStrip() {
  const mode = useNetworkConnectionStore((s) => s.mode);
  const { t } = useTranslation("player");
  const { activeCurrency } = useActivePlayerCurrency();
  const [balance, setBalance] = useState<WalletBalanceData | null>(null);
  const [loading, setLoading] = useState(true);
  const degradedWalletPollRef = useRef<number | null>(null);

  const currency = activeCurrency;

  const refresh = useCallback(async () => {
    const b = await getWalletBalance({ currency: activeCurrency });
    setBalance(b);
  }, [activeCurrency]);

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      setLoading(true);
      try {
        await refresh();
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [refresh]);

  useEffect(() => {
    const onRefresh = () => void refresh();
    window.addEventListener("lottery-wallet-refresh", onRefresh);
    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onRefresh);
    return () => {
      window.removeEventListener("lottery-wallet-refresh", onRefresh);
      window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onRefresh);
    };
  }, [refresh]);

  useEffect(() => {
    if (mode !== "polling" && mode !== "offline") {
      if (degradedWalletPollRef.current !== null) {
        window.clearInterval(degradedWalletPollRef.current);
        degradedWalletPollRef.current = null;
      }
      return;
    }

    if (degradedWalletPollRef.current !== null) {
      return;
    }

    degradedWalletPollRef.current = window.setInterval(() => {
      void refresh();
    }, 60_000);

    return () => {
      if (degradedWalletPollRef.current !== null) {
        window.clearInterval(degradedWalletPollRef.current);
        degradedWalletPollRef.current = null;
      }
    };
  }, [mode, refresh]);

  const availableMinor = Number(balance?.available_balance ?? balance?.balance ?? 0);
  const isCreditPlayer =
    balance?.credit_line_mode === true || balance?.funding_mode === "credit";
  const mainMinor =
    balance?.main_balance === null || balance?.main_balance === undefined
      ? null
      : Number(balance.main_balance);

  return (
    <section className="mb-3 space-y-2.5" aria-label={t("wallet.balance")}>
      <div
        className={cn(
          "relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-3 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
        )}
      >
        <Image
          src="/entry/image5.png"
          alt=""
          fill
          className="pointer-events-none object-cover object-center"
          aria-hidden
        />
        <div className="relative flex items-center gap-3">
          <div className="flex size-13 shrink-0 items-center justify-center rounded-full bg-white text-[#d81435] shadow-sm">
            <Wallet className="size-7" aria-hidden />
          </div>
          <div className="min-w-0 flex-1">
            <p className="text-sm font-semibold text-white/90">
              {balance?.credit_line_mode
                ? t("wallet.creditAvailable", { defaultValue: "可用信用" })
                : t("wallet.balance")}
            </p>
            {loading ? (
              <Skeleton className="mt-2 h-8 w-44 rounded-md bg-white/25" />
            ) : (
              <p className="mt-1 text-2xl font-black leading-none tabular-nums tracking-normal">
                {formatMinorAsCurrency(availableMinor, currency)}
              </p>
            )}
          </div>
        </div>
      </div>

      {isCreditPlayer ? null : (
        <div className="grid grid-cols-2 gap-2.5">
          <TransferInDialog
            idPrefix="hall-"
            triggerVariant="hall"
            triggerLabel={t("wallet.transferIn")}
            triggerClassName="h-12 rounded-lg text-base font-bold"
            currency={currency}
            lotteryMinor={availableMinor}
            mainMinor={mainMinor}
            onSuccess={refresh}
          />
          <TransferOutDialog
            idPrefix="hall-"
            triggerVariant="hall"
            triggerLabel={t("wallet.transferOut")}
            triggerClassName="h-12 rounded-lg text-base font-bold"
            currency={currency}
            availableMinor={availableMinor}
            onSuccess={refresh}
          />
        </div>
      )}
    </section>
  );
}