import 'package:flutter/material.dart';
import 'main.dart';

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _idController = TextEditingController();
  final TextEditingController _pwController = TextEditingController();

  final FocusNode _idFocusNode = FocusNode();
  final FocusNode _pwFocusNode = FocusNode();

  final Color mainBlueColor = const Color(0xFF007AFF);

  bool _isIdFocused = false;
  bool _isPwFocused = false;

  @override
  void initState() {
    super.initState();
    _idFocusNode.addListener(() {
      setState(() => _isIdFocused = _idFocusNode.hasFocus);
    });
    _pwFocusNode.addListener(() {
      setState(() => _isPwFocused = _pwFocusNode.hasFocus);
    });
  }

  @override
  void dispose() {
    _idController.dispose();
    _pwController.dispose();
    _idFocusNode.dispose();
    _pwFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Icon(Icons.polymer, size: 80, color: mainBlueColor),
              const SizedBox(height: 20),
              Text(
                'METAQLAB',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: mainBlueColor,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 1.2,
                ),
              ),
              const SizedBox(height: 60),

              _buildCustomTextField(
                label: '아이디',
                controller: _idController,
                focusNode: _idFocusNode,
                isFocused: _isIdFocused,
              ),
              const SizedBox(height: 16),

              _buildCustomTextField(
                label: '비밀번호',
                controller: _pwController,
                focusNode: _pwFocusNode,
                isFocused: _isPwFocused,
                isObscure: true,
              ),

              const SizedBox(height: 40),

              ElevatedButton(
                onPressed: () {
                  String inputId = _idController.text;
                  String inputPw = _pwController.text;

                  if (inputId == 'user' && inputPw == '1234') {
                    print('로그인 성공!');
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(builder: (context) => const HomeScreen()),
                    );
                  } else {
                    print('로그인 실패');
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('아이디 또는 비밀번호가 틀렸습니다.'),
                        backgroundColor: Colors.redAccent,
                        duration: Duration(seconds: 2),
                      ),
                    );
                  }
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: mainBlueColor,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  elevation: 0,
                ),
                child: const Text(
                  '로그인',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ),

              const SizedBox(height: 20),
              TextButton(
                onPressed: () {},
                child: Text(
                  '비밀번호 찾기  /  회원가입',
                  style: TextStyle(color: mainBlueColor, fontWeight: FontWeight.w500),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCustomTextField({
    required String label,
    required TextEditingController controller,
    required FocusNode focusNode,
    required bool isFocused,
    bool isObscure = false,
  }) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: isFocused ? mainBlueColor : Colors.grey.shade300,
          width: isFocused ? 1.5 : 1.0,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            label,
            style: TextStyle(
              color: isFocused ? mainBlueColor : Colors.grey.shade600,
              fontSize: 12,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 4),
          TextField(
            controller: controller,
            focusNode: focusNode,
            obscureText: isObscure,
            decoration: const InputDecoration(
              isDense: true,
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
            ),
            style: const TextStyle(
              fontSize: 16,
              color: Colors.black87,
            ),
            cursorColor: mainBlueColor,
          ),
        ],
      ),
    );
  }
}