flutterApp/lib/features/auth/presentation/pages/login_page.dart

import 'package:cc_ui_kit/cc_ui_kit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:maibu_satabot_v2/core/app/app_user_cubit.dart';
import 'package:maibu_satabot_v2/core/di/injection.dart';
import 'package:maibu_satabot_v2/core/theme/AppTheme.dart';
import 'package:maibu_satabot_v2/features/devices/presentation/bloc/devices_cubit.dart';

import '../../../../core/router/route_paths.dart';
import '../bloc/login_cubit.dart';
import '../bloc/login_state.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> with SingleTickerProviderStateMixin {
  final _userCtrl = TextEditingController();
  final _pwdCtrl = TextEditingController();
  bool _isAgreed = false; // 协议勾选状态
  bool _obscurePwd = true; // 密码可见性

  // 进场动画控制器
  late final AnimationController _entranceController;

  @override
  void initState() {
    super.initState();
    _entranceController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 900),
    );
    // 等首帧渲染 + 图片解码完成后再播放，避开启动初始化争抢导致的掉帧
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      Future.delayed(const Duration(milliseconds: 120), () {
        if (mounted) _entranceController.forward();
      });
    });
  }

  @override
  void dispose() {
    _entranceController.dispose();
    _userCtrl.dispose();
    _pwdCtrl.dispose();
    super.dispose();
  }

  /// 生成一个错峰区间的动画（0.0 ~ 1.0）
  Animation<double> _interval(double begin, double end) {
    return CurvedAnimation(
      parent: _entranceController,
      curve: Interval(begin, end, curve: Curves.easeOut),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.appColors.pageBackground,
      // 保持 AppBar 简洁或直接去掉
      appBar: AppBar(backgroundColor: context.appColors.pageBackground, elevation: 0),
      body: BlocListener<LoginCubit, LoginState>(
        listener: (context, state) {
          debugPrint('🔍 [LOGIN] 登录状态变化: $state');
          if (state is LoginSuccess) {
            debugPrint('✅ [LOGIN] 登录成功，准备跳转到首页');
            context.go(RoutePaths.home);
            debugPrint('✅ [LOGIN] 已调用 context.go(RoutePaths.home)');
          } else if (state is LoginFailure) {
            // 可以在这里弹出简洁的黑白提示框
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('登录失败，${state.message}')));
          }
        },
        child: LayoutBuilder(
          builder: (context, constraints) {
            return SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: constraints.maxHeight,
                ),
                child: IntrinsicHeight(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 顶部区域：图片 + 认证信息 + 标题（压缩空间）
                      const SizedBox(height: 10),
                      
                      // ① 顶部居中图片和认证信息（缩放淡入）
                      _Entrance(
                        animation: _interval(0.00, 0.35),
                        scale: true,
                        child: Center(
                          child: Column(
                            children: [
                              Image.asset(
                                'assets/images/huawei.png',
                                width: 80,
                                height: 80,
                                fit: BoxFit.contain,
                              ),
                              const SizedBox(height: 6),
                              Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                                child: Text(
                                  "通过华为云生态技术认证，请放心使用，证书编号C202605301",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 10,
                                    color: context.appColors.textTertiary,
                                    height: 1.3,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

                      const SizedBox(height: 16),

                      // ② 标题区（上滑淡入）
                      _Entrance(
                        animation: _interval(0.10, 0.45),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "账号登录",
                              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: context.appColors.textPrimary),
                            ),
                            const SizedBox(height: 8),
                            Text("请填写以下信息以验证身份", style: TextStyle(fontSize: 15, color: context.appColors.textTertiary)),
                          ],
                        ),
                      ),

                      const SizedBox(height: 24),

                      // ③ 表单区域
                      // 账号输入框（上滑淡入）
                      _Entrance(
                        animation: _interval(0.20, 0.55),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            _buildInputLabel("账号"),
                            TextField(
                              controller: _userCtrl,
                              style: TextStyle(fontSize: 14, color: context.appColors.textPrimary),
                              cursorColor: context.appColors.textPrimary,
                              decoration: _inputDecoration(hint: "请输入用户名"),
                            ),
                          ],
                        ),
                      ),

                      const SizedBox(height: 20),

                      // 密码输入框（上滑淡入）
                      _Entrance(
                        animation: _interval(0.28, 0.63),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            _buildInputLabel("密码"),
                            TextField(
                              controller: _pwdCtrl,
                              obscureText: _obscurePwd,
                              style: TextStyle(fontSize: 14, color: context.appColors.textPrimary),
                              cursorColor: context.appColors.textPrimary,
                              decoration: _inputDecoration(
                                hint: "请输入密码",
                                suffixIcon: IconButton(
                                  icon: Icon(_obscurePwd ? Icons.visibility_off_outlined : Icons.visibility_outlined, color: context.appColors.textTertiary, size: 20),
                                  onPressed: () => setState(() => _obscurePwd = !_obscurePwd),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

                      const SizedBox(height: 16),

                      // ④ 协议勾选区域（上滑淡入）
                      _Entrance(
                        animation: _interval(0.36, 0.71),
                        child: _buildProtocolSection(),
                      ),

                      const SizedBox(height: 30),

                      // ⑤ 底部区域：登录按钮（上滑淡入）
                      _Entrance(
                        animation: _interval(0.45, 0.82),
                        child: SizedBox(
                          width: double.infinity,
                          child: BlocBuilder<LoginCubit, LoginState>(
                            builder: (context, state) {
                              bool isLoading = state is LoginLoading;

                              return CCPrimaryButton(
                                onPressed: isLoading
                                    ? null
                                    : () {
                                        if (!_isAgreed) {
                                          ScaffoldMessenger.of(context).showSnackBar(
                                            const SnackBar(
                                              content: Text('请先阅读并同意用户协议'),
                                              duration: Duration(seconds: 1),
                                            ),
                                          );
                                          return;
                                        }
                                        _handleLogin();
                                      },
                                text: isLoading ? '登录中...' : '登 录',
                              );
                            },
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),

                      // 注册链接（上滑淡入，最后登场）
                      _Entrance(
                        animation: _interval(0.55, 0.95),
                        child: Center(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "没有账号吗？",
                                style: TextStyle(fontSize: 14, color: context.appColors.textTertiary),
                              ),
                              InkWell(
                                onTap: () {
                                  debugPrint(' 点击了立即注册');
                                  debugPrint('👉 跳转路径: ${RoutePaths.register}');
                                  context.go(RoutePaths.register);
                                },
                                borderRadius: BorderRadius.circular(4),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                                  child: Text(
                                    "立即注册",
                                    style: TextStyle(
                                      fontSize: 14,
                                      color: context.appColors.textPrimary,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

                      const SizedBox(height: 20),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  // 执行登录逻辑
  void _handleLogin() {
    context.read<LoginCubit>().login(_userCtrl.text, _pwdCtrl.text, 2);
    //final user = sl<AppUserCubit>().state.user;
    //final devicesCubit = sl<DevicesCubit>();
    //if (user != null) {
    //  devicesCubit.fetchAllDevices(user.username);
    //}
  }

  // 辅助组件：输入框标签
  Widget _buildInputLabel(String label) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Text(label, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: context.appColors.textSecondary)),
    );
  }

  // 辅助组件：输入框装饰
  InputDecoration _inputDecoration({required String hint, Widget? suffixIcon}) {
    return InputDecoration(
      hintText: hint,
      hintStyle: TextStyle(color: context.appColors.textTertiary, fontSize: 14),
      filled: true,
      fillColor: context.appColors.fillBackground,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: context.appColors.divider),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: context.appColors.primary, width: 1),
      ),
      suffixIcon: suffixIcon,
    );
  }

  // 辅助组件：协议勾选
  Widget _buildProtocolSection() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 24,
          width: 24,
          child: Checkbox(
            value: _isAgreed,
            activeColor: context.appColors.primary,
            checkColor: Colors.white,
            side: BorderSide(color: context.appColors.divider),
            onChanged: (val) => setState(() => _isAgreed = val!),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
          ),
        ),
        const SizedBox(width: 8),
        Expanded(
          child: Wrap(
            children: [
              Text("我已阅读并同意 ", style: TextStyle(fontSize: 13, color: context.appColors.textTertiary)),
              _protocolText("《用户协议》", () => _showProtocolDetail("用户协议")),
              Text(" 和 ", style: TextStyle(fontSize: 13, color: context.appColors.textTertiary)),
              _protocolText("《隐私政策》", () => _showProtocolDetail("隐私政策")),
            ],
          ),
        ),
      ],
    );
  }

  Widget _protocolText(String text, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Text(
        text,
        style: TextStyle(fontSize: 13, color: context.appColors.textPrimary, fontWeight: FontWeight.bold),
      ),
    );
  }

  void _showProtocolDetail(String title) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: context.appColors.cardBackground,
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
      builder: (context) => Container(
        padding: const EdgeInsets.all(24),
        height: MediaQuery.of(context).size.height * 0.7,
        child: Column(
          children: [
            Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: context.appColors.textPrimary)),
            Divider(height: 32, color: context.appColors.divider),
            Expanded(
              child: SingleChildScrollView(
                child: Text("此处放置您的${title}详细内容...\n" * 20, style: TextStyle(color: context.appColors.textSecondary, height: 1.5)),
              ),
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              child: BlocBuilder<LoginCubit, LoginState>(
                builder: (context, state) {
                  return CCPrimaryButton(onPressed: () => Navigator.pop(context), text: "我已了解");
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// 进场动画包装组件：淡入 + 上滑（默认）或淡入 + 缩放（scale=true）
class _Entrance extends StatelessWidget {
  const _Entrance({
    required this.animation,
    required this.child,
    this.scale = false,
    this.slideOffset = const Offset(0, 0.15),
  });

  final Animation<double> animation;
  final Widget child;
  final bool scale;
  final Offset slideOffset;

  @override
  Widget build(BuildContext context) {
    final curved = CurvedAnimation(parent: animation, curve: Curves.easeOutCubic);

    if (scale) {
      final scaleAnim = Tween<double>(begin: 0.85, end: 1.0).animate(curved);
      return FadeTransition(
        opacity: animation,
        child: ScaleTransition(scale: scaleAnim, child: child),
      );
    }

    final slideAnim = Tween<Offset>(begin: slideOffset, end: Offset.zero).animate(curved);
    return FadeTransition(
      opacity: animation,
      child: SlideTransition(position: slideAnim, child: child),
    );
  }
}