import 'package:flutter/material.dart';
import '../../../../app/i18n/app_localizations.dart';
import '../../../../app/theme/app_colors.dart';
import '../../../../app/theme/app_typography.dart';
import '../../../../app/theme/app_spacing.dart';
import '../../../../shared/widgets/genex_button.dart';

/// A6. 账户模块 - 我的余额
///
/// 总余额（美元显示）、可提现金额、冻结金额、充值/提现
/// 交易记录时间线
class WalletPage extends StatelessWidget {
  const WalletPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(context.t('wallet.myBalance')),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Balance Card
            _buildBalanceCard(context),

            // Quick Actions
            Padding(
              padding: AppSpacing.pagePadding,
              child: Row(
                children: [
                  Expanded(
                    child: GenexButton(
                      label: context.t('wallet.deposit'),
                      icon: Icons.add_rounded,
                      variant: GenexButtonVariant.primary,
                      onPressed: () {
                        Navigator.pushNamed(context, '/wallet/deposit');
                      },
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: GenexButton(
                      label: context.t('wallet.withdraw'),
                      icon: Icons.account_balance_rounded,
                      variant: GenexButtonVariant.outline,
                      onPressed: () {
                        Navigator.pushNamed(context, '/wallet/withdraw');
                      },
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),

            // Transaction History
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(context.t('wallet.records'), style: AppTypography.h3),
                  GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/wallet/records');
                    },
                    child: Row(
                      children: [
                        Text(context.t('wallet.filter'), style: AppTypography.labelSmall.copyWith(
                          color: AppColors.textTertiary,
                        )),
                        const Icon(Icons.filter_list_rounded, size: 16,
                            color: AppColors.textTertiary),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 12),

            // Transaction List
            _buildTransactionList(context),

            const SizedBox(height: 80),
          ],
        ),
      ),
    );
  }

  Widget _buildBalanceCard(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(20, 16, 20, 16),
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: AppColors.cardGradient,
        borderRadius: AppSpacing.borderRadiusLg,
        boxShadow: AppSpacing.shadowPrimary,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(context.t('wallet.totalBalance'), style: AppTypography.bodySmall.copyWith(
            color: Colors.white70,
          )),
          const SizedBox(height: 8),
          Text(
            '\$1,234.56',
            style: AppTypography.displayLarge.copyWith(
              color: Colors.white,
              fontSize: 36,
            ),
          ),
          const SizedBox(height: 20),
          Row(
            children: [
              _balanceItem(context.t('wallet.withdrawable'), '\$1,034.56'),
              const SizedBox(width: 32),
              _balanceItem(context.t('wallet.frozen'), '\$200.00'),
            ],
          ),
        ],
      ),
    );
  }

  Widget _balanceItem(String label, String value) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: AppTypography.caption.copyWith(color: Colors.white54)),
        const SizedBox(height: 4),
        Text(value, style: AppTypography.labelMedium.copyWith(color: Colors.white)),
      ],
    );
  }

  Widget _buildTransactionList(BuildContext context) {
    final transactions = [
      ('${context.t('wallet.buyIn')} 星巴克 \$25 礼品卡', '-\$21.25', Icons.shopping_cart_rounded, AppColors.textPrimary, '14:32'),
      ('${context.t('wallet.sellOut')} Amazon \$50 购物券', '+\$42.50', Icons.sell_rounded, AppColors.success, '10:15'),
      (context.t('wallet.deposit'), '+\$500.00', Icons.add_circle_outline_rounded, AppColors.info, '09:20'),
      ('${context.t('wallet.giftTransfer')} Target 券', '-\$30.00', Icons.card_giftcard_rounded, AppColors.textPrimary, '16:45'),
      ('${context.t('wallet.redeemUse')} Nike 运动券', '-', Icons.check_circle_outline_rounded, AppColors.success, '12:00'),
      (context.t('wallet.withdraw'), '-\$200.00', Icons.account_balance_rounded, AppColors.textPrimary, '08:30'),
    ];

    return ListView.separated(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.symmetric(horizontal: 20),
      itemCount: transactions.length,
      separatorBuilder: (_, __) => const Divider(indent: 56),
      itemBuilder: (context, index) {
        final (title, amount, icon, color, time) = transactions[index];
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: Row(
            children: [
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: color.withValues(alpha: 0.1),
                  shape: BoxShape.circle,
                ),
                child: Icon(icon, size: 20, color: color),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, style: AppTypography.labelMedium),
                    Text(time, style: AppTypography.caption),
                  ],
                ),
              ),
              Text(
                amount,
                style: AppTypography.labelMedium.copyWith(
                  color: amount.startsWith('+') ? AppColors.success : AppColors.textPrimary,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}