Naprawa obsługi GPX, czyszczenie projektu, naprawa błędów związanych z obrazami

components/StepDetails.tsx

@@ -3,6 +3,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { WizardState } from '../types';
 import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints, Eye } from 'lucide-react';
 import { processFile } from '../utils/fileUtils';
+import { parseGpxFile } from '../utils/gpxUtils';
 import { getEnvVar } from '../utils/envUtils';
 import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
 
@@ -82,6 +83,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
   const [error, setError] = useState<string | null>(null);
   const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
   const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [isParsingGpx, setIsParsingGpx] = useState(false);
   
   // State for GPX Text Preview
   const [showGpxPreview, setShowGpxPreview] = useState(false);
@@ -162,8 +164,29 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
       return;
     }
     setError(null);
+
+    // 1. Process files for display/Gemini upload
     const processedFiles = await Promise.all(newFiles.map(processFile));
     updateData(prev => ({ files: [...prev.files, ...processedFiles] }));
+
+    // 2. Scan for GPX to parse stats
+    const gpxFile = newFiles.find(f => f.name.toLowerCase().endsWith('.gpx'));
+    if (gpxFile) {
+        setIsParsingGpx(true);
+        try {
+             const result = await parseGpxFile(gpxFile);
+             updateData(prev => ({
+                 ...prev,
+                 stats: result.stats,
+                 gpxSummary: result.richSummary
+             }));
+        } catch (gpxErr) {
+            console.error(gpxErr);
+            setError("Wgrano plik, ale nie udało się odczytać statystyk GPX. Sprawdź format pliku.");
+        } finally {
+            setIsParsingGpx(false);
+        }
+    }
   };
 
   const removeFile = (id: string) => {
@@ -218,34 +241,39 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
   const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
   const isReadyToGenerate = data.title && isTripModeValid;
 
+  // Decide what text to show in preview
+  const previewText = data.gpxSummary 
+    ? data.gpxSummary 
+    : `DYSTANS: ${data.stats.distance || "0"}\nCZAS TRWANIA: ${data.stats.duration || "0"}\nPRZEWYŻSZENIA: ${data.stats.elevation || "0"}`;
+
   return (
     <div className="space-y-10 animate-fade-in relative">
       
       {/* GPX PREVIEW MODAL */}
       {showGpxPreview && (
           <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
-              <div className="bg-white rounded-lg shadow-xl max-w-lg w-full overflow-hidden flex flex-col max-h-[80vh]">
+              <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full overflow-hidden flex flex-col max-h-[85vh]">
                   <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                       <h3 className="font-bold text-gray-900 flex items-center gap-2">
                           <FileText size={18} className="text-[#EA4420]" />
-                          Podgląd kontekstu GPX
+                          Podgląd danych dla AI (Context)
                       </h3>
                       <button onClick={() => setShowGpxPreview(false)} className="text-gray-400 hover:text-gray-600">
                           <X size={20} />
                       </button>
                   </div>
-                  <div className="p-4 overflow-y-auto font-mono text-xs text-gray-700 bg-gray-50/50">
-                      <p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider">To widzi AI:</p>
-                      <div className="bg-white border border-gray-200 p-3 rounded">
-                          <p>DYSTANS: {data.stats.distance || "0"}</p>
-                          <p>CZAS TRWANIA: {data.stats.duration || "0"}</p>
-                          <p>PRZEWYŻSZENIA: {data.stats.elevation || "0"}</p>
+                  <div className="p-0 overflow-y-auto bg-gray-50/50 flex-1">
+                      <div className="p-4">
+                        <p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider text-xs">Poniższa treść zostanie dołączona do promptu:</p>
+                        <pre className="bg-white border border-gray-200 p-4 rounded text-xs font-mono text-gray-700 whitespace-pre-wrap overflow-x-auto shadow-sm">
+                            {previewText}
+                        </pre>
                       </div>
                   </div>
-                  <div className="p-4 border-t border-gray-100 flex justify-end">
+                  <div className="p-4 border-t border-gray-100 flex justify-end bg-white">
                       <button 
                           onClick={() => setShowGpxPreview(false)}
-                          className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
+                          className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
                       >
                           Zamknij
                       </button>
@@ -484,9 +512,18 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                     accept=".gpx,.pdf,image/*"
                     className="hidden" 
                   />
-                  <UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
-                  <p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
-                  <p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
+                  {isParsingGpx ? (
+                      <div className="flex flex-col items-center animate-pulse">
+                          <Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
+                          <p className="text-gray-900 font-bold">Analizowanie GPX...</p>
+                      </div>
+                  ) : (
+                      <>
+                        <UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
+                        <p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
+                        <p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
+                      </>
+                  )}
                 </div>
                 
                 {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
@@ -514,7 +551,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
              </div>
              
              {/* GPX Preview Button */}
-             {(data.stats.distance || data.stats.duration || data.files.some(f => f.file.name.endsWith('.gpx'))) && (
+             {(data.gpxSummary || data.stats.distance || data.stats.duration) && (
                  <div className="flex justify-end">
                      <button 
                         onClick={() => setShowGpxPreview(true)}