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

/// 接收券 - 底部弹出Sheet
///
/// 展示接收ID和接收二维码，对方可以通过扫码转赠券到钱包
class ReceiveCouponSheet extends StatelessWidget {
  const ReceiveCouponSheet({super.key});

  static const String _mockReceiveId = 'GNX-USR-8A3F-K9D2';

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: AppColors.surface,
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Drag handle
          Container(
            margin: const EdgeInsets.only(top: 12),
            width: 36,
            height: 4,
            decoration: BoxDecoration(
              color: AppColors.gray300,
              borderRadius: AppSpacing.borderRadiusFull,
            ),
          ),

          // Title
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(context.t('receiveCoupon.title'), style: AppTypography.h2),
                GestureDetector(
                  onTap: () => Navigator.pop(context),
                  child: const Icon(Icons.close_rounded,
                      color: AppColors.textTertiary, size: 24),
                ),
              ],
            ),
          ),

          const SizedBox(height: 8),

          // Description
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Text(
              context.t('receiveCoupon.hint'),
              style: AppTypography.bodySmall,
            ),
          ),

          const SizedBox(height: 24),

          // QR Code area
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 40),
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: AppColors.surface,
              borderRadius: AppSpacing.borderRadiusMd,
              border: Border.all(color: AppColors.borderLight, width: 1.5),
              boxShadow: AppSpacing.shadowMd,
            ),
            child: Column(
              children: [
                // QR Code placeholder
                Container(
                  width: 180,
                  height: 180,
                  decoration: BoxDecoration(
                    color: AppColors.gray50,
                    borderRadius: AppSpacing.borderRadiusSm,
                  ),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      // QR code pattern placeholder
                      GridView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        padding: const EdgeInsets.all(16),
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 9,
                          mainAxisSpacing: 2,
                          crossAxisSpacing: 2,
                        ),
                        itemCount: 81,
                        itemBuilder: (context, index) {
                          final isCorner = _isQrCorner(index);
                          final isDark =
                              isCorner || (index * 7 + 3) % 3 == 0;
                          return Container(
                            decoration: BoxDecoration(
                              color: isDark
                                  ? AppColors.textPrimary
                                  : Colors.transparent,
                              borderRadius: BorderRadius.circular(1),
                            ),
                          );
                        },
                      ),
                      // Center logo
                      Container(
                        width: 36,
                        height: 36,
                        decoration: BoxDecoration(
                          color: AppColors.surface,
                          borderRadius: AppSpacing.borderRadiusSm,
                          border: Border.all(color: AppColors.borderLight),
                        ),
                        child: const Icon(
                            Icons.account_balance_wallet_rounded,
                            color: AppColors.primary,
                            size: 18),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 16),

                // Receive ID
                Text(context.t('receiveCoupon.id'), style: AppTypography.caption),
                const SizedBox(height: 6),
                GestureDetector(
                  onTap: () {
                    Clipboard.setData(
                        const ClipboardData(text: _mockReceiveId));
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text(context.t('receiveCoupon.idCopied')),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 14, vertical: 8),
                    decoration: BoxDecoration(
                      color: AppColors.primarySurface,
                      borderRadius: AppSpacing.borderRadiusFull,
                      border: Border.all(
                          color:
                              AppColors.primary.withValues(alpha: 0.2)),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          _mockReceiveId,
                          style: AppTypography.labelMedium.copyWith(
                            color: AppColors.primary,
                            fontFamily: 'monospace',
                            letterSpacing: 1.0,
                          ),
                        ),
                        const SizedBox(width: 8),
                        const Icon(Icons.copy_rounded,
                            size: 16, color: AppColors.primary),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 24),

          // Tips
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: AppColors.infoLight,
                borderRadius: AppSpacing.borderRadiusSm,
              ),
              child: Row(
                children: [
                  const Icon(Icons.info_outline_rounded,
                      size: 16, color: AppColors.info),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      context.t('receiveCoupon.note'),
                      style: AppTypography.bodySmall
                          .copyWith(color: AppColors.info),
                    ),
                  ),
                ],
              ),
            ),
          ),

          SizedBox(
              height: MediaQuery.of(context).padding.bottom + 24),
        ],
      ),
    );
  }

  bool _isQrCorner(int index) {
    final row = index ~/ 9;
    final col = index % 9;
    if (row < 3 && col < 3) return true;
    if (row < 3 && col > 5) return true;
    if (row > 5 && col < 3) return true;
    return false;
  }
}
