'use client';

import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Icon as UIIcon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
  Download
} from 'lucide-react';

interface WalletTemplateProps {
  viewData: LeagueWalletViewData;
  onWithdraw?: (amount: number) => void;
  onExport?: () => void;
  mutationLoading?: boolean;
}

export function LeagueWalletPageClient({ viewData, onExport }: WalletTemplateProps) {
  // Map transactions to the format expected by WalletSummaryPanel
  const transactions = viewData.transactions.map(t => ({
    id: t.id,
    type: t.type === 'withdrawal' ? 'debit' : 'credit' as 'credit' | 'debit',
    amount: parseFloat(t.formattedAmount.replace(/[^0-9.-]+/g, '')),
    description: t.description,
    date: t.formattedDate,
  }));

  return (
    <Container size="lg" py={8}>
      {/* Header */}
      <Box display="flex" alignItems="center" justifyContent="between" mb={8}>
        <Box>
          <Heading level={1}>League Wallet</Heading>
          <Text color="text-gray-400">Manage your league&apos;s finances and payouts</Text>
        </Box>
        <Button variant="secondary" onClick={onExport}>
          <Stack direction="row" align="center" gap={2}>
            <UIIcon icon={Download} size={4} />
            <Text>Export</Text>
          </Stack>
        </Button>
      </Box>

      <WalletSummaryPanel 
        balance={viewData.balance}
        currency="USD"
        transactions={transactions}
        onDeposit={() => {}} // Not implemented for leagues yet
        onWithdraw={() => {}} // Not implemented for leagues yet
      />

      {/* Alpha Notice */}
      <Box mt={6} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
        <Text size="xs" color="text-gray-400">
          <Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Wallet management is demonstration-only.
          Real payment processing and bank integrations will be available when the payment system is fully implemented.
        </Text>
      </Box>
    </Container>
  );
}