import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:grocery_app/src/common_widget/network_image.dart';
import 'package:grocery_app/src/core/routes/routes.dart';
import 'package:grocery_app/src/logic/provider/bottom_navbar_provider.dart';
import 'package:grocery_app/src/logic/provider/home_provider.dart';
import 'package:grocery_app/src/ui/data_notfound.dart';
import 'package:grocery_app/src/ui/header.dart';
import 'package:grocery_app/utils/constants/color_constant.dart';
import 'package:grocery_app/utils/extensions/uicontext.dart';
import 'package:provider/provider.dart';
// import 'package:shimmer/shimmer.dart';
// Import Shimmer

class FavouriteScreen extends StatefulWidget {
  @override
  _FavouriteScreenState createState() => _FavouriteScreenState();
}

class _FavouriteScreenState extends State<FavouriteScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    Provider.of<ProductProvider>(context, listen: false)
        .gettAllWishList(context);
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );

    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: context.bodyAllPadding.copyWith(top: 0),
          child: Column(
            children: [
              Header(),
              itemList(),
              Consumer<ProductProvider>(
                  builder: (context, wishListProvider, _) {
                if (wishListProvider.productDatum.isEmpty) {
                  return SizedBox.shrink();
                } else {
                  return Padding(
                    padding: const EdgeInsets.only(),
                    child: Container(
                      height: 80,
                      width: MediaQuery.sizeOf(context).width,
                      decoration: BoxDecoration(
                          color: APPCOLOR.lightGreen,
                          borderRadius: BorderRadius.circular(15)),
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Row(
                          children: [
                            SizedBox(
                              width: 80,
                              child: Stack(
                                children: [
                                  Container(
                                    height: 70,
                                    width: 70,
                                    decoration: BoxDecoration(
                                        color: Colors.white.withOpacity(0.5),
                                        borderRadius:
                                            BorderRadius.circular(10)),
                                  ),
                                  Positioned(
                                    left: 20,
                                    bottom: 0,
                                    top: 0,
                                    right: 0,
                                    child: AppNetworkImage(
                                      radius: 10,
                                      imageUrl: wishListProvider
                                              .productDatumlastImageurl ??
                                          "https://5.imimg.com/data5/SELLER/Default/2024/2/385126988/OL/DA/VW/8627346/1l-fortune-sunflower-oil.jpg",
                                      backGroundColor: Colors.white,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Text(
                              wishListProvider.productDatum.length.toString() ??
                                  "",
                              style: context.customRegular(Colors.white, 18),
                            ),
                            const Spacer(),
                            InkWell(
                              onTap: () {
                                context.read<BottomNavProvider>().setIndex(2);
                              },
                              child: Row(
                                children: [
                                  Text(
                                    'View Cart',
                                    style:
                                        context.customMedium(Colors.white, 24),
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  const Icon(
                                    Icons.arrow_forward,
                                    color: Colors.white,
                                    size: 35,
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  );
                }
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget itemList() {
    return Consumer<ProductProvider>(builder: (context, provider, child) {
      if (provider.isWishListItemLoadingg) {
        return Expanded(
            child: _buildSkeletonLoader()); // Show Skeleton while loading
      } else if (provider.wishListItem.isEmpty) {
        return Expanded(
            child: DataNotFound(
          imagePath: 'assets/images/wishlist.jpg',
          message: "Data Not Found",
          width: 250.w,
          height: 200.h,
        ));
      } else {
        return Expanded(
          child: ListView.separated(
            itemCount: provider.wishListItem.length,
            shrinkWrap: true,
            padding: const EdgeInsets.all(16),
            itemBuilder: (_, index) {
              final item = provider.wishListItem[index];
              final product = item.product!;
              final productId = product.id!;

              _animationController.forward(from: 0);

              return GestureDetector(
                onTap: () {
                  context.push(
                    MyRoutes.PRODUCTDETAILS,
                    //   extra: productId

                    extra: {
                      "id": productId,
                      "quantity": 1,
                      "price": product.discountPrice,
                    },
                  );
                },
                child: Container(
                  padding: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.1),
                        blurRadius: 5,
                        offset: Offset(2, 2),
                      ),
                    ],
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Flexible(
                        flex: 3,
                        child: Container(
                          height: 100,
                          width: 100,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: APPCOLOR.bgGrey,
                          ),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: AppNetworkImage(
                              imageUrl: item
                                      .product!.productImages!.first.url ??
                                  "https://i.pinimg.com/originals/a5/f3/5f/a5f35fb23e942809da3df91b23718e8d.png",
                              backGroundColor: APPCOLOR.bgGrey,
                              radius: 10,
                            ),
                          ),
                        ),
                      ),
                      Flexible(
                        flex: 4,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Text(
                                product.name ?? "",
                                style: context.customMedium(
                                    APPCOLOR.balck1A1A1A, 14),
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                              Row(
                                children: [
                                  Text(
                                    "₹${product.discountPrice}",
                                    style: context.customSemiBold(
                                        Colors.black, 14),
                                  ),
                                  SizedBox(width: 5),
                                  Text(
                                    "₹${product.basePrice ?? ""}",
                                    style: context
                                        .customMedium(
                                            Colors.grey.withOpacity(0.8), 12)
                                        .copyWith(
                                          decoration:
                                              TextDecoration.lineThrough,
                                        ),
                                  ),
                                ],
                              ),
                              SizedBox(height: 10),
                            ],
                          ),
                        ),
                      ),
                      Spacer(),
                      Align(
                        alignment: Alignment.centerRight,
                        child: GestureDetector(
                          onTap: () async {
                            print("Add to Cart Pressed for ${product.id}");

                            await provider.addToCartWithWishlist(
                                context,
                                product.id!,
                                product,
                                product.productImages![index].url);
                          },
                          child: Container(
                            height: MediaQuery.of(context).size.height * 0.035,
                            width: MediaQuery.of(context).size.width * 0.1,
                            decoration: BoxDecoration(
                              color: APPCOLOR.lightGreen,
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Center(
                              child: provider.isLoading[product.id] ?? false
                                  ? Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Container(
                                        height: 10,
                                        width: 10,
                                        child: CircularProgressIndicator(
                                            color: Colors.white,
                                            strokeWidth: 2),
                                      ),
                                    )
                                  : Text(
                                      'Add',
                                      style: context.customRegular(
                                          Colors.white, 12),
                                    ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
            separatorBuilder: (_, __) => Divider(),
          ),
        );
      }
    });
  }

  Widget _buildSkeletonLoader() {
    return ListView.separated(
      itemCount: 6, // Show 6 skeleton items
      padding: const EdgeInsets.all(16),
      itemBuilder: (_, index) {
        return Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.grey[300],
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 16,
                      width: double.infinity,
                      color: Colors.grey[300],
                    ),
                    SizedBox(height: 8),
                    Container(
                      height: 16,
                      width: 100,
                      color: Colors.grey[300],
                    ),
                    SizedBox(height: 8),
                    Container(
                      height: 16,
                      width: 60,
                      color: Colors.grey[300],
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
      separatorBuilder: (_, __) => Divider(),
    );
  }
}