'use client';

import { useMap } from '@vis.gl/react-google-maps';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '@/app/_globalRedux/store';
import paths from '../../../_assets/stoppagesPaths';
import convertMinutesToHoursString from '@/app/helpers/convertMinutesToHoursString';

export const StoppageMarkersImperative = () => {
	const map = useMap();
	const vehicleItnaryWithPath = useSelector((state: RootState) => state.vehicleItnaryWithPath);
	const selectedVehicleHistoryTab = useSelector((state: RootState) => state.selectedVehicle.selectedVehicleHistoryTab);
	const historyReplay = useSelector((state: RootState) => state.historyReplay);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);

	useEffect(() => {
		if (!map) return;
		if (historyReplay.isHistoryReplayPlaying) return;

		// Determine data source based on selected tab
		let dataSource;
		if (selectedVehicleHistoryTab === 'Diagnostic' || selectedVehicleHistoryTab === 'Running' || selectedVehicleHistoryTab === 'Stoppages') {
			dataSource = vehicleItnaryWithPath.diagnosticData || [];
		} else {
			dataSource = vehicleItnaryWithPath.data || [];
		}

		// Filter, reverse, and limit to 200 stoppages
		const stoppages = dataSource
			.filter((item) => item.mode === 'Idle')
			.reverse()
			.slice(0, 200);

		// Validate conditions before creating markers
		const shouldCreateMarkers =
			vehicleItnaryWithPath.patharry &&
			vehicleItnaryWithPath.patharry.length > 0 &&
			vehicleItnaryWithPath.patharry[0].lat !== 0 &&
			(selectedVehicle.vId !== 0 || selectedVehicle.vehicleTrip.sys_service_id !== 0) &&
			historyReplay.isHistoryReplayMode;

		if (shouldCreateMarkers && stoppages.length > 0) {
			// Create markers
			const markers = stoppages.map((stoppage, index) => {
				// Construct SVG path for marker icon (only indices 0-199 are used due to slice)
				const path = `M43.6392 22.0002C43.6392 33.9484 33.9533 43.6343 22.0051 43.6343C10.057 43.6343 0.371094 33.9484 0.371094 22.0002C0.371094 10.0521 10.057 0.366211 22.0051 0.366211C33.9533 0.366211 43.6392 10.0521 43.6392 22.0002Z${paths[index]}`;

				const marker = new google.maps.Marker({
					position: { lat: stoppage.fromLat, lng: stoppage.fromLng },
					map: map,
					icon: {
						path: path,
						scale: 0.6,
						strokeWeight: 0.7,
						strokeColor: 'white',
						strokeOpacity: 1,
						fillColor: '#FC7873',
						fillOpacity: 1,
						scaledSize: new window.google.maps.Size(30, 30),
						anchor: { x: 20, y: 30, equals: () => false },
					},
					title: `Stop ${index}`,
					zIndex: 99,
				});

				// Add click listener to center map and open InfoWindow
				marker.addListener('click', () => {
					map.setCenter({ lat: stoppage.fromLat, lng: stoppage.fromLng });
					infoWindow.setContent(generateInfoWindowContent(stoppage));
					infoWindow.open(map, marker);
				});

				return marker;
			});

			// Create a single InfoWindow instance
			const infoWindow = new google.maps.InfoWindow();
			//
			// Cleanup: Remove markers and close InfoWindow
			return () => {
				markers.forEach((marker) => marker.setMap(null));
				infoWindow.close();
			};
		}
	}, [map, vehicleItnaryWithPath, selectedVehicleHistoryTab, historyReplay, selectedVehicle]);

	return null;
};

// Generate HTML content for the InfoWindow
function generateInfoWindowContent(stoppage: any) {
	return `
    <div class="text-xs text-gray-800 flex flex-col gap-1 max-w-80">
      <div class="flex justify-between mb-2 absolute top-5">
        <p class="font-medium text-lg">Stoppage Information</p>
      </div>
      <div class="grid grid-cols-5 gap-2 grid-flow-row-dense text-sm font-normal">
        <div class="col-span-2 font-medium text-neutral-700">Start Time:</div>
        <div class="col-span-3">${stoppage.fromTime}</div>
        <div class="col-span-2 font-medium text-neutral-700">To Time:</div>
        <div class="col-span-3">${stoppage.toTime}</div>
        <div class="col-span-2 font-medium text-neutral-700">Stopped Time:</div>
        <div class="col-span-3">${convertMinutesToHoursString(stoppage.totalTimeInMIN)}</div>
        <div class="col-span-2 font-medium text-neutral-700">Lat | Lng:</div>
        <div class="col-span-3">
          <a href="https://www.google.com/maps/search/${stoppage.fromLat},${stoppage.fromLng}" target="_blank" rel="noreferrer">
            ${stoppage.fromLat?.toFixed(2)} | ${stoppage.fromLng?.toFixed(2)}
          </a>
        </div>
        <div class="col-span-2 font-medium text-neutral-700">Address:</div>
        <div class="col-span-3">${stoppage.startLocation ? stoppage.startLocation.replaceAll('_', ' ') : ''}</div>
      </div>
    </div>
  `;
}