'use client';

import { Circle, InfoBox, Polygon } from '@/@react-google-maps/api';
import React, { Dispatch, useEffect, useState } from 'react';
import { GetAllPoiListResponseList } from './CustomGoogleMapInstance';
import { EditFilled } from '@ant-design/icons';
import { Button, Input, Modal, Tooltip } from 'antd';
import { useSelector } from 'react-redux';
import { RootState } from '@/app/_globalRedux/store';
import { useLazyEditPOIQuery } from '@/app/_globalRedux/services/trackingDashboard';
import { Geofence } from '@/app/_globalRedux/dashboard/poiSlice';

const circleOptions = {
	content: '123',
	boxStyle: {
		border: '1px solid black',
		textAlign: 'center',
		fontSize: '100pt',
		width: '50px',
	},
	fillColor: '#04A144',
	fillOpacity: 0.3,
	strokeWeight: 2,
	strokeColor: '#027832',
	clickable: false,
	editable: false,
	zIndex: 1,
};

export const PoiMarkers = ({
	bounds,
}: {
	bounds: {
		north: number | null;
		east: number | null;
		south: number | null;
		west: number | null;
	} | null;
}) => {
	const poiData = useSelector((state: RootState) => state.poiData);

	const [hover, setHover] = useState(-1);
	const [poiOpenIndex, setPoiIndex] = useState(-1);

	const togglePoiEditModal = (index: number) => {
		setPoiIndex(index);
	};

	// Filter only visible POIs
	const visiblePoi = poiData.poi.filter((item) => {
		if (!bounds || !bounds.east || !bounds.north || !bounds.south || !bounds.west) return true;
		return (
			item.gps_latitude <= bounds.north && item.gps_latitude >= bounds.south && item.gps_longitude <= bounds.east && item.gps_longitude >= bounds.west
		);
	});

	const visibleGeofence = poiData.geofenceList.filter((item) => {
		return item.points.some((point) => {
			if (!bounds || !bounds.east || !bounds.north || !bounds.south || !bounds.west) return true;
			return (
				point.gps_latitude <= bounds.north &&
				point.gps_latitude >= bounds.south &&
				point.gps_longitude <= bounds.east &&
				point.gps_longitude >= bounds.west
			);
		});
	});

	return (
		<>
			{visiblePoi && visiblePoi.length ? (
				visiblePoi
					.filter((item) => poiData.selectedPOI.id === -1 || item.id === poiData.selectedPOI.id)
					.map((item, index) => (
						<React.Fragment key={item.id}>
							<Circle center={{ lat: item.gps_latitude, lng: item.gps_longitude }} radius={item.gps_radius} options={circleOptions} />
							<InfoBox
								visible={true}
								position={new google.maps.LatLng(item.gps_latitude, item.gps_longitude)}
								options={{
									boxStyle: { overflow: 'visible' },
									disableAutoPan: true,
								}}
							>
								<div
									style={{
										fontWeight: '700',
										background: '#04A144',
										padding: '4px',
										borderRadius: '4px',
										position: 'absolute',
										left: '-20px',
										width: 'fit-content',
										display: 'flex',
										alignItems: 'center',
										gap: '5px',
										cursor: 'pointer',
										color: '#fff',
									}}
									onMouseEnter={() => setHover(index)}
									onMouseLeave={() => setHover(-1)}
								>
									<Tooltip title={`Name: ${item.name || ''},\nRadius: ${item.gps_radius}`} mouseEnterDelay={1}>
										<p>{item.name ? item.name.substring(0, 20) : ''}</p>
									</Tooltip>
									<Tooltip title='Edit POI' mouseEnterDelay={1}>
										<div style={{ opacity: index === hover ? 1 : 0, transition: 'opacity 0.3s' }} onClick={() => togglePoiEditModal(item.id)}>
											<EditFilled style={{ color: '#fff' }} />
										</div>
									</Tooltip>
								</div>
							</InfoBox>
							<EditPoi poiData={item} poiIndex={poiOpenIndex} setPoiIndex={setPoiIndex} />
						</React.Fragment>
					))
			) : (
				<></>
			)}

			{visibleGeofence && visibleGeofence.length ? (
				visibleGeofence
					.filter((item) => item.points.length > 0 && (poiData.selectedPOI.id === -1 || item.id === poiData.selectedPOI.id))
					.map((item: Geofence, index) => {
						return (
							<>
								<Polygon
									paths={item.points.map((point) => {
										return new google.maps.LatLng({ lat: point.gps_latitude, lng: point.gps_longitude });
									})}
									options={{
										strokeColor: '#027832',
										strokeOpacity: 0.8,
										strokeWeight: 2,
										fillColor: '#027832',
										fillOpacity: 0.35,
										clickable: false,
										editable: false,
										zIndex: 1,
									}}
								></Polygon>
								<InfoBox
									visible={true}
									key={index}
									position={new google.maps.LatLng({ lat: item.points[0].gps_latitude, lng: item.points[0].gps_longitude })}
									options={{
										boxStyle: {
											overflow: 'visible',
										},
										disableAutoPan: true,
									}}
								>
									<>
										<div
											style={{
												fontWeight: '700',
												background: '#04A144',
												padding: '4px',
												borderRadius: '4px',
												border: '0',
												textWrap: 'nowrap',
												zIndex: 0,
												position: 'absolute',
												left: '-20px',
												width: 'fit-content',
												display: 'flex',
												alignItems: 'center',
												justifyItems: 'space-between',
												gap: '5px',
												cursor: 'pointer',
												color: '#fff',
											}}
											onMouseEnter={() => setHover(index)}
											onMouseLeave={() => setHover(-1)}
										>
											<Tooltip title={`Name: ${item.name ? item.name.substring(0, 20) : ''}`} mouseEnterDelay={1}>
												<p>{item.name ? item.name.substring(0, 20) : ''}</p>
											</Tooltip>
											{/* <Tooltip title='Edit POI' mouseEnterDelay={1}>
												<div style={{ opacity: index === hover ? 1 : 0, transition: 'opacity 0.3s' }} onClick={() => togglePoiEditModal(item.id)}>
													<EditFilled style={{ color: '#fff' }} />
												</div>
											</Tooltip> */}
										</div>
									</>
								</InfoBox>
								{/* <EditPoi poiData={item} poiIndex={poiOpenIndex} setPoiIndex={setPoiIndex} /> */}
							</>
						);
					})
			) : (
				<></>
			)}
		</>
	);
};

