import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:jnh_flutter/const..dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Stack(
        children: [
          Column(
            children: [
              AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                leading: IconButton(
                  icon: Icon(Icons.arrow_back, color: textColor),
                  onPressed: () {

                  }
                ),
                title: Text(
                  'Login',
                  style: GoogleFonts.inter(
                    color: textColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  )
                ),
                centerTitle: true,
                actions: [const SizedBox(width: 48)],
              ),
              const Spacer(),
              Container(
                padding: const EdgeInsets.fromLTRB(24, 32, 24, 8),
                decoration: BoxDecoration(color: backgroundColor),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _buildTextField(
                      icon: Icons.person_outline,
                      hintText: 'username',
                      isDarkMode: isDarkMode,
                      inputBackgroundColor: inputBackgroundColor,
                      subtleTextColor: subtleTextColor,
                      textColor: textColor,
                    ),
                    const SizedBox(height: 24),
                    _buildTextField(
                      icon: Icons.person_outline,
                      hintText: 'password',
                      obscureText: true,
                      isDarkMode: isDarkMode,
                      inputBackgroundColor: inputBackgroundColor,
                      subtleTextColor: subtleTextColor,
                      textColor: textColor,
                    ),
                    const SizedBox(height: 24),
                    ElevatedButton(
                      onPressed: () {print("Hello");},
                      style: ElevatedButton.styleFrom(
                        backgroundColor: primaryColor,
                        minimumSize: const Size(double.infinity, 60),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        elevation: 0,
                      ),
                      child: Text(
                        'Login',
                        style: GoogleFonts.inter(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(width: 16),
                        TextButton(
                          onPressed: (){}, 
                          child: Text(
                            'forgot passward?',
                            style: GoogleFonts.inter(
                              color: primaryColor,
                              fontWeight: FontWeight.w500
                            )
                          )
                        ),
                        TextButton(
                          onPressed: (){}, 
                          child: Text(
                            'sign up',
                            style: GoogleFonts.inter(
                              color: primaryColor,
                              fontWeight: FontWeight.w500
                            )
                          )
                        )
                      ],
                    )
                  ],
              
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Widget _buildTextField({
  required IconData icon,
  required String hintText,
  bool obscureText = false,
  required bool isDarkMode,
  required Color inputBackgroundColor,
  required Color subtleTextColor,
  required Color textColor,
}) {
  return TextField(
    obscureText: obscureText,
    style: GoogleFonts.inter(color: textColor),
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.symmetric(vertical: 20),
      hintText: hintText,
      hintStyle: GoogleFonts.inter(color: subtleTextColor),
      prefixIcon: Padding(
        padding: const EdgeInsets.only(left: 20, right: 12),
        child: Icon(icon, color: subtleTextColor),
      ),
      filled: true,
      fillColor: inputBackgroundColor,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide.none,
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: const BorderSide(color: Color(0xFF137FEC), width: 2),
      ),
    ),
  );
}