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

"use client";

import { Wallet } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useMemo, 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 { formatMinorAsCurrency } from "@/lib/money";
import { resolvePlayerCurrency } from "@/lib/player-currency";
import { cn } from "@/lib/utils";
import { useNetworkConnectionStore } from "@/stores/network-connection-store";
import { usePlayerSessionStore } from "@/stores/player-session-store";
import type { WalletBalanceData } from "@/types/api/wallet-balance";

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

  const currency = useMemo(
    () => resolvePlayerCurrency(profile, balance),
    [balance, profile],
  );

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

  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);
    return () => window.removeEventListener("lottery-wallet-refresh", 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 lotteryMinor = Number(balance?.balance ?? 0);
  const availableMinor = Number(balance?.available_balance ?? 0);

  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">{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(lotteryMinor, currency)}
              </p>
            )}
          </div>
        </div>
      </div>

      <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={lotteryMinor}
          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>
  );
}