import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fast_cached_network_image/fast_cached_network_image.dart';
import 'package:muaawana/models/categories/category_response.dart';
import 'package:provider/provider.dart';

import '../../../config/size.dart';
import '../../../config/style.dart';
import '../../../models/services/result.dart';
import '../../../providers/home_provider.dart';
import '../../../providers/service_details_provider.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';

class ServiceCardWidget extends StatefulWidget {
  final Service service;

  const ServiceCardWidget({
    Key? key,
    required this.service,
  }) : super(key: key);

  @override
  State<ServiceCardWidget> createState() => _ServiceCardWidgetState();
}

class _ServiceCardWidgetState extends State<ServiceCardWidget> {
  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;

  @override
  Widget build(BuildContext context) {
    final serviceDetailsProvider = Provider.of<ServiceDetailsProvider>(context);

    return Container(
      margin: EdgeInsets.all(wm * 3),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Theme.of(context).brightness == Brightness.dark
                ? Colors.black.withOpacity(0.2)
                : Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Service Image Section
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Container(
                  height: hm * 16,
                  width:  hm * 14,
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(
                    Radius.circular(16),
                    ),
                  ),
                  child: ClipRRect(
                    borderRadius: const BorderRadius.all(
                      Radius.circular(16),
                    ),
                    child: widget.service.images != null
                        ? widget.service.images!.isNotEmpty
                        ? widget.service.images![0].url!.contains('svg')
                        ? SvgPicture.network(
                      'https://server.muaawana.com${widget.service.images![0].url!}',
                      fit: BoxFit.cover,
                    )
                        : FastCachedImage(
                      url: 'https://server.muaawana.com${widget.service.images![0].url!}',
                      fit: BoxFit.cover,
                    )
                        : Container(
                      color: Colors.grey[200],
                      child: Icon(
                        Icons.image,
                        size: hm * 8,
                        color: Colors.grey[400],
                      ),
                    )
                        : Container(
                      color: Colors.grey[200],
                      child: Icon(
                        Icons.image,
                        size: hm * 8,
                        color: Colors.grey[400],
                      ),
                    ),
                  ),
                ),
           ),

