'use client';

export const revalidate = 0;

import { LegacyRef, MutableRefObject, ReactNode, useEffect, useRef, useState } from 'react';
import { VehicleOverviewCard } from './VehicleOverviewCard';
import { useGetVehiclesByStatusQuery } from '@/app/_globalRedux/services/trackingDashboard';
import { useInView } from 'react-intersection-observer';
import { GetListVehiclesMobResponse, VehicleData } from '@/app/_globalRedux/services/types/getListVehiclesmobTypes';
import { setAllMarkers, updateMarkersBasedOnStatus } from '@/app/_globalRedux/dashboard/markersSlice';
import { VehicleOverviewCardSkeleton } from './VehicleOverviewCardSkeleton';
import { Skeleton, Tooltip } from 'antd';
import { RootState } from '@/app/_globalRedux/store';
import { useDispatch, useSelector } from 'react-redux';
import { DownloadOutlined } from '@ant-design/icons';
import moment from 'moment';
import { DownloadReportsModal } from '../common';
import { DownloadReportTs } from '../common/CustomTableN';
import { setIsLoadingScreenActive } from '@/app/_globalRedux/dashboard/mapSlice';
import { isCheckInAccount } from '@/app/helpers/isCheckInAccount';
import compareActiveInActiveCategories from '@/app/helpers/compareActiveInActiveCategories';

