'use client';

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

interface Transaction {
  id: string;
  type: 'credit' | 'debit';
  amount: number;
  description: string;
  date: string;
}

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

export function WalletSummaryPanel({ balance, 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">
                {balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </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) => (
              <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={tx.type === 'credit' ? 'bg-performance-green/10' : 'bg-error-red/10'}
                    >
                      <Icon 
                        icon={tx.type === 'credit' ? ArrowDownLeft : ArrowUpRight} 
                        size={4} 
                        color={tx.type === 'credit' ? '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">{new Date(tx.date).toLocaleDateString()}</Text>
                    </Stack>
                  </Stack>
                  <Text 
                    weight="bold" 
                    color={tx.type === 'credit' ? 'text-performance-green' : 'text-white'}
                  >
                    {tx.type === 'credit' ? '+' : '-'}{tx.amount.toFixed(2)}
                  </Text>
                </Stack>
              </Stack>
            ))
          )}
        </Stack>
      </Surface>
    </Stack>
  );
}