import React, { useState, useRef, useEffect } from "react";
import { View, Dimensions } from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router";
import {
  tw,
  useManualRefresh,
  useMarkDataFetchers,
  MyFlatList,
  MyText,
  SearchBar,
} from "common-ui";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { trpc } from "@/src/trpc-client";
import ProductCard from "@/components/ProductCard";
import FloatingCartBar from "@/components/floating-cart-bar";

const { width: screenWidth } = Dimensions.get("window");
const itemWidth = (screenWidth - 48) / 2;

export default function SearchResults() {
  const router = useRouter();
  const { q } = useLocalSearchParams();
  const query = (q as string) || "";
  const [inputQuery, setInputQuery] = useState(query);
  const [searchQuery, setSearchQuery] = useState(query);
  const searchInputRef = useRef<any>(null);

  useEffect(() => {
    setTimeout(() => {
      searchInputRef.current?.focus();
    }, 100);
  }, []);

  const { data: productsData, isLoading, error, refetch } =
    trpc.common.product.getAllProductsSummary.useQuery({
      searchQuery: searchQuery || undefined,
    });

  const products = productsData?.products || [];

  useManualRefresh(() => {
    refetch();
  });

  useMarkDataFetchers(() => {
    refetch();
  });

  const handleSearch = () => {
    setSearchQuery(inputQuery);
  };

  if (isLoading) {
    return (
      <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
        <MyText style={tw`text-gray-500 font-medium`}>Loading products...</MyText>
      </View>
    );
  }

  if (error) {
    return (
      <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
        <MaterialIcons name="error-outline" size={48} color="#EF4444" />
        <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
        <MyText style={tw`text-gray-500 mt-2`}>Failed to load products</MyText>
      </View>
    );
  }

  return (
    <View style={tw`flex-1 bg-gray-50`}>
      <MyFlatList
        data={products}
        numColumns={2}
        renderItem={({ item }) => (
          <ProductCard
            item={item}
            itemWidth={itemWidth}
            onPress={() =>
              router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)
            }
            showDeliveryInfo={false}
            useAddToCartDialog={true}
          />
        )}
        keyExtractor={(item, index) => index.toString()}
        columnWrapperStyle={{ gap: 16, justifyContent: "center" }}
        contentContainerStyle={[tw`pb-24`, { gap: 16 }]}
        ListHeaderComponent={
          <View style={tw`pt-4 pb-2 px-4`}>
            <SearchBar
              ref={searchInputRef}
              value={inputQuery}
              onChangeText={setInputQuery}
              onSubmitEditing={handleSearch}
              returnKeyType="search"
            />
            <View style={tw`flex-row justify-between items-center mb-2`}>
              <MyText style={tw`text-lg font-bold text-gray-900`}>
                {searchQuery
                  ? `Search Results for "${searchQuery}"`
                  : "All Products"}
              </MyText>
            </View>
          </View>
        }
      />
      <View style={tw`absolute bottom-2 left-4 right-4`}>
        <FloatingCartBar />
      </View>
    </View>
  );
}