import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, useMap, useMapEvents } from 'react-leaflet';
import _MarkerClusterGroup from 'react-leaflet-cluster';
const MarkerClusterGroup = _MarkerClusterGroup.default || _MarkerClusterGroup;
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useTourStore } from './useTourStore.js';
import { X, Navigation, LogOut, Settings } from 'lucide-react';
import { UserManagementModal } from './UserManagementModal.js';
import { CreateTourModal } from './CreateTourModal.js';
const DefaultIcon = L.icon({
    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
});
L.Marker.prototype.options.icon = DefaultIcon;
function RecenterMap({ position }) {
    const map = useMap();
    useEffect(() => {
        map.setView(position, map.getZoom());
    }, [position, map]);
    return null;
}
function MapTracker() {
    const setMapCenter = useTourStore(state => state.setMapCenter);
    useMapEvents({
        moveend: (e) => {
            const map = e.target;
            const center = map.getCenter();
            const zoom = map.getZoom();
            const coords = [center.lat, center.lng];
            setMapCenter(coords);
            localStorage.setItem('map_view_state', JSON.stringify({ center: coords, zoom }));
        },
    });
    return null;
}
export const ExploreMap = ({ onBack, onLogout, user, onViewTour }) => {
    const { publicTours, fetchPublicTours, fetchTour, setMapCenter } = useTourStore();
    const [initialViewState] = useState(() => {
        const saved = localStorage.getItem('map_view_state');
        if (saved) {
            try {
                return JSON.parse(saved);
            }
            catch (e) {
                return null;
            }
        }
        return null;
    });
    const [userPos, setUserPos] = useState(initialViewState?.center || [10.7769, 106.7009]);
    const [mapZoom] = useState(initialViewState?.zoom || 13);
    const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
    useEffect(() => {
        fetchPublicTours();
        if (!initialViewState) {
            navigator.geolocation.getCurrentPosition((pos) => {
                const posArray = [pos.coords.latitude, pos.coords.longitude];
                setUserPos(posArray);
                setMapCenter(posArray);
            }, () => console.log("Không thể lấy vị trí người dùng"));
        }
        else {
            setMapCenter(initialViewState.center);
        }
    }, []);
    return (_jsxs("div", { className: "h-screen w-full relative", children: [_jsx("button", { onClick: onBack, className: "absolute top-6 left-6 z-[1000] bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all", children: _jsx(X, { className: "w-6 h-6 text-gray-800" }) }), onLogout && (_jsxs("button", { onClick: onLogout, className: "absolute top-6 right-6 z-[1000] bg-white px-4 py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center gap-2 font-bold text-gray-700", children: [_jsx(LogOut, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "\u0110\u0103ng xu\u1EA5t" })] })), user?.isAdmin && (_jsxs("button", { onClick: () => setIsAdminModalOpen(true), className: "absolute top-6 right-40 z-[1000] bg-blue-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Settings, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "Qu\u1EA3n l\u00FD h\u1EC7 th\u1ED1ng" })] })), user && (_jsxs("button", { onClick: () => setIsCreateModalOpen(true), className: "absolute top-6 right-80 z-[1000] bg-green-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Navigation, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "T\u1EA1o Tour m\u1EDBi" })] })), _jsx("div", { className: "absolute top-6 left-20 z-[1000] bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl shadow-xl border border-white/20 hidden sm:block", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Navigation, { className: "w-4 h-4 text-blue-600" }), _jsx("span", { className: "font-bold text-gray-800", children: "\u0110ang kh\u00E1m ph\u00E1 khu v\u1EF1c c\u1EE7a b\u1EA1n" })] }) }), _jsxs(MapContainer, { center: userPos, zoom: mapZoom, className: "h-full w-full", preferCanvas: true, children: [_jsx(TileLayer, { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '\u00A9 OpenStreetMap contributors' }), _jsx(MapTracker, {}), _jsx(RecenterMap, { position: userPos }), _jsx(MarkerClusterGroup, { chunkedLoading: true, children: publicTours.map((tour) => {
                            const startLoc = tour.legs?.[0]?.locations?.[0];
                            const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
                            const markerPos = startLoc
                                ? [startLoc.latitude, startLoc.longitude]
                                : userPos;
                            return (_jsx(React.Fragment, { children: _jsx(Marker, { position: markerPos, eventHandlers: {
                                        click: () => onViewTour(tour.id)
                                    }, icon: L.divIcon({
                                        className: 'custom-bubble',
                                        html: `
                      <div class="relative group">
                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
                          <img src="${tourImage}" class="w-full h-full object-cover" />
                        </div>
                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
                          S
                        </div>
                      </div>
                    `,
                                        iconSize: [48, 48],
                                        iconAnchor: [24, 24]
                                    }) }) }, tour.id));
                        }) })] }), _jsx(UserManagementModal, { isOpen: isAdminModalOpen, onClose: () => setIsAdminModalOpen(false) }), _jsx(CreateTourModal, { isOpen: isCreateModalOpen, onClose: () => setIsCreateModalOpen(false), onSuccess: (tour) => {
                    fetchTour(tour.id);
                    onViewTour(tour.id);
                } })] }));
};
//# sourceMappingURL=ExploreMap.js.map