import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_platform/engine/image/image_nine_grid.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';

import '../../../router/page/main_page_router.dart';
import 'feedback_detail_view_model.dart';

@RoutePage()
class FeedbackDetailPage extends HookConsumerWidget {
  //Feedback的Id
  final String? id;

  const FeedbackDetailPage({Key? key, required this.id}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context, required String? id}) {
    if (context != null) {
      context.router.push(FeedbackDetailPageRoute(id: id));
    } else {
      appRouter.push(FeedbackDetailPageRoute(id: id));
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(feedbackDetailViewModelProvider.notifier);
    final state = ref.watch(feedbackDetailViewModelProvider);

    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => viewModel.fetchFeedbackDetail(id));
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.feedback_details, showBottomDivider: true),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          physics: const BouncingScrollPhysics(),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: context.appColors.whiteBG,
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 10),
                height: 85,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MyTextView(
                      state.detail?.title ?? "-",
                      fontSize: 21,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),
                    MyTextView(
                      "${state.detail?.createdAt ?? ""}  |  ${state.detail?.category?.name ?? ""}  |  ${state.detail?.status == 1 ? S.current.in_progress : S.current.replied}",
                      fontSize: 12,
                      marginTop: 8,
                      isFontRegular: true,
                      textColor: context.appColors.textDarkGray,
                    ),
                  ],
                ),
              ),

              //反馈的内容
              Container(
                width: double.infinity,
                margin: const EdgeInsets.only(left: 12.5, right: 12.5, top: 12.5, bottom: 12.5),
                padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 25),
                decoration: BoxDecoration(
                  color: context.appColors.whiteBG,
                  borderRadius: BorderRadius.circular(6.0), // 圆角
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
                      offset: const Offset(0, 3), // 阴影的偏移量
                      blurRadius: 8.0, // 模糊半径
                      spreadRadius: 3.0, // 扩散半径
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MyTextView(
                      state.detail?.content ?? "",
                      fontSize: 15,
                      marginBottom: 15,
                      isFontRegular: true,
                      textColor: context.appColors.textDarkGray,
                    ),

                    //九宫格展示
                    ImageNineGrid(
                      isSelectEnable: false,
                      maxImages: 10,
                      spacing: 10,
                      aspectRatio: 108 / 80,
                      initialImages: state.detail?.resources ?? [],
                      onImagesChanged: (list) {},
                    ),
                  ],
                ),
              ),

              //回复的数据
              state.isReplyState ? _buildReplyWidget(context, ref) : _buildWaitingWidget(context)
            ],
          )),
    );
  }

  Widget _buildReplyWidget(BuildContext context, WidgetRef ref) {
    final state = ref.watch(feedbackDetailViewModelProvider);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            MyTextView(
              S.current.administrator_reply,
              fontSize: 18,
              isFontRegular: true,
              textColor: context.appColors.textBlack,
            ).expanded(),
            MyTextView(
              state.detail?.replies?[0].createdAt ?? "-",
              fontSize: 12,
              isFontRegular: true,
              textColor: context.appColors.textDarkGray,
            )
          ],
        ).marginOnly(left: 12.5, right: 12.5, bottom: 14, top: 2.5),

        //回复的内容
        Container(
          width: double.infinity,
          margin: const EdgeInsets.only(left: 12.5, right: 12.5, bottom: 13.5),
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 25),
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: BorderRadius.circular(6.0), // 圆角
            boxShadow: [
              BoxShadow(
                color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
                offset: const Offset(0, 3), // 阴影的偏移量
                blurRadius: 8.0, // 模糊半径
                spreadRadius: 3.0, // 扩散半径
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyTextView(
                state.detail?.replies?[0].content ?? "",
                fontSize: 15,
                marginBottom: 15,
                isFontRegular: true,
                textColor: context.appColors.textDarkGray,
              ),

              //九宫格展示
              ImageNineGrid(
                isSelectEnable: false,
                maxImages: 10,
                spacing: 10,
                aspectRatio: 108 / 80,
                initialImages: state.detail?.replies?[0].resources ?? [],
                onImagesChanged: (list) {},
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildWaitingWidget(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          const SizedBox(height: 40),
          const MyAssetImage(Assets.mainFeedbackWaitingIcon, width: 38, height: 38),
          MyTextView(
            S.current.waiting_for_the_administrator,
            fontSize: 15,
            marginTop: 11,
            marginBottom: 40,
            isFontRegular: true,
            textColor: context.appColors.textDarkGray,
          )
        ],
      ),
    );
  }
}