import React, { useState, useEffect } from "react";
import { View, ScrollView, Dimensions, Alert } from "react-native";
import { Image } from 'expo-image';
import { useRouter } from "expo-router";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import {
  StorageServiceCasual,
  tw,
  MyText,
  MyTouchableOpacity,
  MiniQuantifier,
  BottomDropdown,
  BottomDialog,
  theme,
  updateStatusBarColor,
} from "common-ui";
import {
  useGetCart,
  useUpdateCartItem,
  useRemoveFromCart,
  useAddToCart,
  type CartType,
} from "@/hooks/cart-query-hooks";
import { useGetEssentialConsts, useSlots } from "@/src/hooks/prominent-api-hooks"
import { useProductSlotIdentifier } from "@/hooks/useProductSlotIdentifier";
import { useCentralProductStore } from "@/src/store/centralProductStore";
import dayjs from "dayjs";
import { LinearGradient } from "expo-linear-gradient";

const { height: screenHeight } = Dimensions.get("window");

interface FloatingCartBarProps {
  isFlashDelivery?: boolean;
  isExpanded?: boolean;
  setIsExpanded?: (value: boolean) => void;
}

// Smart time window formatting function
const formatTimeRange = (deliveryTime: string | Date) => {
  const time = dayjs(deliveryTime);
  const endTime = time.add(1, 'hour');
  const startPeriod = time.format('A');
  const endPeriod = endTime.format('A');

  let timeRange;
  if (startPeriod === endPeriod) {
    timeRange = `${time.format('h')}-${endTime.format('h')} ${startPeriod}`;
  } else {
    timeRange = `${time.format('h:mm')} ${startPeriod} - ${endTime.format('h:mm')} ${endPeriod}`;
  }

  return `${time.format('ddd, DD MMM ')}${timeRange}`;
};

// Product name component with quantity
const ProductNameWithQuantity = ({ name, productQuantity, unitNotation }: { name: string; productQuantity: number; unitNotation: string }) => {
  const truncatedName = name.length > 25 ? name.substring(0, 25) + '...' : name;
  const unit = unitNotation ? ` ${unitNotation}` : '';
  return (
    <MyText style={tw`text-slate-900 font-extrabold text-sm flex-1`} numberOfLines={1}>
      {truncatedName} <MyText style={tw`text-slate-500 font-medium text-xs`}>({productQuantity}{unit})</MyText>
    </MyText>
  );
};

