import 'package:flutter/material.dart';
import '../../../../app/theme/app_colors.dart';
import '../../../../app/theme/app_typography.dart';
import '../../../../app/theme/app_spacing.dart';

/// 支付管理页面
///
/// 管理银行卡、信用卡、支付密码
class PaymentManagementPage extends StatelessWidget {
  const PaymentManagementPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('支付管理')),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          Text('我的银行卡', style: AppTypography.h3),
          const SizedBox(height: 12),

          // Card List
          _buildCard('Visa', '•••• •••• •••• 4242', 'CREDIT', AppColors.primary),
          const SizedBox(height: 10),
          _buildCard('Mastercard', '•••• •••• •••• 8888', 'DEBIT', AppColors.info),
          const SizedBox(height: 16),

          // Add Card
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              border: Border.all(color: AppColors.border, style: BorderStyle.solid),
              borderRadius: AppSpacing.borderRadiusMd,
            ),
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.add_circle_outline_rounded, color: AppColors.primary),
                SizedBox(width: 8),
                Text('添加新银行卡', style: TextStyle(color: AppColors.primary, fontWeight: FontWeight.w600)),
              ],
            ),
          ),
          const SizedBox(height: 32),

          // Bank Account
          Text('银行账户（提现用）', style: AppTypography.h3),
          const SizedBox(height: 12),
          Container(
            padding: AppSpacing.cardPadding,
            decoration: BoxDecoration(
              color: AppColors.surface,
              borderRadius: AppSpacing.borderRadiusMd,
              border: Border.all(color: AppColors.borderLight),
            ),
            child: Row(
              children: [
                const Icon(Icons.account_balance_rounded, color: AppColors.textSecondary),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Bank of America', style: AppTypography.labelMedium),
                      Text('•••• 6789 · 储蓄账户', style: AppTypography.caption),
                    ],
                  ),
                ),
                const Icon(Icons.chevron_right_rounded, color: AppColors.textTertiary),
              ],
            ),
          ),
          const SizedBox(height: 32),

          // Payment Security
          Text('支付安全', style: AppTypography.h3),
          const SizedBox(height: 12),
          _buildSettingTile('支付密码', '已设置', Icons.password_rounded),
          _buildSettingTile('指纹/面容支付', '已开启', Icons.fingerprint_rounded),
          _buildSettingTile('免密支付', '单笔≤\$10', Icons.flash_on_rounded),
        ],
      ),
    );
  }

  Widget _buildCard(String brand, String number, String type, Color color) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [color, color.withValues(alpha: 0.7)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: AppSpacing.borderRadiusLg,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(brand, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 16)),
              Text(type, style: TextStyle(color: Colors.white.withValues(alpha: 0.7), fontSize: 11)),
            ],
          ),
          const SizedBox(height: 20),
          Text(number, style: const TextStyle(color: Colors.white, fontSize: 18, letterSpacing: 2)),
        ],
      ),
    );
  }

  Widget _buildSettingTile(String title, String value, IconData icon) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
        color: AppColors.surface,
        borderRadius: AppSpacing.borderRadiusMd,
        border: Border.all(color: AppColors.borderLight),
      ),
      child: ListTile(
        leading: Icon(icon, color: AppColors.textSecondary, size: 22),
        title: Text(title, style: AppTypography.bodyMedium),
        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(value, style: AppTypography.caption),
            const SizedBox(width: 4),
            const Icon(Icons.chevron_right_rounded, size: 18, color: AppColors.textTertiary),
          ],
        ),
      ),
    );
  }
}
