<template>
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
          <p class="text-sm text-gray-600 mt-1">Ubicación geográfica de proyectos en Comalcalco, Tabasco</p>
        </div>

        <!-- Filtros por estado -->
        <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-2">
            <input
              id="sin-avances"
              v-model="filters.sin_avances"
              @change="updateMarkers"
              type="checkbox"
              class="rounded border-gray-300 text-red-600 focus:ring-red-500"
            />
            <label for="sin-avances" class="flex items-center text-sm text-gray-700">
              <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
              Sin avances ({{ counters.sin_avances.count }})
            </label>
          </div>

          <div class="flex items-center space-x-2">
            <input
              id="abiertas"
              v-model="filters.abiertas"
              @change="updateMarkers"
              type="checkbox"
              class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
            />
            <label for="abiertas" class="flex items-center text-sm text-gray-700">
              <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
              Abiertas ({{ counters.abiertas.count }})
            </label>
          </div>

          <div class="flex items-center space-x-2">
            <input
              id="finalizadas"
              v-model="filters.finalizadas"
              @change="updateMarkers"
              type="checkbox"
              class="rounded border-gray-300 text-green-600 focus:ring-green-500"
            />
            <label for="finalizadas" class="flex items-center text-sm text-gray-700">
              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
              Finalizadas ({{ counters.finalizadas.count }})
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- Mapa -->
    <div ref="mapContainer" class="w-full h-96 relative">
      <div v-if="loading" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
        <div class="text-center">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p class="mt-2 text-sm text-gray-600">Cargando mapa...</p>
        </div>
      </div>

      <div v-if="error" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
        <div class="text-center">
          <svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <h3 class="mt-2 text-sm font-medium text-gray-900">Error al cargar el mapa</h3>
          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
          <button @click="initMap" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
            Reintentar
          </button>
        </div>
      </div>
    </div>

    <!-- Leyenda -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
      <div class="flex items-center justify-between text-xs text-gray-600">
        <div class="flex items-center space-x-4">
          <span class="flex items-center">
            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
            Sin avances
          </span>
          <span class="flex items-center">
            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
            En proceso
          </span>
          <span class="flex items-center">
            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
            Finalizadas
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { Loader } from '@googlemaps/js-api-loader';

const props = defineProps({
  counters: {
    type: Object,
    required: true
  }
});

const mapContainer = ref(null);
const loading = ref(true);
const error = ref(null);
const map = ref(null);
const markers = ref([]);
const geocoder = ref(null);

// Filtros activos
const filters = reactive({
  sin_avances: true,
  abiertas: true,
  finalizadas: true
});

// Configuración de colores por estado
const markerColors = {
  sin_avances: '#EF4444', // Rojo
  abiertas: '#F59E0B',     // Amarillo
  finalizadas: '#10B981'   // Verde
};

// Contador de marcadores visibles
const visibleMarkersCount = computed(() => {
  return markers.value.filter(marker => marker.visible).length;
});

// Coordenadas del centro de Comalcalco, Tabasco
const COMALCALCO_CENTER = {
  lat: 18.2669,
  lng: -93.2072
};

// Límites aproximados de Comalcalco
const COMALCALCO_BOUNDS = {
  north: 19.35,
  south: 18.18,
  east: -93.10,
  west: -93.30
};

const initMap = async () => {
  loading.value = true;
  error.value = null;

  try {
    const loader = new Loader({
      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
      version: 'weekly',
      libraries: ['places']
    });

    // Cargar Google Maps
    const google = await loader.load();

    // Verificar que google.maps esté disponible
    if (!google.maps) {
      throw new Error('Google Maps no se cargó correctamente');
    }

    // Inicializar el mapa centrado en Comalcalco
    map.value = new google.maps.Map(mapContainer.value, {
      center: COMALCALCO_CENTER,
      zoom: 12,
      restriction: {
        latLngBounds: COMALCALCO_BOUNDS,
        strictBounds: false
      },
      mapTypeControl: true,
      streetViewControl: true,
      fullscreenControl: true,
      zoomControl: true
    });

    // Inicializar el geocodificador
    geocoder.value = new google.maps.Geocoder();

    // Cargar marcadores de obras
    await loadMarkers();

  } catch (err) {
    console.error('Error loading Google Maps:', err);
    error.value = err.message || 'Error al cargar Google Maps';
  } finally {
    loading.value = false;
  }
};

