import 'package:appframe/bloc/login_qr_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class LoginQrPageV3 extends StatelessWidget {
  const LoginQrPageV3({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (BuildContext context) => LoginQrCubit(LoginQrState()),
        child: BlocConsumer<LoginQrCubit, LoginQrState>(
          builder: (context, state) {
            var loginQrCubit = context.read<LoginQrCubit>();
            return Scaffold(
              extendBodyBehindAppBar: true,
              extendBody: true,
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  // 顶部图片 + 底部35dp白色重合条
                  Stack(
                    children: [
                      Image.asset(
                        'assets/images/login_v3/login_banner.png',
                        width: double.infinity,
                        fit: BoxFit.fitWidth,
                      ),
                      Positioned(
                        top: MediaQuery.of(context).padding.top,
                        right: 15,
                        child: Material(
                          color: Colors.transparent,
                          child: InkWell(
                            onTap: () {
                              loginQrCubit.openWifiSettings();
                            },
                            borderRadius: BorderRadius.circular(20),
                            child: Padding(
                              padding: EdgeInsets.all(8),
                              child: Image.asset(
                                'assets/images/login_v3/setting_icon.png',
                                width: 24,
                                height: 24,
                              ),
                            ),
                          ),
                        ),
                      ),
                      Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        height: 35,
                        child: Container(
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(25),
                              topRight: Radius.circular(25),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  // 剩余区域白色铺底，一直延伸到屏幕底部
                  Expanded(
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        children: [
                          _buildQrCode(loginQrCubit, state) ?? const SizedBox.shrink(),
                          Expanded(
                            child: Align(
                              alignment: Alignment.bottomCenter,
                              child: Padding(
                                padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Text(
                                      '其他方式登录',
                                      textAlign: TextAlign.center,
                                      style: const TextStyle(
                                        fontSize: 14,
                                        height: 1.0,
                                        color: Color(0xFF999999),
                                      ),
                                    ),
                                    const SizedBox(height: 15),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        InkWell(
                                          onTap: () {
                                            context.read<LoginQrCubit>().goLoginPhone();
                                          },
                                          child: Image.asset(
                                            'assets/images/login_v3/phone.png',
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(height: 40),
                                    Text(
                                      '提示：本应用为学生端使用，教师请前往班小二小程序操作',
                                      textAlign: TextAlign.center,
                                      style: const TextStyle(
                                        fontSize: 12,
                                        height: 20 / 12,
                                        color: Color(0xFF999999),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
          listener: (context, state) {},
        ));
  }

  Column? _buildQrCode(LoginQrCubit loginQrCubit, LoginQrState state) {
    if (state.status == 0) {
      // 等待二维码数据
      return Column(
        children: [
          Column(
            children: [
              SizedBox(height: 80),
              Image.asset(
                'assets/images/login_v3/loading.gif',
                width: 72,
                height: 72,
              ),
              SizedBox(height: 15),
              Text(
                '正在生成二维码...',
                style: TextStyle(
                  fontSize: 14,
                  height: 1.0,
                  color: Color(0xFF333333),
                ),
              ),
              SizedBox(height: 8),
              Text(
                state.tip,
                style: TextStyle(
                  fontSize: 14,
                  height: 1.0,
                  color: Color(0xFF333333),
                ),
              ),
            ],
          ),
        ],
      );
    } else if (state.status == 1) {
      // 等待扫码
      return Column(
        children: [
          Container(
            width: 230,
            height: 230,
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              border: Border.all(
                color: Color(0x29265ECF),
                width: 0.5,
              ),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Image.memory(
              state.image!,
              width: 190,
              height: 190,
            ),
          ),
          SizedBox(height: 15),
          Text(
            state.tip,
            style: TextStyle(
              fontSize: 14,
              height: 1.0,
              color: Color(0xFF333333),
            ),
          ),
        ],
      );
    } else if (state.status == 2) {
      // 已扫码，等待确认
      return Column(
        children: [
          Center(
            child: Image.asset(
              "assets/images/login_v3/allowed.png",
            ),
          ),
          SizedBox(height: 15.5),
          Text(
            "已扫码",
            style: TextStyle(
              fontSize: 16,
              height: 1.0,
              fontWeight: FontWeight.bold,
              fontFamily: '黑体',
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: 8),
          Text(
            state.tip,
            style: TextStyle(
              fontSize: 14,
              height: 1.0,
              color: Color(0xFF333333),
            ),
          ),
        ],
      );
    } else if (state.status == 3) {
      // 拒绝
      return Column(
        children: [
          Center(
            child: Image.asset(
              "assets/images/login_v3/refused.png",
            ),
          ),
          SizedBox(height: 15.5),
          Text(
            "拒绝登录",
            style: TextStyle(
              fontSize: 16,
              height: 1.0,
              fontWeight: FontWeight.bold,
              fontFamily: '黑体',
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: 8),
          Text(
            state.tip,
            style: TextStyle(
              fontSize: 14,
              height: 1.0,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: 20),
          InkWell(
            onTap: () {
              loginQrCubit.refresh();
            },
            borderRadius: BorderRadius.circular(25),
            child: Container(
              width: 200,
              height: 50,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Color(0xFF7691FA),
                borderRadius: BorderRadius.circular(25),
              ),
              child: Text(
                '重新登录',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18,
                  height: 1.0,
                  color: Color(0xFFFFFFFF),
                ),
              ),
            ),
          ),
        ],
      );
    } else if (state.status == 4) {
      // 二维码过期，提示点击刷新
      return Column(
        children: [
          Container(
            width: 230,
            height: 230,
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              border: Border.all(
                color: Color(0x29265ECF),
                width: 0.5,
              ),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Stack(
              alignment: Alignment.center,
              children: [
                Image.memory(
                  state.image!,
                  width: 190,
                  height: 190,
                ),
                Container(
                  width: 190,
                  height: 190,
                  color: Color(0xFF000000).withOpacity(0.5),
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        '二维码已过期',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 20,
                          height: 1.0,
                          fontWeight: FontWeight.bold,
                          fontFamily: '黑体',
                          color: Color(0xFFFFFFFF),
                        ),
                      ),
                      SizedBox(height: 12),
                      InkWell(
                        onTap: () {
                          loginQrCubit.refresh();
                        },
                        borderRadius: BorderRadius.circular(22),
                        child: Container(
                          height: 44,
                          width: 129,
                          padding: EdgeInsets.symmetric(horizontal: 16),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: Color(0xFF7691FA),
                            borderRadius: BorderRadius.circular(22),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                'assets/images/login_v3/refresh_icon.png',
                              ),
                              SizedBox(width: 4),
                              Text(
                                '点击刷新',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 16,
                                  height: 1.0,
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 15),
          Text(
            state.tip,
            style: TextStyle(
              fontSize: 14,
              height: 1.0,
              color: Color(0xFF333333),
            ),
          ),
        ],
      );
    }
    return null;
  }
}