lotteryFront/src/features/wallet/wallet-logs-screen.tsx

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import { getWalletLogs } from "@/api/wallet";
import { Button } from "@/components/ui/button";
import { PlayerPanel } from "@/components/layout/player-panel";
import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
import { resolvePlayerCurrency } from "@/lib/player-currency";
import { formatWalletClientError } from "@/lib/wallet-api-error";
import { usePlayerSessionStore } from "@/stores/player-session-store";
import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";

const WALLET_LOGS_PAGE_SIZE = 10;

export function WalletLogsScreen() {
  const profile = usePlayerSessionStore((s) => s.profile);
  const { t } = useTranslation("player");
  const [logs, setLogs] = useState<WalletLogsData | null>(null);
  const [filter, setFilter] = useState("");
  const [loading, setLoading] = useState(true);
  const [logsLoading, setLogsLoading] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const loadMoreRef = useRef<HTMLDivElement | null>(null);

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

  const fetchPassRef = useRef(true);

  const load = useCallback(async (targetPage = 1, append = false) => {
    setError(null);
    if (append) {
      setLoadingMore(true);
    } else if (fetchPassRef.current) {
      setLoading(true);
      fetchPassRef.current = false;
    } else {
      setLogsLoading(true);
    }
    try {
      const nextLogs = await getWalletLogs({
        page: targetPage,
        size: WALLET_LOGS_PAGE_SIZE,
        type: filter || undefined,
      });
      setLogs((current) =>
        append && current
          ? { ...nextLogs, items: [...current.items, ...nextLogs.items] }
          : nextLogs,
      );
    } catch (e) {
      setError(formatWalletClientError(e, t));
      if (!append) {
        setLogs(null);
      }
    } finally {
      setLoading(false);
      setLogsLoading(false);
      setLoadingMore(false);
    }
  }, [filter, t]);

  useEffect(() => {
    queueMicrotask(() => {
      void load(1, false);
    });
  }, [load]);

  const hasMore = logs ? logs.page < getWalletLogsLastPage(logs) : false;

  const loadMore = useCallback(() => {
    if (!logs || !hasMore || loadingMore) return;
    void load(logs.page + 1, true);
  }, [hasMore, load, loadingMore, logs]);

  useEffect(() => {
    const target = loadMoreRef.current;
    if (!target || loading || logsLoading || loadingMore || !hasMore) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          loadMore();
        }
      },
      { rootMargin: "160px" },
    );

    observer.observe(target);
    return () => observer.disconnect();
  }, [hasMore, loadMore, loading, loadingMore, logsLoading]);

  return (
    <PlayerPanel
      title={t("wallet.logsTitle")}
      backHref="/wallet"
      backLabel={t("wallet.title")}
    >
      <div className="space-y-3">
        {error ? (
          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
            <p>{error}</p>
            <Button
              type="button"
              className="mt-3 bg-[#e5002c] text-white hover:bg-[#d10028]"
              onClick={() => void load()}
            >
              {t("actions.retry")}
            </Button>
          </div>
        ) : null}

        <WalletLogsBlock
          logs={logs}
          logsLoading={loading || logsLoading}
          loadingMore={loadingMore}
          hasMore={hasMore}
          onLoadMore={loadMore}
          loadMoreRef={loadMoreRef}
          filter={filter}
          onFilterChange={setFilter}
          currency={currency}
          title={t("wallet.typeFilter")}
        />
      </div>
    </PlayerPanel>
  );
}