import 'package:siro_rider/constant/colors.dart';
import 'package:siro_rider/constant/style.dart';
import 'package:siro_rider/views/widgets/my_scafold.dart';
import 'package:flutter/material.dart';
import 'package:flutter_font_icons/flutter_font_icons.dart';
import 'package:get/get.dart';

import '../../../controller/functions/tts.dart';
import '../../../controller/home/contact_us_controller.dart';
import '../../widgets/elevated_btn.dart';

class ContactUsPage extends StatelessWidget {
  ContactUsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(ContactUsController());
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return MyScafolld(
      title: "Contact Us".tr,
      isleading: true,
      body: [
        // Background subtle gradient/shape
        Positioned.fill(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: isDark
                    ? [const Color(0xFF0D0D14), const Color(0xFF161622)]
                    : [const Color(0xFFF8F9FF), const Color(0xFFEFF1FB)],
              ),
            ),
          ),
        ),
        SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                // ── Hero Section ──────────────────────────────────────────
                _buildHeroSection(isDark),
                const SizedBox(height: 24),

                // ── Availability Status ────────────────────────────────────
                _buildAvailabilityStatus(controller, isDark),
                const SizedBox(height: 24),

                // ── Support Actions ────────────────────────────────────────
                Text(
                  "Reach out to us via".tr,
                  style: AppStyle.title.copyWith(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: isDark ? Colors.white70 : Colors.black54,
                  ),
                ),
                const SizedBox(height: 12),
                _buildContactCards(controller, isDark),
                const SizedBox(height: 32),

                // ── About Section ──────────────────────────────────────────
                _buildAboutSection(isDark),
                const SizedBox(height: 40),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildHeroSection(bool isDark) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: isDark ? Colors.white.withOpacity(0.05) : Colors.white,
        borderRadius: BorderRadius.circular(24),
        border: Border.all(
          color: isDark ? Colors.white12 : Colors.black.withOpacity(0.05),
        ),
        boxShadow: [
          BoxShadow(
            color: isDark ? Colors.black26 : Colors.black.withOpacity(0.03),
            blurRadius: 20,
            offset: const Offset(0, 10),
          )
        ],
      ),
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: isDark ? Colors.white10 : Colors.white,
              border: Border.all(color: AppColor.primaryColor.withOpacity(0.2)),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(50),
              child: Image.asset('assets/images/logo.gif', height: 80),
            ),
          ),
          const SizedBox(height: 16),
          Text(
            "Siro Support".tr,
            style: AppStyle.headTitle2.copyWith(
              fontSize: 22,
              fontWeight: FontWeight.bold,
              color: isDark ? Colors.white : AppColor.primaryColor,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            "We're here to help you 24/7".tr,
            style: TextStyle(
              color: isDark ? Colors.white54 : Colors.black45,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAvailabilityStatus(ContactUsController controller, bool isDark) {
    final isOpen = controller.isWorkTime;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: (isOpen ? AppColor.greenColor : Colors.orange).withOpacity(0.1),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: (isOpen ? AppColor.greenColor : Colors.orange).withOpacity(0.2),
        ),
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: isOpen ? AppColor.greenColor : Colors.orange,
            ),
            child: Icon(
              isOpen ? Icons.check_circle_outline : Icons.access_time,
              color: Colors.white,
              size: 18,
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  isOpen ? "Support is currently Online".tr : "Support is Away".tr,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: isOpen ? AppColor.greenColor : Colors.orange,
                  ),
                ),
                Text(
                  "${"Working Hours:".tr} ${controller.workHoursString}",
                  style: TextStyle(
                    fontSize: 12,
                    color: isDark ? Colors.white60 : Colors.black54,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContactCards(ContactUsController controller, bool isDark) {
    return Column(
      children: [
        _ContactCard(
          title: "Voice Call".tr,
          subtitle: "Direct talk with our team".tr,
          icon: Icons.phone_in_talk_outlined,
          color: AppColor.primaryColor,
          isDark: isDark,
          enabled: controller.isWorkTime,
          onTap: controller.makeCall,
          trailing: controller.isWorkTime ? null : Icon(Icons.lock_clock_outlined, size: 20, color: isDark ? Colors.white24 : Colors.black26),
        ),
        const SizedBox(height: 12),
        _ContactCard(
          title: "WhatsApp".tr,
          subtitle: "Chat with us anytime".tr,
          icon: FontAwesome.whatsapp,
          color: AppColor.greenColor,
          isDark: isDark,
          onTap: controller.sendWhatsApp,
        ),
        const SizedBox(height: 12),
        _ContactCard(
          title: "Email Support".tr,
          subtitle: "For official inquiries".tr,
          icon: Icons.alternate_email_outlined,
          color: AppColor.redColor,
          isDark: isDark,
          onTap: controller.sendEmail,
        ),
      ],
    );
  }

  Widget _buildAboutSection(bool isDark) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: isDark ? Colors.white.withOpacity(0.02) : Colors.black.withOpacity(0.02),
        borderRadius: BorderRadius.circular(24),
        border: Border.all(color: isDark ? Colors.white10 : Colors.black12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "About Siro".tr,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                  color: isDark ? Colors.white : Colors.black87,
                ),
              ),
              IconButton(
                onPressed: () {
                  Get.find<TextToSpeechController>().speakText(
                    'Siro is the safest and most reliable ride-sharing app designed especially for passengers in Syria. We provide a comfortable, respectful, and affordable riding experience with features that prioritize your safety and convenience.'
                        .tr,
                  );
                },
                icon: Icon(Icons.volume_up_outlined, color: AppColor.primaryColor),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Text(
            'Siro is the safest and most reliable ride-sharing app designed especially for passengers in Syria. We provide a comfortable, respectful, and affordable riding experience with features that prioritize your safety and convenience. Our trusted captains are verified, insured, and supported by regular car maintenance carried out by top engineers. We also offer on-road support services to make sure every trip is smooth and worry-free. With Siro, you enjoy quality, safety, and peace of mind—every time you ride.'
                .tr,
            style: TextStyle(
              color: isDark ? Colors.white70 : Colors.black54,
              fontSize: 14,
              height: 1.6,
            ),
          ),
        ],
      ),
    );
  }
}

