import React, { useState } from "react";
import { ScrollView, View, TouchableOpacity, Linking } from "react-native";
import { Text } from "~/components/ui/text";
import { Button } from "~/components/ui/button";
import BackButton from "~/components/ui/backButton";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import { ChevronDown, ChevronUp, Mail, Phone } from "lucide-react-native";
import { router } from "expo-router";
import { ROUTES } from "~/lib/routes";

interface FAQItem {
  question: string;
  answer: string;
}

const faqData: FAQItem[] = [
  {
    question: "How do I add money to my wallet?",
    answer:
      "You can add money to your wallet by linking a debit/credit card or bank account. Go to Home > Add Cash, select your payment method, enter the amount, and confirm the transaction.",
  },
  {
    question: "How do I send money to someone?",
    answer:
      "Tap on 'Request' from the home screen, select a recipient from your contacts or enter their phone number/email, enter the amount, add an optional note, and confirm the transfer.",
  },
  {
    question: "What are the transaction fees?",
    answer:
      "Standard transfers to other Amba users are free. Cash out to bank accounts may incur a small fee depending on the amount and processing time. Check the transaction details before confirming.",
  },
  {
    question: "How long do transfers take?",
    answer:
      "Transfers to other Amba users are instant. Bank transfers typically take 1-3 business days depending on your bank and the transfer method selected.",
  },
  {
    question: "Is my money safe?",
    answer:
      "Yes, we use bank-level encryption and security measures to protect your funds and personal information. Your money is held in secure, FDIC-insured accounts.",
  },
  {
    question: "How do I cash out to my bank?",
    answer:
      "Go to Home > Cash Out, select your linked bank account, enter the amount you want to withdraw, and confirm. The money will be transferred to your bank within 1-3 business days.",
  },
  {
    question: "Can I cancel a transaction?",
    answer:
      "Once a transaction is completed, it cannot be cancelled. However, you can request a refund from the recipient. For disputed transactions, please contact our support team.",
  },
  {
    question: "How do I update my profile information?",
    answer:
      "Go to Profile > Edit Profile to update your name, email, phone number, and address. Some fields may be restricted based on how you signed up.",
  },
];

export default function HelpSupport() {
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

  const toggleAccordion = (index: number) => {
    setExpandedIndex(expandedIndex === index ? null : index);
  };

  const handleContactEmail = () => {
    Linking.openURL("mailto:support@ambapay.com");
  };

  const handleContactPhone = () => {
    Linking.openURL("tel:+1234567890");
  };

  const handleViewTerms = () => {
    router.push(ROUTES.TERMS);
  };

  return (
    <ScreenWrapper edges={[]}>
      <BackButton />

      <ScrollView
        showsVerticalScrollIndicator={false}
        className="flex-1 bg-white"
      >
        <View className="px-5">
          <Text className="text-3xl font-dmsans-bold text-gray-900 mb-2">
            Help & Support
          </Text>
          <Text className="text-base font-dmsans text-gray-500 mb-8">
            Find answers to common questions
          </Text>

          {/* FAQ Section */}
          <View className="space-y-3">
            {faqData.map((faq, index) => (
              <View
                key={index}
                className="bg-gray-50 rounded-2xl overflow-hidden"
              >
                <TouchableOpacity
                  onPress={() => toggleAccordion(index)}
                  className="p-4 flex-row items-center justify-between"
                  activeOpacity={0.7}
                >
                  <Text className="text-base font-dmsans-medium text-gray-900 flex-1 pr-3">
                    {faq.question}
                  </Text>
                  {expandedIndex === index ? (
                    <ChevronUp size={20} color="#9CA3AF" />
                  ) : (
                    <ChevronDown size={20} color="#9CA3AF" />
                  )}
                </TouchableOpacity>

                {expandedIndex === index && (
                  <View className="px-4 pb-4">
                    <View className="h-px bg-gray-200 mb-3" />
                    <Text className="text-sm font-dmsans text-gray-600 leading-6">
                      {faq.answer}
                    </Text>
                  </View>
                )}
              </View>
            ))}
          </View>

          {/* Contact Section */}
          <View className="mt-8">
            <Text className="text-xl font-dmsans-bold text-gray-900 mb-4">
              Still need help?
            </Text>
            <Text className="text-sm font-dmsans text-gray-500 mb-6">
              Our support team is here to assist you
            </Text>

            <View className="space-y-3">
              {/* Email Support */}
              <TouchableOpacity
                onPress={handleContactEmail}
                className="bg-gray-50 rounded-2xl p-4 flex-row items-center"
                activeOpacity={0.7}
              >
                <View className="w-10 h-10 bg-primary/10 rounded-full items-center justify-center mr-3">
                  <Mail size={20} color="#105D38" />
                </View>
                <View className="flex-1">
                  <Text className="text-base font-dmsans-medium text-gray-900">
                    Email Support
                  </Text>
                  <Text className="text-sm font-dmsans text-gray-500">
                    support@ambapay.com
                  </Text>
                </View>
              </TouchableOpacity>

              {/* Phone Support */}
              <TouchableOpacity
                onPress={handleContactPhone}
                className="bg-gray-50 rounded-2xl p-4 flex-row items-center"
                activeOpacity={0.7}
              >
                <View className="w-10 h-10 bg-primary/10 rounded-full items-center justify-center mr-3">
                  <Phone size={20} color="#105D38" />
                </View>
                <View className="flex-1">
                  <Text className="text-base font-dmsans-medium text-gray-900">
                    Phone Support
                  </Text>
                  <Text className="text-sm font-dmsans text-gray-500">
                    +1 (234) 567-890
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}