import React, { useEffect, useState } from "react";
import { View, ScrollView, ActivityIndicator, Pressable } from "react-native";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";
import { faqApi } from "@/lib/api";
import { ChevronDown } from "@/lib/icons";
import { useColorScheme } from "nativewind";
import { cn } from "@/lib/utils";

interface FAQItem {
  id: string;
  question: string;
  answer: string;
  category?: string;
}

export default function FAQScreen() {
  const [faqs, setFaqs] = useState<FAQItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState<string | null>(null);
  const { colorScheme } = useColorScheme();

  const fetchFaqs = async () => {
    try {
      const response = await faqApi.getAll();
      const faqData = (response as any)?.data || response;
      setFaqs(Array.isArray(faqData) ? faqData : []);
    } catch (error) {
      console.error("[FAQ] Fetch failed:", error);
      setFaqs([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFaqs();
  }, []);

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader title="FAQ" showBack />

      {loading ? (
        <View className="flex-1 items-center justify-center">
          <ActivityIndicator color="#ea580c" />
        </View>
      ) : (
        <ScrollView
          className="flex-1 px-4 pt-4"
          contentContainerStyle={{ paddingBottom: 40 }}
          showsVerticalScrollIndicator={false}
        >
          <View className="mb-6 px-1">
            <Text variant="h4" className="text-foreground font-bold">
              Got Questions?
            </Text>
            <Text variant="muted" className="text-sm mt-1">
              Find quick answers to common inquiries.
            </Text>
          </View>

          {faqs.length === 0 ? (
            <View className="items-center justify-center mt-20 p-10">
              <Text variant="muted" className="text-center">
                No FAQs available yet.
              </Text>
            </View>
          ) : (
            faqs.map((item) => (
              <Card
                key={item.id}
                className="mb-4 overflow-hidden border border-border/50 bg-card rounded-[6px] shadow-sm"
              >
                <Pressable
                  onPress={() =>
                    setExpanded(expanded === item.id ? null : item.id)
                  }
                  className={cn(
                    "flex-row items-center justify-between p-3",
                    expanded === item.id && "bg-muted/10",
                  )}
                >
                  <Text className="flex-1 font-bold text-foreground mr-3 leading-5">
                    {item.question}
                  </Text>
                  <View
                    className="h-8 w-8 rounded-[10px] bg-card items-center justify-center border border-border/40"
                    style={{
                      transform: [
                        { rotate: expanded === item.id ? "180deg" : "0deg" },
                      ],
                    }}
                  >
                    <ChevronDown
                      size={18}
                      color={colorScheme === "dark" ? "#f8fafc" : "#0f172a"}
                    />
                  </View>
                </Pressable>
                {expanded === item.id && (
                  <CardContent className="px-4 pb-5">
                    <View className="h-[1px] bg-border/30 mb-4" />
                    <Text className="text-foreground leading-6 text-[15px]">
                      {item.answer}
                    </Text>
                    {item.category && (
                      <View className="flex-row mt-4">
                        <View className="bg-primary/5 px-2.5 py-1 rounded-[6px] border border-primary/10">
                          <Text className="text-[10px] font-bold text-primary uppercase">
                            {item.category}
                          </Text>
                        </View>
                      </View>
                    )}
                  </CardContent>
                )}
              </Card>
            ))
          )}
        </ScrollView>
      )}
    </ScreenWrapper>
  );
}