import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/app_background.dart';
import '../widgets/settings_bar.dart';
import '../screens/about_screen.dart';
import '../screens/auth_screen.dart';
import '../widgets/change_password_modal.dart';


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

  @override
  State<UserSettingsScreen> createState() => _UserSettingsScreenState();
}

class _UserSettingsScreenState extends State<UserSettingsScreen> {
  bool _notificationsOn = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: AppBackground(
          child: SafeArea(
            child: Column(
              children: [
                /// -------------------- SETTINGS BAR --------------------
                SettingsBar(
                  selectedIndex: 0,
                  onTap: (_) {},
                  showBackButton: true,
                  onBackTap: () => Navigator.pop(context),
                  iconPaths: const [],
                ),

                const SizedBox(height: 10),

                /// -------------------- PAGE TITLE --------------------
                Padding(
                  padding: const EdgeInsets.only(right: 40),
                  child: Align(
                    alignment: Alignment.topRight,
                    child: const Text(
                      "الإعدادات",
                      style: TextStyle(
                        fontSize: 26,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),

                /// -------------------- FORM CONTAINER --------------------
                Expanded(
                  child: Center(
                    child: Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(bottom: 40),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.85,
                            height: MediaQuery.of(context).size.height * 0.62,
                            decoration: BoxDecoration(
                              color: const Color(0xF3EEFFFA),
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: const [
                                BoxShadow(
                                  color: Colors.black26,
                                  blurRadius: 30,
                                  offset: Offset(0, 20),
                                ),
                              ],
                            ),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 22,
                              vertical: 55,
                            ),
                            child: Column(
                              children: [
                                const SizedBox(height: 10),

                                /// -------------------- USER NAME --------------------
                                const Text(
                                  "اسم الموظف",
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),

                                const SizedBox(height: 6),

                                /// ✅ CLICKABLE + UNDERLINED
                                GestureDetector(
                                  onTap: () {
                                    showDialog(
                                      context: context,
                                      barrierDismissible: true,
                                      builder:
                                          (_) => const ChangePasswordModal(),
                                    );
                                  },
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      const Text(
                                        "تغيير كلمة المرور",
                                        style: TextStyle(
                                          fontSize: 15,
                                          color: Colors.black54,
                                          decoration: TextDecoration.underline,
                                          decorationThickness: 1.5,
                                        ),
                                      ),
                                      const SizedBox(width: 6),
                                      SvgPicture.asset(
                                        "assets/images/edit.svg",
                                        width: 22,
                                        height: 22,
                                      ),
                                    ],
                                  ),
                                ),

                                const SizedBox(height: 20),

                                /// -------------------- NOTIFICATION SWITCH --------------------
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          _notificationsOn = !_notificationsOn;
                                        });
                                      },
                                      child: AnimatedContainer(
                                        duration: const Duration(
                                          milliseconds: 250,
                                        ),
                                        width: 95,
                                        height: 42,
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 4,
                                        ),
                                        decoration: BoxDecoration(
                                          color:
                                              _notificationsOn
                                                  ? const Color(0xFF0A6B4A)
                                                  : const Color(0xFFB5B5B5),
                                          borderRadius: BorderRadius.circular(
                                            40,
                                          ),
                                        ),
                                        child: Align(
                                          alignment:
                                              _notificationsOn
                                                  ? Alignment.centerRight
                                                  : Alignment.centerLeft,
                                          child: AnimatedContainer(
                                            duration: const Duration(
                                              milliseconds: 250,
                                            ),
                                            width: 40,
                                            height: 40,
                                            decoration: BoxDecoration(
                                              color:
                                                  _notificationsOn
                                                      ? const Color(0xFF12BE85)
                                                      : const Color(0xFF0F0F0F),
                                              shape: BoxShape.circle,
                                              boxShadow: const [
                                                BoxShadow(
                                                  color: Color(0x2D000000),
                                                  blurRadius: 6,
                                                  offset: Offset(0, 2),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),

                                    Row(
                                      children: [
                                        const Text(
                                          "الإشعارات",
                                          style: TextStyle(
                                            fontSize: 16,
                                            color: Colors.black87,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        const SizedBox(width: 8),
                                        SvgPicture.asset(
                                          "assets/images/ball2.svg",
                                          width: 22,
                                        ),
                                      ],
                                    ),
                                  ],
                                ),

                                _divider(),

                                _settingsRow(
                                  label: "عن الشركة",
                                  icon: "assets/images/info.svg",
                                  onTap: () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                        builder: (_) => const AboutScreen(),
                                      ),
                                    );
                                  },
                                ),

                                _divider(),

                                _settingsRow(
                                  label: "تسجيل خروج",
                                  icon: "assets/images/logout2.svg",
                                  onTap: () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                        builder: (_) => const AuthScreen(),
                                      ),
                                    );
                                  },
                                ),
                              ],
                            ),
                          ),
                        ),

                        /// -------------------- AVATAR --------------------
                        Positioned(
                          top: -55,
                          left: 0,
                          right: 0,
                          child: Center(
                            child: Container(
                              width: 120,
                              height: 120,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: const Color(0xFFE1E1E1),
                                border: Border.all(
                                  color: const Color(0xFF2D5E50),
                                  width: 12,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _divider() {
    return Container(
      width: double.infinity,
      height: 1,
      color: const Color(0xFF008864),
      margin: const EdgeInsets.symmetric(vertical: 12),
    );
  }

  Widget _settingsRow({
    required String label,
    required String icon,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 6),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const SizedBox(width: 24),
            Row(
              children: [
                Text(
                  label,
                  style: const TextStyle(
                    fontSize: 18,
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(width: 10),
                SvgPicture.asset(icon, width: 23),
              ],
            ),
          ],
        ),
      ),
    );
  }
}