class _ContactCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;
  final Color color;
  final bool isDark;
  final bool enabled;
  final VoidCallback onTap;
  final Widget? trailing;

  const _ContactCard({
    required this.title,
    required this.subtitle,
    required this.icon,
    required this.color,
    required this.isDark,
    this.enabled = true,
    required this.onTap,
    this.trailing,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: enabled ? onTap : null,
        borderRadius: BorderRadius.circular(20),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: enabled 
              ? (isDark ? Colors.white.withOpacity(0.05) : Colors.white)
              : (isDark ? Colors.white.withOpacity(0.02) : Colors.grey.withOpacity(0.05)),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: enabled 
                ? (isDark ? Colors.white12 : Colors.black.withOpacity(0.05))
                : Colors.transparent,
            ),
            boxShadow: enabled ? [
              BoxShadow(
                color: isDark ? Colors.black12 : Colors.black.withOpacity(0.02),
                blurRadius: 10,
                offset: const Offset(0, 4),
              )
            ] : null,
          ),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: (enabled ? color : Colors.grey).withOpacity(0.12),
                  borderRadius: BorderRadius.circular(14),
                ),
                child: Icon(icon, color: enabled ? color : Colors.grey, size: 24),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: enabled 
                          ? (isDark ? Colors.white : Colors.black87)
                          : Colors.grey,
                      ),
                    ),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontSize: 13,
                        color: isDark ? Colors.white38 : Colors.black38,
                      ),
                    ),
                  ],
                ),
              ),
              trailing ?? Icon(
                Icons.arrow_forward_ios,
                size: 14,
                color: isDark ? Colors.white24 : Colors.black12,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
