import 'package:wanisdriver/utils/colors.dart';
import 'package:wanisdriver/utils/colors.dart';
import 'package:wanisdriver/utils/colors.dart';
import 'package:wanisdriver/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../Provider/language_provider.dart';

class LanguageSelectionPopup {
  static void show(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) => const _LanguageDialog(),
    );
  }
}

class _LanguageDialog extends StatelessWidget {
  const _LanguageDialog();

  @override
  Widget build(BuildContext context) {
    return Consumer<LanguageProvider>(
      builder: (context, languageProvider, child) {
        return AlertDialog(
          title: Text(
            languageProvider.translate('select_language') ?? 'Select Language',
            style: const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _LanguageOption(
                title: 'English',
                isSelected: languageProvider.dropValue == 'English',
                onTap: () => _selectLanguage(context, 'English'),
              ),
              const SizedBox(height: 12),
              _LanguageOption(
                title: 'العربية',
                subtitle: 'Arabic',
                isSelected: languageProvider.dropValue == 'Arabic',
                onTap: () => _selectLanguage(context, 'Arabic'),
              ),
              const SizedBox(height: 12),
              _LanguageOption(
                title: 'Français',
                subtitle: 'French',
                isSelected: languageProvider.dropValue == 'French',
                onTap: () => _selectLanguage(context, 'French'),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text(
                languageProvider.translate('cancel') ?? 'Cancel',
                style: TextStyle(
                  color: Colors.grey[600],
                  fontSize: 16,
                ),
              ),
            ),
          ],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
        );
      },
    );
  }

  void _selectLanguage(BuildContext context, String language) {
    final languageProvider = Provider.of<LanguageProvider>(context, listen: false);
    languageProvider.setDropValue(language);
    Navigator.of(context).pop();

    // Show success message
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          languageProvider.translate('language_changed') ?? 'Language changed successfully',
        ),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.green,
      ),
    );
  }
}

class _LanguageOption extends StatelessWidget {
  final String title;
  final String? subtitle;
  final bool isSelected;
  final VoidCallback onTap;

  const _LanguageOption({
    required this.title,
    this.subtitle,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(12),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          border: Border.all(
            color: isSelected ? Theme.of(context).brightness == Brightness.dark ?AppColors.darkPrimaryColor:AppColors.primaryColor : Colors.grey[300]!,
            width: isSelected ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(12),
          color: isSelected ? Theme.of(context).brightness == Brightness.dark ?AppColors.darkPrimaryColor:AppColors.primaryColor.withOpacity(0.1) : Colors.transparent,
        ),
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                      color:  Theme.of(context).brightness == Brightness.dark ? AppColors.whiteBackgroundColor: AppColors.primaryColor ,
                    ),
                  ),
                  if (subtitle != null) ...[
                    const SizedBox(height: 2),
                    Text(
                      subtitle!,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey[600],
                      ),
                    ),
                  ],
                ],
              ),
            ),
            if (isSelected)
              Icon(
                Icons.check_circle,
                color: Theme.of(context).brightness == Brightness.dark ?AppColors.darkPrimaryColor:AppColors.primaryColor,
                size: 24,
              ),
          ],
        ),
      ),
    );
  }
}

// Alternative Bottom Sheet Implementation
class LanguageSelectionBottomSheet {
  static void show(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => const _LanguageBottomSheet(),
    );
  }
}

class _LanguageBottomSheet extends StatelessWidget {
  const _LanguageBottomSheet();

  @override
  Widget build(BuildContext context) {
    return Consumer<LanguageProvider>(
      builder: (context, languageProvider, child) {
        return Container(
          decoration:  BoxDecoration(
            color:Theme.of(context).brightness == Brightness.dark ? AppColors.blackBackgroundColor: Colors.white,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Handle bar
              Container(
                margin: const EdgeInsets.only(top: 12),
                height: 4,
                width: 40,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),

              // Title
              Padding(
                padding: const EdgeInsets.all(20),
                child: Text(
                  languageProvider.translate('select_language') ?? 'Select Language',
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              // Language options
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    _LanguageOption(
                      title: 'English',
                      isSelected: languageProvider.dropValue == 'English',
                      onTap: () => _selectLanguage(context, 'English'),
                    ),
                    const SizedBox(height: 12),
                    _LanguageOption(
                      title: 'العربية',
                      isSelected: languageProvider.dropValue == 'Arabic',
                      onTap: () => _selectLanguage(context, 'Arabic'),
                    ),
                    const SizedBox(height: 12),
                    _LanguageOption(
                      title: 'Français',
                      isSelected: languageProvider.dropValue == 'Francais',
                      onTap: () => _selectLanguage(context, 'Francais'),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 40),
            ],
          ),
        );
      },
    );
  }

  void _selectLanguage(BuildContext context, String language) {
    final languageProvider = Provider.of<LanguageProvider>(context, listen: false);
    languageProvider.setDropValue(language);
    Navigator.of(context).pop();

    // Show success message
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          languageProvider.translate('language_changed') ?? 'Language changed successfully',
        ),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.green,
      ),
    );
  }
}