const FloatingCartBar: React.FC<FloatingCartBarProps> = ({
  isFlashDelivery = false,
  isExpanded: controlledIsExpanded,
  setIsExpanded: controlledSetIsExpanded,
}) => {
  const cartBarColor = isFlashDelivery ? '#f81260' : theme.colors.brand600;
  const cartBarBorderColor = isFlashDelivery ? '#e11d48' : theme.colors.brand500;
  const router = useRouter();
  const [localIsExpanded, setLocalIsExpanded] = useState(false);
  const [quantities, setQuantities] = useState<Record<number, number>>({});
  const cartType: CartType = isFlashDelivery ? "flash" : "regular";

  const isExpanded = controlledIsExpanded ?? localIsExpanded;
  const setIsExpanded = controlledSetIsExpanded ?? setLocalIsExpanded;
  const { data: cartData, refetch: refetchCart } = useGetCart({}, cartType);
  const { data: constsData } = useGetEssentialConsts();
  const { data: slotsData } = useSlots();
  const productsById = useCentralProductStore((state) => state.productsById);
  const { productSlotsMap } = useProductSlotIdentifier();
  const cartItems = cartData?.items || [];
  const itemCount = cartItems.length;

  const updateCartItem = useUpdateCartItem({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  }, cartType);
  const removeFromCart = useRemoveFromCart({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  }, cartType);
  const addToCartHook = useAddToCart({
    showSuccessAlert: false,
    showErrorAlert: false,
    refetchCart: true,
  }, cartType);

  useEffect(() => {
    const initial: Record<number, number> = {};
    cartItems.forEach((item) => {
      initial[item.id] = item.quantity;
    });
    setQuantities(initial);
  }, [cartData]);

  useEffect(() => {
    if (!cartItems.length || !slotsData?.slots || !productSlotsMap) return;

    const itemsToUpdate = cartItems.filter(item => {
      if (isFlashDelivery || !item.slotId) return false;

      const availableSlots = productSlotsMap[item.productId]?.slots || [];
      const isSlotAvailable = availableSlots.some((slot) => slot.id === item.slotId);
      return !isSlotAvailable;
    });

    itemsToUpdate.forEach((item) => {
      const availableSlots = productSlotsMap[item.productId]?.slots || [];
      if (availableSlots.length > 0 && !isFlashDelivery) {
        const nearestSlotId = availableSlots[0].id;
        removeFromCart.mutate({ itemId: item.id });
        addToCartHook.addToCart(item.productId, item.quantity, nearestSlotId);
      }
    });
  }, []);

  const firstItem = cartItems[0];
  const expandedHeight = screenHeight * 0.7;

  // Calculate total cart value and free delivery info
  const totalCartValue = cartItems.reduce(
    (sum, item) => {
      const product = productsById[item.productId];
      const basePrice = product?.price ?? 0;
      const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice;
      return sum + price * item.quantity;
    },
    0
  );
   const freeDeliveryThreshold = isFlashDelivery
     ? constsData?.flashFreeDeliveryThreshold
     : constsData?.freeDeliveryThreshold;
  const remainingForFreeDelivery = Math.max(
    0,
    freeDeliveryThreshold - totalCartValue
  );

  return (
    <>
      <View
        style={[
          tw`rounded-2xl shadow-2xl overflow-hidden`,
          { backgroundColor: cartBarColor, borderColor: cartBarBorderColor, borderWidth: 1 },
        ]}
      >
        {!isExpanded && (
          // --- Collapsed View ---
          <MyTouchableOpacity
            style={tw`flex-row items-center justify-between px-5 py-3`}
            onPress={() => itemCount > 0 && setIsExpanded(true)}
            activeOpacity={0.9}
          >
            <View style={tw`flex-row items-center flex-1`}>


              <View style={tw`flex-1`}>
                <View style={tw`flex-row items-center`}>
                   <MyText style={tw`text-white font-extrabold text-sm mr-2`}>
                     {itemCount === 0 ? (isFlashDelivery ? "No Flash Items" : "No Items In Cart") : (
                      <>
                        <MyText style={tw`text-white font-black text-base`}>
                          ₹{totalCartValue}
                        {` • ${itemCount} ${itemCount === 1 ? "Item" : "Items"}`}
                        </MyText>
                      </>
                    )}
                  </MyText>
                  {itemCount > 0 && <MaterialIcons name="expand-less" size={18} color="white" />}
                </View>

                {remainingForFreeDelivery > 0 ? (
                  <MyText style={tw`text-[10px] text-brand100 mt-1 font-bold`}>
                    ₹{remainingForFreeDelivery} more for <MyText style={tw`text-emerald-300`}>FREE Delivery</MyText>
                  </MyText>
                ) : itemCount > 0 ? (
                  <View style={tw`flex-row items-center mt-0.5`}>
                    <MaterialIcons name="verified" size={14} color="#10B981" />
                    <MyText style={tw`text-emerald-300 text-[10px] font-black uppercase ml-1 tracking-tighter`}>
                      Free Delivery Unlocked
                    </MyText>
                  </View>
                ) : (
                  <MyText style={tw`text-brand200 text-[10px] mt-0.5`}>Shop for ₹{freeDeliveryThreshold}+ for free shipping</MyText>
                )}
              </View>
            </View>

             <MyTouchableOpacity
               style={tw`bg-white px-3 py-2 rounded-2xl shadow-lg shadow-black/20`}
               onPress={() => router.push(
                 isFlashDelivery
                   ? "/(drawer)/(tabs)/flash-delivery/(cart)/cart"
                   : "/(drawer)/(tabs)/home/cart"
               )}
             >
               <MyText style={[tw`font-bold text-sm`, { color: cartBarColor }]}>Go to Cart</MyText>
             </MyTouchableOpacity>
          </MyTouchableOpacity>
        )}
      </View>
      <BottomDialog open={isExpanded} onClose={() => setIsExpanded(false)} enableDismiss={true}>
        <ScrollView style={{ maxHeight: Dimensions.get('window').height * 0.8 }}>
          {/* Header */}
          <View style={tw`px-6 py-5 border-b border-slate-100 flex-row items-center justify-between`}>
            <View>
              <MyText style={tw`text-slate-900 font-black text-xl tracking-tight`}>
                Your Cart
              </MyText>
              <MyText style={tw`text-slate-400 text-xs font-bold uppercase tracking-widest`}>
                {itemCount} Items
              </MyText>
            </View>
            <MyTouchableOpacity
              style={tw`w-10 h-10 rounded-2xl bg-slate-100 items-center justify-center`}
              onPress={() => setIsExpanded(false)}
            >
              <MaterialIcons name="close" size={24} color="#64748B" />
            </MyTouchableOpacity>
          </View>

          {/* Progress Bar Header */}
          {remainingForFreeDelivery > 0 && (
            <View style={tw`px-6 py-3 bg-emerald-50/50 flex-row items-center justify-between`}>
              <View style={tw`flex-1 mr-4`}>
                <View style={tw`flex-row items-center justify-between mb-1.5`}>
                  <MyText style={tw`text-[10px] font-black text-emerald-700 uppercase`}>Free Delivery Progress</MyText>
                  <MyText style={tw`text-[10px] font-black text-emerald-700`}>{Math.round((totalCartValue / freeDeliveryThreshold) * 100)}%</MyText>
                </View>
                <View style={tw`h-1.5 bg-white rounded-full overflow-hidden border border-emerald-100`}>
                  <View style={[tw`h-full bg-emerald-500`, { width: `${(totalCartValue / freeDeliveryThreshold) * 100}%` }]} />
                </View>
              </View>
              <View style={tw`items-end`}>
                <MyText style={tw`text-[10px] font-bold text-slate-500`}>Needed</MyText>
                <MyText style={tw`text-sm font-black text-emerald-600`}>+₹{remainingForFreeDelivery}</MyText>
              </View>
            </View>
          )}

          {/* Items List */}
          <ScrollView style={tw`flex-1`} contentContainerStyle={tw`px-6 py-4`}>
            {cartItems.map((item, index) => (
              <React.Fragment key={item.id}>
                  <View style={tw`py-4`}>
                    <View style={tw`flex-row items-center`}>
                        <Image
                          source={{ uri: productsById[item.productId]?.images?.[0] }}
                          style={tw`w-8 h-8 rounded-lg bg-slate-50 border border-slate-100`}
                        />

                      <View style={tw`flex-1 ml-4`}>
                        <View style={tw`flex-row items-center justify-between mb-1`}>
                          <ProductNameWithQuantity
                            name={productsById[item.productId]?.name || ''}
                            productQuantity={productsById[item.productId]?.productQuantity || 0}
                            unitNotation={productsById[item.productId]?.unitNotation || ''}
                          />
                             <MiniQuantifier
                              value={quantities[item.id] || item.quantity}
                              onChange={(value) => {
                               if (value === 0) {
                                 removeFromCart.mutate({ itemId: item.id });
                               } else {
                                 setQuantities((prev) => ({ ...prev, [item.id]: value }));
                                 updateCartItem.mutate({ itemId: item.id, quantity: value });
                               }
                             }}
                              step={productsById[item.productId]?.incrementStep || 1}
                              showUnits={true}
                              unit={productsById[item.productId]?.unitNotation}
                            />
                        </View>
                        <View style={tw`flex-row items-center justify-between`}>
                          {item.slotId && slotsData && productSlotsMap[item.productId] && (
                            <BottomDropdown
                              label="Select Delivery Slot"
                              value={item.slotId}
                              options={(productSlotsMap[item.productId]?.slots || []).map((slot) => {
                                return {
                                  label: slot ? formatTimeRange(slot.deliveryTime) : "N/A",
                                  value: slot.id,
                                };
                              })}
                              onValueChange={async (val) => {
                                  const newSlot = slotsData.slots.find(s => s.id === val);
                                  if (!newSlot) return;

                                  const productId = item.productId;
                                  const quantity = item.quantity;
                                  const itemId = item.id;
                                  const slotId = typeof val === 'number' ? val : Number(val);

                                  // await removeFromCart.mutateAsync(itemId);
                                  addToCartHook.addToCart(productId, 0, slotId, () => {
                                    refetchCart();
                                    Alert.alert("Delivery Updated", `Scheduled for ${formatTimeRange(newSlot?.deliveryTime || '')}`);
                                  });
                                }}
                              triggerComponent={({ onPress, displayText }) => (
                                <MyTouchableOpacity
                                  onPress={onPress}
                                  style={tw`flex-row items-center bg-blue-50 px-2 py-1 rounded-lg border border-blue-100`}
                                >
                                  <MaterialIcons name="schedule" size={10} color={theme.colors.brand600} />
                                  <MyText style={tw`text-[9px] font-black text-blue-700 ml-1 uppercase`}>
                                    {displayText}
                                  </MyText>
                                  <MaterialIcons name="keyboard-arrow-down" size={12} color={theme.colors.brand500} />
                                </MyTouchableOpacity>
                              )}
                            />
                          )}
                          <MyText style={tw`text-slate-900 text-sm font-bold`}>
                            ₹{(() => {
                              const product = productsById[item.productId];
                              const basePrice = product?.price ?? 0;
                              const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice;
                              return price * item.quantity;
                            })()}
                          </MyText>
                        </View>
                      </View>
                    </View>


                </View>
                {index < cartItems.length - 1 && (
                  <View style={tw`h-px bg-slate-200 w-full`} />
                )}
              </React.Fragment>
            ))}
          </ScrollView>

          {/* Fancy Footer */}
          <View style={tw`p-6 bg-white border-t border-slate-100`}>
            <View style={tw`flex-row justify-between items-center mb-5`}>
              <View>
                <MyText style={tw`text-slate-400 text-[10px] font-black uppercase tracking-widest`}>Subtotal</MyText>
                <MyText style={tw`text-2xl font-black text-slate-900`}>₹{totalCartValue}</MyText>
              </View>
              {remainingForFreeDelivery === 0 && (
                <View style={tw`bg-emerald-50 px-3 py-1.5 rounded-xl border border-emerald-100 flex-row items-center`}>
                  <MaterialIcons name="local-shipping" size={14} color="#059669" />
                  <MyText style={tw`text-emerald-700 text-[10px] font-black ml-1.5 uppercase`}>Free Delivery</MyText>
                </View>
              )}
            </View>

             <MyTouchableOpacity
               onPress={() => router.push(
                 isFlashDelivery
                   ? "/(drawer)/(tabs)/flash-delivery/(cart)/cart"
                   : "/(drawer)/(tabs)/home/cart"
               )}
               activeOpacity={0.9}
             >
               <LinearGradient
                 colors={isFlashDelivery ? ['#f81260', '#c40e50'] : ['#1570EF', '#194185']}
                 start={{ x: 0, y: 0 }}
                 end={{ x: 1, y: 0 }}
                 style={tw`py-4 rounded-2xl items-center shadow-lg shadow-brand200 flex-row justify-center`}
               >
                <MyText style={tw`text-white font-black text-base uppercase tracking-widest`}>
                  Go to cart
                </MyText>
                <MaterialIcons name="chevron-right" size={20} color="white" style={tw`ml-1`} />
              </LinearGradient>
            </MyTouchableOpacity>
          </View>
        </ScrollView>
      </BottomDialog>
    </>
  );
};

export default FloatingCartBar;