import 'package:flutter/material.dart';
import 'package:flutter_kinetra/kt_pages/kt_mine/logic.dart';
import 'package:flutter_kinetra/kt_pages/kt_routes.dart';
import 'package:flutter_kinetra/kt_utils/kt_string_extend.dart';
import 'package:flutter_kinetra/kt_utils/kt_utils.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../dio_cilent/kt_apis.dart';
import '../kt_webview_page.dart';

class KtMinePage extends StatefulWidget {
  const KtMinePage({super.key});

  @override
  State<KtMinePage> createState() => _KtMinePageState();
}

class _KtMinePageState extends State<KtMinePage> {
  final logic = Get.put(KtMineLogic());
  final state = Get.find<KtMineLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: ScreenUtil().screenWidth,
        height: ScreenUtil().screenHeight,
        padding: EdgeInsets.only(top: kToolbarHeight),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('bg1.png'.ktIcon),
            fit: BoxFit.fill,
          ),
        ),
        child: GetBuilder<KtMineLogic>(
          builder: (ctrl) {
            return Column(
              children: [
                Text(
                  'Profile',
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: Colors.black,
                    fontWeight: FontWeight.w800,
                    fontStyle: FontStyle.italic,
                  ),
                ),
                Expanded(
                  child: SmartRefresher(
                    controller: logic.refreshController,
                    enablePullDown: true,
                    onRefresh: logic.getUserInfo,
                    child: Column(
                      children: [
                        Container(
                          width: ScreenUtil().screenWidth - 30.w,
                          margin: EdgeInsets.only(top: 22.w),
                          padding: EdgeInsets.fromLTRB(6.w, 13.w, 6.w, 6.w),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage('ic_mine_top_bg.png'.ktIcon),
                              fit: BoxFit.fill,
                            ),
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Welcome Back, visitor!',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              Container(
                                padding: EdgeInsets.symmetric(
                                  vertical: 17.w,
                                  horizontal: 13.w,
                                ),
                                margin: EdgeInsets.only(top: 13.w),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(14.w),
                                ),
                                child: Row(
                                  children: [
                                    Image.asset(
                                      'ic_avatar.png'.ktIcon,
                                      width: 56.w,
                                    ),
                                    SizedBox(width: 13.w),
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Stack(
                                          alignment: Alignment.bottomCenter,
                                          children: [
                                            Image.asset(
                                              'text_bg_discover.png'.ktIcon,
                                              height: 17.w,
                                              width: 55.w,
                                            ),
                                            Padding(
                                              padding: EdgeInsets.only(
                                                bottom: 2.w,
                                              ),
                                              child: Text(
                                                KtUtils.isEmpty(
                                                      state.userInfo.familyName,
                                                    )
                                                    ? 'Visitor'
                                                    : state
                                                              .userInfo
                                                              .familyName ??
                                                          '',
                                                style: TextStyle(
                                                  fontFamily: 'PingFang SC',
                                                  fontSize: 18.sp,
                                                  color: Colors.black,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        Text(
                                          'ID: ${state.userInfo.customerId}',
                                          style: TextStyle(
                                            fontFamily: 'PingFang SC',
                                            fontSize: 12.sp,
                                            color: Color(0xFF5E5E5E),
                                            fontWeight: FontWeight.w400,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 30.w),
                        settingsView(),
                      ],
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Widget settingsView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Settings & More',
          style: TextStyle(
            fontSize: 15.sp,
            color: Colors.black,
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(height: 12.w),
        Container(
          width: ScreenUtil().screenWidth - 36.w,
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(18.w),
            image: DecorationImage(
              image: AssetImage('setting_bg.png'.ktIcon),
              fit: BoxFit.fill,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              handleItem(
                'ic_privacy.png',
                'Privacy Policy',
                () => Get.to(
                  () => KtWebViewPage(
                    url: KtApis.WEB_SITE_PRIVATE,
                    title: "Privacy Policy",
                  ),
                ),
              ),
              handleItem(
                'ic_agreement.png',
                'User Agreement',
                () => Get.to(
                  () => KtWebViewPage(
                    url: KtApis.WEB_SITE_POLICY,
                    title: "User Agreement",
                  ),
                ),
              ),
              handleItem(
                'ic_help_center.png',
                'Help Center',
                () => Get.toNamed(KtRoutes.helpCenter),
              ),
              handleItem(
                'ic_about_us.png',
                'About Us',
                () => Get.toNamed(KtRoutes.aboutUs),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget handleItem(String icon, String title, Function func) {
    return GestureDetector(
      onTap: () {
        func.call();
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15.w),
        color: Colors.transparent,
        child: Row(
          children: [
            Image.asset(icon.ktIcon, width: 20.w),
            SizedBox(width: 10.w),
            Text(
              title,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.black,
                fontWeight: FontWeight.w400,
              ),
            ),
            const Spacer(),
            Image.asset('ic_right_arrow.png'.ktIcon, width: 14.w),
          ],
        ),
      ),
    );
  }
}