import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/app_background.dart';
import '../widgets/settings_bar.dart';

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

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

                const SizedBox(height: 10),

                /// -------------------- PAGE TITLE --------------------
                const Text(
                  "الإعدادات",
                  style: TextStyle(
                    fontSize: 26,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                const SizedBox(height: 20),

                /// -------------------- FORM CONTAINER --------------------
                Expanded(
                  child: Center(
                    child: Stack(
                      clipBehavior: Clip.none,
                      children: [
                        /// Outer border container
                        Container(
                          width: MediaQuery.of(context).size.width * 0.85,
                          decoration: BoxDecoration(
                            color: const Color(0xFFEEFFFA), // LIGHT GREEN FIXED
                            borderRadius: BorderRadius.circular(28),
                            border: Border.all(
                              color: const Color(0xDD00C28E),
                              width: 1,
                            ),
                            boxShadow: const [
                              BoxShadow(
                                color: Colors.black26,
                                blurRadius: 8,
                                offset: Offset(0, 4),
                              ),
                            ],
                          ),
                          padding: const EdgeInsets.symmetric(
                            horizontal: 18,
                            vertical: 40,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              const SizedBox(height: 55),

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

                              const SizedBox(height: 4),

                              GestureDetector(
                                onTap: () {},
                                child: Center(
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      const Text(
                                        "تغيير كلمة المرور",
                                        style: TextStyle(
                                          fontSize: 13,
                                          color: Colors.black54,
                                        ),
                                      ),
                                      const SizedBox(width: 4),
                                      SvgPicture.asset(
                                        "assets/images/edit.svg",
                                        width: 16,
                                        height: 16,
                                      ),
                                    ],
                                  ),
                                ),
                              ),

                              const SizedBox(height: 18),

                              /// -------------------- NOTIFICATION SWITCH --------------------
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Switch(
                                    value: true,
                                    activeColor: const Color(0xFF177046),
                                    inactiveThumbColor: Colors.black,
                                    onChanged: (v) {},
                                  ),

                                  /// RTL – text on right, icon on left
                                  Row(
                                    children: [
                                      const Text(
                                        "الإشعارات",
                                        style: TextStyle(
                                          fontSize: 16,
                                          color: Colors.black87,
                                        ),
                                      ),
                                      const SizedBox(width: 8),
                                      SvgPicture.asset(
                                        "assets/images/notification.svg",
                                        width: 22,
                                      ),
                                    ],
                                  ),
                                ],
                              ),

                              _buildDivider(),

                              _buildSettingsRow(
                                label: "عن الشركة",
                                icon: "assets/images/info.svg",
                                onTap: () {},
                              ),

                              _buildDivider(),

                              _buildSettingsRow(
                                label: "تسجيل خروج",
                                icon: "assets/images/logout.svg",
                                onTap: () {},
                              ),

                              _buildDivider(),

                              _buildSettingsRow(
                                label: "إجازات الموظفين",
                                icon: "assets/images/holiday.svg",
                                onTap: () {},
                              ),
                            ],
                          ),
                        ),

                        /// -------------------- USER AVATAR --------------------
                        Positioned(
                          top: -45,
                          left: 0,
                          right: 0,
                          child: Center(
                            child: Container(
                              width: 105,
                              height: 105,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: const Color(0xFFE1E1E1),
                                border: Border.all(
                                  color: const Color(0xFF177046),
                                  width: 6,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // Divider line
  Widget _buildDivider() {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(vertical: 12),
      height: 1.2,
      color: const Color(0xFFB5DECC),
    );
  }

  // RTL Settings row (text right, icon left)
  Widget _buildSettingsRow({
    required String label,
    required String icon,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          /// ICON on LEFT — RTL
          SvgPicture.asset(icon, width: 22),

          /// TEXT on RIGHT — RTL
          Text(
            label,
            style: const TextStyle(
              fontSize: 16,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }
}