import React, { useEffect } from 'react';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { View, Alert } from 'react-native';
import { FlashDeliveryProducts } from '@/components/SlotSpecificView';
import { useSlotStore } from '@/components/stores/slotStore';
import FlashDeliveryNote from '@/components/FlashDeliveryNote';
import { useFlashNavigationStore } from '@/components/stores/flashNavigationStore';
import { useFocusEffect } from '@react-navigation/native';
import { useFlashCartStore } from '@/src/store/flashCartStore';
import { tw, BottomDialog, MyText, MyTouchableOpacity } from 'common-ui';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useAddToCart } from '@/hooks/cart-query-hooks';

const FlashAddToCartDialog = () => {
  const { addedFlashProduct, clearAddedFlashProduct } = useFlashCartStore();

  const addToCart = useAddToCart({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  }, "flash");

  const product = addedFlashProduct?.product;
  const isOpen = !!addedFlashProduct;

  React.useEffect(() => {
    if (isOpen && product) {
      addToCart.mutate(
        { productId: product.id, quantity: 1, slotId: 0 },
        {
          onSuccess: () => {
            clearAddedFlashProduct();
            setTimeout(() => {
              Alert.alert('Added to Cart', `Added ${product.name} for delivery in 1hr`);
            }, 300);
          }
        }
      );
    }
  }, [isOpen, product]);

  if (!isOpen || !product) return null;

  return null;
  return (
    <BottomDialog open={isOpen} onClose={clearAddedFlashProduct}>
      <View style={tw`p-6 items-center`}>
        <View style={tw`w-16 h-16 bg-pink-50 rounded-full items-center justify-center mb-4`}>
          <MaterialIcons name="bolt" size={32} color="#f81260" />
        </View>
        <MyText style={tw`text-xl font-bold text-gray-900 mb-2`}>1 hr Delivery</MyText>
        <MyText style={tw`text-gray-600 text-center mb-4`}>Adding {product.name}...</MyText>
      </View>
    </BottomDialog>
  );
};

export default function FlashDeliveryView() {
  const { storeId } = useLocalSearchParams<{ storeId?: string }>();
  const setStoreId = useSlotStore(state => state.setStoreId);
  const router = useRouter();
  const { shouldNavigateToCart, reset } = useFlashNavigationStore();

  useEffect(() => {
    setStoreId(Number(storeId));
  }, [storeId, setStoreId]);

  useFocusEffect(
    React.useCallback(() => {
      if (shouldNavigateToCart) {
        reset();
        router.push('/(drawer)/(tabs)/flash-delivery/(cart)/cart');
      }
    }, [shouldNavigateToCart, router])
  );

  const handleProductPress = (productId: number) => {
    router.push(`/(drawer)/(tabs)/flash-delivery/product-detail/${productId}`);
  };

  return (
    <>
      <FlashDeliveryNote />
      <FlashDeliveryProducts
        storeId={Number(storeId)}
        baseUrl="/(drawer)/(tabs)/flash-delivery"
        onProductPress={handleProductPress}
      />
      <FlashAddToCartDialog />
    </>
  );
}
