import 'package:wanisclient/config/custom_text.dart';
import 'package:wanisclient/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../config/language/language_enum.dart';
import '../providers/language_provider.dart';

class NotificationSettingsScreen extends StatefulWidget {
  @override
  _NotificationSettingsScreenState createState() =>
      _NotificationSettingsScreenState();
}

class _NotificationSettingsScreenState
    extends State<NotificationSettingsScreen> {
  bool smsNotification = true;
  bool pushNotification = false;
  bool emailNotification = true;

  // !! READ-ONLY MODE FLAG - Easy to toggle on/off
  final bool isReadOnly = true; // Set to false to make interactive again

  @override
  Widget build(BuildContext context) {
    final languageProvider = context.watch<LanguageProvider>();
    bool isArabic = languageProvider.currentLangCode == Language.ar;


    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            const SizedBox(height: 14,),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Container(
                    width: 32,
                    height: 32,
                    margin: const EdgeInsets.symmetric(vertical: 12),
                    decoration: BoxDecoration(
                      color: AppNewColors.lightgray,
                      borderRadius: BorderRadius.circular(16),
                      boxShadow: [
                        BoxShadow(
                          color: AppNewColors.black.withOpacity(.1),
                          blurRadius: 1,
                          offset: const Offset(2, 1),
                        ),
                      ],
                    ),
                    child: const Icon(
                      Icons.arrow_back,
                      color: AppNewColors.black,
                      size: 16,
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Txt(
                      text: 'notification_settings',
                      style: TextStyle(
                        color: AppNewColors.titleTextColor,
                        fontSize:  18,
                        fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                        fontWeight: FontWeight.w600,
                        height: 1.23,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 32), // to balance the back button space
              ],
            ),


            const SizedBox(height: 12),
            // !! GRAYED OUT CONTAINER - Easy to modify opacity/colors
            Opacity(
              opacity: isReadOnly ? 0.5 : 1.0, // !! Makes it look disabled
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(32),
                  border: Border.all(
                    color: isReadOnly ? Colors.grey.shade200 : Colors.grey.shade300, // !! Lighter border when read-only
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: _buildNotificationTile(
                    isArabic: isArabic,
                   // !! PASS CURRENT LANGUAGE
                    title: 'sms_notification', // !! TRANSLATED
                    description: 'sms_description', // !! TRANSLATED
                    value: smsNotification,
                    isReadOnly: isReadOnly, // !! PASS READ-ONLY STATE
                    onChanged: (bool value) {
                      if (!isReadOnly) { // !! ONLY ALLOW CHANGES IF NOT READ-ONLY
                        setState(() {
                          smsNotification = value;
                        });
                      }
                    },
                  ),
                ),
              ),
            ),
            const SizedBox(height: 30),
            // !! GRAYED OUT CONTAINER
            Opacity(
              opacity: isReadOnly ? 0.5 : 1.0,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(32),
                  border: Border.all(
                    color: isReadOnly ? Colors.grey.shade200 : Colors.grey.shade300,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: _buildNotificationTile(
                    isArabic: isArabic,
                   // !! PASS CURRENT LANGUAGE
                    title: 'push_notification', // !! TRANSLATED
                    description: 'push_description', // !! TRANSLATED
                    value: pushNotification,
                    isReadOnly: isReadOnly, // !! PASS READ-ONLY STATE
                    onChanged: (bool value) {
                      if (!isReadOnly) { // !! ONLY ALLOW CHANGES IF NOT READ-ONLY
                        setState(() {
                          pushNotification = value;
                        });
                      }
                    },
                  ),
                ),
              ),
            ),
            const SizedBox(height: 30),
            // !! GRAYED OUT CONTAINER
            Opacity(
              opacity: isReadOnly ? 0.5 : 1.0,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(32),
                  border: Border.all(
                    color: isReadOnly ? Colors.grey.shade200 : Colors.grey.shade300,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: _buildNotificationTile(
                    isArabic: isArabic,
                   // !! PASS CURRENT LANGUAGE
                    title: 'email_notification', // !! TRANSLATED
                    description: 'email_description', // !! TRANSLATED
                    value: emailNotification,
                    isReadOnly: isReadOnly, // !! PASS READ-ONLY STATE
                    onChanged: (bool value) {
                      if (!isReadOnly) { // !! ONLY ALLOW CHANGES IF NOT READ-ONLY
                        setState(() {
                          emailNotification = value;
                        });
                      }
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNotificationTile({
    required String title,
    required String description,
    required bool value,
    required bool isArabic,
    required bool isReadOnly, // !! ADDED READ-ONLY PARAMETER
    required ValueChanged<bool> onChanged,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Txt(
                    text:
                    title,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: isReadOnly ? Colors.grey[500] : Colors.black87, // !! GRAYED TEXT WHEN READ-ONLY
                      fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                    ),
                  ),
                  Transform.scale(
                    scale: 0.6,
                    child: Switch(
                      value: value,
                      onChanged: isReadOnly ? null : onChanged, // !! NULL DISABLES THE SWITCH
                      activeColor: isReadOnly ? AppNewColors.black.withOpacity(.8) : AppNewColors.primaryColor, // !! GRAYED WHEN READ-ONLY
                      inactiveThumbColor: AppNewColors.black.withOpacity(.8),
                      inactiveTrackColor: Colors.grey[300],
                    ),
                  ),
                ],
              ),
              Txt(
                text:
                description,
                style: TextStyle(
                  fontSize: 14,
                  color: isReadOnly ? AppNewColors.black.withOpacity(.8) : Colors.grey[600], // !! LIGHTER GRAY WHEN READ-ONLY
                  fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                  height: 1.4,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}