import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Wallet, TrendingUp, TrendingDown, DollarSign, Calendar, ArrowUpRight, ArrowDownRight } from 'lucide-react';

interface LeagueWalletTemplateProps {
  viewData: LeagueWalletViewData;
}

export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: viewData.currency,
    }).format(Math.abs(amount));
  };

  const getTransactionIcon = (type: string) => {
    switch (type) {
      case 'deposit':
        return <ArrowUpRight className="w-4 h-4 text-performance-green" />;
      case 'withdrawal':
        return <ArrowDownRight className="w-4 h-4 text-red-400" />;
      case 'sponsorship':
        return <DollarSign className="w-4 h-4 text-primary-blue" />;
      case 'prize':
        return <TrendingUp className="w-4 h-4 text-warning-amber" />;
      default:
        return <DollarSign className="w-4 h-4 text-gray-400" />;
    }
  };

  const getTransactionColor = (type: string) => {
    switch (type) {
      case 'deposit':
        return 'text-performance-green';
      case 'withdrawal':
        return 'text-red-400';
      case 'sponsorship':
        return 'text-primary-blue';
      case 'prize':
        return 'text-warning-amber';
      default:
        return 'text-gray-400';
    }
  };

  return (
    <Section>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-xl font-semibold text-white">League Wallet</h2>
          <p className="text-sm text-gray-400 mt-1">
            Financial overview and transaction history
          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* Balance Card */}
        <Card>
          <div className="flex items-center gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
              <Wallet className="w-6 h-6 text-primary-blue" />
            </div>
            <div>
              <p className="text-sm text-gray-400">Current Balance</p>
              <p className="text-3xl font-bold text-white">
                {formatCurrency(viewData.balance)}
              </p>
            </div>
          </div>
        </Card>

        {/* Transaction History */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
              <Calendar className="w-5 h-5 text-performance-green" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">Transaction History</h3>
              <p className="text-sm text-gray-400">Recent financial activity</p>
            </div>
          </div>

          {viewData.transactions.length === 0 ? (
            <div className="text-center py-8">
              <Wallet className="w-12 h-12 mx-auto mb-4 text-gray-400" />
              <p className="text-gray-400">No transactions yet</p>
            </div>
          ) : (
            <div className="space-y-3">
              {viewData.transactions.map((transaction) => (
                <div
                  key={transaction.id}
                  className="flex items-center justify-between p-4 rounded-lg border border-charcoal-outline bg-iron-gray/30"
                >
                  <div className="flex items-center gap-3">
                    <div className="flex-shrink-0">
                      {getTransactionIcon(transaction.type)}
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium text-white truncate">
                        {transaction.description}
                      </p>
                      <div className="flex items-center gap-2 text-xs text-gray-400">
                        <span>{new Date(transaction.createdAt).toLocaleDateString()}</span>
                        <span>•</span>
                        <span className={`capitalize ${getTransactionColor(transaction.type)}`}>
                          {transaction.type}
                        </span>
                        <span>•</span>
                        <span className={`capitalize ${
                          transaction.status === 'completed'
                            ? 'text-performance-green'
                            : transaction.status === 'pending'
                            ? 'text-warning-amber'
                            : 'text-red-400'
                        }`}>
                          {transaction.status}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div className="text-right">
                    <p className={`text-lg font-semibold ${
                      transaction.amount >= 0 ? 'text-performance-green' : 'text-red-400'
                    }`}>
                      {transaction.amount >= 0 ? '+' : '-'}{formatCurrency(transaction.amount)}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* Note about features */}
        <Card>
          <div className="text-center py-8">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
              <Wallet className="w-8 h-8 text-primary-blue" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Wallet Management</h3>
            <p className="text-sm text-gray-400">
              Interactive withdrawal and export features will be implemented in future updates.
            </p>
          </div>
        </Card>
      </div>
    </Section>
  );
}