export const ActiveInActiveList = () => {
	const { userId, groupId, parentUser: pUserId } = useSelector((state: RootState) => state.auth);
	const markers = useSelector((state: RootState) => state.markers);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const selectedDashboardVehicle = useSelector((state: RootState) => state.selectedDashboardVehicle);
	const selectedVehicleListTab = useSelector((state: RootState) => state.selectedVehicleListTab);
	const { mapYourVehicleIndex, driverInfoIndex, createPOIIndex } = useSelector((state: RootState) => state.vehicleOverviewOptions);
	const { isLoadingScreenActive } = useSelector((state: RootState) => state.map);

	const [currentPage, setCurrentPage] = useState(10);
	const dispatch = useDispatch();

	const [ref, inView] = useInView({
		threshold: 0,
	});

	const { isFetching: isFetchingVehicle, data: vehicleData } = useGetVehiclesByStatusQuery(
		{
			userId,
			token: groupId,
			pUserId,
			mode: '',
		},
		{
			skip:
				!groupId ||
				!userId ||
				selectedVehicle.vId !== 0 ||
				selectedDashboardVehicle.length > 0 ||
				mapYourVehicleIndex !== -1 ||
				driverInfoIndex !== -1 ||
				createPOIIndex !== -1,

			refetchOnFocus: false,
			refetchOnMountOrArgChange: false,
		}
	);

	let sortedData: MutableRefObject<GetListVehiclesMobResponse | undefined> = useRef();

	const updateStatesOnData = (data: GetListVehiclesMobResponse) => {
		if (data && data.message !== 'Something wrong happend') {
			let tempData;

			selectedVehicleListTab === 'ALL'
				? (tempData = data.list
						.filter((vehicle) => vehicle.vId !== null)
						.slice()
						.sort(compareActiveInActiveCategories))
				: selectedVehicleListTab === 'stopped'
				? (tempData = data.list
						.filter((vehicle) => vehicle.vId !== null)
						.slice()
						.sort((vehicle1, vehicle2) => {
							const vehicle1Hours = Number(vehicle1.gpsDtl.modeTimeFormat?.split(':')[0] || 0) || 0;
							const vehicle1MinutesToHours = Number(vehicle1.gpsDtl.modeTimeFormat?.split(':')[1] || 0) / 60 || 0;

							const vehicle2Hours = Number(vehicle2.gpsDtl.modeTimeFormat?.split(':')[0] || 0) || 0;
							const vehicle2MinutesToHours = Number(vehicle2.gpsDtl.modeTimeFormat?.split(':')[1] || 0) / 60 || 0;

							const vehicle1HoursToMinutes = vehicle1Hours + vehicle1MinutesToHours;
							const vehicle2HoursToMinutes = vehicle2Hours + vehicle2MinutesToHours;

							if (vehicle1HoursToMinutes > vehicle2HoursToMinutes) {
								return 1;
							} else if (vehicle1HoursToMinutes < vehicle2HoursToMinutes) {
								return -1;
							}

							return 0;
						}))
				: (tempData = data.list.filter((vehicle) => vehicle.vId !== null).slice());

			tempData = tempData.filter((vehicle) => {
				return selectedVehicleListTab === 'active'
					? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() === new Date().getDate()
					: selectedVehicleListTab === 'inactive'
					? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() !== new Date().getDate()
					: true;
			});

			sortedData.current = {
				...data,
				list: tempData,
			};

			if (data && Array.isArray(data.list) && markers.length === 0 && tempData) {
				dispatch(setAllMarkers(tempData.map((vehicle) => ({ ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }))));
			} else if (data && Array.isArray(data.list) && markers.length && tempData) {
				dispatch(
					updateMarkersBasedOnStatus(
						tempData.map((vehicle) =>
							markers.find((marker) => marker.vId === vehicle.vId)
								? { ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }
								: { ...vehicle, visibility: false, isMarkerInfoWindowOpen: false }
						)
					)
				);
			} else {
				dispatch(setAllMarkers(markers.map((marker) => ({ ...marker, visibility: false }))));
			}
		}
	};

	useEffect(() => {
		if (inView) {
			setTimeout(() => setCurrentPage((prev) => prev + 10), 2000);
		}
	}, [inView]);

	const [updatedVehicleIndex, setUpdatedVehicleIndex] = useState(0);

	useEffect(() => {
		if (markers.length && selectedVehicle.vId !== 0 && sortedData.current) {
			const updatedVehicle = markers.find((marker) => marker.vId === selectedVehicle.vId);

			if (!updatedVehicle) return;

			sortedData.current = {
				...vehicleData,
				list: [
					...sortedData.current.list
						.filter((vehicle) => {
							return selectedVehicleListTab === 'active'
								? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() === new Date().getDate()
								: selectedVehicleListTab === 'inactive'
								? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() !== new Date().getDate()
								: true;
						})
						.map((sortedVehicle) => (sortedVehicle.vId === updatedVehicle.vId ? { ...updatedVehicle } : { ...sortedVehicle })),
				],
				message: '',
				success: true,
			};
		} else if (
			markers.length &&
			selectedVehicle.vId === 0 &&
			sortedData.current &&
			selectedDashboardVehicle.length &&
			updatedVehicleIndex < selectedDashboardVehicle.length
		) {
			const updatedVehicle = markers.find((marker) => marker.vId === selectedDashboardVehicle[updatedVehicleIndex].vehicleData.vId);

			if (!updatedVehicle) return;

			sortedData.current = {
				...vehicleData,
				list: [
					...sortedData.current.list
						.filter((vehicle) => {
							return selectedVehicleListTab === 'active'
								? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() === new Date().getDate()
								: selectedVehicleListTab === 'inactive'
								? new Date(vehicle.gpsDtl.latLngDtl.gpstime).getDate() !== new Date().getDate()
								: true;
						})
						.map((sortedVehicle) => (sortedVehicle.vId === updatedVehicle.vId ? { ...updatedVehicle } : { ...sortedVehicle })),
				],
				message: '',
				success: true,
			};
		}

		if (updatedVehicleIndex < selectedDashboardVehicle.length - 1) {
			setUpdatedVehicleIndex((prev) => prev + 1);
		} else {
			setUpdatedVehicleIndex(0);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [markers, selectedDashboardVehicle]);
	const [prevSelectedVehicleStatus, setPrevSelectedVehicleStatus] = useState(selectedVehicleListTab);
	const [isUnintialized, setIsUnintialized] = useState(true);

	useEffect(() => {
		if (vehicleData) {
			if (selectedVehicleListTab !== prevSelectedVehicleStatus || isUnintialized) {
				updateStatesOnData(vehicleData);
				setPrevSelectedVehicleStatus(selectedVehicleListTab);
				setIsUnintialized(false);
			}
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedVehicleListTab, vehicleData]);

	useEffect(() => {
		if (!isLoadingScreenActive && selectedDashboardVehicle.length === 0) {
			vehicleData && updateStatesOnData(vehicleData);
		}

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isLoadingScreenActive]);

	const isFetching = isFetchingVehicle;

	if (isFetching) {
		return (
			<WrapperComponent refs={ref} isFetching={isFetching}>
				<VehicleOverviewCardSkeleton />
			</WrapperComponent>
		);
	}

	return (
		<WrapperComponent refs={ref} currentPage={currentPage} list={sortedData.current?.list || []} isFetching={isFetching}>
			{sortedData.current && selectedDashboardVehicle.length
				? sortedData.current.list
						.filter((vehicle) => selectedDashboardVehicle.find((v) => v.vehicleData.vId === vehicle.vId))
						.slice(0, currentPage)
						.sort((a, b) => a.vId - b.vId)
						.map((vehicle) => (
							<span key={vehicle.vId}>
								<VehicleOverviewCard vehicleData={vehicle} />
							</span>
						))
				: sortedData.current
				? sortedData.current.list.slice(0, currentPage).map((vehicle) => (
						<span key={vehicle.vId}>
							<VehicleOverviewCard vehicleData={vehicle} />
						</span>
				  ))
				: 'No Vehicle Found'}
		</WrapperComponent>
	);
};

const WrapperComponent = ({
	children,
	refs,
	currentPage,
	list,
	isFetching,
}: {
	children: ReactNode;
	refs: LegacyRef<HTMLDivElement>;
	currentPage?: number;
	list?: VehicleData[] | [];
	isFetching: boolean;
}) => {
	const collapseVehicleStatusToggle = useSelector((state: RootState) => state.collapseVehicleStatusToggle);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const selectedDashboardVehicle = useSelector((state: RootState) => state.selectedDashboardVehicle);
	const markers = useSelector((state: RootState) => state.markers);
	const { accessLabel, userId, parentUser } = useSelector((state: RootState) => state.auth);
	const [vehicleCountPercentage, setVehicleCountPercentage] = useState({
		all: 0,
		inGeofence: 0,
		outsideGeofence: 0,
	});

	useEffect(() => {
		if (markers) {
			const allVehicles = markers.length;
			const inPoiVehicles = markers.filter((marker) =>
				marker.gpsDtl.latLngDtl.poi ? marker.gpsDtl.latLngDtl.poi?.replaceAll('_', ' ') === 'Inside POI' : false
			).length;
			const outsideGeofenceVehicles = allVehicles - inPoiVehicles;

			const inGeofencePercentage = Math.round((inPoiVehicles / allVehicles) * 100);
			const outsideGeofencePercentage = Math.round((outsideGeofenceVehicles / allVehicles) * 100);
			const allVehiclesPercentage = Math.round((allVehicles / allVehicles) * 100);

			setVehicleCountPercentage({
				all: allVehiclesPercentage,
				inGeofence: inGeofencePercentage,
				outsideGeofence: outsideGeofencePercentage,
			});
		}
	}, [markers]);

	const [updateDate, setUpdateDate] = useState('0');

	const dispatch = useDispatch();

	useEffect(() => {
		if (isFetching) {
			dispatch(setIsLoadingScreenActive(true));
			setUpdateDate(moment().format('HH:mm:ss'));
		} else {
			dispatch(setIsLoadingScreenActive(false));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isFetching]);

	const [downloadReport, setDownloadReport] = useState<DownloadReportTs | undefined>();
	const { type: VehicleListType } = useSelector((state: RootState) => state.isVehicleStatusOrTripStatusActive);

	return (
		<div className='bg-neutral-green relative'>
			<div className={`flex items-center justify-between px-5`}>
				<p className='text-gray-600 font-semibold pl-2 text-[13px]'>
					{isCheckInAccount(Number(userId))
						? 'Check-In'
						: VehicleListType === 'trip' || VehicleListType === 'vehicle-allocation-trip'
						? 'Trips'
						: 'Vehicles'}{' '}
					Count: {selectedDashboardVehicle.length ? selectedDashboardVehicle.length : list && list.length}
				</p>

				<div className='flex items-center pr-2'>
					{selectedDashboardVehicle.length !== 0 && accessLabel !== 6 ? (
						<div className='bg-primary-green py-1 px-4 animate-pulse rounded-full mr-[10px]'>
							<p className='text-white font-semibold text-[11px]'>Live</p>
						</div>
					) : (
						<div className='text-[13px] text-gray-600 font-semibold flex'>
							<div>Updated At: </div>
							{isFetching || updateDate === '0' ? (
								<div className='w-[65px] pl-[5px]'>
									<div className='lds-ring ml-[2.5px]'>
										<div></div>
										<div></div>
										<div></div>
										<div></div>
									</div>
								</div>
							) : (
								<div className='w-[65px] text-nowrap ml-[3px]'> {updateDate}</div>
							)}
						</div>
					)}

					<div
						className={`bg-gray-600 h-[22px] w-[22px] flex justify-center items-center rounded-full  ${
							isFetching || updateDate === '0' ? 'cursor-progress' : 'cursor-pointer'
						}`}
					>
						<Tooltip title={`Download Check-In List Report`} mouseEnterDelay={1}>
							<DownloadOutlined
								style={{ color: '#F2F5F3' }}
								disabled={isFetching || updateDate === '0'}
								onClick={() => {
									if (list && list.length > 0) {
										let rows: any[] = list.map((item, index) => ({
											'S. No.': index + 1,
											Username: item.vehReg?.replaceAll('_', ' '),
											'Location Name': item.gpsDtl.latLngDtl.addr?.replaceAll('_', ' '),
											'Last Update': moment(new Date(item.gpsDtl.latLngDtl.gpstime)).format('DD-MM-YYYY HH:mm'),
											Mode: new Date(item.gpsDtl.latLngDtl.gpstime).getDate() === new Date().getDate() ? 'active' : 'inactive',
										}));

										const head = Object.keys(rows[0]);

										const body = rows.map((row) => Object.values(row));

										let columnsStyles: any = {};

										body[0].map((value: any, index) => {
											columnsStyles[index] = { cellWidth: value.toString().length > 10 ? 50 : 20 };
										});

										setDownloadReport({
											title: 'Check-In List Report',
											excel: { title: 'Check-In List Report', rows, footer: [] },
											pdf: {
												head: [head],
												body: body,
												title: 'Check-In List Report',
												pageSize: 'a3',
												userOptions: {
													columnStyles: columnsStyles,
												},
											},
										});
									}
								}}
							/>
						</Tooltip>
						<DownloadReportsModal downloadReport={downloadReport} setDownloadReport={setDownloadReport} />
					</div>
				</div>
			</div>
			{Number(userId) == 87364 || Number(parentUser) == 87364 ? (
				<div className=' text-gray-600 text-[13px] ml-[18px] mr-[26px]  rounded-md bg-white  py-2 mt-2 mb-1'>
					<p className='mx-5'>
						<span className='font-semibold'>Inside Geofence: </span>
						{vehicleCountPercentage.inGeofence}% | <span className='font-semibold'>Outside Geofence: </span>
						{vehicleCountPercentage.outsideGeofence}%
					</p>
				</div>
			) : null}
			<div
				className={`${
					Number(userId) == 87364 || Number(parentUser) == 87364 ? 'h-[calc(100vh-230px)]' : 'h-[calc(100vh-185px)]'
				} bg-neutral-green top-0 p-4 pt-0 scrollbar-thumb-thumb-green scrollbar-w-2  scrollbar-thumb-rounded-md scrollbar overflow-visible ${
					collapseVehicleStatusToggle ? 'opacity-0' : 'overflow-y-scroll'
				}`}
			>
				{children}
				{currentPage && list && selectedVehicle.searchType !== 'GLOBAL' ? (
					<div className=' w-full px-4 my-4' ref={refs}>
						{selectedDashboardVehicle.length ? (
							currentPage < selectedDashboardVehicle.length
						) : currentPage < list.length ? (
							<Skeleton className='pt-5' active />
						) : (
							''
						)}
					</div>
				) : null}
			</div>
		</div>
	);
};