import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';
import '../Provider/language_provider.dart';
import '../config/AppSnackbar.dart';
import '../config/constants/arabe.dart' as Language;
import '../utils/colors.dart';
import '../widgets/custom_button.dart';
import '../widgets/custom_text.dart';
import 'ContactUsScreen.dart';

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

  @override
  State<Support> createState() => _SupportState();
}

class _SupportState extends State<Support> {
  @override
  Widget build(BuildContext context) {
    final languageProvider = context.watch<LanguageProvider>();
    bool isArabic = languageProvider.currentLangCode == Language.ar;
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode
          ? AppColors.blackBackgroundColor
          : AppColors.whiteBackgroundColor,
      appBar: AppBar(
        backgroundColor: isDarkMode
            ? AppColors.blackBackgroundColor
            : AppColors.whiteBackgroundColor,
        elevation: 0,
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: isDarkMode ? Colors.grey.shade800 : Colors.grey.shade200,
            ),
            child: IconButton(
              icon: Icon(
                Icons.arrow_back,
                color: isDarkMode ? AppColors.white : AppColors.black,
                size: 20,
              ),
              onPressed: () => Navigator.pop(context),
            ),
          ),
        ),
        title: Txt(
          text: languageSingleton.translate('Contact Us'),
          style: TextStyle(
            color: isDarkMode ? AppColors.white : AppColors.black,
            fontSize: 18,
            fontWeight: FontWeight.w600,
            fontFamily: 'Poppins',
          ),
        ),
        centerTitle: true,
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Logo with shadow
                Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: isDarkMode
                        ? Colors.grey.shade800.withOpacity(0.3)
                        : Colors.grey.shade100,
                    boxShadow: [
                      BoxShadow(
                        color: isDarkMode
                            ? Colors.black.withOpacity(0.3)
                            : Colors.black.withOpacity(0.05),
                        blurRadius: 20,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                  child: Image.asset(
                    'assets/images/logo.png',
                    width: 80,
                  ),
                ),
                const SizedBox(height: 30),

                // Title
                Txt(
                  text: languageSingleton.translate("Welcome to Support!"),
                  style: TextStyle(
                    color: isDarkMode ? AppColors.white : AppColors.black,
                    fontSize: 26,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Poppins',
                    letterSpacing: -0.5,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 12),

                // Subtitle
                Txt(
                  text: languageSingleton.translate(
                      "How would you like to contact us?"),
                  style: TextStyle(
                    color: isDarkMode
                        ? AppColors.darkSecondaryText
                        : Colors.grey.shade600,
                    fontSize: 16,
                    fontFamily: 'Poppins',
                    height: 1.5,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 40),

                // Email Button
                _buildContactCard(
                  context: context,
                  icon: Icons.email_outlined,
                  title: isArabic ? 'البريد الإلكتروني' : "Email",
                  subtitle: languageSingleton.translate("Send us an email"),
                  color: AppColors.secondaryColor,
                  onTap: () => _openEmailScreen(context),
                  isDarkMode: isDarkMode,
                ),

                const SizedBox(height: 16),

                // Phone Button
                _buildContactCard(
                  context: context,
                  icon: Icons.phone_outlined,
                  title: isArabic ? 'الهاتف' : "Phone",
                  subtitle: languageSingleton.translate("Call or message us"),
                  color: AppColors.greanColor,
                  onTap: () => _showContactOptions(context, "+216 93831879"),
                  isDarkMode: isDarkMode,
                ),

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

  Widget _buildContactCard({
    required BuildContext context,
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
    required bool isDarkMode,
  }) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(20),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.grey.shade800 : Colors.white,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: color.withOpacity(0.3),
            width: 1.5,
          ),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.2)
                  : color.withOpacity(0.1),
              blurRadius: 15,
              offset: const Offset(0, 5),
            ),
          ],
        ),
        child: Row(
          children: [
            // Icon Container
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: color.withOpacity(0.1),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Icon(
                icon,
                color: color,
                size: 28,
              ),
            ),
            const SizedBox(width: 16),

            // Text Content
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Txt(
                    text: title,
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                      fontFamily: 'Poppins',
                      color: isDarkMode ? AppColors.white : AppColors.black,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Txt(
                    text: subtitle,
                    style: TextStyle(
                      fontSize: 13,
                      fontFamily: 'Poppins',
                      color: isDarkMode
                          ? AppColors.darkSecondaryText
                          : Colors.grey.shade600,
                    ),
                  ),
                ],
              ),
            ),

            // Arrow Icon
            Icon(
              Icons.arrow_forward_ios,
              size: 18,
              color: isDarkMode
                  ? AppColors.darkSecondaryText
                  : Colors.grey.shade400,
            ),
          ],
        ),
      ),
    );
  }
  void _openEmailScreen(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.6,
          decoration: BoxDecoration(
            color: isDarkMode
                ? AppColors.blackBackgroundColor
                : Colors.white,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
          child: Column(
            children: [
              // Drag handle
              Container(
                margin: const EdgeInsets.only(top: 12),
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const Expanded(child: ContactUsScreen()),
            ],
          ),
        );
      },
    );
  }

  void _showContactOptions(BuildContext context, String number) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return Container(
          decoration: BoxDecoration(
            color: isDarkMode
                ? AppColors.blackBackgroundColor
                : Colors.white,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // Drag handle
                Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey.shade300,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(height: 20),

                // Title
                Txt(
                  text: "Contact Options",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Poppins',
                    color: isDarkMode ? AppColors.white : AppColors.black,
                  ),
                ),
                const SizedBox(height: 20),

                // Call Option
                InkWell(
                  onTap: () async {
                    Navigator.pop(ctx);
                    final Uri phoneUri = Uri.parse("tel:$number");
                    if (await canLaunchUrl(phoneUri)) {
                      await launchUrl(phoneUri);
                    } else {
                      AppSnackbar.showError("Error", "Cannot make a call");
                    }
                  },
                  borderRadius: BorderRadius.circular(15),
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 16, horizontal: 20),
                    decoration: BoxDecoration(
                      color: isDarkMode
                          ? Colors.grey.shade800
                          : Colors.grey.shade50,
                      borderRadius: BorderRadius.circular(15),
                      border: Border.all(
                        color: isDarkMode
                            ? Colors.grey.shade700
                            : Colors.grey.shade200,
                        width: 1,
                      ),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 45,
                          height: 45,
                          decoration: BoxDecoration(
                            color: Colors.green.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: const Icon(
                            Icons.phone,
                            color: Colors.green,
                            size: 24,
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Txt(
                                text: "Call",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                  fontFamily: 'Poppins',
                                  color: isDarkMode
                                      ? AppColors.white
                                      : AppColors.black,
                                ),
                              ),
                              const SizedBox(height: 2),
                              Txt(
                                text: number,
                                style: TextStyle(
                                  fontSize: 13,
                                  fontFamily: 'Poppins',
                                  color: isDarkMode
                                      ? AppColors.darkSecondaryText
                                      : Colors.grey.shade600,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Icon(
                          Icons.arrow_forward_ios,
                          size: 16,
                          color: isDarkMode
                              ? AppColors.darkSecondaryText
                              : Colors.grey.shade400,
                        ),
                      ],
                    ),
                  ),
                ),

                const SizedBox(height: 12),

                // WhatsApp Option
                InkWell(
                  onTap: () async {
                    Navigator.pop(ctx);

                    String formattedNumber =
                    number.replaceAll(RegExp(r'\D'), '');
                    if (!formattedNumber.startsWith('+')) {
                      formattedNumber = '+$formattedNumber';
                    }
                    if (formattedNumber.isEmpty ||
                        formattedNumber.length < 8) {
                      AppSnackbar.showError(
                          "Invalid number", "Phone number is too short");
                      return;
                    }

                    final Uri whatsappUri =
                    Uri.parse("https://wa.me/$formattedNumber");

                    if (await canLaunchUrl(whatsappUri)) {
                      await launchUrl(whatsappUri,
                          mode: LaunchMode.externalApplication);
                    } else {
                      AppSnackbar.showError("Error", "Cannot open WhatsApp");
                    }
                  },
                  borderRadius: BorderRadius.circular(15),
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 16, horizontal: 20),
                    decoration: BoxDecoration(
                      color: isDarkMode
                          ? Colors.grey.shade800
                          : Colors.grey.shade50,
                      borderRadius: BorderRadius.circular(15),
                      border: Border.all(
                        color: isDarkMode
                            ? Colors.grey.shade700
                            : Colors.grey.shade200,
                        width: 1,
                      ),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 45,
                          height: 45,
                          decoration: BoxDecoration(
                            color: Colors.green.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Center(
                            child: SvgPicture.asset(
                              'assets/images/icons8-whatsapp.svg',
                              width: 26,
                              color: Colors.green,
                            ),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Txt(
                                text: "Open in WhatsApp",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                  fontFamily: 'Poppins',
                                  color: isDarkMode
                                      ? AppColors.white
                                      : AppColors.black,
                                ),
                              ),
                              const SizedBox(height: 2),
                              Txt(
                                text: "Chat with us on WhatsApp",
                                style: TextStyle(
                                  fontSize: 13,
                                  fontFamily: 'Poppins',
                                  color: isDarkMode
                                      ? AppColors.darkSecondaryText
                                      : Colors.grey.shade600,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Icon(
                          Icons.arrow_forward_ios,
                          size: 16,
                          color: isDarkMode
                              ? AppColors.darkSecondaryText
                              : Colors.grey.shade400,
                        ),
                      ],
                    ),
                  ),
                ),

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