'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Wallet, Calendar, DollarSign } from 'lucide-react';
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { TransactionRow } from '@/components/leagues/TransactionRow';
import { LeagueMembershipFeesSection } from '@/components/leagues/LeagueMembershipFeesSection';

interface LeagueWalletTemplateProps {
  viewData: LeagueWalletViewData;
}

export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
  return (
    <Stack gap={6}>
      <Box>
        <Heading level={2}>League Wallet</Heading>
        <Text size="sm" color="text-gray-400" block mt={1}>
          Financial overview and transaction history
        </Text>
      </Box>

      <Stack gap={6}>
        {/* Balance Card */}
        <Card>
          <Stack direction="row" align="center" gap={4}>
            <Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/10">
              <Icon icon={Wallet} size={6} color="#3b82f6" />
            </Surface>
            <Box>
              <Text size="sm" color="text-gray-400" block>Current Balance</Text>
              <Text size="3xl" weight="bold" color="text-white">
                {viewData.formattedBalance}
              </Text>
            </Box>
          </Stack>
        </Card>

        {/* Transaction History */}
        <Card>
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} bg="bg-amber-500/10">
                <Icon icon={Calendar} size={5} color="#10b981" />
              </Surface>
              <Box>
                <Heading level={3}>Transaction History</Heading>
                <Text size="sm" color="text-gray-400">Recent financial activity</Text>
              </Box>
            </Stack>

            {viewData.transactions.length === 0 ? (
              <Stack align="center" py={8} gap={4}>
                <Icon icon={Wallet} size={12} color="#525252" />
                <Text color="text-gray-400">No transactions yet</Text>
              </Stack>
            ) : (
              <Stack gap={3}>
                {viewData.transactions.map((transaction) => (
                  <TransactionRow key={transaction.id} transaction={transaction} />
                ))}
              </Stack>
            )}
          </Stack>
        </Card>

        {/* Membership Fees */}
        <Card>
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} bg="bg-green-500/10">
                <Icon icon={DollarSign} size={5} color="#10b981" />
              </Surface>
              <Box>
                <Heading level={3}>Membership Fees</Heading>
                <Text size="sm" color="text-gray-400">Configure how drivers pay for participation</Text>
              </Box>
            </Stack>
            <LeagueMembershipFeesSection leagueId={viewData.leagueId} />
          </Stack>
        </Card>

        {/* Note about features */}
        <Card>
          <Stack align="center" py={8} gap={4}>
            <Surface variant="muted" rounded="full" padding={4} bg="bg-blue-500/10">
              <Icon icon={Wallet} size={8} color="#3b82f6" />
            </Surface>
            <Box textAlign="center">
              <Heading level={3}>Wallet Management</Heading>
              <Text size="sm" color="text-gray-400" block mt={2}>
                Interactive withdrawal and export features will be implemented in future updates.
              </Text>
            </Box>
          </Stack>
        </Card>
      </Stack>
    </Stack>
  );
}