'use client';

import { useParams } from 'next/navigation';
import { useLeagueWalletPageData, useLeagueWalletWithdrawal } from '@/hooks/league/useLeagueWalletPageData';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { WalletTemplate } from './WalletTemplate';
import { Wallet } from 'lucide-react';

export default function LeagueWalletPage() {
  const params = useParams();
  const leagueId = params.id as string;

  // Query for wallet data using domain hook
  const { data, isLoading, error, refetch } = useLeagueWalletPageData(leagueId);

  // Mutation for withdrawal using domain hook
  const withdrawMutation = useLeagueWalletWithdrawal(leagueId, data, refetch);

  // Export handler (placeholder)
  const handleExport = () => {
    alert('Export functionality coming soon!');
  };

  // Render function for the template
  const renderTemplate = (walletData: any) => {
    return (
      <WalletTemplate
        data={walletData}
        onWithdraw={(amount) => withdrawMutation.mutate({ amount })}
        onExport={handleExport}
        mutationLoading={withdrawMutation.isPending}
      />
    );
  };

  return (
    <PageWrapper
      data={data}
      isLoading={isLoading}
      error={error}
      retry={refetch}
      Template={({ data }) => renderTemplate(data)}
      loading={{ variant: 'skeleton', message: 'Loading wallet...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: Wallet,
        title: 'No wallet data available',
        description: 'Wallet data will appear here once loaded',
      }}
    />
  );
}