import 'package:flutter/material.dart';

void main() => runApp(
  const MaterialApp(home: IMLoginPage(), debugShowCheckedModeBanner: false),
);

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

  @override
  State<IMLoginPage> createState() => _IMLoginPageState();
}

class _IMLoginPageState extends State<IMLoginPage> {
  @override
  Widget build(BuildContext context) {
    // 主题色定义：这里用类似微信的深绿或经典的社交蓝
    const Color primaryColor = Color(0xFF07C160); // 微信绿，你也可以换成 0xFF0084FF (社交蓝)

    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),
              // 1. 品牌Logo/头像区域
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: primaryColor.withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  Icons.person_rounded,
                  size: 60,
                  color: primaryColor,
                ),
              ),
              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: primaryColor),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: 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: primaryColor),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: primaryColor, width: 2),
                  ),
                ),
              ),
              const SizedBox(height: 60),

              // 4. 登录按钮 (圆润大按钮)
              SizedBox(
                width: double.infinity,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: 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: () {},
                    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)),
                    ),
                  ),
                ],
              ),

              const SizedBox(height: 80),
              // 6. 底部协议 (社交App必有)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Checkbox(
                    value: true,
                    activeColor: 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),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}