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

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

  @override
  State<ChangePasswordModal> createState() => _ChangePasswordModalState();
}

class _ChangePasswordModalState extends State<ChangePasswordModal> {
  bool _oldObscure = true;
  // bool _newObscure = true;

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final screenWidth = screenSize.width;
    final screenHeight = screenSize.height;

    final formWidth =
        screenWidth > 600 ? screenWidth * 0.5 : screenWidth * 0.88;
    final labelFontSize = screenWidth > 600 ? 18.0 : 16.0;
    final fieldFontSize = screenWidth > 600 ? 18.0 : 16.0;
    final verticalPadding = screenHeight > 800 ? 38.0 : 28.0;
    final fieldSpacing = screenHeight > 800 ? 30.0 : 20.0;
    final buttonSpacing = screenHeight > 800 ? 80.0 : 60.0;

    return Material(
      color: Colors.transparent,
      child: Stack(
        children: [
          /// ✅ DARK TRANSPARENT OVERLAY (NO BLUR)
          Positioned.fill(child: Container(color: const Color(0x80000000))),

          /// ---------- MODAL ----------
          Center(
            child: Directionality(
              textDirection: TextDirection.rtl,
              child: Container(
                width: formWidth,
                padding: EdgeInsets.symmetric(
                  horizontal: 25,
                  vertical: verticalPadding,
                ),
                decoration: BoxDecoration(
                  color: const Color(0xFFEEFFFA),
                  borderRadius: BorderRadius.circular(10),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 10,
                      offset: Offset(0, 5),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    /// ---------- OLD PASSWORD ----------
                    Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        "كلمة المرور السابقة",
                        style: TextStyle(
                          fontSize: labelFontSize,
                          fontWeight: FontWeight.w600,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),

                    _buildField(
                      hint: "أدخل كلمة المرور",
                      obscure: _oldObscure,
                      fontSize: fieldFontSize,
                      hasEye: true, // ✅ eye here
                      onEyeTap:
                          () => setState(() => _oldObscure = !_oldObscure),
                    ),

                    SizedBox(height: fieldSpacing),

                    /// ---------- NEW PASSWORD ----------
                    Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        "كلمة المرور الجديدة",
                        style: TextStyle(
                          fontSize: labelFontSize,
                          fontWeight: FontWeight.w600,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),

                    _buildField(
                      hint: "كلمة المرور",
                      obscure: false,
                      fontSize: fieldFontSize,
                      hasEye: false,
                      onEyeTap: () {}, // unused
                    ),

                    SizedBox(height: buttonSpacing),

                    Center(
                      child: OnboardingButton(
                        text: "حفظ التغيير",
                        backgroundColor: const Color(0xEE23574A),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildField({
    required String hint,
    required bool obscure,
    required double fontSize,
    required bool hasEye,
    required VoidCallback onEyeTap,
  }) {
    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: TextStyle(fontSize: fontSize),
        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: onEyeTap,
                  )
                  : null,
        ),
      ),
    );
  }
}