import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nearle/controllers/rewards_controller.dart';
import 'package:nearle/views/helpers/constants/Font_constant.dart';
import 'package:nearle/views/Dashboard/profile/informations/rider_rewards_page.dart';

class RewardsCard extends StatelessWidget {
  final RewardsController controller;
  final bool showFullDetails;

  const RewardsCard({
    super.key, 
    required this.controller,
    this.showFullDetails = false,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 1. Original Rewards Card (The Gradient Card)
        GestureDetector(
          onTap: () {
            if (!showFullDetails) {
              Get.to(() => const RiderRewardsPage());
            }
          },
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.all(16.r),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.r),
              gradient: const LinearGradient(
                colors: [
                  Color(0xFF2C3E50), // Dark blue/grey
                  Color(0xFF4CA1AF), // Tealish
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  blurRadius: 10,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Nearle Rewards",
                          style: TextStyle(
                            fontSize: 22.sp,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontFamily: FontConstants.fontFamily,
                          ),
                        ),
                        SizedBox(height: 4.h),
                        Text(
                          "Ride more to get more rewards 🚴",
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.white70,
                            fontFamily: FontConstants.fontFamily,
                          ),
                        ),
                      ],
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(20.r),
                        border: Border.all(color: Colors.white30, width: 1),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.stars_rounded, // Coin-like icon
                            color: Colors.amberAccent,
                            size: 24.sp,
                          ),
                          SizedBox(width: 8.w),
                          Obx(() {
                            return Text(
                              controller.isLoading.value 
                                  ? "..." 
                                  : "${controller.totalPoints.value}",
                              style: TextStyle(
                                fontSize: 24.sp,
                                fontWeight: FontWeight.bold,
                                color: Colors.amberAccent,
                                fontFamily: FontConstants.fontFamily,
                              ),
                            );
                          }),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 16.h),
                Container(
                  padding: EdgeInsets.all(12.r),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Keep riding correctly to get more points!",
                              style: TextStyle(
                                fontSize: 16.sp,
                                fontWeight: FontWeight.w600,
                                color: Colors.white,
                                fontFamily: FontConstants.fontFamily,
                              ),
                            ),
                            SizedBox(height: 4.h),
                            Text(
                              "Earn 100 points to unlock new rewards",
                              style: TextStyle(
                                fontSize: 14.sp,
                                color: Colors.white70,
                                fontFamily: FontConstants.fontFamily,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Icon(
                        Icons.emoji_events,
                        color: Colors.amber,
                        size: 32.sp,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

        if (showFullDetails) ...[
          SizedBox(height: 24.h),

          // 2. Surprise Gift Section
          _buildSurpriseGiftCard(),

          SizedBox(height: 24.h),

          // 3. The 4 Cards Section
          Text(
            "Redeem Your Points",
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.bold,
              fontFamily: FontConstants.fontFamily,
              color: Colors.black87,
            ),
          ),
          SizedBox(height: 16.h),

          // Card 1: Data Recharge
          _buildRewardOptionCard(
            title: "Data Recharge",
            subtitle: "Get free data for 1 month",
            points: "300 Points",
            icon: Icons.wifi,
            color1: const Color(0xFF11998e),
            color2: const Color(0xFF38ef7d),
          ),
          SizedBox(height: 16.h),

          // Card 2: Bonus Fuel
          _buildRewardOptionCard(
            title: "Bonus Fuel",
            subtitle: "Fuel support for your vehicle",
            points: "600 Points",
            icon: Icons.local_gas_station,
            color1: const Color(0xFFFF5F6D),
            color2: const Color(0xFFFFC371),
          ),
          SizedBox(height: 16.h),

          // Card 3: Gadgets
          _buildRewardOptionCard(
            title: "Gadgets Support",
            subtitle: "Powerbank or New Mobile support",
            points: "1000 - 1500 Points",
            icon: Icons.devices_other,
            color1: const Color(0xFF2193b0),
            color2: const Color(0xFF6dd5ed),
          ),
          SizedBox(height: 16.h),

          // Card 4: Vehicle Support
          _buildRewardOptionCard(
            title: "Vehicle Support",
            subtitle: "New vehicle or 50% loan support",
            points: "2000 Bonus Points",
            description: "Earn 2000 bonus without any loses in bonus point",
            icon: Icons.motorcycle,
            color1: const Color(0xFF8E2DE2),
            color2: const Color(0xFF4A00E0),
            isPremium: true,
          ),

          SizedBox(height: 30.h),

          // 4. Bottom Warning / Info Section
          Container(
            padding: EdgeInsets.all(16.r),
            decoration: BoxDecoration(
              color: Colors.red.shade50,
              borderRadius: BorderRadius.circular(12.r),
              border: Border.all(color: Colors.red.shade200),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(Icons.info_outline, color: Colors.red.shade700, size: 24.sp),
                SizedBox(width: 12.w),
                Expanded(
                  child: Text(
                    "Note: If you miss any deliveries or if requirements are not met for each delivery, negative bonus points will affect your board.",
                    style: TextStyle(
                      fontSize: 15.sp,
                      color: Colors.red.shade900,
                      fontFamily: FontConstants.fontFamily,
                      height: 1.4,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ],
    );
  }

  Widget _buildSurpriseGiftCard() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.purple.withOpacity(0.1),
            blurRadius: 15,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Stack(
        children: [
          Positioned(
            right: -20,
            top: -20,
            child: Icon(
              Icons.card_giftcard,
              size: 100.sp,
              color: Colors.purple.withOpacity(0.05),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(20.r),
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.all(12.r),
                  decoration: BoxDecoration(
                    color: Colors.purple.shade50,
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Icon(Icons.card_giftcard, color: Colors.purple, size: 30.sp),
                ),
                SizedBox(width: 16.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Monthly Surprise Gift",
                        style: TextStyle(
                          fontSize: 19.sp,
                          fontWeight: FontWeight.bold,
                          fontFamily: FontConstants.fontFamily,
                          color: Colors.black87,
                        ),
                      ),
                      SizedBox(height: 4.h),
                      Text(
                        "If you didn't skip any orders in 1 month!",
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.black54,
                          fontFamily: FontConstants.fontFamily,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildRewardOptionCard({
    required String title,
    required String subtitle,
    required String points,
    required IconData icon,
    required Color color1,
    required Color color2,
    String? description,
    bool isPremium = false,
  }) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.r),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20.r),
        child: Stack(
          children: [
            // Decorative Background Circle
            Positioned(
              right: -30,
              top: -30,
              child: Container(
                width: 120.w,
                height: 120.w,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    colors: [color1.withOpacity(0.2), color2.withOpacity(0.0)],
                    begin: Alignment.bottomLeft,
                    end: Alignment.topRight,
                  ),
                ),
              ),
            ),
            
            Padding(
              padding: EdgeInsets.all(20.r),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: EdgeInsets.all(10.r),
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [color1, color2],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                          ),
                          shape: BoxShape.circle,
                        ),
                        child: Icon(icon, color: Colors.white, size: 24.sp),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
                        decoration: BoxDecoration(
                          color: Colors.amber.shade50,
                          borderRadius: BorderRadius.circular(20.r),
                          border: Border.all(color: Colors.amber.shade200),
                        ),
                        child: FittedBox(
                          fit: BoxFit.scaleDown,
                          child: Text(
                            points,
                            style: TextStyle(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.bold,
                              color: Colors.amber.shade900,
                              fontFamily: FontConstants.fontFamily,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 16.h),
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 20.sp,
                      fontWeight: FontWeight.bold,
                      fontFamily: FontConstants.fontFamily,
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 15.sp,
                      color: Colors.black54,
                      fontFamily: FontConstants.fontFamily,
                    ),
                  ),
                  if (description != null) ...[
                     SizedBox(height: 12.h),
                     Container(
                       padding: EdgeInsets.all(10.r),
                       width: double.infinity,
                       decoration: BoxDecoration(
                         color: Colors.grey.shade50,
                         borderRadius: BorderRadius.circular(8.r),
                         border: Border.all(color: Colors.grey.shade200),
                       ),
                       child: Row(
                         children: [
                           Icon(Icons.star_outline, size: 16.sp, color: Colors.blueGrey),
                           SizedBox(width: 6.w),
                           Expanded(
                             child: Text(
                               description,
                               style: TextStyle(
                                 fontSize: 14.sp,
                                 color: Colors.black87,
                                 fontStyle: FontStyle.italic,
                                 fontFamily: FontConstants.fontFamily,
                               ),
                             ),
                           ),
                         ],
                       ),
                     )
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}