import { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';

type FaqItem = { q: string; a: string };

function FaqRow({ q, a, colors }: FaqItem & { colors: ReturnType<typeof useColors> }) {
  const [open, setOpen] = useState(false);

  return (
    <View
      style={{
        borderBottomWidth: 1,
        borderBottomColor: colors.border,
      }}
    >
      <TouchableOpacity
        onPress={() => setOpen((v) => !v)}
        activeOpacity={0.7}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 16,
          paddingVertical: 14,
          gap: 12,
        }}
      >
        <Text
          style={{
            flex: 1,
            fontSize: 15,
            fontFamily: 'Nunito_600SemiBold',
            color: colors.text,
            lineHeight: 21,
          }}
        >
          {q}
        </Text>
        <Ionicons
          name={open ? 'chevron-up' : 'chevron-down'}
          size={18}
          color={colors.textMuted}
        />
      </TouchableOpacity>
      {open ? (
        <Text
          style={{
            paddingHorizontal: 16,
            paddingBottom: 16,
            fontSize: 14,
            fontFamily: 'Nunito_400Regular',
            color: colors.textMuted,
            lineHeight: 21,
          }}
        >
          {a}
        </Text>
      ) : null}
    </View>
  );
}

export default function FaqScreen() {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();

  const items: FaqItem[] = [
    { q: t('help.faq_q1'), a: t('help.faq_a1') },
    { q: t('help.faq_q2'), a: t('help.faq_a2') },
    { q: t('help.faq_q3'), a: t('help.faq_a3') },
    { q: t('help.faq_q4'), a: t('help.faq_a4') },
    { q: t('help.faq_q5'), a: t('help.faq_a5') },
    { q: t('help.faq_q6'), a: t('help.faq_a6') },
    { q: t('help.faq_q7'), a: t('help.faq_a7') },
    { q: t('help.faq_q8'), a: t('help.faq_a8') },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
      <AppHeader showBack title={t('help.faq_title')} />

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 20,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: colors.card,
            borderRadius: 14,
            overflow: 'hidden',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.04,
            shadowRadius: 3,
            elevation: 1,
          }}
        >
          {items.map((item, i) => (
            <FaqRow
              key={i}
              q={item.q}
              a={item.a}
              colors={colors}
            />
          ))}
        </View>
      </ScrollView>
    </View>
  );
}