lotteryFront/src/features/wallet/transfer-in-screen.tsx

"use client";

import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";

import { getWalletBalance } from "@/api/wallet";
import { TransferInPage } from "@/features/wallet/wallet-transfer-forms";
import { Skeleton } from "@/components/ui/skeleton";
import { resolvePlayerCurrency } from "@/lib/player-currency";
import { usePlayerSessionStore } from "@/stores/player-session-store";
import type { WalletBalanceData } from "@/types/api/wallet-balance";

/** 独立路由 `/wallet/transfer-in` */
export function TransferInScreen() {
  const router = useRouter();
  const profile = usePlayerSessionStore((s) => s.profile);
  const [balance, setBalance] = useState<WalletBalanceData | null>(null);
  const [loading, setLoading] = useState(true);

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

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

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

  const onSuccess = useCallback(async () => {
    await load();
    router.push("/wallet");
  }, [load, router]);

  if (loading && !balance) {
    return (
      <div className="space-y-3">
        <Skeleton className="h-8 w-40" />
        <Skeleton className="h-48 w-full rounded-xl" />
      </div>
    );
  }

  return (
    <TransferInPage
      currency={currency}
      lotteryMinor={Number(balance?.balance ?? 0)}
      onSuccess={onSuccess}
    />
  );
}