import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/provider/app_config/app_config_service.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/screen_util.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:widgets/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';

import '../../../constants_services.dart';
import '../../../router/page/services_page_router.dart';
import 'service_pay_success_state.dart';
import 'service_pay_success_vm.dart';
import '../../../components/status_card_item.dart';

@RoutePage()
class ServicePaySuccessPage extends HookConsumerWidget {
  final int id; // 订单id
  const ServicePaySuccessPage({
    Key? key,
    @PathParam('id') required this.id,
  }) : super(key: key);


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


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(servicePaySuccessVmProvider.notifier);
    final state = ref.watch(servicePaySuccessVmProvider);
    // final appConfigState = ref.watch(appConfigServiceProvider)


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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.pay_success,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#F2F3F6'), darkColor: Colors.black)?? Colors.black,
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            key: ValueKey('ServicePaySuccess'),
            controller: vm.refreshController,
            // 上拉加载
            onLoad: null,
            // 下拉刷新
            onRefresh: null,
            child: LoadStateLayout(
              state: state.loadingState,
              errorMessage: state.errorMessage,
              errorRetry: () {
                vm.retryRequest(id);
              },
              successSliverWidget: [
                SliverList(
                  delegate: SliverChildListDelegate(
                      [
                        _buildTopInfo(context, state, ref),
                        _buildBottomInfo(context, state, ref)
                      ]
                  ),
                )
              ],
            ),
          )
      ),
    );
  }

  Widget _buildTopInfo(BuildContext context, ServicePaySuccessState state, WidgetRef ref) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(top: 20, bottom: 20),
      // height: 300,
      color: context.appColors.whiteBG,
      child: Column(
        children: [
          Container(
            child: const MyAssetImage(
              Assets.servicePaySuccessIcon,
              width: 54,
              height: 54,
            ),
          ),
          MyTextView(
            S.current.payment_successful,
            fontSize: 18,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
            textAlign: TextAlign.center,
            marginTop: 13,
          ),
          MyTextView(
            S.current.fee_paid,
            fontSize: 15,
            textColor: context.appColors.textBlack,
            textAlign: TextAlign.center,
            marginTop: 30,
            isFontRegular: true,
          ),
          MyTextView(
            "${servicesConstants.dollarUnit}${state.datas?.totalAmount??0.0}",
            fontSize: 15,
            textColor: context.appColors.textPrimary,
            textAlign: TextAlign.center,
            isFontMedium: true,
            marginTop: 5,
          ),
          SizedBox(height: 12),
          // 卡号
          // Row(
          //   mainAxisAlignment: MainAxisAlignment.center,
          //   crossAxisAlignment: CrossAxisAlignment.center,
          //   children: [
          //     MyTextView(
          //       "Master card ending",
          //       fontSize: 15,
          //       textColor: context.appColors.textBlack,
          //       textAlign: TextAlign.center,
          //       isFontRegular: true,
          //     ),
          //     MyTextView(
          //       "9423",
          //       fontSize: 15,
          //       isFontMedium: true,
          //       marginLeft: 5,
          //     )
          //   ]
          // ),
          const SizedBox(height: 5),
          // 付款时间
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MyTextView(
               S.current.paid_on,
                fontSize: 15,
                textColor: context.appColors.textBlack,
                textAlign: TextAlign.center,
                isFontRegular: true,
              ),
              MyTextView(
                "${state.datas?.paidAt}",
                fontSize: 15,
                textColor: context.appColors.textBlack,
                textAlign: TextAlign.center,
                isFontMedium: true,
                marginLeft: 5,
              )
            ]
          ),
        ]
      ),
    );
  }

  Widget _buildBottomInfo(BuildContext context, ServicePaySuccessState state, WidgetRef ref) {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 0),
            child: _buildCardVisitTime(context, state, ref, ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 0),
            child: _buildCardService(context, state, ref, ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 0),
            child: _buildCardAddress(context, state, ref, ),
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 15),
            child: _buildCardPayment(context, state, ref, ),
          ),
        ],
      ),
    );
  }

  // 到访时间
  Widget _buildCardVisitTime(BuildContext context, ServicePaySuccessState state, WidgetRef ref,) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        border: Border(
          bottom: BorderSide(
            color: context.appColors.whiteBG,
            width: 1,
          ),
        ),
        boxShadow: [
          BoxShadow(
            color: context.appColors.whiteBG,
            offset: const Offset(0, 1),
            blurRadius: 1,
            spreadRadius: 0,
          ),
        ]
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyTextView(
            S.current.visit_time,
            fontSize: 16,
            textColor: context.appColors.textBlack,
            textAlign: TextAlign.center,
            isFontMedium: true,
            marginBottom: 11,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const MyAssetImage(
                Assets.serviceCalendarIcon,
                width: 28.5,
                height: 28.5,
              ),
              const SizedBox(width: 15.5),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MyTextView(
                    '${state.datas?.orderProducts?.first?.plannedServiceAt}',
                    fontSize: 14,
                    textColor: context.appColors.textBlack,
                    isFontRegular: true,
                  ),
                  // MyTextView(
                  //   '05:00 PM',
                  //   fontSize: 14,
                  //   textColor: context.appColors.textBlack,
                  //   isFontRegular: true,
                  //   marginTop: 5,
                  // )
                ]
              )
            ],
          )
        ]
      )
    );
  }

  Widget _buildCardService(BuildContext context, ServicePaySuccessState state, WidgetRef ref,) {
    return Container(
        width: double.infinity,
        padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 15),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            border: Border(
              bottom: BorderSide(
                color: context.appColors.whiteBG,
                width: 1,
              ),
            ),
            boxShadow: [
              BoxShadow(
                color: context.appColors.whiteBG,
                offset: const Offset(0, 1),
                blurRadius: 1,
                spreadRadius: 0,
              ),
            ]
        ),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyTextView(
               S.current.service,
                fontSize: 16,
                textColor: context.appColors.textBlack,
                textAlign: TextAlign.center,
                isFontMedium: true,
                marginBottom: 11,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const MyAssetImage(
                    Assets.serviceServiceAvatorIcon,
                    width: 28.5,
                    height: 28.5,
                  ),
                  const SizedBox(width: 15.5),
                  Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyTextView(
                          _getServiceName(state),
                          fontSize: 14,
                          textColor: context.appColors.textBlack,
                          isFontRegular: true,
                        ),
                      ]
                  )
                ],
              )
            ]
        )
    );
  }

  Widget _buildCardAddress(BuildContext context, ServicePaySuccessState state, WidgetRef ref,) {
    return Container(
        width: double.infinity,
        padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 15),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            border: Border(
              bottom: BorderSide(
                color: context.appColors.whiteBG,
                width: 1,
              ),
            ),
            boxShadow: [
              BoxShadow(
                color: context.appColors.whiteBG,
                offset: const Offset(0, 1),
                blurRadius: 1,
                spreadRadius: 0,
              ),
            ]
        ),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyTextView(
               S.current.address,
                fontSize: 16,
                textColor: context.appColors.textBlack,
                textAlign: TextAlign.center,
                isFontMedium: true,
                marginBottom: 11,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const MyAssetImage(
                    Assets.serviceLocationIcon,
                    width: 28.5,
                    height: 28.5,
                  ),
                  const SizedBox(width: 15.5),
                  Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyTextView(
                          '${state.datas?.estateUnit?.address}',
                          fontSize: 14,
                          textColor: context.appColors.textBlack,
                          isFontRegular: true,
                        ),
                        if (state.datas?.staff?.name != null && state.datas?.staff?.phone != null)
                          MyTextView(
                            '${state.datas?.staff?.name}  ${state.datas?.staff?.phone}',
                            fontSize: 14,
                            textColor: context.appColors.textBlack,
                            isFontRegular: true,
                            marginTop: 5,
                          )
                      ]
                  )
                ],
              )
            ]
        )
    );
  }

  Widget _buildCardPayment(BuildContext context, ServicePaySuccessState state, WidgetRef ref,) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 15),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border(
            bottom: BorderSide(
              color: context.appColors.whiteBG,
              width: 1,
            ),
          ),
          boxShadow: [
            BoxShadow(
              color: context.appColors.whiteBG,
              offset: const Offset(0, 1),
              blurRadius: 1,
              spreadRadius: 0,
            ),
          ]
      ),
      child: Column(
        children: [
          Row(
            children: [
              MyTextView(
               S.current.payment,
                fontSize: 16,
                textColor: context.appColors.textBlack,
                textAlign: TextAlign.center,
                isFontMedium: true,
                marginBottom: 11,
              ),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: [
              const MyAssetImage(
                Assets.servicePaymentIcon,
                width: 28.5,
                height: 28.5,
              ),
              const SizedBox(width: 15.5),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MyTextView(
                      "${state.datas?.orderProducts?.first?.productName ?? ""}",
                      fontSize: 14,
                      textColor: context.appColors.textBlack,
                      isFontRegular: true,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween, // 设置为 spaceBetween
                      children: [
                        MyTextView(
                         S.current.total,
                          fontSize: 14,
                          textColor: context.appColors.textBlack,
                          isFontRegular: true,
                          marginTop: 5,
                        ),
                        MyTextView(
                          '${servicesConstants.dollarUnit}${state.datas?.totalAmount ?? 0.0}',
                          fontSize: 14,
                          textColor: context.appColors.textBlack,
                          isFontRegular: true,
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  String _getServiceName(ServicePaySuccessState state){
    return state.datas?.orderService?.name??'-';
  }
}