          // Service Details Section
          Padding(
            padding: EdgeInsets.all(wm * 4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Service Name
                Txt(
                  text: context.read<HomeScreenProvider>().selectedCategory?.nom ?? "Service Name",
                  style: tS(
                    "lato_bold",
                    18,
                    FontWeight.bold,
                    Theme.of(context).brightness == Brightness.dark
                        ? AppNewStyle.appBackground
                        : AppStyle.black,
                  ),
                ),

                SizedBox(height: hm * 1),

                // Price Section
                Row(
                  children: [
                    // Current Price
                    Consumer<ServiceDetailsProvider>(
                        builder: (context, totalPriceProvider, _) {
                          double solde = totalPriceProvider.promoCode?.sold ?? 0;
                          double originalPrice = widget.service.price! * totalPriceProvider.quantity;
                          double discountedPrice = originalPrice - (solde * originalPrice / 100);

                          return Txt(
                            text: "${discountedPrice.toStringAsFixed(0)} OMR",
                            style: tS(
                              "lato_bold",
                              20,
                              FontWeight.bold,
                              Theme.of(context).brightness == Brightness.dark
                                  ? AppNewStyle.appBackground
                                  : AppStyle.black,
                            ),
                          );
                        }
                    ),

                    SizedBox(width: wm * 2),

                    // Original Price (if there's a discount)
                    Consumer<ServiceDetailsProvider>(
                        builder: (context, totalPriceProvider, _) {
                          double solde = totalPriceProvider.promoCode?.sold ?? 0;
                          if (solde > 0) {
                            double originalPrice = widget.service.price! * totalPriceProvider.quantity;
                            return Txt(
                              text: "${originalPrice.toStringAsFixed(0)} OMR",
                              style: tS(
                                "lato_regular",
                                14,
                                FontWeight.normal,
                                Theme.of(context).brightness == Brightness.dark
                                    ? Colors.white54
                                    : Colors.grey,
                              ).copyWith(
                                decoration: TextDecoration.lineThrough,
                              ),
                            );
                          }
                          return const SizedBox();
                        }
                    ),

                    SizedBox(width: wm * 2),

                    // Discount Badge
                    Consumer<ServiceDetailsProvider>(
                        builder: (context, totalPriceProvider, _) {
                          double solde = totalPriceProvider.promoCode?.sold ?? 0;
                          if (solde > 0) {
                            return Container(
                              padding: EdgeInsets.symmetric(
                                horizontal: wm * 2,
                                vertical: hm * 0.5,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadiusDirectional.only(
                                  topStart: Radius.circular(10),
                                  bottomEnd: Radius.circular(10),),
                              ),
                              child: Txt(
                                text: "${solde.toStringAsFixed(0)}% OFF",
                                style: tS(
                                  "lato_bold",
                                  10,
                                  FontWeight.bold,
                                  Colors.white,
                                ),
                              ),
                            );
                          }
                          return const SizedBox();
                        }
                    ),
                  ],
                ),

                SizedBox(height: hm * 1.5),

                // Rating Section
                Row(
                  children: [
                    Icon(
                      Icons.star,
                      color: AppNewStyle.purpleColor,
                      size: hm * 2,
                    ),
                    SizedBox(width: wm * 1),
                    Txt(
                      text: "5.0", // You can make this dynamic based on your service model
                      style: tS(
                        "lato_regular",
                        14,
                        FontWeight.normal,
                        Theme.of(context).brightness == Brightness.dark
                            ? Colors.white70
                            : Colors.grey[600]!,
                      ),
                    ),
                    SizedBox(width: wm * 1),
                    // Txt(
                    //   text: "(24)", // You can make this dynamic based on your service model
                    //   style: tS(
                    //     "lato_regular",
                    //     14,
                    //     FontWeight.normal,
                    //     Colors.grey[400]!,
                    //   ),
                    // ),
                  ],
                ),

                SizedBox(height: hm * 2),

                // Quantity Controls
                // Row(
                //   mainAxisAlignment: MainAxisAlignment.center,
                //   children: [
                //     // Decrease Button
                //     GestureDetector(
                //       onTap: () {
                //         if (serviceDetailsProvider.quantity > 1) {
                //           serviceDetailsProvider.updateQuantity(
                //               serviceDetailsProvider.quantity - 1
                //           );
                //         }
                //       },
                //       child: Container(
                //         width: wm * 10,
                //         height: hm * 4,
                //         decoration: BoxDecoration(
                //           border: Border.all(
                //             color: AppStyle.buttonBlue,
                //             width: 2,
                //           ),
                //           borderRadius: BorderRadius.circular(8),
                //         ),
                //         child: Icon(
                //           Icons.remove,
                //           color: AppStyle.buttonBlue,
                //           size: hm * 2.5,
                //         ),
                //       ),
                //     ),
                //
                //     SizedBox(width: wm * 4),
                //
                //     // Quantity Display
                //     Consumer<ServiceDetailsProvider>(
                //         builder: (context, provider, _) {
                //           return Container(
                //             width: wm * 15,
                //             height: hm * 4,
                //             decoration: BoxDecoration(
                //               border: Border.all(
                //                 color: Colors.grey[300]!,
                //                 width: 1,
                //               ),
                //               borderRadius: BorderRadius.circular(8),
                //             ),
                //             child: Center(
                //               child: Txt(
                //                 text: "${provider.quantity}",
                //                 style: tS(
                //                   "lato_bold",
                //                   18,
                //                   FontWeight.bold,
                //                   AppStyle.black,
                //                 ),
                //               ),
                //             ),
                //           );
                //         }
                //     ),
                //
                //     SizedBox(width: wm * 4),
                //
                //     // Increase Button
                //     GestureDetector(
                //       onTap: () {
                //         serviceDetailsProvider.updateQuantity(
                //             serviceDetailsProvider.quantity + 1
                //         );
                //       },
                //       child: Container(
                //         width: wm * 10,
                //         height: hm * 4,
                //         decoration: BoxDecoration(
                //           border: Border.all(
                //             color: AppStyle.buttonBlue,
                //             width: 2,
                //           ),
                //           borderRadius: BorderRadius.circular(8),
                //         ),
                //         child: Icon(
                //           Icons.add,
                //           color: AppStyle.buttonBlue,
                //           size: hm * 2.5,
                //         ),
                //       ),
                //     ),
                //   ],
                // ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}