'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { ArrowDownLeft, ArrowUpRight, History, Wallet } from 'lucide-react';

interface Transaction {
  id: string;
  type: 'deposit' | 'withdrawal' | 'sponsorship' | 'prize';
  formattedAmount: string;
  description: string;
  formattedDate: string;
}

interface WalletSummaryPanelProps {
  formattedBalance: string;
  currency: string;
  transactions: Transaction[];
  onDeposit: () => void;
  onWithdraw: () => void;
}

export function WalletSummaryPanel({ formattedBalance, currency, transactions, onDeposit, onWithdraw }: WalletSummaryPanelProps) {
  return (
    <Stack gap={6}>
      <Surface variant="dark" border rounded="lg" padding={8} position="relative" overflow="hidden">
        {/* Background Pattern */}
        <Stack 
          position="absolute" 
          top="-5rem" 
          right="-5rem" 
          w="12rem" 
          h="12rem" 
          bg="bg-primary-blue/5" 
          rounded="full" 
          blur="xl"
          pointerEvents="none"
        />

        <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={8}>
          <Stack gap={2}>
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Wallet} size={4} color="text-gray-500" />
              <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest">AVAILABLE BALANCE</Text>
            </Stack>
            <Stack direction="row" align="baseline" gap={2}>
              <Text size="4xl" weight="bold" color="text-white">
                {formattedBalance}
              </Text>
              <Text size="xl" weight="medium" color="text-gray-500">{currency}</Text>
            </Stack>
          </Stack>

          <Stack direction="row" gap={3}>
            <Button variant="primary" onClick={onDeposit}>
              <Stack direction="row" align="center" gap={2}>
                <Icon icon={ArrowDownLeft} size={4} />
                <Text>Deposit</Text>
              </Stack>
            </Button>
            <Button variant="secondary" onClick={onWithdraw}>
              <Stack direction="row" align="center" gap={2}>
                <Icon icon={ArrowUpRight} size={4} />
                <Text>Withdraw</Text>
              </Stack>
            </Button>
          </Stack>
        </Stack>
      </Surface>

      <Surface variant="dark" border rounded="lg" overflow="hidden">
        <Stack px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={History} size={4} color="text-primary-blue" />
            <Text weight="bold" letterSpacing="wider" size="sm" display="block">
              RECENT TRANSACTIONS
            </Text>
          </Stack>
        </Stack>

        <Stack gap={0}>
          {transactions.length === 0 ? (
            <Stack py={12} center>
              <Text color="text-gray-500">No recent transactions.</Text>
            </Stack>
          ) : (
            transactions.map((tx) => {
              const isCredit = tx.type === 'deposit' || tx.type === 'sponsorship';
              return (
                <Stack key={tx.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
                  <Stack direction="row" justify="between" align="center">
                    <Stack direction="row" align="center" gap={4}>
                      <Stack 
                        center 
                        w={10} 
                        h={10} 
                        rounded="full" 
                        bg={isCredit ? 'bg-performance-green/10' : 'bg-error-red/10'}
                      >
                        <Icon 
                          icon={isCredit ? ArrowDownLeft : ArrowUpRight} 
                          size={4} 
                          color={isCredit ? 'text-performance-green' : 'text-error-red'} 
                        />
                      </Stack>
                      <Stack gap={0.5}>
                        <Text weight="medium" color="text-white">{tx.description}</Text>
                        <Text size="xs" color="text-gray-500">{tx.formattedDate}</Text>
                      </Stack>
                    </Stack>
                    <Text 
                      weight="bold" 
                      color={isCredit ? 'text-performance-green' : 'text-white'}
                    >
                      {tx.formattedAmount}
                    </Text>
                  </Stack>
                </Stack>
              );
            })
          )}
        </Stack>
      </Surface>
    </Stack>
  );
}