import React from "react";
import { View, Dimensions, ScrollView } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router";
import {
  tw,
  useManualRefresh,
  useMarkDataFetchers,
  AppContainer,
  MyFlatList,
  MyText,
} from "common-ui";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import ProductCard from "@/components/ProductCard";
import { trpc } from "@/src/trpc-client";
import FloatingCartBar from "@/components/floating-cart-bar";
import TabLayoutWrapper from "@/components/TabLayoutWrapper";

const { width: screenWidth } = Dimensions.get("window");
const itemWidth = screenWidth * 0.45;

const rowListContent = { paddingBottom: 16 };

interface OffersRowProps {
  title: string;
  subtitle: string;
  products: any[];
  onProductPress: (id: number) => void;
}

const OffersRow = ({ title, subtitle, products, onProductPress }: OffersRowProps) => {
  const renderItem = ({ item }: { item: any }) => (
    <View style={tw`mr-4`}>
      <ProductCard
        item={item}
        itemWidth={itemWidth}
        onPress={() => onProductPress(item.id)}
        showDeliveryInfo={false}
        useAddToCartDialog={true}
        miniView={true}
      />
    </View>
  );

  return (
    <View style={tw`bg-white`}>
      <View style={tw`mb-2 pt-4 px-4`}>
        <MyText style={tw`text-2xl font-extrabold text-gray-900 tracking-tight`}>
          {title}
        </MyText>
        <MyText style={tw`text-sm text-gray-500 font-medium`}>
          {subtitle}
        </MyText>
      </View>

      {products.length === 0 ? (
        <View style={tw`items-center justify-center py-10`}>
          <MaterialIcons name="local-offer" size={28} color="#9CA3AF" />
          <MyText style={tw`text-gray-500 mt-2`}>
            No {title.toLowerCase()} available right now
          </MyText>
        </View>
      ) : (
        <View style={tw`relative`}>
          <MyFlatList
            data={products}
            keyExtractor={(item) => item.id.toString()}
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={rowListContent}
            renderItem={renderItem}
            removeClippedSubviews={true}
          />
          <LinearGradient
            colors={["transparent", "rgba(0,0,0,0.08)"]}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            style={tw`absolute right-0 top-0 bottom-4 w-12 rounded-l-xl`}
            pointerEvents="none"
          />
        </View>
      )}
    </View>
  );
};

export default function Offers() {
  const router = useRouter();

  const { data, isLoading, error, refetch } =
    trpc.user.product.getOffersPage.useQuery();

  const combos = data?.combos || [];
  const offers = data?.offers || [];

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

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

  if (isLoading) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
          <MaterialIcons name="local-offer" size={48} color="#3B82F6" />
          <MyText style={tw`text-gray-500 font-medium mt-4`}>
            Loading offers...
          </MyText>
        </View>
      </AppContainer>
    );
  }

  if (error) {
    return (
      <AppContainer>
        <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 offers
          </MyText>
        </View>
      </AppContainer>
    );
  }

  const handleProductPress = (id: number) => {
    router.push(`/(drawer)/(tabs)/order-again/product-detail/${id}`);
  };

  return (
    <TabLayoutWrapper>
      <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
        <OffersRow
          title="Combos"
          subtitle="Bundle your favorites and save"
          products={combos}
          onProductPress={handleProductPress}
        />

        <OffersRow
          title="Offers"
          subtitle="Great prices on select items"
          products={offers}
          onProductPress={handleProductPress}
        />
      </ScrollView>

      <View style={tw`absolute bottom-2 left-4 right-4`}>
        <FloatingCartBar />
      </View>
    </TabLayoutWrapper>
  );
}