import React, { useState, useMemo } from "react";
import {
    View,
    Text,
    ScrollView,
    useColorScheme,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import SearchBar from "../components/SearchBar";
import CollapsibleCategory, { Category } from "../components/CollapsibleCategory";
import { ALL_CATEGORIES } from "@/data/mockData";

export default function AllFeed() {
    const [query, setQuery] = useState("");
    const scheme = useColorScheme();
    const dark = scheme === "dark";

    const totalCount = ALL_CATEGORIES.reduce(
        (sum, cat) => sum + cat.items.length,
        0
    );

    // Filter items within each category based on search query
    const filteredCategories = useMemo((): Category[] => {
        if (!query.trim()) return ALL_CATEGORIES;
        const lower = query.toLowerCase();
        return ALL_CATEGORIES.map((cat) => ({
            ...cat,
            items: cat.items.filter(
                (item) =>
                    item.title.toLowerCase().includes(lower) ||
                    item.author.toLowerCase().includes(lower) ||
                    item.tag.toLowerCase().includes(lower) ||
                    cat.label.toLowerCase().includes(lower)
            ),
        })).filter((cat) => cat.items.length > 0);
    }, [query]);

    return (
        <SafeAreaView
            className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
        >

            <View
                className={`border-b ${
                    dark ? "border-border-dark" : "border-border-light"
                }`}
            >
                <View className="px-4 pt-2 pb-1">
                    <Text
                        className={`text-2xl font-display font-bold ${
                            dark ? "text-ink-dark" : "text-ink-light"
                        }`}
                    >
                        Discover
                    </Text>
                    <Text
                        className={`text-xs mt-0.5 font-sans ${
                            dark ? "text-muted-dark" : "text-muted-light"
                        }`}
                    >
                        {ALL_CATEGORIES.length} categories · {totalCount} articles
                    </Text>
                </View>

                <SearchBar
                    placeholder="Search all Subjects and Titles…"
                    onSearch={setQuery}
                />
            </View>

            <ScrollView
                contentContainerStyle={{ paddingTop: 16, paddingBottom: 40 }}
                showsVerticalScrollIndicator={false}
                keyboardDismissMode="on-drag"
            >
                {filteredCategories.length === 0 ? (
                    <View className="items-center mt-16 px-8">
                        <Text className="text-4xl mb-3">🔍</Text>
                        <Text
                            className={`text-base font-sans font-semibold text-center ${
                                dark ? "text-ink-dark" : "text-ink-light"
                            }`}
                        >
                            No results for &#34;{query}&#34;
                        </Text>
                        <Text
                            className={`text-sm font-sans text-center mt-1 ${
                                dark ? "text-muted-dark" : "text-muted-light"
                            }`}
                        >
                            Try searching by category name, author, or topic.
                        </Text>
                    </View>
                ) : (
                    filteredCategories.map((cat, index) => (
                        <CollapsibleCategory
                            key={cat.id}
                            category={cat}
                            defaultOpen={index === 0} // first category open by default TODO maybe set option to change what is default
                        />
                    ))
                )}
            </ScrollView>
        </SafeAreaView>
    );
}