import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/base/base_view.dart';
import 'package:nomo/app/widgets/click_opacity.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';

import '../controllers/precode_sendemail_controller.dart';

class PrecodeSendemailView extends BaseView<PrecodeSendemailController> {
  const PrecodeSendemailView({super.key});

  @override
  Widget buildContent(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 14.w),
      child: Column(
        children: [
          // 自定义标题栏
          _buildAppBar(),

          40.verticalSpaceFromWidth,

          // 邮箱输入框
          _buildEmailInput(),

          20.verticalSpaceFromWidth,

          // 发送按钮
          _buildSendButton(),

          12.verticalSpaceFromWidth,

          // 说明文字
          Text(
            'Your code will be backed up to this email.',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              color: Get.reactiveTheme.hintColor.withOpacity(0.6),
            ),
          ),

          40.verticalSpaceFromWidth,

          // 信息卡片列表
          _buildInfoCardList(),
        ],
      ),
    );
  }

  /// 自定义标题栏
  Widget _buildAppBar() {
    return Container(
      height: 64.h,
      alignment: Alignment.center,
      child: Stack(
        children: [
          // 返回按钮
          Positioned(
            left: 0,
            top: 0,
            bottom: 0,
            child: ClickOpacity(
              onTap: () => Get.back(),
              child: Container(
                width: 48.w,
                height: 48.w,
                alignment: Alignment.center,
                child: Icon(
                  Icons.arrow_back,
                  color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                  size: 24.w,
                ),
              ),
            ),
          ),
          // 标题
          Center(
            child: Text(
              'Send Pre Code to Email',
              style: TextStyle(
                fontSize: 20.sp,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 邮箱输入框
  Widget _buildEmailInput() {
    return Obx(
      () => Container(
        height: 56.h,
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(16.r),
          border: Border.all(
            color: controller.isFocused.value
                ? const Color(0xFF0A84FF)
                : Colors.transparent,
            width: 2,
          ),
        ),
        child: TextField(
          controller: controller.emailController,
          focusNode: controller.emailFocusNode,
          keyboardType: TextInputType.emailAddress,
          style: TextStyle(
            fontSize: 16.sp,
            color: Get.reactiveTheme.textTheme.bodyLarge!.color,
          ),
          decoration: InputDecoration(
            hintText: 'Enter your email',
            hintStyle: TextStyle(
              fontSize: 16.sp,
              color: Get.reactiveTheme.hintColor.withOpacity(0.5),
            ),
            border: InputBorder.none,
            contentPadding: EdgeInsets.symmetric(horizontal: 20.w),
          ),
        ),
      ),
    );
  }

  /// 发送按钮
  Widget _buildSendButton() {
    return Obx(() {
      final canSend = controller.canSend;
      final isSending = controller.isSending.value;

      return ClickOpacity(
        onTap: canSend ? controller.sendEmail : null,
        child: Container(
          height: 56.h,
          decoration: BoxDecoration(
            color: canSend
                ? const Color(0xFF0A84FF)
                : Get.reactiveTheme.highlightColor,
            borderRadius: BorderRadius.circular(16.r),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (isSending)
                SizedBox(
                  width: 20.w,
                  height: 20.w,
                  child: const CircularProgressIndicator(
                    strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                  ),
                )
              else
                Icon(
                  Icons.email_outlined,
                  color: canSend
                      ? Colors.white
                      : Get.reactiveTheme.hintColor.withOpacity(0.5),
                  size: 24.w,
                ),
              12.horizontalSpace,
              Text(
                isSending ? 'Sending...' : 'Send your Email',
                style: TextStyle(
                  fontSize: 16.sp,
                  color: canSend
                      ? Colors.white
                      : Get.reactiveTheme.hintColor.withOpacity(0.5),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      );
    });
  }

  /// 信息卡片列表（带连接线）
  Widget _buildInfoCardList() {
    final cards = [
      {
        'icon': Icons.workspace_premium_outlined,
        'title': 'Your Pre Credential',
        'description':
            'This is your VIP credential. Please store it securely and do not share it with anyone.',
      },
      {
        'icon': Icons.mark_email_read_outlined,
        'title': 'Secure Email Backup',
        'description':
            'We will send an email containing this credential to your specified email address for safekeeping.',
      },
      {
        'icon': Icons.check_circle_outline,
        'title': 'Send and Save',
        'description':
            'After the email is sent, we recommend you also save this credential to a secure location on your device.',
      },
    ];

    return Column(
      children: List.generate(cards.length, (index) {
        final card = cards[index];
        final isLast = index == cards.length - 1;

        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 左侧图标和连接线
            Column(
              children: [
                // 图标
                Container(
                  width: 48.w,
                  height: 48.w,
                  decoration: BoxDecoration(
                    color: const Color(0xFF0A84FF).withOpacity(0.15),
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Icon(
                    card['icon'] as IconData,
                    color: const Color(0xFF0A84FF),
                    size: 28.w,
                  ),
                ),
                // 连接线（最后一个不显示）
                if (!isLast)
                  Container(
                    width: 2.w,
                    height: 60.h,
                    margin: EdgeInsets.symmetric(vertical: 8.h),
                    decoration: BoxDecoration(
                      color: Get.reactiveTheme.hintColor.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(1.r),
                    ),
                  ),
              ],
            ),

            16.horizontalSpace,

            // 右侧文字内容
            Expanded(
              child: Padding(
                padding: EdgeInsets.only(top: 4.h, bottom: isLast ? 0 : 24.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      card['title'] as String,
                      style: TextStyle(
                        fontSize: 18.sp,
                        color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    8.verticalSpaceFromWidth,
                    Text(
                      card['description'] as String,
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Get.reactiveTheme.hintColor.withOpacity(0.6),
                        height: 1.5,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}