import 'package:app/core/constants/app_colors.dart';
import 'package:app/features/auth/pages/login_page.dart';
import 'package:flutter/material.dart';
import 'package:app/core/router/app_router.dart';

class LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        actions: [
          // TextButton(
          //   onPressed: () {},
          //   child: const Text("找回密码", style: TextStyle(color: Colors.grey)),
          // ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20),
              const SizedBox(height: 24),
              const Text(
                "登陆账号",
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              const SizedBox(height: 60),

              // 2. 账号输入框 (极简下划线风格)
              TextField(
                decoration: InputDecoration(
                  labelText: "账号 / 邮箱 / 手机号",
                  labelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
                  floatingLabelStyle: const TextStyle(color: AppColors.primaryColor),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: AppColors.primaryColor, width: 2),
                  ),
                ),
              ),
              const SizedBox(height: 25),

              // 3. 密码输入框
              TextField(
                obscureText: true,
                decoration: InputDecoration(
                  labelText: "请输入密码",
                  labelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
                  floatingLabelStyle: const TextStyle(color: AppColors.primaryColor),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: AppColors.primaryColor, width: 2),
                  ),
                ),
              ),
              const SizedBox(height: 60),

              // 4. 登录按钮 (圆润大按钮)
              SizedBox(
                width: double.infinity,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: AppColors.primaryColor,
                    foregroundColor: Colors.white,
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  child: const Text(
                    "登 录",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  ),
                ),
              ),
              const SizedBox(height: 20),

              // 5. 注册/切换登录方式
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {
                      appRouter.push("/auth/register");
                    },
                    child: const Text(
                      "注册账号",
                      style: TextStyle(color: Color(0xFF576B95)),
                    ), // 经典的链接蓝
                  ),
                  const SizedBox(
                    height: 20,
                    child: VerticalDivider(color: Colors.grey),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: const Text(
                      "验证码登录",
                      style: TextStyle(color: Color(0xFF576B95)),
                    ),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: const Text(
                      "找回密码",
                      style: TextStyle(color: Color(0xFF576B95)),
                    ),
                  ),
                ],
              ),

              const SizedBox(height: 80),
              // 6. 底部协议 (社交App必有)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Checkbox(
                    value: true,
                    activeColor: AppColors.primaryColor,
                    onChanged: (v) {},
                  ),
                  const Text(
                    "我已阅读并同意",
                    style: TextStyle(color: Colors.grey, fontSize: 12),
                  ),
                  const Text(
                    "《用户协议》",
                    style: TextStyle(color: Color(0xFF576B95), fontSize: 12),
                  ),
                  const Text(
                    "与",
                    style: TextStyle(color: Colors.grey, fontSize: 12),
                  ),
                  const Text(
                    "《隐私政策》",
                    style: TextStyle(color: Color(0xFF576B95), fontSize: 12),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

}