const EditPoi = ({
	poiData,
	poiIndex,
	setPoiIndex,
}: {
	poiData: GetAllPoiListResponseList;
	poiIndex: number;
	setPoiIndex: Dispatch<React.SetStateAction<number>>;
}) => {
	const { userId, groupId } = useSelector((state: RootState) => state.auth);
	const [triggerEditPoi] = useLazyEditPOIQuery();

	const [promiseLoading, setPromiseLoading] = useState(false);
	const [radius, setRadius] = useState(0);
	const [poiName, setPoiName] = useState('');
	const [latLng, setLatLng] = useState({ lat: poiData.gps_latitude?.toFixed(2), lng: poiData.gps_longitude?.toFixed(2) });

	useEffect(() => {
		setPoiName(poiData.name);
		setRadius(poiData.gps_radius);
	}, [poiData]);

	const onFinish = () => {
		setPromiseLoading(true);
		triggerEditPoi({
			userId,
			poiName,
			radius,
			lat: Number(latLng.lat),
			lng: Number(latLng.lng),
			poiId: poiData.id,
		}).then(() => {
			setPromiseLoading(false);
			setPoiIndex(-1);
		});
	};

	return (
		<Modal title='Edit POI' open={poiIndex === poiData.id} onCancel={() => setPoiIndex(-1)} width={400} footer={null}>
			<div style={{ maxWidth: 600, display: 'flex', flexDirection: 'column', gap: '15px' }} className='select-none'>
				<div className='text-sm text-neutral-800 flex flex-col gap-2 mt-3 overflow-clip rounded-lg font-medium'>
					<div className=' pb-3 flex flex-col gap-2'>
						<div className='grid grid-cols-3 gap-2 items-center'>
							<div className='font-bold'>Name :</div>
							<div className='col-span-2'>
								<Input placeholder="Enter POI's Name" value={poiName} onChange={(e) => setPoiName(e.target.value)} />
							</div>

							<div className='font-bold'>Radius :</div>
							<div className='col-span-2'>
								<Input
									placeholder='Enter Radius in KM'
									value={radius}
									onChange={(e) => !isNaN(Number(e.target.value)) && setRadius(Number(e.target.value))}
								/>
							</div>

							<div className='font-bold'>Latitude :</div>
							<div className='col-span-2'>
								<Input value={latLng.lat} onChange={(e) => setLatLng({ ...latLng, lat: e.target.value })} />
							</div>

							<div className='font-bold'>Longitude :</div>
							<div className='col-span-2'>
								<Input value={latLng.lng} onChange={(e) => setLatLng({ ...latLng, lng: e.target.value })} />
							</div>
						</div>
					</div>
				</div>

				<div className='flex gap-2 justify-end mt-6'>
					<Button
						type='primary'
						onClick={() => onFinish()}
						loading={promiseLoading}
						disabled={!poiName && !radius && !latLng.lat && !latLng.lng && !userId}
					>
						Submit
					</Button>

					<Button onClick={() => setPoiIndex(-1)}>Cancel</Button>
				</div>
			</div>
		</Modal>
	);
};