import { View, Text, Image, ScrollView, TouchableOpacity } from "react-native";
import React, {
  useEffect,
  useState,
  useRef,
  useCallback,
  useMemo,
} from "react";
import { Ac, Back, Bag, Right, Star1 } from "@src/utils/icons";
import { CarType } from "@src/assets/icons/carType";
import { FuelType } from "@src/assets/icons/fuelType";
import { Milage } from "@src/assets/icons/milage";
import { GearType } from "@src/assets/icons/gearType";
import { Seat } from "@src/assets/icons/seat";
import { Speed } from "@src/assets/icons/speed";
import { styles } from "./styles";
import { external } from "@src/styles/externalStyle";
import { useNavigation, useRoute } from "@react-navigation/native";
import { RentalBookinginterface } from "@src/api/interface/rentalinterface";
import { rentalRideRequests, updateRideRequest } from "@src/api/store/actions";
import { useDispatch, useSelector } from "react-redux";
import {
  Button,
  Header,
  HeaderContainer,
  notificationHelper,
} from "@src/commonComponent";
import { useValues } from "@src/utils/context/index";
import {
  appColors,
  appFonts,
  fontSizes,
  windowHeight,
  windowWidth,
} from "@src/themes";
import { clearValue } from "@src/utils/localstorage";
import {
  getFirestore,
  doc,
  onSnapshot,
  getDoc,
  deleteDoc,
} from "firebase/firestore";
import { firebaseConfig } from "../../../firebase";
import { AnimatedCircularProgress } from "react-native-circular-progress";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
import { initializeApp } from "@firebase/app";
import Swiper from "react-native-swiper";

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export function RentalCarDetails() {
  const route = useRoute();
  const {
    startDate,
    pickUpCoords,
    pickupLocation,
    dropLocation,
    dropCoords,
    endDate,
    convertedStartTime,
    convertedEndTime,
    getDriver,
  } = route.params;
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const { rentalVehicleListsDetails } = useSelector(
    (state: any) => state.rentalVehicle
  );
  const { zoneValue } = useSelector((state: any) => state.zone);
  const { translateData } = useSelector((state) => state.setting);
  const { viewRTLStyle, isDark } = useValues();
  const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
  const [bookLoading, setBookloading] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(60);
  const [rideCancelLoading, setRideCancelLoading] = useState(false);
  const [ride_req_id, setRideReqId] = useState(null);
  const totalSeconds = 60;
  const startDates = new Date(startDate);
  const endDates = new Date(endDate);
  const bottomSheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ["40%"], []);

  const handleSheetChanges = useCallback((index: number) => {
    if (index === -1) {
      setIsBottomSheetVisible(false);
    }
  }, []);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetRef.current?.expand();
    setIsBottomSheetVisible(true);
  }, []);

  const handleCloseModalPress = useCallback(() => {
    bottomSheetRef.current?.close();
    setIsBottomSheetVisible(false);
  }, []);


  const diffTime = endDates.getTime() - startDates.getTime();


  useEffect(() => {
    if (!ride_req_id) return;

    const rideReqId = String(ride_req_id);

    const rentalRequestRef = doc(
      db,
      "ride_requests",
      rideReqId,
      "rental_requests",
      rideReqId
    );

    const unsubscribe = onSnapshot(rentalRequestRef, async (docSnapshot) => {
      if (docSnapshot.exists()) {
        const data = docSnapshot.data();

        if (data?.status == "canceled") {
          modelClose();
          notificationHelper("", translateData.driverRejectReq, "error");
        } else if (data?.status == "accepted") {
          handleCloseModalPress();

          await deleteDoc(rentalRequestRef);

          const rideDocRef = doc(db, "rides", String(data.ride_id));
          const rideDoc = await getDoc(rideDocRef);

          if (rideDoc.exists()) {
            const fullRideData = rideDoc.data();
            notificationHelper("", translateData.driverAcceptReq, "success");
            navigation.navigate("PaymentMethod", { rideData: fullRideData });
          } else {
          }
        }
      }
    });

    return () => unsubscribe();
  }, [ride_req_id, handleCloseModalPress, navigation]);

  const modelClose = async () => {
    setRideCancelLoading(true);
    handleCloseModalPress();
    setBookloading(false);
    dispatch(updateRideRequest({ payload: "", ride_id: ride_req_id })).then(
      (res: any) => {
        setRideCancelLoading(false);
        if (res?.payload?.id) {
          notificationHelper("", translateData.rideReqCancel, "error");
        }
      }
    );
  };

  const carDetails = [
    { Icon: CarType, title: rentalVehicleListsDetails.vehicle_subtype },
    { Icon: FuelType, title: rentalVehicleListsDetails.fuel_type },
    { Icon: Milage, title: `${rentalVehicleListsDetails.mileage}` },
    { Icon: GearType, title: rentalVehicleListsDetails.gear_type },
    {
      Icon: Seat,
      title: `${rentalVehicleListsDetails?.seatingCapacity || 1} Seat`,
    },
    { Icon: Speed, title: `${rentalVehicleListsDetails.vehicle_speed}` },
    { Icon: Ac, title: rentalVehicleListsDetails.is_ac == 1 ? "AC" : "Non AC" },
    { Icon: Bag, title: `${rentalVehicleListsDetails.bag_count}` },
  ];

  const [mainImage, setMainImage] = useState("");
  React.useEffect(() => {
    if (rentalVehicleListsDetails?.rental_vehicle_galleries?.length > 0) {
      setMainImage(rentalVehicleListsDetails.rental_vehicle_galleries[0]);
    } else if (rentalVehicleListsDetails?.normal_image_url) {
      setMainImage(rentalVehicleListsDetails.normal_image_url);
    }
  }, [rentalVehicleListsDetails]);
  function toUTCDateTime(dateStr: string, timeStr: string) {
    const [day, monthName, year] = dateStr.split(" ");
    const [hours, minutes] = timeStr.split(":").map(Number);

    const months: Record<string, number> = {
      January: 0,
      February: 1,
      March: 2,
      April: 3,
      May: 4,
      June: 5,
      July: 6,
      August: 7,
      September: 8,
      October: 9,
      November: 10,
      December: 11,
    };

    const month = months[monthName];
    const localDate = new Date(
      Number(year),
      month,
      Number(day),
      hours,
      minutes,
      0
    );

    const yyyy = localDate.getUTCFullYear();
    const mm = String(localDate.getUTCMonth() + 1).padStart(2, "0");
    const dd = String(localDate.getUTCDate()).padStart(2, "0");
    const hh = String(localDate.getUTCHours()).padStart(2, "0");
    const mi = String(localDate.getUTCMinutes()).padStart(2, "0");
    const ss = String(localDate.getUTCSeconds()).padStart(2, "0");

    return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
  }

  const start_time = toUTCDateTime(startDate, convertedStartTime);
  const end_time = toUTCDateTime(endDate, convertedEndTime);

  const bookRental = async () => {
    setBookloading(true);
    const is_with_driver = getDriver ? "1" : "0";
    let dropLocations =
      dropLocation && dropLocation.trim() ? dropLocation : pickupLocation;

    let payload: RentalBookinginterface = {
      locations: [`${pickupLocation}`, `${dropLocations}`],
      location_coordinates: [
        {
          lat: `${pickUpCoords.lat}`,
          lng: `${pickUpCoords.lng}`,
        },
        {
          lat: `${dropCoords?.lat ?? pickUpCoords.lat}`,
          lng: `${dropCoords?.lng ?? pickUpCoords.lng}`,
        },
      ],
      service_id: "1",
      service_category_id: "5",
      vehicle_type_id: `${rentalVehicleListsDetails.vehicle_type_id}`,
      rental_vehicle_id: `${rentalVehicleListsDetails.id}`,
      is_with_driver: `${is_with_driver}`,
      payment_method: "cash",
      start_time: start_time,
      end_time: end_time,
      currency_code: zoneValue?.currency_code,
    };

    dispatch(rentalRideRequests(payload))
      .unwrap()
      .then(async (res) => {
        setBookloading(false);
        if (res.status == 403) {
          notificationHelper("", translateData.loginAgain, "error");
          clearValue("token").then(() => {
            navigation.reset({
              index: 0,
              routes: [{ name: "SignIn" }],
            });
          });
          return;
        }
        if (res?.id) {
          setRideReqId(res?.id);
          handlePresentModalPress();
          notificationHelper("", translateData.rentalReqSend, "success");
          try {
          } catch (err) {
            notificationHelper("", translateData.failedSendReq, "error");
            handleCloseModalPress();
          }
        } else {
          notificationHelper("", res.message, "error");
        }
      })
      .catch((error) => {
        notificationHelper("", translateData.unexpectedError, "error");
        setBookloading(false);
      });
  };

  useEffect(() => {
    if (!isBottomSheetVisible) return;
    setSecondsLeft(60);
    const interval = setInterval(() => {
      setSecondsLeft((prev) => {
        if (prev <= 1) {
          clearInterval(interval);
          if (isBottomSheetVisible) {
            modelClose();
          }
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [isBottomSheetVisible]);

  const formatTime = (sec) => {
    const m = String(Math.floor(sec / 60)).padStart(2, "0");
    const s = String(sec % 60).padStart(2, "0");
    return `${m}:${s}`;
  };
  const [swiperRef, setSwiperRef] = useState(null);
  const formatRating = (num) => {
    const n = Number(num) || 0;
    return n % 1 === 0 ? n.toString() : n.toFixed(1);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: isDark ? appColors.solidBorder : appColors.lightGray,
      }}
    >
      <HeaderContainer />

      <ScrollView showsVerticalScrollIndicator={false}>
        <View
          style={{
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.whiteColor,
            marginHorizontal: windowWidth(20),
            marginTop: windowHeight(16),
            paddingHorizontal: windowWidth(15),
            paddingVertical: windowHeight(15),
            borderRadius: windowWidth(20),
          }}
        >
          <Swiper
            ref={(ref) => setSwiperRef(ref)}
            showsPagination={true}
            showsButtons={true}
            loop={true}
            autoplay={false}
            height={250}
            prevButton={
              <View
                style={[
                  styles.round,
                  {
                    backgroundColor: isDark
                      ? appColors.primaryText
                      : appColors.whiteColor,
                    borderColor: isDark
                      ? appColors.darkBorder
                      : appColors.border,
                  },
                ]}
              >
                <Back />
              </View>
            }
            nextButton={
              <View
                style={[
                  styles.round1,
                  {
                    backgroundColor: isDark
                      ? appColors.primaryText
                      : appColors.whiteColor,
                    borderColor: isDark
                      ? appColors.darkBorder
                      : appColors.border,
                  },
                ]}
              >
                <Back />
              </View>
            }
            buttonWrapperStyle={styles.buttonWrapper}
            dotStyle={styles.dot}
            activeDotStyle={styles.dot1}
            activeDotColor={appColors.primary}
            dotColor={appColors.whiteColor}
          >
            {rentalVehicleListsDetails?.rental_vehicle_galleries?.map(
              (img, index) => (
                <View key={index} style={styles.slide}>
                  <Image source={{ uri: img }} style={styles.mainImg} />
                </View>
              )
            )}
          </Swiper>
          <View
            style={[
              styles.rateContainer,
              {
                flexDirection: viewRTLStyle,
                backgroundColor: isDark
                  ? appColors.primaryText
                  : appColors.whiteColor,
              },
            ]}
          >
            <Star1 />
            <Text
              style={[
                styles.rating,
                { color: isDark ? appColors.whiteColor : appColors.blackColor },
              ]}
            >
              {formatRating(rentalVehicleListsDetails?.driver?.rating_count)}
            </Text>
            <Text
              style={[
                styles.rating,
                { color: appColors.iconColor, marginHorizontal: 0 },
              ]}
            >
              {`(${formatRating(
                rentalVehicleListsDetails?.driver?.review_count
              )})`}
            </Text>
          </View>
          <View
            style={[
              styles.driverContainer,
              {
                flexDirection: viewRTLStyle,
                backgroundColor: isDark
                  ? appColors.solidBorder
                  : appColors.lightGray,
              },
            ]}
          >
            <Text
              style={[
                styles.title,
                {
                  color: isDark ? appColors.whiteColor : appColors.primaryText,
                },
              ]}
            >
              {translateData.driverPriceText}
            </Text>
            <View style={external.fd_row}>
              <Text style={[styles.price]}>
                {zoneValue?.currency_symbol}
                {rentalVehicleListsDetails.driver_per_day_charge}
                <Text style={styles.day}>/{translateData.day}</Text>
              </Text>
            </View>
          </View>
          <View>
            <View
              style={[
                styles.subContainer,
                {
                  backgroundColor: isDark
                    ? appColors.darkPrimary
                    : appColors.whiteColor,
                },
              ]}
            >
              <View style={[styles.titleView, { flexDirection: viewRTLStyle }]}>
                <Text
                  style={[
                    styles.title1,
                    {
                      color: isDark
                        ? appColors.whiteColor
                        : appColors.primaryText,
                    },
                  ]}
                >
                  {rentalVehicleListsDetails.name}
                </Text>
              </View>

              <View
                style={[
                  styles.detailContainer,
                  { flexDirection: viewRTLStyle },
                ]}
              >
                <Text style={styles.detail}>
                  {rentalVehicleListsDetails.description}
                </Text>
                <View style={external.fd_row}>
                  <Text
                    style={[
                      styles.price,
                      {
                        color: isDark
                          ? appColors.whiteColor
                          : appColors.blackColor,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {rentalVehicleListsDetails.vehicle_per_day_price}
                    <Text style={styles.day}>/{translateData.day}</Text>
                  </Text>
                </View>
              </View>
              <View
                style={[
                  styles.border,
                  {
                    borderBottomColor: isDark
                      ? appColors.darkBorder
                      : appColors.border,
                  },
                ]}
              />

              <View
                style={[styles.carDetails, { flexDirection: viewRTLStyle }]}
              >
                {carDetails?.map((detail, index) => (
                  <View
                    key={index}
                    style={[
                      styles.detailIcon,
                      { flexDirection: viewRTLStyle },
                      {
                        backgroundColor: isDark
                          ? appColors.bgDark
                          : appColors.lightGray,
                      },
                    ]}
                  >
                    <detail.Icon
                      color={
                        isDark ? appColors.darkText : appColors.regularText
                      }
                    />
                    <Text
                      style={[
                        styles.detailTitle,
                        {
                          color: isDark
                            ? appColors.iconColor
                            : appColors.iconColor,
                        },
                      ]}
                    >
                      {detail.title}
                    </Text>
                  </View>
                ))}
              </View>
              <Text
                style={[
                  styles.title,
                  external.mt_5,
                  {
                    color: isDark
                      ? appColors.whiteColor
                      : appColors.primaryText,
                  },
                ]}
              >
                {translateData.moreInfoText || "More Information"}
              </Text>
              {rentalVehicleListsDetails?.interior?.map(
                (detail: any, index: number) => (
                  <View
                    key={index}
                    style={{
                      flexDirection: viewRTLStyle,
                      alignItems: "center",
                    }}
                  >
                    <View
                      style={[
                        styles.smalldot,
                        { backgroundColor: appColors.iconColor },
                      ]}
                    />
                    <Text style={styles.description}>{` ${detail}`}</Text>
                  </View>
                )
              )}
            </View>
          </View>
        </View>

        <View style={{ paddingHorizontal: windowWidth(20) }}>
          <Text
            style={[
              styles.title,
              external.mt_15,
              {
                color: isDark ? appColors.whiteColor : appColors.primaryText,
                fontSize: fontSizes.FONT21,
              },
            ]}
          >
            {translateData.billSummary}
          </Text>
          <View
            style={{
              backgroundColor: isDark
                ? appColors.primaryText
                : appColors.whiteColor,
              marginTop: windowHeight(5),
              paddingHorizontal: windowWidth(15),
              paddingVertical: windowHeight(13),
              borderRadius: windowWidth(20),
              paddingTop: windowHeight(7),
            }}
          >
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                marginTop: windowHeight(5),
              }}
            >
              <Text
                style={{
                  fontFamily: appFonts.regular,
                  color: appColors.iconColor,
                }}
              >
                {translateData.vehicleFare}
              </Text>
              <Text
                style={{
                  fontFamily: appFonts.regular,
                  color: isDark ? appColors.darkText : appColors.primaryText,
                }}
              >
                {rentalVehicleListsDetails?.currency_symbol}
                {rentalVehicleListsDetails?.charge?.vehicle_rent} (
                {`${rentalVehicleListsDetails?.charge?.no_of_days} day`})
              </Text>
            </View>
            {getDriver && (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginTop: windowHeight(3),
                }}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: appColors.iconColor,
                  }}
                >
                  {translateData.driverFare}
                </Text>
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: isDark ? appColors.darkText : appColors.primaryText,
                  }}
                >
                  {rentalVehicleListsDetails?.currency_symbol}
                  {rentalVehicleListsDetails?.charge?.driver_rent} (
                  {`${rentalVehicleListsDetails?.charge?.no_of_days} day`})
                </Text>
              </View>
            )}
            {rentalVehicleListsDetails?.charge?.platform_fee > 0 && (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginTop: windowHeight(3),
                }}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: appColors.iconColor,
                  }}
                >
                  {translateData.platformFees}
                </Text>
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: isDark ? appColors.darkText : appColors.primaryText,
                  }}
                >
                  {rentalVehicleListsDetails?.currency_symbol}
                  {rentalVehicleListsDetails?.charge?.platform_fee}
                </Text>
              </View>
            )}
            {rentalVehicleListsDetails?.charge?.tax && (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginTop: windowHeight(3),
                }}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: appColors.iconColor,
                  }}
                >
                  {translateData.tax}
                </Text>
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: isDark ? appColors.darkText : appColors.primaryText,
                  }}
                >
                  {rentalVehicleListsDetails?.currency_symbol}
                  {rentalVehicleListsDetails?.charge?.tax}
                </Text>
              </View>
            )}
            {rentalVehicleListsDetails?.charge?.commission && (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginTop: windowHeight(3),
                }}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: appColors.iconColor,
                  }}
                >
                  {translateData.commission}
                </Text>
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: isDark ? appColors.darkText : appColors.primaryText,
                  }}
                >
                  {rentalVehicleListsDetails?.currency_symbol}
                  {rentalVehicleListsDetails?.charge?.commission}
                </Text>
              </View>
            )}
            <View
              style={{
                borderBottomWidth: 1,
                borderColor: isDark ? appColors.darkBorder : appColors.border,
                borderStyle: "dashed",
                marginVertical: windowHeight(5),
              }}
            />
            <View
              style={{ flexDirection: "row", justifyContent: "space-between" }}
            >
              <Text
                style={{
                  fontFamily: appFonts.regular,
                  color: appColors.iconColor,
                }}
              >
                {translateData.total}
              </Text>
              <Text
                style={{
                  color: appColors.online,
                  fontFamily: appFonts.medium,
                  fontSize: fontSizes.FONT20,
                }}
              >
                {rentalVehicleListsDetails?.currency_symbol}
                {rentalVehicleListsDetails?.charge?.total}
              </Text>
            </View>
          </View>

          <TouchableOpacity
            style={[external.mv_15]}
            activeOpacity={0.7}
            disabled={bookLoading}
          >
            <Button
              title={translateData.bookNow}
              onPress={bookRental}
              loading={bookLoading}
            />
          </TouchableOpacity>
        </View>
      </ScrollView>

      {isBottomSheetVisible && (
        <BottomSheet
          ref={bottomSheetRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            width: "13%",
          }}
          enablePanDownToClose={true}
          backdropComponent={({ style }) => (
            <View style={[style, { backgroundColor: "rgba(0, 0, 0, 0.5)" }]} />
          )}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.bgDark : appColors.whiteColor,
          }}
        >
          <BottomSheetView style={{ paddingHorizontal: windowHeight(14) }}>
            <View style={styles.imageWrapper}>
              <AnimatedCircularProgress
                size={100}
                width={10}
                fill={(1 - secondsLeft / totalSeconds) * 100}
                tintColor={appColors.primary}
                backgroundColor={appColors.loaderBackground}
                rotation={0}
                lineCap="round"
              >
                {() => (
                  <Text style={styles.timerText}>
                    {formatTime(secondsLeft)}
                  </Text>
                )}
              </AnimatedCircularProgress>
            </View>

            <Text
              style={[
                styles.requestSuccess,
                {
                  color: isDark ? appColors.whiteColor : appColors.primaryText,
                },
              ]}
            >
              {translateData.requestSuccessfullySent}
            </Text>
            <Text style={styles.modelSuccess}>
              {translateData.requestSentSuccess}
            </Text>
            <View style={styles.modelButtonView}>
              <Button
                title={translateData.cancel}
                onPress={modelClose}
                backgroundColor={appColors.alertRed}
                loading={rideCancelLoading}
              />
            </View>
          </BottomSheetView>
        </BottomSheet>
      )}
    </View>
  );
}
