import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useTourStore } from './useTourStore.js';
import { X, Navigation, Image as ImageIcon, LogOut, Settings, Edit2, Trash2 } from 'lucide-react';
import { UserManagementModal } from './UserManagementModal.js';
import { CreateTourModal } from './CreateTourModal.js';

// Fix lỗi icon mặc định của Leaflet
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;

// Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
function RecenterMap({ position }: { position: [number, number] }) {
  const map = useMap();
  useEffect(() => {
    map.setView(position, map.getZoom());
  }, [position, map]);
  return null;
}

// Component Helper để theo dõi sự di chuyển của người dùng trên bản đồ
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: [number, number] = [center.lat, center.lng];
      
      setMapCenter(coords);
      // Lưu vị trí và mức zoom vào localStorage để sử dụng cho lần sau
      localStorage.setItem('map_view_state', JSON.stringify({ center: coords, zoom }));
    },
  });
  return null;
}

export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
  const { publicTours, fetchPublicTours, fetchTour, updateTour, deleteTour, mapCenter, setMapCenter } = useTourStore();

  // Khởi tạo vị trí từ localStorage nếu có, nếu không dùng mặc định (TP.HCM)
  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<[number, number]>(initialViewState?.center || [10.7769, 106.7009]);
  const [mapZoom] = useState(initialViewState?.zoom || 13);
  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

  useEffect(() => {
    fetchPublicTours();
    
    // Nếu không có vị trí lưu từ trước, mới yêu cầu lấy vị trí hiện tại của thiết bị
    if (!initialViewState) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const posArray: [number, number] = [pos.coords.latitude, pos.coords.longitude];
          setUserPos(posArray);
          setMapCenter(posArray);
        },
        () => console.log("Không thể lấy vị trí người dùng")
      );
    } else {
      // Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
      setMapCenter(initialViewState.center);
    }
  }, []);

  const handleEditTour = async (tour: any) => {
    const newTitle = window.prompt("Nhập tên mới cho Tour:", tour.title);
    if (newTitle && newTitle !== tour.title) {
      try {
        await updateTour(tour.id, { title: newTitle });
      } catch (err: any) {
        alert(err.message);
      }
    }
  };

  const handleDeleteTour = async (id: string) => {
    if (window.confirm("Bạn có chắc chắn muốn xóa Tour này và toàn bộ dữ liệu liên quan?")) {
      try {
        await deleteTour(id);
      } catch (err: any) {
        alert(err.message);
      }
    }
  };

  return (
    <div className="h-screen w-full relative">
      {/* Nút quay lại */}
      <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"
      >
        <X className="w-6 h-6 text-gray-800" />
      </button>

      {/* Nút đăng xuất - Chỉ hiển thị khi có user login */}
      {onLogout && (
        <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"
        >
          <LogOut className="w-5 h-5" />
          <span className="hidden sm:inline">Đăng xuất</span>
        </button>
      )}

      {/* Nút quản lý người dùng cho Admin */}
      {user?.isAdmin && (
        <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"
        >
          <Settings className="w-5 h-5" />
          <span className="hidden sm:inline">Quản lý hệ thống</span>
        </button>
      )}

      {/* Nút tạo Tour mới */}
      {user && (
        <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"
        >
          <Navigation className="w-5 h-5" />
          <span className="hidden sm:inline">Tạo Tour mới</span>
        </button>
      )}

      {/* Header Overlay */}
      <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">
        <div className="flex items-center gap-2">
          <Navigation className="w-4 h-4 text-blue-600" />
          <span className="font-bold text-gray-800">Đang khám phá khu vực của bạn</span>
        </div>
      </div>

      <MapContainer center={userPos} zoom={mapZoom} className="h-full w-full">
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        
        {/* Theo dõi di chuyển bản đồ */}
        <MapTracker />

        {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
        <RecenterMap position={userPos} />
        
        {publicTours.map((tour) => {
          const startLoc = tour.legs?.[0]?.locations?.[0];
          if (!startLoc) return null;

          const lastLeg = tour.legs?.[tour.legs.length - 1];
          const endLoc = lastLeg?.locations?.[lastLeg.locations.length - 1];

          const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;

          const commonPopup = (
            <Popup className="custom-popup">
              <div className="p-1 max-w-[200px]">
                <img src={tourImage} className="w-full h-32 object-cover rounded-lg mb-2" />
                <h4 className="font-bold text-gray-900 leading-tight mb-1">{tour.title}</h4>
                <button 
                  onClick={() => onViewTour(tour.id)}
                  className="text-xs font-bold text-blue-600 flex items-center gap-1">
                  Xem chi tiết hình ảnh <ImageIcon className="w-3 h-3" />
                </button>
                
                {user && (
                  <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
                    <button 
                      onClick={() => handleEditTour(tour)}
                      className="flex-1 flex items-center justify-center gap-1 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-[10px] font-bold hover:bg-blue-100 transition-colors">
                      <Edit2 className="w-3 h-3" /> Sửa
                    </button>
                    <button 
                      onClick={() => handleDeleteTour(tour.id)}
                      className="flex-1 flex items-center justify-center gap-1 py-1.5 bg-red-50 text-red-600 rounded-lg text-[10px] font-bold hover:bg-red-100 transition-colors">
                      <Trash2 className="w-3 h-3" /> Xóa
                    </button>
                  </div>
                )}
              </div>
            </Popup>
          );

          return (
            <React.Fragment key={tour.id}>
              {/* Start Marker - Blue with 'S' Badge */}
              <Marker 
                position={[startLoc.latitude, startLoc.longitude]}
                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]
                })}
              >
                {commonPopup}
              </Marker>

              {/* End Marker - Green with 'E' (Only if different from start) */}
              {endLoc && (endLoc.latitude !== startLoc.latitude || endLoc.longitude !== startLoc.longitude) && (
                <Marker 
                  position={[endLoc.latitude, endLoc.longitude]}
                  icon={L.divIcon({
                    className: 'custom-end-marker',
                    html: `
                      <div class="w-8 h-8 bg-green-600 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-xs font-black text-white hover:scale-110 transition-transform">
                        E
                      </div>
                    `,
                    iconSize: [32, 32],
                    iconAnchor: [16, 16]
                  })}
                >
                  {commonPopup}
                </Marker>
              )}
            </React.Fragment>
          );
        })}
      </MapContainer>

      {/* Admin Modal */}
      <UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />

      {/* Create Tour Modal */}
      <CreateTourModal 
        isOpen={isCreateModalOpen} 
        onClose={() => setIsCreateModalOpen(false)} 
        onSuccess={(tour) => {
          fetchTour(tour.id);
          onViewTour(tour.id);
        }}
      />
    </div>
  );
};