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 ExpandableItem from "../components/ExpandableItem";
import { SUBSCRIBED_ITEMS } from "@/data/mockData";

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

    const filtered = useMemo(() => {
        if (!query.trim()) return SUBSCRIBED_ITEMS;
        const lower = query.toLowerCase();
        return SUBSCRIBED_ITEMS.filter(
            (item) =>
                item.title.toLowerCase().includes(lower) ||
                item.author.toLowerCase().includes(lower) ||
                item.tag.toLowerCase().includes(lower)
        );
    }, [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"
                        }`}
                    >
                        Your Feed
                    </Text>
                    <Text
                        className={`text-xs mt-0.5 font-sans ${
                            dark ? "text-muted-dark" : "text-muted-light"
                        }`}
                    >
                        {SUBSCRIBED_ITEMS.length} subscriptions · updated just now
                    </Text>
                </View>

                <SearchBar
                    placeholder="Search your subscribed subjects…"
                    onSearch={setQuery}
                />
            </View>

            {/* Scrollable list */}
            <ScrollView
                contentContainerStyle={{ paddingTop: 12, paddingBottom: 32 }}
                showsVerticalScrollIndicator={false}
                keyboardDismissMode="on-drag"
            >
                {filtered.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 a different title, author, or topic tag.
                        </Text>
                    </View>
                ) : (
                    filtered.map((item) => <ExpandableItem key={item.id} item={item} />)
                )}
            </ScrollView>
        </SafeAreaView>
    );
}