import React, { useState } from 'react';
import { View, ScrollView, Dimensions } from 'react-native';
import { useRouter } from 'expo-router';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { BottomDialog, MyTouchableOpacity, MyText, tw, theme } from 'common-ui';
import { useAuth } from '@/src/contexts/AuthContext';
import { trpc } from '@/src/trpc-client';
import { useAddressStore } from '@/src/store/addressStore';
import { useSlots } from '@/src/hooks/prominent-api-hooks';
import dayjs from 'dayjs';

interface QuickDeliveryAddressSelectorProps {
  deliveryTime?: string;
  slotId?: number;
  onSlotChange?: (slotId: number) => void;
  isForFlashDelivery?: boolean;
}

const QuickDeliveryAddressSelector: React.FC<QuickDeliveryAddressSelectorProps> = ({
  deliveryTime,
  slotId,
  onSlotChange,
  isForFlashDelivery = false
}) => {
  const router = useRouter();
  const [dialogOpen, setDialogOpen] = useState(false);

  const { isAuthenticated } = useAuth();
  const { selectedAddressId, setSelectedAddressId } = useAddressStore();

  const { data: defaultAddressData } = trpc.user.address.getDefaultAddress.useQuery();
  const { data: addressesData } = trpc.user.address.getUserAddresses.useQuery(undefined, {
    enabled: isAuthenticated,
  });
  const { data: slotsData } = useSlots();

  const defaultAddress = defaultAddressData?.data;
  const addresses = addressesData?.data || [];

  // Format time range helper
  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}`;
  };

  // Find earliest slot for pre-selection
  const earliestSlot = slotsData?.slots?.sort((a, b) =>
    dayjs(a.deliveryTime).diff(dayjs(b.deliveryTime))
  )[0];

  // Transform addresses for display
  const addressOptions = addresses.map(address => ({
    id: address.id,
    name: address.name,
    address: `${address.addressLine1}${address.addressLine2 ? `, ${address.addressLine2}` : ''}, ${address.city}, ${address.state} - ${address.pincode}`,
    phone: address.phone,
  }));

  // Transform slots for display
  const slotOptions = slotsData?.slots?.map(slot => {
    return {
      id: slot.id,
      deliveryTime: formatTimeRange(slot.deliveryTime),
      closeTime: dayjs(slot.freezeTime).format('h:mm A'),
    };
  }) || [];

  // Get current selected slot display
  const getCurrentSlotDisplay = () => {
    if (isForFlashDelivery) return 'within 1 hour';
    if (slotId) {
      const slot = slotsData?.slots?.find(s => s.id === slotId);
      return slot ? formatTimeRange(slot.deliveryTime) : 'Select time';
    }
    if (earliestSlot) {
      return formatTimeRange(earliestSlot.deliveryTime);
    }
    return 'Select time';
  };

  // Get current selected address display
  const getCurrentAddressDisplay = () => {
    if (selectedAddressId) {
      const address = addresses.find(a => a.id === selectedAddressId);
      if (address) return `${address.name} - ${address.addressLine1}`;
    }
    if (defaultAddress) {
      return `${defaultAddress.name} - ${defaultAddress.addressLine1}`;
    }
    return 'Select address';
  };



  return (
    <>

      {isForFlashDelivery && (
        <View style={tw`flex-row items-center mb-1`}>
          <MyTouchableOpacity
            onPress={() => router.back()}
            style={tw`p-2 -ml-2`}
            activeOpacity={0.7}
          >
            <MaterialIcons name="chevron-left" size={24} color="#f81260" />
          </MyTouchableOpacity>
          <MyText style={[tw`text-lg font-bold ml-2`, { color: '#f81260' }]}>
            Delivery in within 1 hour
          </MyText>
        </View>
      )}

      {!isForFlashDelivery && (
        <>
          <View style={tw`flex-1 flex-row items-center gap-2`}>
            <MyTouchableOpacity
              onPress={() => router.back()}
              style={tw`p-1`}
              activeOpacity={0.7}
            >
              <MaterialIcons name="chevron-left" size={24} />
            </MyTouchableOpacity>

            <View style={tw`flex-1 gap-1`}>
              <MyTouchableOpacity
                onPress={() => setDialogOpen(true)}
                style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
                activeOpacity={0.7}
              >
                <View style={tw`flex-1`}>
                  <MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Delivery Time</MyText>
                  <MyText style={tw`text-sm font-bold text-brand900`}>
                    {getCurrentSlotDisplay()}
                  </MyText>
                </View>
                <MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
              </MyTouchableOpacity>

              {/* Address dropdown - temporarily hidden
              <MyTouchableOpacity
                onPress={() => setDialogOpen(true)}
                style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
                activeOpacity={0.7}
              >
                <View style={tw`flex-1`}>
                  <MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Address</MyText>
                  <MyText style={tw`text-sm font-bold text-brand900`} numberOfLines={1}>
                    {getCurrentAddressDisplay()}
                  </MyText>
                </View>
                <MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
              </MyTouchableOpacity>
              */}
            </View>
          </View>

          <BottomDialog
            open={dialogOpen}
            onClose={() => setDialogOpen(false)}
          >
            <View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
              <MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
                Select Delivery Time
              </MyText>

              <ScrollView showsVerticalScrollIndicator={false}>
                {isForFlashDelivery ? (
                  <View style={tw`p-3 bg-green-50 border border-green-200 rounded-lg mb-2`}>
                    <View style={tw`flex-row items-center`}>
                      <MaterialIcons name="bolt" size={20} color="#16a34a" />
                      <MyText style={tw`text-green-800 font-medium ml-2`}>
                        1 Hr Delivery - within 1 hour
                      </MyText>
                    </View>
                    <MyText style={tw`text-green-700 text-xs mt-1`}>
                      Selected automatically for flash delivery
                    </MyText>
                  </View>
                ) : (
                  slotOptions.map(slot => (
                    <MyTouchableOpacity
                      key={slot.id}
                      style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
                        slot.id === (slotId || earliestSlot?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
                      }`}
                      onPress={() => {
                        onSlotChange?.(slot.id);
                        setDialogOpen(false);
                      }}
                      activeOpacity={0.7}
                    >
                      <MyText style={tw`font-medium text-gray-900`}>
                        Delivery: {slot.deliveryTime}
                      </MyText>
                      <MyText style={tw`text-xs text-gray-500 mt-1`}>
                        Orders Close at: {slot.closeTime}
                      </MyText>
                    </MyTouchableOpacity>
                  ))
                )}
              </ScrollView>
            </View>
          </BottomDialog>

          {/* Address section - temporarily hidden
          <BottomDialog
            open={addressDialogOpen}
            onClose={() => setAddressDialogOpen(false)}
          >
            <View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
              <MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
                Select Delivery Address
              </MyText>

              <ScrollView showsVerticalScrollIndicator={false}>
                {!isAuthenticated ? (
                  <View style={tw`p-4 bg-red-50 border border-red-200 rounded-lg`}>
                    <View style={tw`flex-row items-center`}>
                      <MaterialIcons name="error" size={20} color="#DC2626" />
                      <MyText style={tw`text-red-800 font-medium ml-2`}>
                        Authentication Required
                      </MyText>
                    </View>
                    <MyText style={tw`text-red-700 text-sm mt-2`}>
                      Please log in to select and manage delivery addresses.
                    </MyText>
                  </View>
                ) : addressOptions.length === 0 ? (
                  <View style={tw`p-4 bg-gray-50 border border-gray-200 rounded-lg`}>
                    <MyText style={tw`text-gray-600 text-center`}>
                      No delivery addresses available. Please add an address first.
                    </MyText>
                  </View>
                ) : (
                  addressOptions.map(address => (
                    <MyTouchableOpacity
                      key={address.id}
                      style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
                        address.id === (selectedAddressId || defaultAddress?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
                      }`}
                      onPress={() => {
                        setSelectedAddressId(address.id);
                        setAddressDialogOpen(false);
                      }}
                      activeOpacity={0.7}
                    >
                      <MyText style={tw`font-medium text-gray-900`}>
                        {address.name}
                      </MyText>
                      <MyText style={tw`text-sm text-gray-600 mt-1`} numberOfLines={2}>
                        {address.address}
                      </MyText>
                      <MyText style={tw`text-xs text-gray-500 mt-1`}>
                        Phone: {address.phone}
                      </MyText>
                    </MyTouchableOpacity>
                  ))
                )}
              </ScrollView>
            </View>
          </BottomDialog>
          */}
        </>
      )}
    </>
  );
};

export default QuickDeliveryAddressSelector;
