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

/// 消息详情页面
///
/// 查看单条通知的详细内容
/// 类型：交易通知、到期提醒、系统通知、活动推送
class MessageDetailPage extends StatelessWidget {
  final String title;
  final String type;

  const MessageDetailPage({
    super.key,
    this.title = '交易成功通知',
    this.type = 'transaction',
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('消息详情')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Icon & Type
            Row(
              children: [
                Container(
                  width: 44,
                  height: 44,
                  decoration: BoxDecoration(
                    color: _typeColor.withValues(alpha: 0.1),
                    borderRadius: AppSpacing.borderRadiusMd,
                  ),
                  child: Icon(_typeIcon, color: _typeColor, size: 22),
                ),
                const SizedBox(width: 12),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                  decoration: BoxDecoration(
                    color: _typeColor.withValues(alpha: 0.1),
                    borderRadius: AppSpacing.borderRadiusFull,
                  ),
                  child: Text(_typeLabel, style: TextStyle(fontSize: 11, color: _typeColor, fontWeight: FontWeight.w600)),
                ),
              ],
            ),
            const SizedBox(height: 16),

            // Title
            Text(title, style: AppTypography.h1),
            const SizedBox(height: 8),
            Text('2026年2月10日 14:32', style: AppTypography.bodySmall),
            const SizedBox(height: 24),

            // Content
            Container(
              padding: AppSpacing.cardPadding,
              decoration: BoxDecoration(
                color: AppColors.surface,
                borderRadius: AppSpacing.borderRadiusMd,
                border: Border.all(color: AppColors.borderLight),
              ),
              child: const Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '您成功购买了 星巴克 \$25 礼品卡，支付金额 \$21.25。',
                    style: TextStyle(fontSize: 15, height: 1.6),
                  ),
                  SizedBox(height: 16),
                  _DetailRow('券名称', '星巴克 \$25 礼品卡'),
                  _DetailRow('面值', '\$25.00'),
                  _DetailRow('支付金额', '\$21.25'),
                  _DetailRow('订单号', 'GNX20260210001'),
                  _DetailRow('支付方式', 'Visa •••• 4242'),
                ],
              ),
            ),
            const SizedBox(height: 20),

            // Actions
            SizedBox(
              width: double.infinity,
              child: OutlinedButton(
                onPressed: () {},
                child: const Text('查看券详情'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Color get _typeColor {
    switch (type) {
      case 'transaction': return AppColors.success;
      case 'expiry': return AppColors.warning;
      case 'system': return AppColors.info;
      default: return AppColors.primary;
    }
  }

  IconData get _typeIcon {
    switch (type) {
      case 'transaction': return Icons.receipt_long_rounded;
      case 'expiry': return Icons.timer_rounded;
      case 'system': return Icons.settings_rounded;
      default: return Icons.campaign_rounded;
    }
  }

  String get _typeLabel {
    switch (type) {
      case 'transaction': return '交易通知';
      case 'expiry': return '到期提醒';
      case 'system': return '系统通知';
      default: return '活动推送';
    }
  }
}

class _DetailRow extends StatelessWidget {
  final String label;
  final String value;
  const _DetailRow(this.label, this.value);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label, style: AppTypography.bodySmall),
          Text(value, style: AppTypography.labelMedium),
        ],
      ),
    );
  }
}
