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

// Your existing imports
import 'package:wanisdriver/utils/colors.dart'; // Ensure this path is correct for AppColors
import '../Provider/ThemeProvider.dart'; // Ensure this path is correct for ThemeProvider
import '../Provider/language_provider.dart';
import '../config/language/language_enum.dart';
import '../models/ItemModel.dart';
import '../widgets/LanguageSelection.dart';
import '../widgets/SettingItemWidget.dart'; // Assuming SettingTile is in here
import '../widgets/buildHeaderItemSettingWidget.dart';
import '../widgets/custom_text.dart';

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

  @override
  State<AppSettingScreen> createState() => _AppSettingScreenState();
}

class _AppSettingScreenState extends State<AppSettingScreen> {
  bool isAutuTripSwitched = false;
  bool isLowRatedSwitched = false;

  static ThemeMode _getThemeModeBasedOnTimeStatic() {
    final now = DateTime.now();
    final hour = now.hour;
    return (hour >= 6 && hour < 19) ? ThemeMode.light : ThemeMode.dark;
  }

  void _showThemeSelectionBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      backgroundColor: Colors.transparent,
      builder: (BuildContext sheetContext) {
        return Consumer<ThemeProvider>(
          builder: (context, themeProvider, child) {
            return Container(
              padding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 20.0),
              decoration: BoxDecoration(
                color: Theme.of(context)
                    .canvasColor, // Use canvasColor for bottom sheets
                borderRadius:
                    const BorderRadius.vertical(top: Radius.circular(20)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 10,
                    offset: const Offset(0, -5),
                  ),
                ],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'Select Theme',
                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                  ),
                  _buildThemeRadioTile(
                    context,
                    themeProvider,
                    ThemeMode.system,
                    Icons.settings_outlined,
                    'System Default',
                    isDisabled: themeProvider.isAutoThemeEnabled,
                    tooltip: themeProvider.isAutoThemeEnabled
                        ? 'Disable auto-theme to select System Default'
                        : null,
                  ),
                  _buildThemeRadioTile(
                    context,
                    themeProvider,
                    ThemeMode.light,
                    Icons.light_mode_outlined,
                    'Light Mode',
                    isDisabled: themeProvider.isAutoThemeEnabled,
                    tooltip: themeProvider.isAutoThemeEnabled
                        ? 'Disable auto-theme to select Light Mode'
                        : null,
                  ),
                  _buildThemeRadioTile(
                    context,
                    themeProvider,
                    ThemeMode.dark,
                    Icons.dark_mode_outlined,
                    'Dark Mode',
                    isDisabled: themeProvider.isAutoThemeEnabled,
                    tooltip: themeProvider.isAutoThemeEnabled
                        ? 'Disable auto-theme to select Dark Mode'
                        : null,
                  ),
                  const SizedBox(height: 28),
                ],
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildThemeRadioTile(
    BuildContext context,
    ThemeProvider themeProvider,
    ThemeMode value,
    IconData icon,
    String title, {
    bool isDisabled = false,
    String? tooltip,
  }) {
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 6),
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      color:
          isDisabled ? Theme.of(context).disabledColor.withOpacity(0.1) : null,
      child: Tooltip(
        message: tooltip ?? '',
        showDuration: const Duration(seconds: 2),
        triggerMode: tooltip != null
            ? TooltipTriggerMode.longPress
            : TooltipTriggerMode.manual,
        child: RadioListTile<ThemeMode>(
          title: Text(
            title,
            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                  color: isDisabled ? Theme.of(context).disabledColor : null,
                ),
          ),
          secondary: Icon(
            icon,
            color: isDisabled ? Theme.of(context).disabledColor : null,
          ),
          value: value,
          groupValue: themeProvider.themeMode,
          onChanged: isDisabled
              ? null
              : (ThemeMode? selectedValue) {
                  if (selectedValue != null) {
                    themeProvider.setThemeMode(selectedValue);
                    Navigator.pop(
                        context); // Close the bottom sheet on selection
                  }
                },
          activeColor:
              Theme.of(context).primaryColor, // Use the app's primary color
          contentPadding:
              const EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        ),
      ),
    );
  }

  Widget _buildSettingsContainer(List<SettingItem> items) {
    // FIX: Use Theme.of(context).cardColor for theme compatibility
    return Container(
      color:
          Theme.of(context).cardColor, // This will now adapt to light/dark mode
      child: Column(
        children: items.asMap().entries.map((entry) {
          final index = entry.key;
          final item = entry.value;

          return Padding(
            padding: const EdgeInsets.only(left: 16.0, right: 16, bottom: 16),
            child: SettingTile(
                item: item,
                isDarkMode: Theme.of(context).brightness == Brightness.dark),
          );
        }).toList(),
      ),
    );
  }

  // Helper to get theme mode text for subtitle
  String _getThemeModeText(ThemeMode mode) {
    switch (mode) {
      case ThemeMode.system:
        return 'System Default';
      case ThemeMode.light:
        return 'Light Mode';
      case ThemeMode.dark:
        return 'Dark Mode';
    }
  }

  @override
  Widget build(BuildContext context) {
    final language = Provider.of<LanguageProvider>(context);
    final themeProvider = Provider.of<ThemeProvider>(context);
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
    bool isArabic = language.currentLangCode == Language.ar;
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Row(
              children: [
                GestureDetector(
                  onTap: () => Navigator.pop(context),
                  child: Container(
                    width: 32,
                    height: 32,
                    margin: const EdgeInsets.symmetric(vertical: 12),
                    decoration: BoxDecoration(
                      color: AppColors.lightgray,
                      borderRadius: BorderRadius.circular(16),
                      boxShadow: [
                        BoxShadow(
                            color: AppColors.black.withOpacity(.1),
                            blurRadius: 1,
                            offset: const Offset(2, 1))
                      ],
                    ),
                    child: const Icon(Icons.arrow_back,
                        color: AppColors.black, size: 16),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Txt(
                      text: 'App Settings',
                      style: TextStyle(
                        color: isDarkMode
                            ? AppColors.whiteBackgroundColor
                            : AppColors.blackBackgroundColor,
                        fontSize: 18,
                        fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                        fontWeight: FontWeight.w600,
                        height: 1.23,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 32),
              ],
            ),
          ),
          const SizedBox(height: 30),
          // Settings container for Switches and Navigation
          _buildSettingsContainer(
            [
              SettingItem.switchItem(
                title: "Auto-accept trips",
                // Ensure AppColors.greanColor is visible in both themes
                color: AppColors.greanColor,
                value: isAutuTripSwitched,
                onChanged: (value) =>
                    setState(() => isAutuTripSwitched = value),
              ),
              SettingItem.navigationItem(
                title: "Exclude low-rated riders",
                color: AppColors.greanColor,
                subtitle: "Don't show requests from riders with low rating",
                switchValue:
                    isLowRatedSwitched, // If this is a switch in your SettingTile
                onSwitchChanged: (value) => setState(
                    () => isLowRatedSwitched = value), // If this is a switch
              ),
              SettingItem.switchItem(
                // Using your provided switchItem
                title: "Automatic Theme by Time",
                color: isDarkMode
                    ? AppColors.white
                    : AppColors
                        .secondaryColor, // Color of the title text for the item
                value: themeProvider.isAutoThemeEnabled,
                onChanged: (bool newValue) {
                  if (themeProvider.themeMode == ThemeMode.system && newValue) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Txt(
                            text: 'Automatic theme is not available when System Default theme is selected.'),
                      ),
                    );
                    return;
                  }
                  themeProvider.setIsAutoThemeEnabled(newValue);
                  if (newValue) {
                    final currentAutoTheme = _getThemeModeBasedOnTimeStatic();
                    if (themeProvider.themeMode != currentAutoTheme) {
                      themeProvider.setThemeMode(currentAutoTheme);
                    }
                  }
                },
              ),
            ],
          ),

          const SizedBox(height: 20),

          // Language setting and Theme Settings
          _buildSettingsContainer([
            SettingItem.navigationItem(
              title: "Quick access",
              color: AppColors
                  .black, // Might need to be Theme.of(context).textTheme.bodyLarge?.color
              onTap: () {
                // Handle quick access navigation
              },
            ),
            // Manual Theme Selection Button
            SettingItem.navigationItem(
              title: "Change App Theme",
              color: AppColors.black,
              // subtitle: _getThemeModeText(themeProvider.themeMode), // Dynamic subtitle
              onTap: () {
                _showThemeSelectionBottomSheet(context);
              },
            ),
            // Automatic Theme Toggle - This should be a switch item

            SettingItem.navigationItem(
              title: "Language",
              color: AppColors.black,
              onTap: () {
                LanguageSelectionBottomSheet.show(context);
              },
            ),
          ]),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}