import 'package:flutter/material.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';
import '../../../../app/i18n/app_localizations.dart';

/// A3. 支付成功页
///
/// 成功动画、订单号、「查看我的券」「继续逛」
class PaymentSuccessPage extends StatelessWidget {
  final String orderNumber;
  final double amount;
  final String couponName;

  const PaymentSuccessPage({
    super.key,
    this.orderNumber = 'GNX-20260209-001234',
    this.amount = 21.25,
    this.couponName = '星巴克 \$25 礼品卡',
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: AppSpacing.pagePadding,
          child: Column(
            children: [
              const Spacer(flex: 2),

              // Success Icon
              Container(
                width: 88,
                height: 88,
                decoration: const BoxDecoration(
                  gradient: AppColors.successGradient,
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  Icons.check_rounded,
                  color: Colors.white,
                  size: 44,
                ),
              ),
              const SizedBox(height: 24),

              Text(context.t('paymentSuccess.title'), style: AppTypography.h1),
              const SizedBox(height: 8),
              Text(
                context.t('paymentSuccess.hint'),
                style: AppTypography.bodyMedium.copyWith(color: AppColors.textSecondary),
              ),
              const SizedBox(height: 32),

              // Order Info Card
              Container(
                width: double.infinity,
                padding: AppSpacing.cardPadding,
                decoration: BoxDecoration(
                  color: AppColors.surface,
                  borderRadius: AppSpacing.borderRadiusMd,
                  border: Border.all(color: AppColors.borderLight),
                ),
                child: Column(
                  children: [
                    _infoRow(context.t('paymentSuccess.couponName'), couponName),
                    const SizedBox(height: 10),
                    const Divider(),
                    const SizedBox(height: 10),
                    _infoRow(context.t('paymentSuccess.payAmount'), '\$$amount'),
                    const SizedBox(height: 10),
                    const Divider(),
                    const SizedBox(height: 10),
                    _infoRow(context.t('paymentSuccess.orderNo'), orderNumber),
                    const SizedBox(height: 10),
                    const Divider(),
                    const SizedBox(height: 10),
                    _infoRow(context.t('paymentSuccess.payTime'), '2026-02-09 14:32:15'),
                  ],
                ),
              ),

              const Spacer(flex: 3),

              // Actions
              GenexButton(
                label: context.t('paymentSuccess.viewMyCoupon'),
                onPressed: () {
                  Navigator.pushNamedAndRemoveUntil(context, '/main', (route) => false);
                },
              ),
              const SizedBox(height: 12),
              GenexButton(
                label: context.t('paymentSuccess.continueBrowse'),
                variant: GenexButtonVariant.outline,
                onPressed: () {
                  Navigator.pushNamedAndRemoveUntil(context, '/main', (route) => false);
                },
              ),
              const SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }

  Widget _infoRow(String label, String value) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(label, style: AppTypography.bodyMedium.copyWith(
          color: AppColors.textSecondary,
        )),
        Flexible(
          child: Text(
            value,
            style: AppTypography.labelMedium,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    );
  }
}
