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

/// 充值页面
///
/// 法币充值到平台账户余额
/// 支付方式：银行卡、Apple Pay、Google Pay
class DepositPage extends StatefulWidget {
  const DepositPage({super.key});

  @override
  State<DepositPage> createState() => _DepositPageState();
}

class _DepositPageState extends State<DepositPage> {
  final _amountController = TextEditingController();
  final _presets = [50, 100, 200, 500];
  int? _selectedPreset;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(context.t('deposit.title'))),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Current Balance
            Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                gradient: AppColors.primaryGradient,
                borderRadius: AppSpacing.borderRadiusLg,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(context.t('deposit.currentBalance'), style: AppTypography.bodySmall.copyWith(color: Colors.white70)),
                  const SizedBox(height: 4),
                  Text('\$128.50', style: AppTypography.displayLarge.copyWith(color: Colors.white)),
                ],
              ),
            ),
            const SizedBox(height: 24),

            Text(context.t('deposit.amount'), style: AppTypography.h3),
            const SizedBox(height: 12),

            // Preset Amounts
            Row(
              children: _presets.map((amount) {
                final isSelected = _selectedPreset == amount;
                return Expanded(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        _selectedPreset = amount;
                        _amountController.text = amount.toString();
                      });
                    },
                    child: Container(
                      margin: const EdgeInsets.only(right: 8),
                      padding: const EdgeInsets.symmetric(vertical: 14),
                      decoration: BoxDecoration(
                        color: isSelected ? AppColors.primaryContainer : AppColors.surface,
                        borderRadius: AppSpacing.borderRadiusMd,
                        border: Border.all(
                          color: isSelected ? AppColors.primary : AppColors.border,
                        ),
                      ),
                      child: Center(
                        child: Text(
                          '\$$amount',
                          style: AppTypography.labelMedium.copyWith(
                            color: isSelected ? AppColors.primary : AppColors.textPrimary,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
            const SizedBox(height: 16),

            // Custom Amount
            TextField(
              controller: _amountController,
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: InputDecoration(
                labelText: context.t('deposit.custom'),
                prefixText: '\$ ',
              ),
              onChanged: (_) => setState(() => _selectedPreset = null),
            ),
            const SizedBox(height: 24),

            // Payment Method
            Text(context.t('deposit.paymentMethod'), style: AppTypography.h3),
            const SizedBox(height: 12),
            _buildPaymentOption('Visa •••• 4242', Icons.credit_card_rounded, true),
            _buildPaymentOption('Apple Pay', Icons.apple_rounded, false),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        padding: const EdgeInsets.all(20),
        child: SizedBox(
          height: AppSpacing.buttonHeight,
          child: ElevatedButton(
            onPressed: _amountController.text.isNotEmpty ? () {} : null,
            child: Text('${context.t('deposit.submit')} \$${_amountController.text.isNotEmpty ? _amountController.text : '0'}'),
          ),
        ),
      ),
    );
  }

  Widget _buildPaymentOption(String name, IconData icon, bool selected) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: AppColors.surface,
        borderRadius: AppSpacing.borderRadiusMd,
        border: Border.all(color: selected ? AppColors.primary : AppColors.borderLight),
      ),
      child: Row(
        children: [
          Icon(icon, color: AppColors.textSecondary),
          const SizedBox(width: 12),
          Expanded(child: Text(name, style: AppTypography.labelMedium)),
          if (selected) const Icon(Icons.check_circle_rounded, color: AppColors.primary, size: 20),
        ],
      ),
    );
  }
}