import React from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './helpSupportScreen.styles';
import { Header } from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';

type HelpSupportNavProp = StackNavigationProp<AppStackParamList, 'HelpSupportScreen'>;

const FAQS = [
  { q: 'How do I track my order?', a: 'Go to Orders tab and tap on your active order to see tracking.' },
  { q: 'What is the delivery time?', a: 'Standard delivery takes 25-30 min, Express takes 10-15 min.' },
  { q: 'How do I cancel an order?', a: 'Contact support to cancel an order before it is dispatched.' },
  { q: 'What payment methods are accepted?', a: 'UPI, Credit/Debit Card, Wallet, and Cash on Delivery.' },
];

export const HelpSupportScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<HelpSupportNavProp>();

  return (
    <View style={styles.container}>
      <Header title="Help & Support" onBack={() => navigation.goBack()} />
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.sectionTitle}>Frequently Asked Questions</Text>
        {FAQS.map((faq, index) => (
          <View key={index} style={styles.faqItem}>
            <Text style={styles.faqQuestion}>{faq.q}</Text>
            <Text style={styles.faqAnswer}>{faq.a}</Text>
          </View>
        ))}

        <Text style={styles.sectionTitle}>Contact Support</Text>
        <TouchableOpacity style={styles.supportCard} activeOpacity={0.7}>
          <Text style={styles.supportIcon}>📞</Text>
          <View>
            <Text style={styles.supportLabel}>Call us</Text>
            <Text style={styles.supportValue}>+91 1800 123 4567</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity style={styles.supportCard} activeOpacity={0.7}>
          <Text style={styles.supportIcon}>✉️</Text>
          <View>
            <Text style={styles.supportLabel}>Email us</Text>
            <Text style={styles.supportValue}>support@sgdelivery.com</Text>
          </View>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};