nomo/lib/app/modules/precode/views/precode_view.dart

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_controller.dart';

class PrecodeView extends BaseView<PrecodeController> {
  const PrecodeView({super.key});

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

          40.verticalSpaceFromWidth,

          // 说明卡片
          _buildInfoCard(),

          40.verticalSpaceFromWidth,

          // Pre Code 显示
          _buildPreCodeDisplay(),

          20.verticalSpaceFromWidth,

          // Preview/Hide 和 Copy 按钮
          _buildActionButtons(),

          40.verticalSpaceFromWidth,

          // Send to Email 按钮
          _buildEmailButton(),

          12.verticalSpaceFromWidth,

          // 说明文字
          Text(
            'Send your Pre Code to your registered email address',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              color: Get.reactiveTheme.hintColor.withOpacity(0.6),
            ),
          ),

          20.verticalSpaceFromWidth,

          // Save Local Copy 按钮
          _buildSaveButton(),

          12.verticalSpaceFromWidth,

          // 说明文字
          Text(
            'Store a copy of your Pre Code on this device',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              color: Get.reactiveTheme.hintColor.withOpacity(0.6),
            ),
          ),
        ],
      ),
    );
  }

  /// 自定义标题栏
  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(
              'My Pre Code',
              style: TextStyle(
                fontSize: 20.sp,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 说明卡片
  Widget _buildInfoCard() {
    return Container(
      padding: EdgeInsets.all(24.w),
      decoration: BoxDecoration(
        color: Get.reactiveTheme.highlightColor,
        borderRadius: BorderRadius.circular(16.r),
      ),
      child: Column(
        children: [
          // 铃铛图标
          Container(
            width: 48.w,
            height: 48.w,
            decoration: BoxDecoration(
              color: const Color(0xFFFF9500).withOpacity(0.2),
              shape: BoxShape.circle,
            ),
            child: Icon(
              Icons.notifications,
              color: const Color(0xFFFF9500),
              size: 28.w,
            ),
          ),

          20.verticalSpaceFromWidth,

          // 说明文字
          Text(
            'Pre Code is your premium user credential.\nUse it to activate benefits or sync your account\non other devices.',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 16.sp,
              color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              height: 1.5,
            ),
          ),

          20.verticalSpaceFromWidth,

          // 安全提示
          Text(
            'Please store it securely !',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 16.sp,
              color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }

  /// Pre Code 显示
  Widget _buildPreCodeDisplay() {
    return Obx(
      () => Text(
        controller.displayCode,
        style: TextStyle(
          fontSize: 32.sp,
          color: Get.reactiveTheme.textTheme.bodyLarge!.color,
          fontWeight: FontWeight.w700,
          letterSpacing: 2,
        ),
      ),
    );
  }

  /// Preview/Hide 和 Copy 按钮
  Widget _buildActionButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // Preview/Hide 按钮
        Obx(
          () => ClickOpacity(
            onTap: controller.togglePreview,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  controller.isPreviewMode.value ? 'Hide' : 'Preview',
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Get.reactiveTheme.hintColor,
                  ),
                ),
                8.horizontalSpace,
                Icon(
                  controller.isPreviewMode.value
                      ? Icons.visibility_off_outlined
                      : Icons.remove_red_eye_outlined,
                  color: Get.reactiveTheme.hintColor,
                  size: 20.w,
                ),
              ],
            ),
          ),
        ),

        40.horizontalSpace,

        Container(
          width: 1,
          height: 20.h,
          color: Get.reactiveTheme.hintColor.withOpacity(0.3),
        ),

        40.horizontalSpace,

        // Copy 按钮
        ClickOpacity(
          onTap: controller.copyCode,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Copy',
                style: TextStyle(
                  fontSize: 16.sp,
                  color: Get.reactiveTheme.hintColor,
                ),
              ),
              8.horizontalSpace,
              Icon(Icons.copy, color: Get.reactiveTheme.hintColor, size: 20.w),
            ],
          ),
        ),
      ],
    );
  }

  /// Send to Email 按钮
  Widget _buildEmailButton() {
    return ClickOpacity(
      onTap: controller.sendToEmail,
      child: Container(
        height: 56.h,
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(16.r),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.email_outlined,
              color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              size: 24.w,
            ),
            12.horizontalSpace,
            Text(
              'Send to Email',
              style: TextStyle(
                fontSize: 16.sp,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// Save Local Copy 按钮
  Widget _buildSaveButton() {
    return ClickOpacity(
      onTap: controller.saveLocalCopy,
      child: Container(
        height: 56.h,
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(16.r),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.save_alt,
              color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              size: 24.w,
            ),
            12.horizontalSpace,
            Text(
              'Save Local Copy',
              style: TextStyle(
                fontSize: 16.sp,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}