import React, { useState, useEffect, useRef } from 'react';
import { Menu, MapPin, User, ChevronRight, Car, Bike, Navigation, Clock, CreditCard, Star, Map as MapIcon, ShieldCheck } from 'lucide-react';

// Fórmula para calcular distancia entre dos coordenadas (Haversine)
function calcularDistanciaKm(lat1, lon1, lat2, lon2) {
  const R = 6371; // Radio de la Tierra en km
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c;
}

export default function AppPasajera() {
  const [vistaActiva, setVistaActiva] = useState('mapa'); // 'mapa', 'historial', 'perfil'
  const [destinoCoords, setDestinoCoords] = useState(null);
  const [direccionDestino, setDireccionDestino] = useState('');
  const [buscandoDireccion, setBuscandoDireccion] = useState(false);
  const [distancia, setDistancia] = useState(0);
  const [vehiculoSeleccionado, setVehiculoSeleccionado] = useState('moto');
  const [estadoViaje, setEstadoViaje] = useState('inicio'); // 'inicio', 'buscando', 'en_camino'
  const [conductorasActivas, setConductorasActivas] = useState(4); // Simulación de conductoras activas
  
  const mapContainerRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const destinoMarkerRef = useRef(null);
  const polylineRef = useRef(null);

  // Coordenadas centrales de Trinidad, Beni (Origen fijo por ahora)
  const origenCoords = [-14.834, -64.900];
  const TARIFA_POR_KM = 3.50;

  // Cargar e inicializar el mapa
  useEffect(() => {
    if (vistaActiva !== 'mapa' || estadoViaje !== 'inicio') return;

    const initMap = () => {
      if (!window.L || !mapContainerRef.current) return;
      
      // Evitar reinicializar si ya existe
      if (mapInstanceRef.current) {
        mapInstanceRef.current.invalidateSize();
        return;
      }

      // Se añade attributionControl: false para ocultar la marca de Leaflet
      const map = window.L.map(mapContainerRef.current, { 
        zoomControl: false,
        attributionControl: false 
      }).setView(origenCoords, 14);
      mapInstanceRef.current = map;

      // Usamos CartoDB Voyager en lugar del default de OSM para evitar el Error 403 y tener mejor diseño
      window.L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
        maxZoom: 19
      }).addTo(map);

      // Marcador de Origen
      const pasajeraIcon = window.L.divIcon({
        className: 'custom-icon',
        html: `<div style="background-color: #8e44ad; width: 18px; height: 18px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 8px rgba(0,0,0,0.4);"></div>`,
        iconSize: [18, 18],
        iconAnchor: [9, 9]
      });
      window.L.marker(origenCoords, { icon: pasajeraIcon }).addTo(map).bindPopup("Tu ubicación").openPopup();

      // Evento: Tocar el mapa para elegir destino y obtener el nombre de la calle (Reverse Geocoding)
      map.on('click', async function(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;
        setDestinoCoords([lat, lng]);
        setBuscandoDireccion(true);
        
        try {
          const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
          const data = await response.json();
          // Extraer el nombre de la calle, barrio o nombre general
          const nombreCalle = data.address.road || data.address.neighbourhood || data.address.suburb || "Calle sin nombre";
          setDireccionDestino(nombreCalle);
        } catch (error) {
          setDireccionDestino("Ubicación seleccionada");
        } finally {
          setBuscandoDireccion(false);
        }
      });
    };

    if (!window.L) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
      document.head.appendChild(link);

      const script = document.createElement('script');
      script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
      script.onload = initMap;
      document.head.appendChild(script);
    } else {
      initMap();
    }

    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.off('click');
      }
    };
  }, [vistaActiva, estadoViaje]);

  // Actualizar marcadores y rutas cuando cambia el destino
  useEffect(() => {
    if (!mapInstanceRef.current || !destinoCoords) return;

    const map = mapInstanceRef.current;

    // Calcular distancia
    const dist = calcularDistanciaKm(origenCoords[0], origenCoords[1], destinoCoords[0], destinoCoords[1]);
    setDistancia(dist);

    // Crear o actualizar marcador de destino
    const destinoIcon = window.L.divIcon({
      className: 'custom-icon',
      html: `<div style="background-color: #e84393; width: 18px; height: 18px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 8px rgba(0,0,0,0.4);"></div>`,
      iconSize: [18, 18],
      iconAnchor: [9, 9]
    });

    if (destinoMarkerRef.current) {
      destinoMarkerRef.current.setLatLng(destinoCoords);
    } else {
      destinoMarkerRef.current = window.L.marker(destinoCoords, { icon: destinoIcon }).addTo(map);
    }

    // Trazar línea
    if (polylineRef.current) {
      polylineRef.current.setLatLngs([origenCoords, destinoCoords]);
    } else {
      polylineRef.current = window.L.polyline([origenCoords, destinoCoords], {color: '#8e44ad', weight: 4, dashArray: '10, 10'}).addTo(map);
    }

    // Ajustar vista para que se vean ambos puntos
    map.fitBounds([origenCoords, destinoCoords], { padding: [50, 50] });

  }, [destinoCoords]);

  // Cálculo de tarifa: Redondear siempre hacia arriba al 0.5 más cercano (ej: 4.2 -> 4.5)
  const precioCalculado = distancia * TARIFA_POR_KM;
  const precioRedondeado = Math.ceil(precioCalculado * 2) / 2;
  const precioEstimado = Math.max(4, precioRedondeado).toFixed(2); // Tarifa mínima ajustada a 4 Bs

  const solicitarViaje = () => {
    if (!destinoCoords) {
      alert("Por favor, toca en el mapa a dónde quieres ir.");
      return;
    }
    setEstadoViaje('buscando');
    setTimeout(() => setEstadoViaje('en_camino'), 3000);
  };

  // VISTAS
  const renderHistorial = () => (
    <div className="p-6 h-full overflow-y-auto bg-gray-50 pb-24">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Mis Viajes</h2>
      <div className="space-y-4">
        {[
          { fecha: 'Hoy, 14:30', destino: 'Plaza Principal', precio: 'Bs. 12', vehiculo: 'Moto', conductora: 'Ana' },
          { fecha: 'Ayer, 09:15', destino: 'Mercado Pompeya', precio: 'Bs. 8', vehiculo: 'Moto', conductora: 'Lucía' },
          { fecha: '12 May, 18:00', destino: 'Terminal de Buses', precio: 'Bs. 15', vehiculo: 'Moto', conductora: 'María' }
        ].map((viaje, i) => (
          <div key={i} className="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="p-3 rounded-full bg-pink-100 text-pink-600">
                <Bike size={20} />
              </div>
              <div>
                <p className="font-bold text-gray-800">{viaje.destino}</p>
                <p className="text-sm text-gray-500">{viaje.fecha} • {viaje.conductora}</p>
              </div>
            </div>
            <div className="text-right">
              <p className="font-bold text-gray-800">{viaje.precio}</p>
              <p className="text-xs text-green-500 flex items-center gap-1 justify-end"><Star size={10} /> 5.0</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderPerfil = () => (
    <div className="p-6 h-full bg-gray-50 pb-24">
      <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center relative overflow-hidden mb-6">
        <div className="absolute top-0 left-0 w-full h-24 bg-[#8e44ad]"></div>
        <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto relative z-10 border-4 border-white shadow-md flex items-center justify-center text-4xl mb-4">
          👩🏻
        </div>
        <h2 className="text-2xl font-bold text-gray-800">Carla Suárez</h2>
        <p className="text-gray-500 mb-4">+591 71234567</p>
        <div className="flex justify-center gap-4 border-t pt-4">
          <div className="text-center">
            <p className="font-bold text-xl text-gray-800">4.9</p>
            <p className="text-xs text-gray-500 flex items-center gap-1"><Star size={12} className="text-yellow-400"/> Rating</p>
          </div>
          <div className="w-px bg-gray-200"></div>
          <div className="text-center">
            <p className="font-bold text-xl text-gray-800">12</p>
            <p className="text-xs text-gray-500 flex items-center gap-1"><Navigation size={12} className="text-blue-400"/> Viajes</p>
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <button className="w-full bg-white p-4 rounded-2xl flex items-center justify-between shadow-sm border border-gray-100">
          <div className="flex items-center gap-3 text-gray-700">
            <ShieldCheck className="text-green-500" />
            <span className="font-medium">Contactos de Emergencia</span>
          </div>
          <ChevronRight size={20} className="text-gray-400" />
        </button>
        <button className="w-full bg-white p-4 rounded-2xl flex items-center justify-between shadow-sm border border-gray-100">
          <div className="flex items-center gap-3 text-gray-700">
            <CreditCard className="text-blue-500" />
            <span className="font-medium">Métodos de Pago</span>
          </div>
          <ChevronRight size={20} className="text-gray-400" />
        </button>
      </div>
    </div>
  );

  return (
    <div className="flex justify-center items-center h-screen bg-gray-200 font-sans">
      <div className="w-full max-w-md h-full sm:h-[800px] bg-white sm:rounded-[40px] sm:border-[8px] sm:border-gray-800 overflow-hidden relative shadow-2xl flex flex-col">
        
        {/* Header Superior */}
        <div className="bg-[#8e44ad] text-white p-4 flex justify-between items-center z-20 shadow-md">
          <h1 className="text-lg font-bold tracking-wide flex items-center gap-2">
            <ShieldCheck size={20}/> VioletTaxi
          </h1>
          <div className="text-sm bg-white/20 px-3 py-1 rounded-full font-medium">Pasajera</div>
        </div>

        {/* Área Principal de Contenido */}
        <div className="flex-grow relative z-0 bg-gray-100 overflow-hidden">
          
          {/* VISTA: MAPA */}
          <div className={`w-full h-full absolute transition-opacity duration-300 ${vistaActiva === 'mapa' ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'}`}>
            {estadoViaje === 'inicio' ? (
              <div className="w-full h-full flex flex-col">
                {/* Contenedor del mapa */}
                <div ref={mapContainerRef} className="flex-grow z-0"></div>
                
                {/* Panel Flotante Inferior de Reserva */}
                <div className="bg-white rounded-t-3xl p-6 z-20 shadow-[0_-10px_30px_rgba(0,0,0,0.15)] pb-24 relative">
                  
                  {/* Etiqueta de Instrucción */}
                  {!destinoCoords ? (
                    <div className="bg-pink-50 border border-pink-200 text-pink-700 p-3 rounded-xl text-center mb-4 text-sm font-medium animate-pulse">
                      👆 Toca cualquier lugar en el mapa para elegir tu destino
                    </div>
                  ) : (
                    <div className="bg-purple-50 p-3 rounded-xl mb-4 border border-purple-100">
                      <div className="mb-2 border-b border-purple-100 pb-2">
                        <p className="text-xs text-gray-500 uppercase font-bold">Destino</p>
                        <p className="font-bold text-gray-800 text-sm truncate">
                          {buscandoDireccion ? "Buscando calle..." : direccionDestino}
                        </p>
                      </div>
                      <div className="flex justify-between items-center">
                        <div>
                          <p className="text-xs text-gray-500 uppercase font-bold">Distancia</p>
                          <p className="font-bold text-purple-700">{distancia.toFixed(2)} km</p>
                        </div>
                        <div className="text-right">
                          <p className="text-xs text-gray-500 uppercase font-bold">Tarifa Estimada</p>
                          <p className="font-bold text-purple-700 text-xl">Bs. {precioEstimado}</p>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Estado de conductoras activas */}
                  <div className="flex items-center justify-center gap-2 mb-3">
                     <div className={`w-2 h-2 rounded-full ${conductorasActivas > 0 ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`}></div>
                     <p className="text-xs text-gray-600 font-medium">
                       {conductorasActivas > 0 ? `Hay ${conductorasActivas} conductoras activas cerca de ti` : 'No hay conductoras activas en este momento'}
                     </p>
                  </div>

                  {/* Opciones de Vehículo */}
                  <div className="flex gap-3 mb-4">
                    <button 
                      className="flex-1 flex flex-col items-center justify-center gap-1 p-3 rounded-xl border-2 border-[#8e44ad] bg-[#8e44ad]/5 transition-all"
                    >
                      <Bike size={24} className="text-[#8e44ad]" />
                      <span className="font-bold text-[#8e44ad] text-sm">Moto</span>
                    </button>
                    
                    <button 
                      disabled
                      className="flex-1 flex flex-col items-center justify-center gap-1 p-3 rounded-xl border-2 border-gray-200 bg-gray-50 opacity-70 cursor-not-allowed relative overflow-hidden"
                    >
                      <Car size={24} className="text-gray-400" />
                      <span className="font-bold text-gray-500 text-sm">Auto</span>
                      <span className="text-[9px] bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full font-bold uppercase tracking-wider mt-1">Próximamente</span>
                    </button>
                  </div>

                  <button 
                    onClick={solicitarViaje}
                    disabled={!destinoCoords || conductorasActivas === 0}
                    className={`w-full font-bold text-lg py-4 rounded-xl flex items-center justify-center gap-2 transition-all ${destinoCoords && conductorasActivas > 0 ? 'bg-[#8e44ad] text-white hover:bg-[#732d91] shadow-lg shadow-[#8e44ad]/30' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}
                  >
                    Confirmar Viaje <ChevronRight size={20} />
                  </button>
                </div>
              </div>
            ) : (
              /* Pantallas de Buscando y En Camino */
              <div className="w-full h-full bg-white flex flex-col items-center justify-center p-6 text-center z-50 absolute top-0 left-0">
                 <div className="w-24 h-24 bg-[#8e44ad]/10 rounded-full flex items-center justify-center mb-6 animate-pulse">
                    <Navigation className="w-12 h-12 text-[#8e44ad]" />
                 </div>
                 
                 {estadoViaje === 'buscando' && (
                   <>
                     <h2 className="text-2xl font-bold text-gray-800 mb-2">Buscando conductora...</h2>
                     <p className="text-gray-500">Notificando a conductoras cercanas.</p>
                   </>
                 )}

                 {estadoViaje === 'en_camino' && (
                   <>
                     <h2 className="text-2xl font-bold text-gray-800 mb-2">¡María está en camino!</h2>
                     <p className="text-gray-500 mb-6">Llegará en 4 minutos a tu ubicación.</p>
                     
                     <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100 w-full flex items-center gap-4 mb-6">
                        <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center text-3xl">👩🏽</div>
                        <div className="text-left flex-grow">
                          <p className="font-bold text-gray-800 text-lg">María Fernández</p>
                          <p className="text-sm text-gray-500">Moto Honda • 4.9 <Star size={12} className="inline text-yellow-400 -mt-1"/></p>
                          <p className="text-sm font-bold text-[#8e44ad] mt-1 bg-purple-100 inline-block px-2 py-0.5 rounded">Placa: 234-PQR</p>
                        </div>
                     </div>
                     
                     <button 
                       onClick={() => { setEstadoViaje('inicio'); setDestinoCoords(null); }}
                       className="text-red-500 font-bold py-3 px-6 rounded-xl border-2 border-red-100 hover:bg-red-50 w-full"
                     >
                       Cancelar Viaje
                     </button>
                   </>
                 )}
              </div>
            )}
          </div>

          {/* VISTA: HISTORIAL */}
          <div className={`w-full h-full absolute transition-opacity duration-300 ${vistaActiva === 'historial' ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'}`}>
            {renderHistorial()}
          </div>

          {/* VISTA: PERFIL */}
          <div className={`w-full h-full absolute transition-opacity duration-300 ${vistaActiva === 'perfil' ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'}`}>
            {renderPerfil()}
          </div>

        </div>

        {/* Barra de Navegación Inferior */}
        {estadoViaje === 'inicio' && (
          <div className="bg-white border-t border-gray-200 px-6 py-3 flex justify-between items-center absolute bottom-0 w-full z-40 pb-5 sm:pb-3 shadow-[0_-5px_10px_rgba(0,0,0,0.05)]">
            <button 
              onClick={() => setVistaActiva('mapa')}
              className={`flex flex-col items-center gap-1 transition-colors ${vistaActiva === 'mapa' ? 'text-[#8e44ad]' : 'text-gray-400 hover:text-gray-600'}`}
            >
              <MapIcon size={24} className={vistaActiva === 'mapa' ? 'fill-purple-100' : ''} />
              <span className="text-[10px] font-bold">Viajar</span>
            </button>
            <button 
              onClick={() => setVistaActiva('historial')}
              className={`flex flex-col items-center gap-1 transition-colors ${vistaActiva === 'historial' ? 'text-[#8e44ad]' : 'text-gray-400 hover:text-gray-600'}`}
            >
              <Clock size={24} className={vistaActiva === 'historial' ? 'fill-purple-100' : ''} />
              <span className="text-[10px] font-bold">Historial</span>
            </button>
            <button 
              onClick={() => setVistaActiva('perfil')}
              className={`flex flex-col items-center gap-1 transition-colors ${vistaActiva === 'perfil' ? 'text-[#8e44ad]' : 'text-gray-400 hover:text-gray-600'}`}
            >
              <User size={24} className={vistaActiva === 'perfil' ? 'fill-purple-100' : ''} />
              <span className="text-[10px] font-bold">Perfil</span>
            </button>
          </div>
        )}

      </div>
    </div>
  );
}