Pierwszy wrzut promptstory

components/TripMap.tsx

@@ -0,0 +1,331 @@
+
+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;