import React from "react";
import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Stack, useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Mail, MessageCircle, Phone } from "lucide-react-native";
import Colors from "@/constants/colors";
import { AppSiteFooter } from "@/components/AppSiteFooter";

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

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ title: "Contact Us", headerBackTitle: "Back" }} />

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator
        nestedScrollEnabled
      >
        <Text style={styles.title}>Contact Us</Text>
        <Text style={styles.subtitle}>
          Need help? Reach out and our support team will assist you.
        </Text>

        <TouchableOpacity
          style={styles.card}
          onPress={() => Linking.openURL("mailto:zendo2026@proton.me")}
          activeOpacity={0.8}
        >
          <View style={styles.iconWrap}>
            <Mail color={Colors.dark.primary} size={20} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Email Support</Text>
            <Text style={styles.cardText}>zendo2026@proton.me</Text>
            <Text style={styles.cardSubtext}>Response target: within 24 hours</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.card}
          onPress={() => Linking.openURL("tel:+1234567890")}
          activeOpacity={0.8}
        >
          <View style={styles.iconWrap}>
            <Phone color={Colors.dark.secondary} size={20} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Phone Support</Text>
            <Text style={styles.cardText}>+1 (234) 567-890</Text>
            <Text style={styles.cardSubtext}>Mon-Fri, 9:00 AM - 6:00 PM EST</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.card}
          onPress={() => router.push("/support-tickets")}
          activeOpacity={0.8}
        >
          <View style={styles.iconWrap}>
            <MessageCircle color={Colors.dark.success} size={20} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Support Tickets</Text>
            <Text style={styles.cardText}>File and track tickets with a ticket #</Text>
            <Text style={styles.cardSubtext}>Response within up to 7 business days</Text>
          </View>
        </TouchableOpacity>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 24,
    paddingBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: "700",
    color: Colors.dark.text,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: Colors.dark.textSecondary,
    lineHeight: 24,
    marginBottom: 24,
  },
  card: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    backgroundColor: Colors.dark.surface,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 14,
    padding: 16,
    marginBottom: 12,
  },
  iconWrap: {
    width: 42,
    height: 42,
    borderRadius: 12,
    backgroundColor: Colors.dark.surfaceElevated,
    justifyContent: "center",
    alignItems: "center",
  },
  cardContent: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: "700",
    color: Colors.dark.text,
    marginBottom: 4,
  },
  cardText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginBottom: 2,
  },
  cardSubtext: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
  },
});