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

class AuthForm extends StatefulWidget {
  final VoidCallback? onSubmit;

  const AuthForm({super.key, this.onSubmit});

  @override
  State<AuthForm> createState() => _AuthFormState();
}

class _AuthFormState extends State<AuthForm> {
  bool _obscure = true;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // Border container - decorative element behind the form
          Container(
            width: 360,
            constraints: const BoxConstraints(
              minHeight: 500,
              maxHeight: 580,   // Allows shrinking when keyboard opens
            ),
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(32),
              border: Border.all(
                color: const Color(0xDD00C28E),
                width: 1,
              ),
            ),
          ),
          
          // Main form container
          Container(
            width: 340,
            padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 38),
            decoration: BoxDecoration(
              color: const Color(0xFFEEFFFA),
              borderRadius: BorderRadius.circular(28),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 10,
                  offset: Offset(0, 5),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [
                /// Title
                const Center(
                  child: Text(
                    "تسجيل دخول",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                ),

                const SizedBox(height: 34),

                /// Username Label
                const Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "اسم المستخدم",
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black87,
                    ),
                  ),
                ),
                const SizedBox(height: 8),

                _buildField(
                  hint: "اسم المستخدم",
                  obscure: false,
                ),

                const SizedBox(height: 30),

                /// Password Label
                const Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "كلمة المرور",
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black87,
                    ),
                  ),
                ),
                const SizedBox(height: 8),

                _buildField(
                  hint: "كلمة المرور",
                  obscure: _obscure,
                  hasEye: true,
                ),

                const SizedBox(height: 100),  // Restored original spacing

                Center(
                  child: OnboardingButton(
                    text: "تسجيل دخول",
                    backgroundColor: const Color.fromARGB(239, 35, 87, 74),
                    onPressed: widget.onSubmit,
                    
                    
                  ),
                  
                ),

                const SizedBox(height: 40),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildField({
    required String hint,
    required bool obscure,
    bool hasEye = false,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xDEDEDEDE),
        borderRadius: BorderRadius.circular(7),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 6,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: TextField(
        obscureText: obscure,
        textAlign: TextAlign.right,
        style: const TextStyle(fontSize: 16),
        decoration: InputDecoration(
          hintText: hint,
          hintStyle: const TextStyle(color: Colors.black54),
          border: InputBorder.none,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
          suffixIcon: hasEye
              ? IconButton(
                  icon: Icon(
                    obscure ? Icons.visibility_off : Icons.visibility,
                    color: Colors.black54,
                  ),
                  onPressed: () {
                    setState(() => _obscure = !obscure);
                  },
                )
              : null,
        ),
      ),
    );
  }
}