import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/chat/start/controller.dart';
import 'package:electronic_assistant/resource/assets.gen.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ChatStartPage extends BasePage<ChatStartController> {
  const ChatStartPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    // TODO: implement backgroundColor
    return ColorName.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Container(
      height: ScreenUtil().screenHeight - 80.h,
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
        color: Colors.white,
      ),
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: Assets.images.bgTalkStart.image(),
          ),
          Column(
            children: [
              buildTopBar(),
              Container(
                margin: EdgeInsets.only(top: 40.h),
                width: 84.w,
                child: Assets.images.iconTalkStartLogo.image(),
              ),
              Container(
                margin: EdgeInsets.only(top: 6.h),
                width: 328.w,
                height: 99.h,
                padding: const EdgeInsets.all(1),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [
                      Color.fromRGBO(226, 165, 255, 0.14),
                      Color.fromRGBO(99, 122, 255, 0.14)
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    stops: [0, 1.0],
                  ),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(0.w),
                    topRight: Radius.circular(16.w),
                    bottomLeft: Radius.circular(16.w),
                    bottomRight: Radius.circular(16.w),
                  ),
                ),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: ['#FFF5FD'.toColor(), '#EEF9FF'.toColor()],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      stops: const [0, 1.0],
                    ),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(0.w),
                      topRight: Radius.circular(16.w),
                      bottomLeft: Radius.circular(16.w),
                      bottomRight: Radius.circular(16.w),
                    ),
                  ),
                  child: Container(
                    padding: const EdgeInsets.only(
                        left: 12, top: 14, right: 12, bottom: 16),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          "👋 Hi，你好呀",
                          style: TextStyle(
                            color: ColorName.primaryTextColor,
                            fontSize: 17,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Text(
                          "作为专属秘书，告诉小听以下信息吧~",
                          style: TextStyle(
                            color: ColorName.primaryTextColor.withOpacity(0.8),
                            fontSize: 14,
                          ),
                        ),
                        Text(
                          "您填写的内容，会影响我回答的准确度哦~",
                          style: TextStyle(
                            color: ColorName.primaryTextColor.withOpacity(0.8),
                            fontSize: 14,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildTopBar() {
    return Container(
      height: 28.w,
      margin: EdgeInsets.only(left: 16.w, top: 16.h, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
            child: SizedBox(
              width: 28.w,
              height: 28.w,
              child: Assets.images.iconTalkStartClose.image(),
            ),
          ),
          SizedBox(
            child: Text(
              "定制你的秘书",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 16.w,
                color: ColorName.primaryTextColor,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            width: 28.w,
            height: 28.w,
          ),
        ],
      ),
    );
  }
}