import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Linking,
  Alert,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack, type Href } from "expo-router";
import {
  ChevronLeft,
  MessageCircle,
  Mail,
  Phone,
  BookOpen,
  AlertCircle,
  FileText,
  Info,
  ExternalLink,
  ChevronRight,
} from "lucide-react-native";

import Colors from "@/constants/colors";
import { AppSiteFooter } from "@/components/AppSiteFooter";

export default function HelpSupportScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();

  const handleContact = (type: "email" | "phone") => {
    if (type === "email") {
      Linking.openURL("mailto:zendo2026@proton.me");
    } else {
      Linking.openURL("tel:+1234567890");
    }
  };

  const faqItems = [
    {
      question: "How do I send money?",
      answer:
        "Tap the Send tab, search for a recipient, enter the amount, and confirm. Money is sent instantly!",
    },
    {
      question: "Are there any fees?",
      answer:
        "Standard transfers are free. Instant cash out has a 0.5%–1.5% fee (minimum $0.03, capped at 1% of the amount). Credit card funding may have fees.",
    },
    {
      question: "How do I add money to my balance?",
      answer:
        "Go to your home screen, tap 'Add Money', select a payment method, enter amount, and confirm.",
    },
    {
      question: "What is verification?",
      answer:
        "Verification confirms your identity for security. Verified users can send larger amounts and access premium features.",
    },
    {
      question: "How do recurring payments work?",
      answer:
        "Set up automatic payments to people you pay regularly. Choose frequency and amount - we'll handle the rest!",
    },
    {
      question: "Can I cancel a transaction?",
      answer:
        "Pending transactions can be cancelled. Completed transactions are final but you can request a refund from the recipient.",
    },
  ];

  const resourceItems = [
    {
      icon: Info,
      title: "About Us",
      description: "Learn more about Zendo",
      onPress: () => router.push("/about-us" as Href),
    },
    {
      icon: BookOpen,
      title: "FAQ's",
      description: "Answers to common questions",
      onPress: () => router.push("/faqs" as Href),
    },
    {
      icon: FileText,
      title: "Terms & Conditions",
      description: "Read our legal terms",
      onPress: () => router.push("/terms-and-conditions" as Href),
    },
    {
      icon: FileText,
      title: "Privacy Policy",
      description: "How we protect your data",
      onPress: () => router.push("/privacy-policy" as Href),
    },
    {
      icon: MessageCircle,
      title: "Contact Us",
      description: "Reach our support team",
      onPress: () => router.push("/contact-us" as Href),
    },
    {
      icon: AlertCircle,
      title: "Support Tickets",
      description: "File, edit, or track a ticket",
      onPress: () => router.push("/support-tickets" as Href),
    },
    {
      icon: AlertCircle,
      title: "Report a Problem",
      description: "Report bugs or security issues",
      onPress: () => router.push("/support-tickets?new=1" as Href),
    },
  ];

  const contactMethods = [
    {
      icon: Mail,
      title: "Email Support",
      description: "zendo2026@proton.me",
      available: "Response within 24 hours",
      color: Colors.dark.secondary,
      onPress: () => handleContact("email"),
    },
    {
      icon: Phone,
      title: "Phone Support",
      description: "+1 (234) 567-890",
      available: "Mon-Fri, 9AM-6PM EST",
      color: Colors.dark.success,
      onPress: () => handleContact("phone"),
    },
  ];

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ headerShown: false }} />

      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <ChevronLeft color={Colors.dark.text} size={24} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Help & Support</Text>
        <View style={{ width: 24 }} />
      </View>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator
        nestedScrollEnabled
      >
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Contact Us</Text>
          {contactMethods.map((method, index) => {
            const Icon = method.icon;
            return (
              <TouchableOpacity
                key={index}
                style={styles.contactCard}
                onPress={method.onPress}
                activeOpacity={0.7}
              >
                <View style={[styles.contactIcon, { backgroundColor: `${method.color}20` }]}>
                  <Icon color={method.color} size={24} />
                </View>
                <View style={styles.contactContent}>
                  <Text style={styles.contactTitle}>{method.title}</Text>
                  <Text style={styles.contactDescription}>{method.description}</Text>
                  <Text style={styles.contactAvailable}>{method.available}</Text>
                </View>
                <ExternalLink color={Colors.dark.textTertiary} size={20} />
              </TouchableOpacity>
            );
          })}
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Frequently Asked Questions</Text>
          {faqItems.map((item, index) => (
            <View key={index} style={styles.faqCard}>
              <Text style={styles.faqQuestion}>{item.question}</Text>
              <Text style={styles.faqAnswer}>{item.answer}</Text>
            </View>
          ))}
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Resources</Text>
          {resourceItems.map((item, index) => {
            const Icon = item.icon;
            return (
              <TouchableOpacity
                key={index}
                style={styles.resourceCard}
                onPress={item.onPress}
                activeOpacity={0.7}
              >
                <View style={styles.resourceIcon}>
                  <Icon color={Colors.dark.primary} size={20} />
                </View>
                <View style={styles.resourceContent}>
                  <Text style={styles.resourceTitle}>{item.title}</Text>
                  <Text style={styles.resourceDescription}>{item.description}</Text>
                </View>
                <ChevronRight color={Colors.dark.textTertiary} size={20} />
              </TouchableOpacity>
            );
          })}
        </View>

        <View style={styles.emergencyCard}>
          <AlertCircle color={Colors.dark.error} size={24} />
          <View style={styles.emergencyContent}>
            <Text style={styles.emergencyTitle}>Security Emergency?</Text>
            <Text style={styles.emergencyText}>
              If you notice unauthorized transactions or suspicious activity, contact us
              immediately to secure your account.
            </Text>
          </View>
          <TouchableOpacity
            style={styles.emergencyButton}
            onPress={() => Alert.alert("Security Alert", "Contacting security team...")}
          >
            <Text style={styles.emergencyButtonText}>Report Now</Text>
          </TouchableOpacity>
        </View>

        <AppSiteFooter />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 40,
  },
  section: {
    marginTop: 24,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 16,
  },
  contactCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    marginBottom: 12,
    gap: 12,
  },
  contactIcon: {
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: "center",
    alignItems: "center",
  },
  contactContent: {
    flex: 1,
  },
  contactTitle: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 4,
  },
  contactDescription: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginBottom: 4,
  },
  contactAvailable: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
  },
  faqCard: {
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    marginBottom: 12,
  },
  faqQuestion: {
    fontSize: 15,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 8,
  },
  faqAnswer: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 20,
  },
  resourceCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    marginBottom: 12,
    gap: 12,
  },
  resourceIcon: {
    width: 40,
    height: 40,
    borderRadius: 12,
    backgroundColor: Colors.dark.surfaceElevated,
    justifyContent: "center",
    alignItems: "center",
  },
  resourceContent: {
    flex: 1,
  },
  resourceTitle: {
    fontSize: 15,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    marginBottom: 2,
  },
  resourceDescription: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
  },
  emergencyCard: {
    backgroundColor: `${Colors.dark.error}15`,
    marginHorizontal: 20,
    marginTop: 24,
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.error,
  },
  emergencyContent: {
    marginTop: 12,
    marginBottom: 16,
  },
  emergencyTitle: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.error,
    marginBottom: 8,
  },
  emergencyText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 20,
  },
  emergencyButton: {
    backgroundColor: Colors.dark.error,
    paddingVertical: 12,
    borderRadius: 12,
    alignItems: "center",
  },
  emergencyButtonText: {
    fontSize: 14,
    fontWeight: "700" as const,
    color: Colors.dark.background,
  },
  footer: {
    alignItems: "center",
    marginTop: 32,
    marginBottom: 20,
  },
  footerText: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
    marginBottom: 4,
  },
  footerSubtext: {
    fontSize: 11,
    color: Colors.dark.textTertiary,
  },
});