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

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

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Stack(
        children: [
          // ⭐ You already have your app background + settings bar outside this widget

          // -------------------- WHITE CARD --------------------
          Positioned(
            top: 140,
            left: 20,
            right: 20,
            child: Container(
              padding: const EdgeInsets.only(top: 70, bottom: 25),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: const [
                  BoxShadow(
                    color: Color(0x33000000),
                    blurRadius: 12,
                    offset: Offset(0, 5),
                  ),
                ],
              ),
              child: Column(
                children: [
                  // -------------------- EMPLOYEE NAME --------------------
                  Text(
                    "اسم الموظف",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w700,
                      color: Colors.black,
                      fontFamily: "AbdEriady",
                    ),
                  ),

                  const SizedBox(height: 6),

                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "تغيير كلمة المرور",
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.grey[700],
                        ),
                      ),
                      const SizedBox(width: 4),
                      SvgPicture.asset(
                        "assets/images/edit.svg",
                        width: 16,
                        height: 16,
                      )
                    ],
                  ),

                  const SizedBox(height: 25),

                  // -------------------- NOTIFICATION TOGGLE --------------------
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 18),
                    child: Row(
                      children: [
                        Switch(
                          value: true,
                          activeColor: const Color(0xFF177046),
                          inactiveTrackColor: Colors.grey[400],
                          onChanged: (value) {},
                        ),
                        const Spacer(),
                        Text(
                          "الإشعارات",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        const SizedBox(width: 8),
                        SvgPicture.asset(
                          "assets/images/bell.svg",
                          width: 20,
                          height: 20,
                        ),
                      ],
                    ),
                  ),

                  _divider(),

                  // -------------------- ABOUT COMPANY --------------------
                  _settingsTile(
                    label: "عن الشركة",
                    iconPath: "assets/images/info.svg",
                  ),

                  _divider(),

                  // -------------------- LOGOUT --------------------
                  _settingsTile(
                    label: "تسجيل خروج",
                    iconPath: "assets/images/logout.svg",
                  ),

                  _divider(),

                  // -------------------- EMPLOYEE LEAVES --------------------
                  _settingsTile(
                    label: "إجازات الموظفين",
                    iconPath: "assets/images/leaves.svg",
                  ),
                ],
              ),
            ),
          ),

          // -------------------- PROFILE IMAGE --------------------
          Positioned(
            top: 90,
            left: 0,
            right: 0,
            child: Center(
              child: Container(
                width: 120,
                height: 120,
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  color: const Color(0xFF177046),
                  shape: BoxShape.circle,
                ),
                child: Container(
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFD9D9D9), // placeholder profile
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Divider line styled like design
  Widget _divider() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 12),
      height: 1,
      width: double.infinity,
      color: const Color(0xFFD1D1D1),
    );
  }

  // Settings row tile
  Widget _settingsTile({
    required String label,
    required String iconPath,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 18),
      child: Row(
        children: [
          Text(
            label,
            style: const TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w600,
            ),
          ),
          const Spacer(),
          SvgPicture.asset(
            iconPath,
            width: 20,
            height: 20,
          ),
        ],
      ),
    );
  }
}