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 '../../../../shared/widgets/status_tag.dart';

/// A4. 券详情（持有券）- QR码/条形码 + 转赠/出售/提取
///
/// 券二维码/条形码（核销用）、券信息、使用说明、
/// 「转赠」「出售」「使用说明」按钮
class MyCouponDetailPage extends StatelessWidget {
  const MyCouponDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded, size: 20),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: const Text('券详情'),
        actions: [
          IconButton(
            icon: const Icon(Icons.more_horiz_rounded),
            onPressed: () => _showMoreOptions(context),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: AppSpacing.pagePadding,
        child: Column(
          children: [
            const SizedBox(height: 16),

            // QR Code Card
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                gradient: AppColors.cardGradient,
                borderRadius: AppSpacing.borderRadiusLg,
                boxShadow: AppSpacing.shadowPrimary,
              ),
              child: Column(
                children: [
                  // Brand + Status
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('Starbucks', style: AppTypography.bodySmall.copyWith(
                            color: Colors.white70,
                          )),
                          Text('星巴克 \$25 礼品卡', style: AppTypography.h2.copyWith(
                            color: Colors.white,
                          )),
                        ],
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                        decoration: BoxDecoration(
                          color: Colors.white24,
                          borderRadius: AppSpacing.borderRadiusFull,
                        ),
                        child: Text('可使用', style: AppTypography.caption.copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        )),
                      ),
                    ],
                  ),
                  const SizedBox(height: 24),

                  // QR Code area
                  Container(
                    width: 200,
                    height: 200,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: AppSpacing.borderRadiusMd,
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.qr_code_rounded, size: 140,
                            color: AppColors.textPrimary),
                        const SizedBox(height: 8),
                        Text('GNX-STB-A1B2C3D4',
                            style: AppTypography.caption.copyWith(
                              letterSpacing: 1.5,
                              fontWeight: FontWeight.w600,
                            )),
                      ],
                    ),
                  ),
                  const SizedBox(height: 16),

                  // Instructions
                  Text(
                    '出示此二维码给商户扫描核销',
                    style: AppTypography.bodySmall.copyWith(color: Colors.white70),
                  ),

                  const SizedBox(height: 8),

                  // Barcode toggle
                  TextButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.view_headline_rounded, size: 18,
                        color: Colors.white70),
                    label: Text('切换条形码', style: AppTypography.labelSmall.copyWith(
                      color: Colors.white70,
                    )),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 20),

            // Face Value + Expiry
            Container(
              padding: AppSpacing.cardPadding,
              decoration: BoxDecoration(
                color: AppColors.surface,
                borderRadius: AppSpacing.borderRadiusMd,
                border: Border.all(color: AppColors.borderLight),
              ),
              child: Column(
                children: [
                  _infoRow('面值', '\$25.00'),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 10), child: Divider()),
                  _infoRow('购买价格', '\$21.25'),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 10), child: Divider()),
                  _infoRow('有效期', '2026/12/31'),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 10), child: Divider()),
                  _infoRow('订单号', 'GNX-20260209-001234'),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 10), child: Divider()),
                  _infoRow('剩余可转售次数', '3次'),
                ],
              ),
            ),
            const SizedBox(height: 16),

            // Action Buttons
            Row(
              children: [
                Expanded(
                  child: GenexButton(
                    label: '转赠',
                    icon: Icons.card_giftcard_rounded,
                    variant: GenexButtonVariant.secondary,
                    onPressed: () {
                      Navigator.pushNamed(context, '/transfer');
                    },
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: GenexButton(
                    label: '出售',
                    icon: Icons.sell_rounded,
                    variant: GenexButtonVariant.outline,
                    onPressed: () {
                      Navigator.pushNamed(context, '/sell');
                    },
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),

            // Usage Rules
            Container(
              width: double.infinity,
              padding: AppSpacing.cardPadding,
              decoration: BoxDecoration(
                color: AppColors.surface,
                borderRadius: AppSpacing.borderRadiusMd,
                border: Border.all(color: AppColors.borderLight),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('使用说明', style: AppTypography.labelMedium),
                  const SizedBox(height: 12),
                  _ruleItem('全国星巴克门店通用'),
                  _ruleItem('请在有效期内使用'),
                  _ruleItem('每次消费仅可使用一张'),
                  _ruleItem('不可兑换现金'),
                ],
              ),
            ),

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

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

  Widget _ruleItem(String text) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        children: [
          Container(
            width: 4, height: 4,
            decoration: const BoxDecoration(
              color: AppColors.textTertiary,
              shape: BoxShape.circle,
            ),
          ),
          const SizedBox(width: 8),
          Text(text, style: AppTypography.bodySmall),
        ],
      ),
    );
  }

  void _showMoreOptions(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (ctx) => Container(
        padding: const EdgeInsets.fromLTRB(20, 8, 20, 40),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 36, height: 4,
              decoration: BoxDecoration(
                color: AppColors.gray300,
                borderRadius: AppSpacing.borderRadiusFull,
              ),
            ),
            const SizedBox(height: 16),
            _optionTile(Icons.wallet_rounded, '提取到外部钱包', '需KYC L2+认证', () {}),
            const Divider(),
            _optionTile(Icons.receipt_long_rounded, '查看交易记录', '', () {}),
            const Divider(),
            _optionTile(Icons.help_outline_rounded, '使用帮助', '', () {}),
          ],
        ),
      ),
    );
  }

  Widget _optionTile(IconData icon, String title, String subtitle, VoidCallback onTap) {
    return ListTile(
      leading: Icon(icon, color: AppColors.textPrimary),
      title: Text(title, style: AppTypography.labelMedium),
      subtitle: subtitle.isNotEmpty
          ? Text(subtitle, style: AppTypography.caption)
          : null,
      trailing: const Icon(Icons.chevron_right_rounded, color: AppColors.textTertiary),
      onTap: onTap,
      contentPadding: EdgeInsets.zero,
    );
  }
}
