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';

/// A6. 支付方式选择页
///
/// 选择支付方式：信用卡/借记卡、Apple Pay、Google Pay
/// 后端自动完成：法币→稳定币→链上原子交换（消费者无感知）
class PaymentPage extends StatefulWidget {
  const PaymentPage({super.key});

  @override
  State<PaymentPage> createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  int _selectedMethod = 0;

  List<_PaymentMethod> _getMethods(BuildContext context) => [
    _PaymentMethod('Visa •••• 4242', Icons.credit_card_rounded, 'visa'),
    _PaymentMethod('Apple Pay', Icons.apple_rounded, 'apple_pay'),
    _PaymentMethod('Google Pay', Icons.account_balance_wallet_rounded, 'google_pay'),
    _PaymentMethod(context.t('payment.bankTransfer'), Icons.account_balance_rounded, 'bank'),
  ];

  @override
  Widget build(BuildContext context) {
    final methods = _getMethods(context);
    return Scaffold(
      appBar: AppBar(title: Text(context.t('payment.title'))),
      body: Column(
        children: [
          // Order Summary
          Container(
            margin: const EdgeInsets.all(20),
            padding: AppSpacing.cardPadding,
            decoration: BoxDecoration(
              color: AppColors.surface,
              borderRadius: AppSpacing.borderRadiusMd,
              border: Border.all(color: AppColors.borderLight),
            ),
            child: Row(
              children: [
                Container(
                  width: 48,
                  height: 48,
                  decoration: BoxDecoration(
                    color: AppColors.primarySurface,
                    borderRadius: AppSpacing.borderRadiusSm,
                  ),
                  child: const Icon(Icons.confirmation_number_rounded, color: AppColors.primary),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('星巴克 \$25 礼品卡', style: AppTypography.labelMedium),
                      const SizedBox(height: 2),
                      Text('${context.t('couponDetail.faceValue')} \$25.00', style: AppTypography.bodySmall),
                    ],
                  ),
                ),
                Text('\$21.25', style: AppTypography.priceMedium),
              ],
            ),
          ),

          // Payment Methods
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              itemCount: methods.length,
              itemBuilder: (context, index) {
                final method = methods[index];
                final isSelected = _selectedMethod == index;
                return GestureDetector(
                  onTap: () => setState(() => _selectedMethod = index),
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: AppColors.surface,
                      borderRadius: AppSpacing.borderRadiusMd,
                      border: Border.all(
                        color: isSelected ? AppColors.primary : AppColors.borderLight,
                        width: isSelected ? 1.5 : 1,
                      ),
                    ),
                    child: Row(
                      children: [
                        Icon(method.icon, color: isSelected ? AppColors.primary : AppColors.textSecondary, size: 24),
                        const SizedBox(width: 14),
                        Expanded(
                          child: Text(method.name, style: AppTypography.labelMedium),
                        ),
                        if (isSelected)
                          const Icon(Icons.check_circle_rounded, color: AppColors.primary, size: 22),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),

          // Add new method
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.add_rounded),
              label: Text(context.t('payment.addNew')),
            ),
          ),

          // Pay Button
          Container(
            padding: const EdgeInsets.all(20),
            child: SizedBox(
              width: double.infinity,
              height: AppSpacing.buttonHeight,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/payment/success');
                },
                child: Text('${context.t('payment.confirmPay')} \$21.25'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _PaymentMethod {
  final String name;
  final IconData icon;
  final String type;

  const _PaymentMethod(this.name, this.icon, this.type);
}