'use client';

import { useSearchParams } from 'next/navigation';
import React, { useState, useEffect } from 'react';
import type { Icon } from 'leaflet';
import dynamic from 'next/dynamic';
import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
import Button from '@/components/button/PrimaryButton';
import InputField from '@/components/input/InputField';
import { Skeleton } from '@/components/ui/skeleton';

const CustomMap = dynamic(
    () => import('@/components/map/CustomMap'),
    { ssr: false } // Leaflet requires browser APIs
);

export interface MarkerData {
    position: [number, number];
    title: string;
    icon?: Icon;
}

export interface NominatimReverseGeocodingResponse {
    place_id: number
    licence: string
    osm_type: string
    osm_id: number
    lat: string
    lon: string
    class: string
    type: string
    place_rank: number
    importance: number
    addresstype: string
    name: string
    display_name: string
    address: NominatimReverseGeocodingResponseAddress
    boundingbox: string[]
}

export interface NominatimReverseGeocodingResponseAddress {
    road: string
    neighbourhood: string
    suburb: string
    city: string
    district: string
    county: string
    province: string
    "ISO3166-2-lvl4": string
    postcode: string
    country: string
    state: string
    country_code: string
}

function OrderTrackingPage() {
    const params = useSearchParams();
    const [selectedPosition, setSelectedPosition] = useState<[number, number] | null>(null);
    const [selectedAddress, setSelectedAddress] = useState<NominatimReverseGeocodingResponse | null>(null);
    const [markers, setMarkers] = useState<MarkerData[]>([]);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
    const [bottomSheet1State, setBottomSheet1State] = useState<boolean>(false);
    const [bottomSheet2State, setBottomSheet2State] = useState<boolean>(false);

    // Example initial position (Tehran)
    const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);

    useEffect(() => {
        // Initialize markers on the client side
        const initializeMarkers = async () => {
            // Dynamic import of Leaflet on the client side
            const L = (await import('leaflet')).default;

            setMarkers([
                {
                    position: initialPosition,
                    title: 'Restaurant Location',
                    icon: new L.Icon({
                        iconUrl: '/icons/restaurant-marker.png',
                        iconSize: [25, 41],
                        iconAnchor: [12, 41],
                        popupAnchor: [1, -34],
                    })
                }
            ]);
        };

        initializeMarkers();
    }, [initialPosition]);

    const handlePositionSelect = (position: [number, number]) => {
        setSelectedPosition((prev) => {
            if(prev === position) {
                return prev;
            }
            setSelectedAddress(null); 
            return position;
        });
        setBottomSheet1State(position && true);
        setBottomSheet2State(false);
        // You can handle the selected position here
        console.log('Selected position:', position);
    };

    const handleZoomChange = (zoom: number) => {
        console.log('Zoom level:', zoom);
    };

    const handleMapClick = (e: L.LeafletMouseEvent) => {
        console.log('Map clicked at:', e.latlng);
    };

    const toggleBottomSheet1 = () => {
        setBottomSheet1State((prev) => !prev);
    }

    const toggleBottomSheet2 = async () => {
        if (!selectedPosition) {
            setBottomSheet1State(false);
            setBottomSheet2State(false);
            return;
        }
        setBottomSheet1State(false);
        setBottomSheet2State((prev) => !prev);
        if (!bottomSheet2State) {
            const address = await fetchAddressFromCoordinates(selectedPosition[0], selectedPosition[1]);
            setSelectedAddress(address);
        }
    }

    const fetchAddressFromCoordinates = async (lat: unknown, lon: unknown) => {
        try {
            const response = await fetch(
                `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&addressdetails=1&accept-language=fa`
            );
            const data = await response.json();
            return data; // Full formatted address
        } catch (error) {
            console.error('Error fetching address:', error);
            return null;
        }
    };

    const submitAddressAction = () => {

    }

    return (
        <div className="fixed inset-0 bg-gray-50">

            <div className="absolute inset-0">
                <CustomMap
                    initialPosition={mapCenter}
                    zoom={14}
                    markers={markers}
                    onPositionSelect={handlePositionSelect}
                    onZoomChange={handleZoomChange}
                    onClick={handleMapClick}
                />
            </div>

            {/* {selectedPosition && (
                <div className="selected-location-indicator">
                    <p className="font-iran">موقعیت انتخاب شده: {selectedPosition[0].toFixed(4)}, {selectedPosition[1].toFixed(4)}</p>
                </div>
            )} */}

            <div className="absolute bottom-0 left-0 right-0 z-[1000]">
                <div className='relative w-full h-full' >
                    <AnimatedBottomSheet
                        bgOpacity={0}
                        inDuration={0}
                        blurOpacity={null}
                        noBlur
                        visible={bottomSheet1State}
                        showCloseButton={false}
                        showTitle={false}
                        overrideClassName='!pt-6 bg-container!'
                    >
                        <div className='grid grid-cols-2 gap-4 px-4'>
                            <Button
                                onClick={toggleBottomSheet2}
                            >
                                انتخاب
                            </Button>
                            <Button
                                onClick={toggleBottomSheet1}
                                className='bg-disabled! text-foreground!'
                            >
                                انصراف
                            </Button>
                        </div>
                    </AnimatedBottomSheet>

                    <AnimatedBottomSheet
                        bgOpacity={0}
                        inDuration={0}
                        blurOpacity={null}
                        noBlur
                        visible={bottomSheet2State}
                        title='آدرس'
                        onClick={toggleBottomSheet2}
                        overrideClassName='bg-container!'
                    >
                        <form action={submitAddressAction}>
                            <div className='px-4'>
                                <div className='px-4 mt-2 bg-container'>
                                    <span className='text-sm'>
                                        {!selectedAddress ?
                                            <Skeleton
                                                className='h-6 w-full'
                                            />
                                            :
                                            [
                                                selectedAddress.address.state ?? selectedAddress.address.province,
                                                selectedAddress.address.city,
                                                selectedAddress.address.neighbourhood,
                                                !selectedAddress.address.road.startsWith('میدان') &&
                                                    !selectedAddress.address.road.startsWith('بلوار') &&
                                                    !selectedAddress.address.road.startsWith('خیابان') &&
                                                    !selectedAddress.address.road.startsWith('کوچه') ?
                                                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
                                                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
                                                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
                                                                selectedAddress.address.road : selectedAddress.address.road
                                            ].filter(x => x).join('، ')
                                        }
                                    </span>
                                    <hr className='border border-border mt-3 mb-10 ' />
                                    <InputField
                                        htmlFor={'addressTitle'}
                                        labelText={'عنوان آدرس'}
                                        placeholder='مثال: منزل، محل کار ...'
                                        className='bg-inherit'
                                        onChange={() => { }}
                                    />
                                    <InputField
                                        htmlFor={'addressDetails'}
                                        labelText={'جزئیات آدرس'}
                                        placeholder='میدان باغ ملی، مجتمع آسمان، واحد 12، پلاک 1234567890'
                                        className='bg-inherit mt-8'
                                        onChange={() => { }}
                                    />
                                </div>
                                <div className='grid grid-cols-2 gap-4 mt-16'>
                                    <Button
                                        type='submit'>
                                        تایید
                                    </Button>
                                    <Button
                                        type='button'
                                        onClick={toggleBottomSheet2}
                                        className='bg-disabled! text-foreground!'
                                    >
                                        انصراف
                                    </Button>
                                </div>
                            </div>
                        </form>
                    </AnimatedBottomSheet>
                </div>
            </div>
        </div>
    );
}

export default OrderTrackingPage;