const loadMarkers = async () => {
  if (!map.value || !geocoder.value) return;

  // Limpiar marcadores existentes
  clearMarkers();

  const allObras = [
    ...props.counters.sin_avances.detalles.map(obra => ({ ...obra, estado: 'sin_avances' })),
    ...props.counters.abiertas.detalles.map(obra => ({ ...obra, estado: 'abiertas' })),
    ...props.counters.finalizadas.detalles.map(obra => ({ ...obra, estado: 'finalizadas' }))
  ];

  for (const obra of allObras) {
    try {
      await createMarkerForObra(obra);
    } catch (err) {
      console.warn(`Error creating marker for obra ${obra.num_proyecto}:`, err);
    }
  }

  updateMarkers();
};

const createMarkerForObra = async (obra) => {
  if (!obra.direccion_obra || !geocoder.value) return;

  const address = `${obra.direccion_obra}, Comalcalco, Tabasco, México`;

  return new Promise((resolve, reject) => {
    geocoder.value.geocode({ address }, (results, status) => {
      if (status === 'OK' && results[0]) {
        const position = results[0].geometry.location;

        // Verificar que la ubicación esté dentro de los límites de Comalcalco
        const lat = position.lat();
        const lng = position.lng();

        if (lat < COMALCALCO_BOUNDS.south || lat > COMALCALCO_BOUNDS.north ||
            lng < COMALCALCO_BOUNDS.west || lng > COMALCALCO_BOUNDS.east) {
          console.warn(`Obra ${obra.num_proyecto} fuera de los límites de Comalcalco`);
          resolve();
          return;
        }

        const marker = new google.maps.Marker({
          position,
          map: map.value,
          title: `${obra.num_proyecto} - ${obra.direccion_obra}`,
          icon: createCustomMarker(obra.estado),
          visible: filters[obra.estado]
        });

        // Info window con detalles de la obra
        const infoWindow = new google.maps.InfoWindow({
          content: createInfoWindowContent(obra)
        });

        marker.addListener('click', () => {
          // Cerrar otras ventanas abiertas
          markers.value.forEach(m => m.infoWindow?.close());
          infoWindow.open(map.value, marker);
        });

        markers.value.push({
          marker,
          infoWindow,
          estado: obra.estado,
          obra,
          visible: filters[obra.estado]
        });

        resolve();
      } else {
        console.warn(`Geocoding failed for ${address}: ${status}`);
        resolve();
      }
    });
  });
};

const createCustomMarker = (estado) => {
  const color = markerColors[estado];

  return {
    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
        <circle cx="12" cy="12" r="6" fill="white"/>
        <circle cx="12" cy="12" r="3" fill="${color}"/>
      </svg>
    `)}`,
    scaledSize: new google.maps.Size(24, 36),
    anchor: new google.maps.Point(12, 36)
  };
};

const createInfoWindowContent = (obra) => {
  const estadoConfig = {
    sin_avances: { color: 'bg-red-100 text-red-800', label: 'Sin avances' },
    abiertas: { color: 'bg-yellow-100 text-yellow-800', label: 'En proceso' },
    finalizadas: { color: 'bg-green-100 text-green-800', label: 'Finalizada' }
  };

  const config = estadoConfig[obra.estado];
  const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : 'N/A';

  return `
    <div class="p-4 max-w-sm">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-bold text-gray-900">${obra.num_proyecto || 'N/A'}</h3>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}">
          ${config.label}
        </span>
      </div>

      <div class="space-y-2 text-sm">
        <div>
          <p class="font-medium text-gray-700">Dirección:</p>
          <p class="text-gray-600">${obra.direccion_obra || 'N/A'}</p>
        </div>

        <div>
          <p class="font-medium text-gray-700">Cumplimiento:</p>
          <div class="flex items-center space-x-2">
            <div class="flex-1 bg-gray-200 rounded-full h-2">
              <div class="h-2 rounded-full ${obra.estado === 'finalizadas' ? 'bg-green-500' : obra.estado === 'abiertas' ? 'bg-yellow-500' : 'bg-red-500'}"
                   style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
            </div>
            <span class="text-xs font-medium text-gray-700">${cumplimiento}</span>
          </div>
        </div>
      </div>
    </div>
  `;
};

const updateMarkers = () => {
  markers.value.forEach(({ marker, estado }) => {
    const shouldShow = filters[estado];
    marker.setVisible(shouldShow);

    // Actualizar el estado visible del marcador
    const markerIndex = markers.value.findIndex(m => m.marker === marker);
    if (markerIndex !== -1) {
      markers.value[markerIndex].visible = shouldShow;
    }
  });
};

const clearMarkers = () => {
  markers.value.forEach(({ marker, infoWindow }) => {
    infoWindow?.close();
    marker.setMap(null);
  });
  markers.value = [];
};

// Recargar marcadores cuando cambien los contadores
watch(() => props.counters, () => {
  if (map.value) {
    loadMarkers();
  }
}, { deep: true });

onMounted(() => {
  initMap();
});
</script>
