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

import '../../../../config/size.dart';
import '../../../../config/style.dart';

class CategoryShimmerWidget extends StatelessWidget {
  const CategoryShimmerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final hm = SizeConfig.heightMultiplier;
    final wm = SizeConfig.widthMultiplier;

    return SizedBox(
      height: hm * 16,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 5,
        padding: EdgeInsets.symmetric(horizontal: wm * 5),
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsetsDirectional.only(end: wm * 4),
            child: Shimmer.fromColors(
              baseColor: Theme.of(context).brightness == Brightness.dark
                  ? Colors.grey[700]!
                  : Colors.grey[300]!,
              highlightColor: Theme.of(context).brightness == Brightness.dark
                  ? Colors.grey[500]!
                  : Colors.grey[100]!,
              child: Column(
                children: [
                  // Shimmer container for image
                  Container(
                    width: 80,
                    height: 80,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(16)),
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(height: hm),
                  // Shimmer container for text
                  Container(
                    width: 60,
                    height: 12,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

// Service Shimmer Widget
class ServiceShimmerWidget extends StatelessWidget {
  const ServiceShimmerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final hm = SizeConfig.heightMultiplier;
    final wm = SizeConfig.widthMultiplier;

    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: EdgeInsets.symmetric(horizontal: wm * 5),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: wm * 3,
        mainAxisSpacing: hm * 2,
        childAspectRatio: 0.75,
      ),
      itemCount: 6, // Show 6 shimmer items (3 rows of 2)
      itemBuilder: (context, index) {
        return Shimmer.fromColors(
          baseColor: Theme.of(context).brightness == Brightness.dark
              ? Colors.grey[700]!
              : Colors.grey[300]!,
          highlightColor: Theme.of(context).brightness == Brightness.dark
              ? Colors.grey[500]!
              : Colors.grey[100]!,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  spreadRadius: 1,
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Column(
              children: [
                // Image placeholder - matches new design
                Expanded(
                  flex: 3,
                  child: Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadiusDirectional.only(
                        topStart: Radius.circular(16),
                        topEnd: Radius.circular(16),
                      ),
                      color: Colors.grey[400],
                    ),
                    child: Stack(
                      children: [
                        // Bookmark placeholder
                        Positioned(
                          top: 12,
                          right: 12,
                          child: Container(
                            width: 32,
                            height: 32,
                            decoration: BoxDecoration(
                              color: Colors.white.withOpacity(0.9),
                              shape: BoxShape.circle,
                            ),
                            child: Container(
                              margin: const EdgeInsets.all(8),
                              decoration: BoxDecoration(
                                color: Colors.grey[400],
                                borderRadius: BorderRadius.circular(4),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                // Content placeholder - matches new design
                Expanded(
                  flex: 2,
                  child: Padding(
                    padding: EdgeInsets.all(wm * 3),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // Price and rating row
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            // Price placeholder
                            Container(
                              width: wm * 20,
                              height: 18,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                color: Colors.grey[400],
                              ),
                            ),
                            // Rating placeholder
                            Row(
                              children: [
                                Container(
                                  width: 16,
                                  height: 16,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(8),
                                    color: Colors.grey[400],
                                  ),
                                ),
                                const SizedBox(width: 4),
                                Container(
                                  width: wm * 8,
                                  height: 14,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(6),
                                    color: Colors.grey[400],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                        // Service name placeholder
                        Container(
                          width: wm * 30,
                          height: 16,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.grey[400],
                          ),
                        ),
                        // Duration placeholder
                        Row(
                          children: [
                            Container(
                              width: 14,
                              height: 14,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(7),
                                color: Colors.grey[400],
                              ),
                            ),
                            const SizedBox(width: 6),
                            Container(
                              width: wm * 15,
                              height: 12,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(6),
                                color: Colors.grey[400],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

// Ads Banner Shimmer Widget
class AdsBannerShimmerWidget extends StatelessWidget {
  const AdsBannerShimmerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wm = SizeConfig.widthMultiplier;

    return Shimmer.fromColors(
      baseColor: Theme.of(context).brightness == Brightness.dark
          ? Colors.grey[700]!
          : Colors.grey[300]!,
      highlightColor: Theme.of(context).brightness == Brightness.dark
          ? Colors.grey[500]!
          : Colors.grey[100]!,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: wm * 90,
          height: wm * 50,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    );
  }
}

// Store Card Shimmer Widget
class StoreCardShimmerWidget extends StatelessWidget {
  const StoreCardShimmerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wm = SizeConfig.widthMultiplier;

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Shimmer.fromColors(
        baseColor: Theme.of(context).brightness == Brightness.dark
            ? Colors.grey[700]!
            : Colors.grey[300]!,
        highlightColor: Theme.of(context).brightness == Brightness.dark
            ? Colors.grey[500]!
            : Colors.grey[100]!,
        child: Card(
          color: Theme.of(context).brightness == Brightness.dark
              ? AppNewStyle.darkAppBackground
              : AppNewStyle.appBackground,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          elevation: 0.1,
          child: Padding(
            padding: EdgeInsets.all(wm * 5),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // Store name placeholder
                Container(
                  width: wm * 40,
                  height: 18,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(9),
                    color: Colors.white,
                  ),
                ),
                // Store icon placeholder
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Container(
                    width: wm * 14,
                    height: wm * 14,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ServiceCardShimmerWidget extends StatelessWidget {
  const ServiceCardShimmerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wm = SizeConfig.widthMultiplier;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 22.0,vertical: 5),
      child: Shimmer.fromColors(
        baseColor: Theme.of(context).brightness == Brightness.dark
            ? Colors.grey[700]!
            : Colors.grey[300]!,
        highlightColor: Theme.of(context).brightness == Brightness.dark
            ? Colors.grey[500]!
            : Colors.grey[100]!,
        child: Card(
          color: Theme.of(context).brightness == Brightness.dark
              ? AppNewStyle.darkAppBackground
              : AppNewStyle.appBackground,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          elevation: 0.1,
          child: Container(
            width: wm * 40,
            height: 170,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(16)),
              color: AppStyle.white,
            ),
          ),
        ),
      ),
    );
  }
}

// Multiple Store Cards Shimmer (for lists)
class ServiceListShimmerWidget extends StatelessWidget {
  final int itemCount;

  const ServiceListShimmerWidget({Key? key, this.itemCount = 3}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: itemCount,
      itemBuilder: (context, index) {
        return const ServiceCardShimmerWidget();
      },
    );
  }
}