import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:yumi/ui_kit/components/text/sc_text.dart';

const Duration _kStoreBagSkeletonAnimationDuration = Duration(
  milliseconds: 1450,
);
const Color _kStoreBagSkeletonShell = Color(0xFF0F3730);
const Color _kStoreBagSkeletonShellStrong = Color(0xFF1A4A41);
const Color _kStoreBagSkeletonBoneBase = Color(0xFF2B5C53);
const Color _kStoreBagSkeletonBoneHighlight = Color(0xFF5F8177);
const Color _kStoreBagSkeletonBorder = Color(0x66D8B57B);

Widget buildStoreBagItemTitle(
  String content, {
  required double fontSize,
  Color textColor = Colors.white,
  EdgeInsetsGeometry? padding,
}) {
  return Padding(
    padding: padding ?? EdgeInsets.symmetric(horizontal: 8.w),
    child: SizedBox(
      width: double.infinity,
      child: text(
        content,
        fontSize: fontSize,
        textColor: textColor,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.center,
      ),
    ),
  );
}

class _SCStoreBagSkeletonShimmer extends StatefulWidget {
  const _SCStoreBagSkeletonShimmer({required this.builder});

  final Widget Function(BuildContext context, double progress) builder;

  @override
  State<_SCStoreBagSkeletonShimmer> createState() =>
      _SCStoreBagSkeletonShimmerState();
}

class _SCStoreBagSkeletonShimmerState extends State<_SCStoreBagSkeletonShimmer>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: _kStoreBagSkeletonAnimationDuration,
    )..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) => widget.builder(context, _controller.value),
    );
  }
}

class SCStoreGridSkeleton extends StatelessWidget {
  const SCStoreGridSkeleton({super.key, this.itemCount = 9});

  final int itemCount;

  @override
  Widget build(BuildContext context) {
    return _SCStoreBagSkeletonShimmer(
      builder:
          (context, progress) => GridView.builder(
            padding: EdgeInsets.symmetric(horizontal: 6.w),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 12.w,
              crossAxisSpacing: 12.w,
              childAspectRatio: 0.78,
            ),
            itemCount: itemCount,
            itemBuilder: (context, index) => _buildStoreCardSkeleton(progress),
          ),
    );
  }
}

class SCBagGridSkeleton extends StatelessWidget {
  const SCBagGridSkeleton({
    super.key,
    this.itemCount = 9,
    this.showTitle = true,
  });

  final int itemCount;
  final bool showTitle;

  @override
  Widget build(BuildContext context) {
    return _SCStoreBagSkeletonShimmer(
      builder:
          (context, progress) => GridView.builder(
            padding: EdgeInsets.symmetric(horizontal: 6.w),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 12.w,
              crossAxisSpacing: 12.w,
              childAspectRatio: 0.88,
            ),
            itemCount: itemCount,
            itemBuilder:
                (context, index) =>
                    _buildBagCardSkeleton(progress, showTitle: showTitle),
          ),
    );
  }
}

Widget _buildStoreCardSkeleton(double progress) {
  return DecoratedBox(
    decoration: _buildStoreBagShellDecoration(radius: 8.w),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.w),
      child: Column(
        children: [
          SizedBox(height: 2.w),
          _buildStoreBagSkeletonBone(
            progress,
            width: 55.w,
            height: 55.w,
            borderRadius: BorderRadius.circular(12.w),
          ),
          SizedBox(height: 10.w),
          _buildStoreBagSkeletonBone(
            progress,
            width: double.infinity,
            height: 12.w,
            borderRadius: BorderRadius.circular(999.w),
          ),
          SizedBox(height: 10.w),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _buildStoreBagSkeletonBone(
                progress,
                width: 16.w,
                height: 16.w,
                shape: BoxShape.circle,
              ),
              SizedBox(width: 6.w),
              _buildStoreBagSkeletonBone(
                progress,
                width: 56.w,
                height: 11.w,
                borderRadius: BorderRadius.circular(999.w),
              ),
            ],
          ),
          SizedBox(height: 6.w),
          _buildStoreBagSkeletonBone(
            progress,
            width: 48.w,
            height: 11.w,
            borderRadius: BorderRadius.circular(999.w),
          ),
        ],
      ),
    ),
  );
}

Widget _buildBagCardSkeleton(double progress, {required bool showTitle}) {
  return DecoratedBox(
    decoration: _buildStoreBagShellDecoration(radius: 8.w),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 12.w),
      child: Stack(
        children: [
          PositionedDirectional(
            top: 0,
            start: 0,
            child: _buildStoreBagSkeletonBone(
              progress,
              width: 60.w,
              height: 18.w,
              borderRadius: BorderRadiusDirectional.only(
                topStart: Radius.circular(6.w),
                topEnd: Radius.circular(12.w),
                bottomEnd: Radius.circular(12.w),
              ),
            ),
          ),
          PositionedDirectional(
            bottom: 0,
            end: 0,
            child: _buildStoreBagSkeletonBone(
              progress,
              width: 18.w,
              height: 18.w,
              shape: BoxShape.circle,
            ),
          ),
          Column(
            children: [
              SizedBox(height: 24.w),
              _buildStoreBagSkeletonBone(
                progress,
                width: 55.w,
                height: 55.w,
                borderRadius: BorderRadius.circular(12.w),
              ),
              if (showTitle) ...[
                SizedBox(height: 10.w),
                _buildStoreBagSkeletonBone(
                  progress,
                  width: double.infinity,
                  height: 12.w,
                  borderRadius: BorderRadius.circular(999.w),
                ),
              ],
            ],
          ),
        ],
      ),
    ),
  );
}

BoxDecoration _buildStoreBagShellDecoration({required double radius}) {
  return BoxDecoration(
    borderRadius: BorderRadius.circular(radius),
    border: Border.all(color: _kStoreBagSkeletonBorder, width: 1.w),
    gradient: const LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [_kStoreBagSkeletonShellStrong, _kStoreBagSkeletonShell],
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withValues(alpha: 0.16),
        blurRadius: 16.w,
        offset: Offset(0, 8.w),
      ),
    ],
  );
}

Widget _buildStoreBagSkeletonBone(
  double progress, {
  double? width,
  required double height,
  BorderRadiusGeometry? borderRadius,
  BoxShape shape = BoxShape.rectangle,
}) {
  final double slideOffset = (progress * 2) - 1;
  return Container(
    width: width,
    height: height,
    decoration: BoxDecoration(
      shape: shape,
      borderRadius:
          shape == BoxShape.circle
              ? null
              : (borderRadius ?? BorderRadius.circular(10.w)),
      gradient: LinearGradient(
        begin: Alignment(-1.4 + slideOffset, -0.2),
        end: Alignment(1.4 + slideOffset, 0.2),
        colors: const [
          _kStoreBagSkeletonBoneBase,
          _kStoreBagSkeletonBoneBase,
          _kStoreBagSkeletonBoneHighlight,
          _kStoreBagSkeletonBoneBase,
        ],
        stops: const [0.0, 0.36, 0.54, 1.0],
      ),
    ),
  );
}
