import React, { useRef, useState, useEffect } from 'react';
import { TripData } from '../types';
import { Download, Map as MapIcon, AlertTriangle, ImageOff, Loader2, Navigation, RefreshCw } from 'lucide-react';
import html2canvas from 'html2canvas';
import { getEnvVar } from '../utils/envUtils';

interface TripMapProps {
  tripData: TripData;
}

const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
  const mapContainerRef = useRef<HTMLDivElement>(null);
  const [imgError, setImgError] = useState(false);
  const [encodedPolyline, setEncodedPolyline] = useState<string | null>(null);
  const [isRouting, setIsRouting] = useState(false);
  const [scriptLoaded, setScriptLoaded] = useState(false);
  const [routingError, setRoutingError] = useState<string | null>(null);
  const [retryCount, setRetryCount] = useState(0);

  // STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
  const getEffectiveKey = () => {
    // 1. Check manual override from user input
    if (tripData.googleMapsKey) return tripData.googleMapsKey;
    // 2. Check Vite env
    return getEnvVar('VITE_GOOGLE_MAPS_KEY');
  };
  
  const apiKey = getEffectiveKey();

  // Load script if not present
  useEffect(() => {
    if ((window as any).google?.maps) {
        setScriptLoaded(true);
        return;
    }

    if (!apiKey) return;

    if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) {
        const check = setInterval(() => {
             if ((window as any).google?.maps) {
                 setScriptLoaded(true);
                 clearInterval(check);
             }
        }, 500);
        return;
    }

    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&loading=async&v=weekly`;
    script.async = true;
    script.onload = () => setScriptLoaded(true);
    document.head.appendChild(script);
  }, [apiKey]);


  // Calculate Route
  useEffect(() => {
    if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return;
    if (!(window as any).google) return;

    const fetchRoute = async () => {
        setIsRouting(true);
        setRoutingError(null);
        
        try {
            const directionsService = new (window as any).google.maps.DirectionsService();
            const waypoints = tripData.stops
                .filter(s => s.place && s.place.trim().length > 2)
                .map(s => ({ location: s.place, stopover: true }));

            const gMaps = (window as any).google.maps;
            const mode = tripData.travelMode === 'WALKING' ? gMaps.TravelMode.WALKING : gMaps.TravelMode.DRIVING;

            const result = await new Promise<any>((resolve, reject) => {
                directionsService.route({
                    origin: tripData.startPoint.place,
                    destination: tripData.endPoint.place,
                    waypoints: waypoints,
                    travelMode: mode,
                }, (response: any, status: any) => {
                    if (status === 'OK') {
                        resolve(response);
                    } else {
                        reject(status);
                    }
                });
            });

            setEncodedPolyline(result.routes[0].overview_polyline);
            setImgError(false);
        } catch (error: any) {
            console.error("Directions Service Failed:", error);
            if (error === 'REQUEST_DENIED') {
                setRoutingError("API 'Directions API' nie jest włączone.");
            } else if (error === 'ZERO_RESULTS') {
                setRoutingError(`Nie znaleziono drogi pomiędzy punktami.`);
            } else {
                setRoutingError(`Błąd wyznaczania trasy: ${error}`);
            }
            setEncodedPolyline(null); 
        } finally {
            setIsRouting(false);
        }
    };

    fetchRoute();
  }, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]);


  const getMapUrl = () => {
    if (!apiKey) return null;

    const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
    const size = '600x400';
    const scale = '2'; 
    const format = 'png';
    const maptype = 'roadmap';

    const startPlace = tripData.startPoint.place;
    const endPlace = tripData.endPoint.place;

    if (!startPlace || !endPlace) return null;

    const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
    const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
    
    const stopMarkers = tripData.stops
      .filter(s => s.place.trim() !== '')
      .map((s, i) => `markers=color:blue|label:${i+1}|${encodeURIComponent(s.place)}`)
      .join('&');

    let path = '';
    
    if (encodedPolyline && encodedPolyline.length < 8000) {
        path = `path=color:0xEA4420ff|weight:5|enc:${encodedPolyline}`;
    } else {
        const pathPoints = [
            startPlace,
            ...tripData.stops.filter(s => s.place.trim() !== '').map(s => s.place),
            endPlace
        ].map(p => encodeURIComponent(p)).join('|');
        path = `path=color:0xEA4420ff|weight:5|${pathPoints}`;
    }

    let url = `${baseUrl}?size=${size}&scale=${scale}&format=${format}&maptype=${maptype}&${startMarker}&${endMarker}&${path}&key=${apiKey}`;
    if (stopMarkers) url += `&${stopMarkers}`;

    return url;
  };

  const mapUrl = getMapUrl();

  const handleDownload = async () => {
    if (!mapContainerRef.current) return;
    try {
        const canvas = await html2canvas(mapContainerRef.current, {
            useCORS: true, 
            allowTaint: true,
            backgroundColor: '#ffffff'
        });
        const link = document.createElement('a');
        link.download = 'trasa-wycieczki.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    } catch (e) {
        alert("Nie udało się pobrać mapy.");
    }
  };

  if (!apiKey) {
      return (
          <div className="bg-red-50 border border-red-200 rounded-lg p-6 flex flex-col items-center text-center">
              <AlertTriangle className="text-red-500 mb-2" size={32} />
              <h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3>
              <p className="text-sm text-red-700 max-w-sm">
                 Skonfiguruj zmienną VITE_GOOGLE_MAPS_KEY w panelu.
              </p>
          </div>
      );
  }

  return (
    <div className="space-y-4">
        <div className="flex items-center justify-between">
            <h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
                <MapIcon size={24} className="text-[#EA4420]" />
                Mapa Trasy
            </h3>
            <div className="flex gap-2">
                {routingError && (
                    <button 
                        onClick={() => setRetryCount(c => c + 1)}
                        className="text-sm flex items-center gap-2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-2 rounded-md font-bold transition-colors"
                        title="Spróbuj ponownie wyznaczyć trasę"
                    >
                        <RefreshCw size={14} /> Ponów trasę
                    </button>
                )}
                <button 
                    onClick={handleDownload}
                    className="text-sm flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md font-bold transition-colors"
                >
                    <Download size={16} />
                    Pobierz Obrazek
                </button>
            </div>
        </div>

        {routingError && (
            <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-md flex items-start gap-3">
                <Navigation className="text-yellow-600 flex-shrink-0 mt-0.5" size={18} />
                <div className="text-xs text-yellow-800">
                    <p className="font-bold">Info Trasy:</p>
                    <p>{routingError}</p>
                </div>
            </div>
        )}

        <div 
            ref={mapContainerRef} 
            className="bg-white p-2 border border-gray-200 rounded-xl shadow-sm overflow-hidden relative group min-h-[250px] flex items-center justify-center"
        >
             {mapUrl && !imgError && !isRouting ? (
                 <img 
                    src={mapUrl} 
                    alt="Mapa trasy" 
                    className="w-full h-auto rounded-lg object-cover"
                    crossOrigin="anonymous" 
                    onError={() => setImgError(true)}
                 />
             ) : (
                 <div className="h-64 w-full bg-gray-50 flex flex-col items-center justify-center text-gray-400 p-6 text-center">
                     {isRouting ? (
                        <>
                           <Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
                           <p className="text-xs font-bold text-gray-500">Rysowanie trasy...</p>
                        </>
                     ) : imgError ? (
                        <div className="max-w-md">
                            <div className="flex justify-center mb-2">
                                <ImageOff size={32} className="text-red-400" />
                            </div>
                            <p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania mapy</p>
                        </div>
                     ) : (
                        <p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
                     )}
                 </div>
             )}

             {!imgError && mapUrl && !isRouting && (
                <div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-[10px] font-bold text-gray-500 shadow-sm">
                    Generated by PromptStory
                </div>
             )}
        </div>
    </div>
  );
};

export default TripMap;