import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/Material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../data/api/response/zodiac_love_intimacy_response.dart';
import '../../../data/bean/zodiac_love_intimacy_list.dart';
import '../../../resource/assets.gen.dart';
import '../../../resource/colors.gen.dart';
import '../../../resource/string.gen.dart';
import '../../../widget/gradient_btn.dart';
import '../../intimacy_analyse/widget/creating_loading_widget.dart';

/// 点击了解锁按钮时回调
typedef ClickUnlockBtnCallback = void Function();

/// 星座恋爱亲密报告
class ZodiacLoveIntimacyReportWidget extends StatelessWidget {
  /// 是否解锁
  final bool unlock;

  /// 报告结果
  final ZodiacLoveIntimacyResponse? reportResult;

  /// 是否报告生成中
  final bool isReportCreating;

  /// 点击解锁按钮时回调
  final ClickUnlockBtnCallback clickUnlockBtnCallback;

  const ZodiacLoveIntimacyReportWidget({
    super.key,
    this.unlock = false,
    this.reportResult,
    this.isReportCreating = false,
    required this.clickUnlockBtnCallback,
  });

  @override
  Widget build(BuildContext context) {
    // 未解锁
    if (!unlock) {
      return LockReportWidget(clickUnlockBtnCallback: clickUnlockBtnCallback);
    }
    // 报告生成中
    if (isReportCreating) {
      return const CreatingReportWidget();
    }
    // 已有报告
    return ExistReportWidget(reportResult: reportResult);
  }
}

/// 未解锁时的组件
class LockReportWidget extends StatelessWidget {
  /// 点击解锁按钮时回调
  final ClickUnlockBtnCallback clickUnlockBtnCallback;

  const LockReportWidget({super.key, required this.clickUnlockBtnCallback});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 16.h),
        child: Center(
          child: Stack(
            children: [
              Column(
                // 垂直水平都居中
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 占位图
                  Assets.images.iconZodiacLoveAnalyseReportUnlockPlaceholder
                      .image(width: 328.w, height: 436.h),
                ],
              ),
              // 解锁按钮
              Positioned(
                left: 0,
                top: 147.h,
                right: 0,
                child: _buildUnlockBtn(context),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 解锁按钮
  Widget _buildUnlockBtn(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 30.w),
      child: GradientTextBtn.withUnlock(
        false,
        // 皇冠图标
        leftIcon: Assets.images.iconVipCrown.image(width: 15.w, height: 15.w),
        leftIconMargin: EdgeInsets.only(right: 12.w),
        text: StringName.zodiacLoveIntimacyVipUnlockTip,
        // 渐变色
        colors: [ColorName.purpleGradient3, ColorName.purpleGradient4],
        radius: 24.r,
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
        onPressed: () {
          clickUnlockBtnCallback();
        },
      ),
    );
  }
}

/// 报告生成中
class CreatingReportWidget extends StatelessWidget {
  const CreatingReportWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 33.h, bottom: 52.h),
      decoration: ShapeDecoration(
        color: ColorName.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.r),
        ),
      ),
      child: CreatingLoadingWidget(
        tipTextWidget: Text(
          StringName.intimacyAnalyseIng2,
          style: TextStyle(
            fontSize: 14.sp,
            color: ColorName.black60,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  }
}

/// 已有报告组件
class ExistReportWidget extends StatelessWidget {
  /// 分析结果
  final ZodiacLoveIntimacyResponse? reportResult;

  const ExistReportWidget({super.key, this.reportResult});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 16.h),
      child: Builder(
        builder: (BuildContext context) {
          var list = reportResult?.list ?? [];
          return ListView.builder(
            physics: const ClampingScrollPhysics(),
            padding: EdgeInsets.zero,
            itemCount: list.length,
            itemBuilder: (BuildContext context, int index) {
              ZodiacLoveIntimacyList itemData = list[index];
              return _buildListItem(index, itemData);
            },
          );
        },
      ),
    );
  }

  /// 列表条目
  Widget _buildListItem(int index, ZodiacLoveIntimacyList itemData) {
    return Container(
      padding: EdgeInsets.all(16.w),
      margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.h),
      decoration: BoxDecoration(
        color: ColorName.white,
        borderRadius: BorderRadius.all(Radius.circular(16.r)),
      ),
      child: Column(
        children: [
          Row(
            children: [
              // 图标
              CachedNetworkImage(
                imageUrl: itemData.iconUrl ?? "",
                height: 25.w,
                width: 25.w,
                fit: BoxFit.fill,
              ),
              SizedBox(width: 4.w),
              // 标题
              Stack(
                // 不裁切子组件超出的区域
                clipBehavior: Clip.none,
                children: [
                  // 横线
                  Positioned(
                    left: -16.w,
                    right: 0,
                    top: 10.h,
                    child: Container(
                      width: 2.w,
                      height: 11.h,
                      color: Color(0x21FF4BAE),
                    ),
                  ),
                  Text(
                    itemData.title ?? "",
                    style: TextStyle(
                      color: ColorName.black80,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 12.h),
          // 内容
          Text(
            itemData.content ?? "",
            style: TextStyle(
              color: ColorName.black70,
              fontSize: 13.sp,
              fontWeight: FontWeight.w400,
            ),
          ),
        ],
      ),
    );
  }
}
