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

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

  @override
  State<SignupPage> createState() => _SignupPageState();
}

class _SignupPageState extends State<SignupPage> {
  final _formKey = GlobalKey<FormState>();
  final _usernameController = TextEditingController();
  final _ageController = TextEditingController();
  final _passwordController = TextEditingController();
  final _contrimPasswordController = TextEditingController();

  bool _isPasswordVisible = false;
  bool _isContrimPasswordVisible = false;

  @override
  void dispose() {
    _usernameController.dispose();
    _ageController.dispose();
    _passwordController.dispose();
    _contrimPasswordController.dispose();
    super.dispose();
  }

  void _signup(){
    if(_formKey.currentState!.validate()){
      
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(const SnackBar(content: Text("Creating accout...")));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(),
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _buildTextField(
                isDarkMode: isDarkMode,
                controller:_usernameController,
                hintText:'username',
                prefixIcon:  Icons.account_circle_outlined,
                validator: (value){
                  if (value == null || value.isEmpty){
                    return 'please enter a username';
                  }
                }
              ),
              ElevatedButton(
                onPressed: _signup,
                style: ElevatedButton.styleFrom(
                  backgroundColor: primaryColor,
                  padding: const EdgeInsets. symmetric(vertical: 16),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)
                  ),
                  elevation: 5,
                  shadowColor: primaryColor.withValues(alpha: 0.4)
                ),
                child: const Text(
                  'Sign Up',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                    fontFamily: 'poppins',
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Widget _buildTextField({
  required bool isDarkMode,
  required TextEditingController controller,
  required String hintText,
  bool obscureText = false,
  TextInputType? keyboardType,
  required IconData prefixIcon,
  Widget? suffixIcon,
  String? Function(String?)? validator,
}) {
  final primaryColor = Color(0xFF137FEC);
  final textColor = isDarkMode ? Colors.white : Color(0xFF101922);
  final placeholderColor = isDarkMode ? Colors.white70 : Colors.black54;
  final inputBackgroundColor = isDarkMode
      ? Color(0xFF1C2A3A)
      : Color(0xFFF3F6F9);

  return TextFormField(
    controller: controller,
    obscureText: obscureText,
    keyboardType: keyboardType,
    style: TextStyle(color: textColor, fontFamily: 'Poppins'),
    validator: validator,
    decoration: InputDecoration(
      hintText: hintText,
      hintStyle: TextStyle(color: placeholderColor, fontFamily: 'Poppins'),
      filled: true,
      fillColor: inputBackgroundColor,
      prefixIcon: Icon(prefixIcon, color: placeholderColor),
      suffixIcon: suffixIcon,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide.none,
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: primaryColor, width: 2),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: Colors.redAccent, width: 1),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: Colors.redAccent, width: 2),
      ),
      contentPadding: const EdgeInsets.symmetric(vertical: 18, horizontal: 16),
    ),
  );
}