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';

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);

  // --- HARDCODED FALLBACK KEY ---
  const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';

  // Directly access the environment variable OR fallback to manual input OR auto-paste
  const getEffectiveKey = () => {
    // 1. Check manual override
    if (tripData.googleMapsKey) return tripData.googleMapsKey;
    
    // 2. Check Vite env
    // @ts-ignore
    if (import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_KEY) {
        // @ts-ignore
        return import.meta.env.VITE_GOOGLE_MAPS_KEY;
    }
    
    // 3. Check Standard process.env
    if (process.env.GOOGLE_MAPS_KEY) return process.env.GOOGLE_MAPS_KEY;
    
    // 4. Fallback
    return AUTO_PASTE_KEY;
  };
  
  const apiKey = getEffectiveKey();

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

    if (!apiKey) return;

    // Check if script exists in DOM
    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 using Directions Service
  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();
            
            // Prepare valid waypoints (exclude empty stops)
            const waypoints = tripData.stops
                .filter(s => s.place && s.place.trim().length > 2)
                .map(s => ({ location: s.place, stopover: true }));

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

            console.log("TripMap: Requesting route...", { 
                origin: tripData.startPoint.place, 
                dest: tripData.endPoint.place, 
                mode: tripData.travelMode,
                waypointsCount: waypoints.length 
            });

            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 {
                        console.warn("TripMap: Directions API Error", status);
                        reject(status);
                    }
                });
            });

            // Extract overview polyline
            const polyline = result.routes[0].overview_polyline;
            
            setEncodedPolyline(polyline);
            setImgError(false);
        } catch (error: any) {
            console.error("Directions Service Failed:", error);
            
            // Specific Error Handling
            if (error === 'REQUEST_DENIED') {
                setRoutingError("API 'Directions API' nie jest włączone w Google Cloud. Mapa pokazuje linię prostą.");
            } else if (error === 'ZERO_RESULTS') {
                const modeName = tripData.travelMode === 'WALKING' ? 'pieszej' : 'samochodowej';
                setRoutingError(`Nie znaleziono drogi ${modeName} pomiędzy tymi punktami.`);
            } else {
                setRoutingError(`Błąd wyznaczania trasy: ${error}`);
            }
            
            setEncodedPolyline(null); // Fallback to straight lines
        } finally {
            setIsRouting(false);
        }
    };

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


  // Construct Google Static Maps URL
  const getMapUrl = () => {
    if (!apiKey) return null;

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

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

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

    // Markers
    const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
    const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
    
    // Stop Markers
    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) {
        console.error("Download failed", e);
        alert("Nie udało się pobrać mapy.");
    }
  };

  // ERROR STATE 1: MISSING KEY
  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">
                 Wprowadź klucz w kroku "Szczegóły" lub dodaj go do pliku .env.
              </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>

        {/* Warning Banner for Directions API issues */}
        {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">Widzisz prostą linię zamiast drogi?</p>
                    <p>{routingError}</p>
                    <p className="mt-1 opacity-75">
                        {routingError.includes("Directions API") 
                           ? <>Rozwiązanie: Wejdź w Google Cloud Console → APIs & Services → Włącz <b>"Directions API"</b>.</> 
                           : <>Jeśli idziesz szlakiem, upewnij się, że wybrałeś tryb <b>"Pieszo"</b>.</>}
                    </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"
        >
             {/* Map Image */}
             {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 dokładnej trasy ({tripData.travelMode})...</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 obrazka mapy (Static Maps API)</p>
                            <div className="bg-red-50 p-3 rounded text-left mt-2">
                                <p className="text-xs text-gray-700 font-bold mb-1">Możliwe przyczyny błędu "g.co/staticmaperror":</p>
                                <ul className="text-[10px] text-gray-600 list-disc pl-4 space-y-1">
                                    <li><b>Maps Static API</b> nie jest włączone w konsoli Google Cloud (To inne API niż Places/JavaScript!).</li>
                                    <li>Brak podpiętej karty płatniczej w projekcie Google Cloud.</li>
                                    <li>Klucz API: <b>{apiKey.slice(0,6)}...</b> jest niepoprawny lub ma restrykcje HTTP, które blokują serwer zdjęć.</li>
                                </ul>
                            </div>
                        </div>
                     ) : (
                        <p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
                     )}
                 </div>
             )}

             {/* Branding Overlay */}
             {!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>
        
        {/* Helper Text below map */}
        <div className="text-xs text-gray-400 text-center space-y-1">
            <p>
                {encodedPolyline && encodedPolyline.length < 8000
                    ? `*Trasa wyznaczona automatycznie (${tripData.travelMode === 'WALKING' ? 'szlaki/chodniki' : 'drogi'}).`
                    : "*Trasa uproszczona (linia prosta) - włącz Directions API lub zmień tryb."}
            </p>
        </div>
    </div>
  );
};

export default TripMap;