import 'package:Intaleq/controller/home/home_page_controller.dart';
import 'package:Intaleq/controller/local/local_controller.dart';
import 'package:Intaleq/constant/colors.dart';
import 'package:Intaleq/constant/style.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:Intaleq/views/lang/languages.dart';

import 'HomePage/about_page.dart';
import 'HomePage/frequentlyQuestionsPage.dart';
import 'HomePage/share_app_page.dart';
import 'HomePage/trip_record_page.dart';

// NOTE: This is a placeholder for your actual CountryPickerFromSetting widget.
// You should remove this and import your own widget.
class CountryPickerFromSetting extends StatelessWidget {
  const CountryPickerFromSetting({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Change Country'.tr)),
      body: Center(
        child: Text('Country Picker Page Placeholder'.tr),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Using lazyPut to ensure the controller is available when needed.
    Get.lazyPut(() => HomePageController());

    return Scaffold(
      backgroundColor: AppColor.secondaryColor.withOpacity(0.94),
      appBar: AppBar(
        title: Text('Setting'.tr,
            style: AppStyle.headTitle2.copyWith(fontSize: 20)),
        backgroundColor: AppColor.secondaryColor,
        elevation: 0.5,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios_new, color: AppColor.writeColor),
          onPressed: () => Get.back(),
        ),
      ),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          children: [
            _buildSectionHeader('General'.tr),
            _buildSettingsCard(
              children: [
                _buildSettingsTile(
                  icon: Icons.language,
                  color: Colors.blue,
                  title: 'Language'.tr,
                  subtitle: 'To change Language the App'.tr,
                  onTap: () => Get.to(() => const Language()),
                ),
                Divider(
                    height: 1,
                    indent: 68,
                    endIndent: 16,
                    color: AppColor.grayColor.withOpacity(0.1)),
                GetBuilder<LocaleController>(
                  builder: (localeController) {
                    return _buildSettingsTile(
                      icon: Icons.palette_outlined,
                      color: Colors.deepPurpleAccent,
                      title: 'Appearance'.tr,
                      subtitle: (localeController.themeMode == ThemeMode.system
                              ? 'System Default'.tr
                              : localeController.themeMode == ThemeMode.dark
                                  ? 'Dark Mode'.tr
                                  : 'Light Mode'.tr)
                          .tr,
                      onTap: () => _showThemeSheet(context, localeController),
                    );
                  },
                ),
              ],
            ),
            const SizedBox(height: 24),
            _buildSectionHeader('Preferences'.tr),
            _buildSettingsCard(
              children: [
                GetBuilder<HomePageController>(
                  builder: (controller) {
                    return _buildSettingsSwitchTile(
                      icon: Icons.vibration,
                      color: Colors.purple,
                      title: 'Vibration'.tr,
                      subtitle: 'Vibration feedback for all buttons'.tr,
                      value: controller.isVibrate,
                      onChanged: controller.changeVibrateOption,
                    );
                  },
                ),
                const Divider(height: 1, indent: 68, endIndent: 16),
                _buildSettingsTile(
                  icon: Icons.mic_none,
                  color: Colors.orange,
                  title: 'Trips recorded'.tr,
                  subtitle: 'Here recorded trips audio'.tr,
                  onTap: () => Get.to(() => const TripsRecordedPage()),
                ),
              ],
            ),
            const SizedBox(height: 24),
            _buildSectionHeader('Support & Info'.tr),
            _buildSettingsCard(
              children: [
                _buildSettingsTile(
                  icon: Icons.help_outline,
                  color: Colors.cyan,
                  title: 'Frequently Questions'.tr,
                  subtitle: 'Find answers to common questions'.tr,
                  onTap: () => Get.to(() => const FrequentlyQuestionsPage()),
                ),
                const Divider(height: 1, indent: 68, endIndent: 16),
                _buildSettingsTile(
                  icon: Icons.info_outline,
                  color: Colors.indigo,
                  title: 'About Us'.tr,
                  subtitle: 'Learn more about our app and mission'.tr,
                  onTap: () => Get.to(() => const AboutPage()),
                ),
                const Divider(height: 1, indent: 68, endIndent: 16),
                _buildSettingsTile(
                  icon: Icons.share_outlined,
                  color: Colors.redAccent,
                  title: 'Share App'.tr,
                  subtitle: 'Share with friends and earn rewards'.tr,
                  onTap: () => Get.to(() => ShareAppPage()),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.0, left: 8.0),
      child: Text(
        title,
        style: TextStyle(
          color: AppColor.grayColor,
          fontWeight: FontWeight.bold,
          fontSize: 15,
        ),
      ),
    );
  }

  void _showThemeSheet(BuildContext context, LocaleController controller) {
    final options = [
      {'label': 'System Default'.tr, 'mode': ThemeMode.system},
      {'label': 'Light Mode'.tr, 'mode': ThemeMode.light},
      {'label': 'Dark Mode'.tr, 'mode': ThemeMode.dark},
    ];

    Get.bottomSheet(
      Container(
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: AppColor.secondaryColor,
          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 40,
              height: 4,
              margin: const EdgeInsets.only(bottom: 20),
              decoration: BoxDecoration(
                color: AppColor.grayColor.withOpacity(0.3),
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            Text('Select Appearance'.tr,
                style: AppStyle.headTitle2.copyWith(fontSize: 18)),
            const SizedBox(height: 20),
            ...options.map((opt) {
              final isSelected = controller.themeMode == opt['mode'];
              return ListTile(
                title: Text(opt['label'] as String,
                    style: TextStyle(
                        color: isSelected
                            ? AppColor.primaryColor
                            : AppColor.writeColor,
                        fontWeight:
                            isSelected ? FontWeight.bold : FontWeight.normal)),
                trailing: isSelected
                    ? Icon(Icons.check_circle, color: AppColor.primaryColor)
                    : null,
                onTap: () {
                  Get.back();
                  controller.changeThemeMode(opt['mode'] as ThemeMode);
                },
              );
            }).toList(),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  Widget _buildSettingsCard({required List<Widget> children}) {
    return Container(
      decoration: BoxDecoration(
        color: AppColor.secondaryColor,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 4),
          )
        ],
      ),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: children,
      ),
    );
  }

  Widget _buildSettingsTile({
    required IconData icon,
    required Color color,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return ListTile(
      onTap: onTap,
      leading: Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Icon(icon, color: color, size: 22),
      ),
      title: Text(title,
          style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 16,
              color: AppColor.writeColor)),
      subtitle: Text(subtitle,
          style: TextStyle(color: AppColor.grayColor, fontSize: 13)),
      trailing:
          Icon(Icons.chevron_right, color: AppColor.grayColor.withOpacity(0.5)),
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
    );
  }

  Widget _buildSettingsSwitchTile({
    required IconData icon,
    required Color color,
    required String title,
    required String subtitle,
    required bool value,
    required ValueChanged<bool> onChanged,
  }) {
    return SwitchListTile(
      secondary: Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Icon(icon, color: color, size: 22),
      ),
      title: Text(title,
          style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 16,
              color: AppColor.writeColor)),
      subtitle: Text(subtitle,
          style: TextStyle(color: AppColor.grayColor, fontSize: 13)),
      value: value,
      onChanged: onChanged,
      activeColor: const Color(0xFF007AFF), // iOS-like blue
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
    );
  }
}