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 - 48) / 2;

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

  const { data: recentProductsData, isLoading, error, refetch } =
    trpc.user.order.getRecentlyOrderedProducts.useQuery({
      limit: 20,
    });

  const recentProducts = recentProductsData?.products || [];

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

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

  if (isLoading) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
          <MaterialIcons name="refresh" size={48} color="#3B82F6" />
          <MyText style={tw`text-gray-500 font-medium mt-4`}>
            Loading your recent orders...
          </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 recent orders
          </MyText>
        </View>
      </AppContainer>
    );
  }

  return (
    <TabLayoutWrapper>
      <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
        <LinearGradient
          colors={["#194185", "#1570EF"]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={tw`pb-8 pt-6 px-5 rounded-b-[32px] shadow-lg mb-4`}
        >
          <View style={tw`flex-row justify-between items-start mb-6`}>
            <View style={tw`flex-1 mr-4`}>
              <View style={tw`flex-row items-center mb-1`}>
                <View style={tw`bg-white/20 p-1 rounded-full mr-2`}>
                  <MaterialIcons name="refresh" size={14} color="#FFF" />
                </View>
                <MyText
                  style={tw`text-brand100 text-xs font-bold uppercase tracking-widest`}
                >
                  Order Again
                </MyText>
              </View>
              <MyText
                style={tw`text-white text-sm font-medium opacity-90 ml-1`}
                numberOfLines={1}
              >
                Reorder your favorite items quickly
              </MyText>
            </View>
          </View>
        </LinearGradient>

        <View style={tw`bg-white`}>
          <View style={tw`flex-row items-center mb-2 px-4 pt-4`}>
            <MyText style={tw`text-lg font-bold text-gray-900`}>
              Recently Ordered
            </MyText>
          </View>

          {recentProducts.length === 0 ? (
            <View style={tw`items-center justify-center py-12`}>
              <View
                style={tw`w-20 h-20 bg-gray-100 rounded-full items-center justify-center mb-4`}
              >
                <MaterialIcons name="shopping-bag" size={32} color="#9CA3AF" />
              </View>
              <MyText style={tw`text-lg font-bold text-gray-900`}>
                No recent orders
              </MyText>
              <MyText style={tw`text-gray-500 mt-2 text-center px-8`}>
                Items you've ordered recently will appear here
              </MyText>
            </View>
          ) : (
            <View style={tw`px-4 pb-4`}>
              <View style={tw`flex-row flex-wrap justify-between`}>
                {recentProducts.map((item, index) => (
                  <View
                    key={item.id}
                    style={tw`mb-4 ${index % 2 === 0 ? "mr-2" : ""}`}
                  >
                    <ProductCard
                      item={item}
                      itemWidth={itemWidth}
                      onPress={() =>
                        router.push(
                          `/(drawer)/(tabs)/order-again/product-detail/${item.id}`
                        )
                      }
                      showDeliveryInfo={false}
                      useAddToCartDialog={true}
                    />
                  </View>
                ))}
              </View>
            </View>
          )}
        </View>
      </ScrollView>

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