import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import '../../../../../common/theme/theme.dart';
import '../../poin_page.dart';

@RoutePage()
class ProductRedeemPage extends StatefulWidget {
  final Product product;
  final PointCard pointCard;

  const ProductRedeemPage({
    super.key,
    required this.product,
    required this.pointCard,
  });

  @override
  State<ProductRedeemPage> createState() => _ProductRedeemPageState();
}

class _ProductRedeemPageState extends State<ProductRedeemPage>
    with TickerProviderStateMixin {
  bool _isProcessing = false;
  bool _showSuccess = false;
  String _redeemCode = '';
  late AnimationController _pulseController;
  late AnimationController _successController;
  late Animation<double> _pulseAnimation;
  late Animation<double> _successAnimation;

  @override
  void initState() {
    super.initState();
    _pulseController = AnimationController(
      duration: Duration(milliseconds: 1500),
      vsync: this,
    );
    _successController = AnimationController(
      duration: Duration(milliseconds: 800),
      vsync: this,
    );

    _pulseAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
      CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
    );
    _successAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _successController, curve: Curves.elasticOut),
    );

    _pulseController.repeat(reverse: true);
  }

  @override
  void dispose() {
    _pulseController.dispose();
    _successController.dispose();
    super.dispose();
  }

  bool get canRedeem =>
      widget.pointCard.availablePoints >= widget.product.pointsRequired;
  int get pointsShortage =>
      widget.product.pointsRequired - widget.pointCard.availablePoints;

  Future<void> _processRedeem() async {
    setState(() {
      _isProcessing = true;
    });

    // Simulate API call
    await Future.delayed(Duration(seconds: 2));

    // Generate mock redeem code
    _redeemCode =
        'RDM${DateTime.now().millisecondsSinceEpoch.toString().substring(8)}';

    setState(() {
      _isProcessing = false;
      _showSuccess = true;
    });

    _pulseController.stop();
    _successController.forward();

    // Auto dismiss after 3 seconds
    Future.delayed(Duration(seconds: 3), () {
      if (mounted) {
        Navigator.pop(
          context,
          true,
        ); // Return true to indicate successful redemption
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.white,
      body: CustomScrollView(
        slivers: [
          // Custom App Bar with product image
          SliverAppBar(
            expandedHeight: 280,
            floating: false,
            pinned: true,
            backgroundColor: AppColor.white,
            elevation: 0,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      AppColor.primary.withOpacity(0.1),
                      AppColor.backgroundLight,
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
                child: Center(
                  child: AnimatedBuilder(
                    animation: _pulseAnimation,
                    builder: (context, child) {
                      return Transform.scale(
                        scale: _isProcessing ? _pulseAnimation.value : 1.0,
                        child: Container(
                          width: 120,
                          height: 120,
                          decoration: BoxDecoration(
                            color: AppColor.white,
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: AppColor.primary.withOpacity(0.2),
                                blurRadius: 20,
                                offset: Offset(0, 8),
                              ),
                            ],
                          ),
                          child: Center(
                            child: Text(
                              widget.product.image,
                              style: TextStyle(fontSize: 48),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
            ),
          ),

          // Product Details
          SliverToBoxAdapter(
            child: _showSuccess ? _buildSuccessView() : _buildProductDetails(),
          ),
        ],
      ),
    );
  }

  Widget _buildProductDetails() {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Product Name & Popular Badge
          Row(
            children: [
              Expanded(
                child: Text(
                  widget.product.name,
                  style: AppStyle.h4.copyWith(
                    fontWeight: FontWeight.w700,
                    color: AppColor.textPrimary,
                  ),
                ),
              ),
              if (widget.product.isPopular)
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  decoration: BoxDecoration(
                    color: AppColor.warning,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        Icons.local_fire_department,
                        color: AppColor.white,
                        size: 14,
                      ),
                      SizedBox(width: 4),
                      Text(
                        "Popular",
                        style: AppStyle.xs.copyWith(
                          color: AppColor.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),

          SizedBox(height: 8),

          // Description
          Text(
            widget.product.fullDescription ?? widget.product.description,
            style: AppStyle.md.copyWith(
              color: AppColor.textSecondary,
              height: 1.5,
            ),
          ),

          SizedBox(height: 24),

          // Points Required Card
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  AppColor.primary.withOpacity(0.1),
                  AppColor.primary.withOpacity(0.05),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: AppColor.primary.withOpacity(0.3)),
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.stars_rounded,
                      color: AppColor.warning,
                      size: 24,
                    ),
                    SizedBox(width: 8),
                    Text(
                      "Points Required",
                      style: AppStyle.lg.copyWith(
                        fontWeight: FontWeight.w600,
                        color: AppColor.textPrimary,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 12),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "${widget.product.pointsRequired}",
                          style: AppStyle.h3.copyWith(
                            fontWeight: FontWeight.w700,
                            color: AppColor.primary,
                          ),
                        ),
                        Text(
                          "Points needed",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          "${widget.pointCard.availablePoints}",
                          style: AppStyle.h3.copyWith(
                            fontWeight: FontWeight.w700,
                            color: canRedeem
                                ? AppColor.success
                                : AppColor.error,
                          ),
                        ),
                        Text(
                          "Your points",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),

          SizedBox(height: 20),

          // Insufficient Points Warning
          if (!canRedeem)
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: AppColor.error.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: AppColor.error.withOpacity(0.3)),
              ),
              child: Row(
                children: [
                  Icon(
                    Icons.warning_amber_rounded,
                    color: AppColor.error,
                    size: 24,
                  ),
                  SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Insufficient Points",
                          style: AppStyle.md.copyWith(
                            fontWeight: FontWeight.w600,
                            color: AppColor.error,
                          ),
                        ),
                        Text(
                          "You need ${pointsShortage} more points to redeem this item",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

          SizedBox(height: 24),

          // Terms & Conditions
          _buildInfoSection(
            "Terms & Conditions",
            widget.product.termsAndConditions ??
                "• Valid for single use only\n• Cannot be combined with other offers\n• No cash value\n• Subject to availability\n• Valid at participating locations only",
          ),

          SizedBox(height: 16),

          // Validity
          _buildInfoSection(
            "Validity",
            widget.product.validUntil ??
                "Valid until: 30 days from redemption date",
          ),

          SizedBox(height: 32),

          // Redeem Button
          SizedBox(
            width: double.infinity,
            height: 56,
            child: ElevatedButton(
              onPressed: (_isProcessing || !canRedeem) ? null : _processRedeem,
              style: ElevatedButton.styleFrom(
                backgroundColor: canRedeem
                    ? AppColor.primary
                    : AppColor.textLight,
                foregroundColor: AppColor.white,
                elevation: canRedeem ? 4 : 0,
                shadowColor: AppColor.primary.withOpacity(0.3),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
              child: _isProcessing
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 20,
                          height: 20,
                          child: CircularProgressIndicator(
                            strokeWidth: 2,
                            valueColor: AlwaysStoppedAnimation<Color>(
                              AppColor.white,
                            ),
                          ),
                        ),
                        SizedBox(width: 12),
                        Text(
                          "Processing...",
                          style: AppStyle.lg.copyWith(
                            fontWeight: FontWeight.w600,
                            color: AppColor.white,
                          ),
                        ),
                      ],
                    )
                  : Text(
                      canRedeem ? "Redeem Now" : "Insufficient Points",
                      style: AppStyle.lg.copyWith(
                        fontWeight: FontWeight.w600,
                        color: AppColor.white,
                      ),
                    ),
            ),
          ),

          SizedBox(height: 20),

          // Alternative action for insufficient points
          if (!canRedeem)
            SizedBox(
              width: double.infinity,
              height: 48,
              child: OutlinedButton(
                onPressed: () {
                  // Navigate to earn points page or show earn points options
                  _showEarnPointsOptions();
                },
                style: OutlinedButton.styleFrom(
                  foregroundColor: AppColor.primary,
                  side: BorderSide(color: AppColor.primary, width: 2),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.add_circle_outline, size: 20),
                    SizedBox(width: 8),
                    Text(
                      "Earn More Points",
                      style: AppStyle.md.copyWith(
                        fontWeight: FontWeight.w600,
                        color: AppColor.primary,
                      ),
                    ),
                  ],
                ),
              ),
            ),

          SizedBox(height: 40),
        ],
      ),
    );
  }

  Widget _buildSuccessView() {
    return AnimatedBuilder(
      animation: _successAnimation,
      builder: (context, child) {
        return Transform.scale(
          scale: _successAnimation.value,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                SizedBox(height: 40),

                // Success Icon
                Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: AppColor.success,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: AppColor.success.withOpacity(0.3),
                        blurRadius: 20,
                        offset: Offset(0, 8),
                      ),
                    ],
                  ),
                  child: Icon(
                    Icons.check_rounded,
                    color: AppColor.white,
                    size: 48,
                  ),
                ),

                SizedBox(height: 24),

                // Success Message
                Text(
                  "Redemption Successful!",
                  style: AppStyle.h4.copyWith(
                    fontWeight: FontWeight.w700,
                    color: AppColor.success,
                  ),
                  textAlign: TextAlign.center,
                ),

                SizedBox(height: 12),

                Text(
                  "Your ${widget.product.name} is ready!",
                  style: AppStyle.lg.copyWith(color: AppColor.textSecondary),
                  textAlign: TextAlign.center,
                ),

                SizedBox(height: 32),

                // Redeem Code Card
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: AppColor.white,
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(color: AppColor.success, width: 2),
                    boxShadow: [
                      BoxShadow(
                        color: AppColor.success.withOpacity(0.1),
                        blurRadius: 12,
                        offset: Offset(0, 4),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      Text(
                        "Your Redeem Code",
                        style: AppStyle.md.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.textSecondary,
                        ),
                      ),
                      SizedBox(height: 12),
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 20,
                          vertical: 12,
                        ),
                        decoration: BoxDecoration(
                          color: AppColor.backgroundLight,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Text(
                          _redeemCode,
                          style: AppStyle.h5.copyWith(
                            fontWeight: FontWeight.w700,
                            color: AppColor.primary,
                            letterSpacing: 2,
                          ),
                        ),
                      ),
                      SizedBox(height: 12),
                    ],
                  ),
                ),

                SizedBox(height: 24),

                // Points Deducted Info
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: AppColor.primary.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.stars, color: AppColor.primary, size: 20),
                      SizedBox(width: 8),
                      Text(
                        "${widget.product.pointsRequired} points deducted",
                        style: AppStyle.md.copyWith(
                          color: AppColor.primary,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildInfoSection(String title, String content) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: AppStyle.lg.copyWith(
            fontWeight: FontWeight.w600,
            color: AppColor.textPrimary,
          ),
        ),
        SizedBox(height: 8),
        Container(
          width: double.infinity,
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: AppColor.white,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: AppColor.border),
          ),
          child: Text(
            content,
            style: AppStyle.sm.copyWith(
              color: AppColor.textSecondary,
              height: 1.6,
            ),
          ),
        ),
      ],
    );
  }

  void _showEarnPointsOptions() {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        height: MediaQuery.of(context).size.height * 0.6,
        decoration: BoxDecoration(
          color: AppColor.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
        ),
        child: Column(
          children: [
            // Handle
            Container(
              margin: EdgeInsets.only(top: 12),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: AppColor.textLight.withOpacity(0.5),
                borderRadius: BorderRadius.circular(2),
              ),
            ),

            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Earn More Points",
                    style: AppStyle.h5.copyWith(
                      fontWeight: FontWeight.w700,
                      color: AppColor.textPrimary,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    "You need ${pointsShortage} more points to redeem this item",
                    style: AppStyle.md.copyWith(color: AppColor.textSecondary),
                  ),

                  SizedBox(height: 24),

                  // Earn Points Options
                  _buildEarnOption(
                    "🛍️",
                    "Shop & Earn",
                    "Earn 1 point for every \$1 spent",
                    "Earn up to 500 points per day",
                  ),

                  _buildEarnOption(
                    "🎯",
                    "Complete Missions",
                    "Daily and weekly challenges",
                    "Earn 100-1000 points per mission",
                  ),

                  _buildEarnOption(
                    "👥",
                    "Refer Friends",
                    "Invite friends to join",
                    "Earn 500 points per referral",
                  ),

                  SizedBox(height: 20),

                  // Close Button
                  SizedBox(
                    width: double.infinity,
                    height: 48,
                    child: ElevatedButton(
                      onPressed: () => Navigator.pop(context),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColor.primary,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                      child: Text(
                        "Got it",
                        style: AppStyle.md.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEarnOption(
    String icon,
    String title,
    String description,
    String reward,
  ) {
    return Container(
      margin: EdgeInsets.only(bottom: 12),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColor.backgroundLight,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: AppColor.border),
      ),
      child: Row(
        children: [
          Container(
            width: 48,
            height: 48,
            decoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Center(child: Text(icon, style: TextStyle(fontSize: 24))),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: AppStyle.md.copyWith(
                    fontWeight: FontWeight.w600,
                    color: AppColor.textPrimary,
                  ),
                ),
                Text(
                  description,
                  style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
                ),
                Text(
                  reward,
                  style: AppStyle.xs.copyWith(
                    color: AppColor.primary,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
          Icon(Icons.arrow_forward_ios, color: AppColor.textLight, size: 16),
        ],
      ),
    );
  }
}
