import React, { useEffect, useRef } from 'react';
import { Emergency } from '@/types/politur';

interface EmergencyMapProps {
  emergencies: Emergency[];
  onSelectEmergency: (emergency: Emergency) => void;
}

const EmergencyMap: React.FC<EmergencyMapProps> = ({ emergencies, onSelectEmergency }) => {
  const mapContainer = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mapContainer.current) return;

    // Simulated map - in production, integrate with Mapbox or Google Maps
    const canvas = document.createElement('canvas');
    canvas.width = mapContainer.current.clientWidth;
    canvas.height = 400;
    canvas.style.width = '100%';
    canvas.style.height = '400px';
    canvas.style.borderRadius = '8px';
    canvas.style.backgroundColor = '#f0f0f0';
    
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // Draw simple map representation
    ctx.fillStyle = '#e0e0e0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw grid
    ctx.strokeStyle = '#d0d0d0';
    ctx.lineWidth = 1;
    for (let i = 0; i < canvas.width; i += 50) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, canvas.height);
      ctx.stroke();
    }
    for (let i = 0; i < canvas.height; i += 50) {
      ctx.beginPath();
      ctx.moveTo(0, i);
      ctx.lineTo(canvas.width, i);
      ctx.stroke();
    }

    // Draw title
    ctx.fillStyle = '#666';
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Mapa de Santo Domingo', canvas.width / 2, 30);
    ctx.font = '12px Arial';
    ctx.fillText('(Integración con Mapbox próximamente)', canvas.width / 2, 50);

    // Draw emergency markers
    emergencies.forEach((emergency, index) => {
      const x = 100 + (index * 150) % (canvas.width - 200);
      const y = 100 + Math.floor(index / 4) * 100;

      // Marker circle
      const color = emergency.priority === 'critical' ? '#ef4444' :
                   emergency.priority === 'high' ? '#f97316' :
                   emergency.priority === 'medium' ? '#eab308' : '#22c55e';
      
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, 15, 0, Math.PI * 2);
      ctx.fill();

      // Marker border
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 3;
      ctx.stroke();

      // Pulse effect for critical
      if (emergency.priority === 'critical') {
        ctx.strokeStyle = color;
        ctx.lineWidth = 2;
        ctx.globalAlpha = 0.3;
        ctx.beginPath();
        ctx.arc(x, y, 25, 0, Math.PI * 2);
        ctx.stroke();
        ctx.globalAlpha = 1;
      }

      // Label
      ctx.fillStyle = '#000';
      ctx.font = '11px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(emergency.touristName.split(' ')[0], x, y + 35);
    });

    mapContainer.current.innerHTML = '';
    mapContainer.current.appendChild(canvas);

    // Add click handler
    canvas.addEventListener('click', (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = (e.clientX - rect.left) * (canvas.width / rect.width);
      const y = (e.clientY - rect.top) * (canvas.height / rect.height);

      emergencies.forEach((emergency, index) => {
        const markerX = 100 + (index * 150) % (canvas.width - 200);
        const markerY = 100 + Math.floor(index / 4) * 100;
        const distance = Math.sqrt(Math.pow(x - markerX, 2) + Math.pow(y - markerY, 2));

        if (distance < 20) {
          onSelectEmergency(emergency);
        }
      });
    });

    canvas.style.cursor = 'pointer';

  }, [emergencies, onSelectEmergency]);

  return (
    <div ref={mapContainer} className="w-full h-[400px] rounded-lg overflow-hidden">
      {/* Map will be rendered here */}
    </div>
  );
};

export default EmergencyMap;
