Sprzątanie projektu - dodanie podglądu gpx - dodanie obsługi logo i avatara - dodanie editable config do prostej edycji tekstów na stronie

components/StepDetails.tsx

@@ -1,9 +1,10 @@
 
 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 } from 'lucide-react';
+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 { getEnvVar } from '../utils/envUtils';
+import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
 
 // --- HELPER COMPONENT: PLACE AUTOCOMPLETE INPUT (WIDGET VERSION) ---
 interface PlaceAutocompleteInputProps {
@@ -21,33 +22,20 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
     const inputRef = useRef<HTMLInputElement>(null);
     const autocompleteRef = useRef<any>(null);
 
-    // Initialize Google Autocomplete Widget
     useEffect(() => {
         if (!scriptLoaded || !inputRef.current || !(window as any).google || autocompleteRef.current) return;
-
         try {
             const google = (window as any).google;
-            
-            // Use the standard Autocomplete widget attached to the input
             const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
                 fields: ["place_id", "geometry", "name", "formatted_address"],
                 types: ["geocode", "establishment"]
             });
-            
             autocompleteRef.current = autocomplete;
-
             autocomplete.addListener("place_changed", () => {
                 const place = autocomplete.getPlace();
-                
-                if (!place.geometry) {
-                    return;
-                }
-
-                // FIX: Use formatted_address as fallback if name is empty/missing
+                if (!place.geometry) return;
                 const name = place.name || place.formatted_address || "";
                 const address = place.formatted_address;
-                
-                // Update parent state
                 onChange(name, address);
             });
         } catch (e) {
@@ -71,8 +59,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
                 placeholder={placeholder}
                 autoComplete="off"
             />
-            
-            {/* Address Confirmation Hint */}
             {addressPreview && (
                 <div className="text-[10px] text-gray-500 mt-1 ml-1 flex items-center gap-1 animate-fade-in">
                     <CheckCircle2 size={10} className="text-green-500" />
@@ -84,7 +70,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
 };
 
 
-// --- MAIN COMPONENT ---
 interface StepDetailsProps {
   data: WizardState;
   updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
@@ -97,27 +82,24 @@ 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);
+  
+  // State for GPX Text Preview
+  const [showGpxPreview, setShowGpxPreview] = useState(false);
 
-  // STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
   const getEffectiveKey = () => {
     if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
     return getEnvVar('VITE_GOOGLE_MAPS_KEY');
   };
 
   const effectiveKey = getEffectiveKey();
-  
-  // Warning if no key is found at all
   const isKeyMissing = !effectiveKey;
 
-  // --- GOOGLE MAPS LOADING ---
   const loadMapsScript = (apiKey: string) => {
       if (!apiKey) return;
-      
       if ((window as any).google?.maps?.places) {
           setScriptLoaded(true);
           return;
       }
-      
       const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
       if (existingScript) {
           const interval = setInterval(() => {
@@ -129,7 +111,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
           }, 500);
           return;
       }
-      
       const script = document.createElement('script');
       script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&v=weekly`;
       script.async = true;
@@ -157,7 +138,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
     }
   }, [data.eventType, effectiveKey]); 
 
-  // Initialize Trip Data if missing
   useEffect(() => {
     if (data.eventType === 'trip') {
         if (!data.tripData) {
@@ -167,7 +147,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                 endPoint: { place: '', description: '' },
                 stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
                 travelMode: null, 
-                googleMapsKey: '' // Don't auto-fill undefined keys
+                googleMapsKey: ''
                 }
             });
         } 
@@ -190,7 +170,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
     updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
   };
 
-  // --- TRIP DATA HELPERS ---
   const updateApiKey = (val: string) => {
       updateData(prev => ({
           tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
@@ -202,13 +181,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
       updateData(prev => {
           if (!prev.tripData) return {};
           return {
-              tripData: {
-                  ...prev.tripData,
-                  [pointType]: {
-                      ...prev.tripData[pointType],
-                      [field]: value
-                  }
-              }
+              tripData: { ...prev.tripData, [pointType]: { ...prev.tripData[pointType], [field]: value } }
           };
       });
   };
@@ -217,79 +190,97 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
     updateData(prev => {
         if (!prev.tripData) return {};
         const newStops = prev.tripData.stops.map(s => s.id === id ? { ...s, [field]: value } : s);
-        return {
-            tripData: { ...prev.tripData, stops: newStops }
-        };
+        return { tripData: { ...prev.tripData, stops: newStops } };
     });
   };
 
   const addStop = () => {
     updateData(prev => {
         if (!prev.tripData) return {};
-        return {
-             tripData: {
-                ...prev.tripData,
-                stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }]
-            }
-        };
+        return { tripData: { ...prev.tripData, stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }] } };
     });
   };
 
   const removeStop = (id: string) => {
     updateData(prev => {
         if (!prev.tripData) return {};
-        return {
-            tripData: {
-                ...prev.tripData,
-                stops: prev.tripData.stops.filter(s => s.id !== id)
-            }
-        };
+        return { tripData: { ...prev.tripData, stops: prev.tripData.stops.filter(s => s.id !== id) } };
     });
   };
 
   const setTravelMode = (mode: 'DRIVING' | 'WALKING') => {
       updateData(prev => {
           if (!prev.tripData) return {};
-          return {
-              tripData: { ...prev.tripData, travelMode: mode }
-          };
+          return { tripData: { ...prev.tripData, travelMode: mode } };
       });
   };
 
-  // Validation Check
   const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
   const isReadyToGenerate = data.title && isTripModeValid;
 
   return (
-    <div className="space-y-10 animate-fade-in">
+    <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="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
+                      </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>
+                  </div>
+                  <div className="p-4 border-t border-gray-100 flex justify-end">
+                      <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"
+                      >
+                          Zamknij
+                      </button>
+                  </div>
+              </div>
+          </div>
+      )}
+
       <div>
-        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Szczegóły</h2>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepDetails.title}</h2>
         <p className="text-gray-500 mb-8 text-lg">
-          {data.eventType === 'trip' ? 'Zaplanuj trasę i opisz przebieg podróży.' : 'Uzupełnij informacje o wydarzeniu.'}
+          {data.eventType === 'trip' ? UI_TEXT.stepDetails.subtitleTrip : UI_TEXT.stepDetails.subtitleEvent}
         </p>
       </div>
 
       <div className="space-y-8">
          
-         {/* SEKCJA DLA WYCIECZEK (TRIP) */}
+         {/* TRIP SECTION */}
          {data.eventType === 'trip' && data.tripData && (
            <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
               
-              {/* Manual Input if Env key is missing */}
               {isKeyMissing && !data.tripData.googleMapsKey && (
                 <div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
                     <div className="flex items-start gap-3">
                         <AlertCircle className="text-yellow-600 mt-0.5" size={20} />
                         <div className="flex-1">
-                            <h4 className="font-bold text-yellow-800 text-sm">Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)</h4>
+                            <h4 className="font-bold text-yellow-800 text-sm">{UI_TEXT.stepDetails.tripSection.apiKeyMissing}</h4>
                             <p className="text-xs text-yellow-700 mt-1 mb-2">
-                                Wklej klucz ręcznie poniżej, aby mapy zadziałały.
+                                {UI_TEXT.stepDetails.tripSection.apiKeyMissingDesc}
                             </p>
                             <input 
                                 type="text" 
                                 value={data.tripData?.googleMapsKey || ''}
                                 onChange={(e) => updateApiKey(e.target.value)}
-                                placeholder="Wklej klucz Google Maps API (AIza...)"
+                                placeholder={UI_TEXT.stepDetails.tripSection.apiKeyPlaceholder}
                                 className="w-full p-2 text-sm border border-yellow-300 rounded bg-white focus:border-[#EA4420] outline-none"
                             />
                         </div>
@@ -297,7 +288,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                 </div>
               )}
 
-              {/* Detailed Error Banner for Maps */}
               {mapError && (
                   <div className="bg-red-50 border border-red-200 p-4 rounded-lg flex items-start gap-3 text-red-700">
                       <AlertCircle className="flex-shrink-0 mt-0.5" size={20} />
@@ -311,7 +301,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
               <div className="flex items-center justify-between gap-2 mb-2 pt-1">
                  <div className="flex items-center gap-2">
                     <Navigation className="text-[#EA4420]" size={24} />
-                    <h3 className="text-xl font-bold text-gray-900">Plan Podróży</h3>
+                    <h3 className="text-xl font-bold text-gray-900">{UI_TEXT.stepDetails.tripSection.title}</h3>
                     {scriptLoaded && !mapError && (
                         <span className="hidden sm:flex text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-bold items-center gap-1">
                             <CheckCircle2 size={12} /> API OK
@@ -330,7 +320,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                       }`}
                   >
                       <Car size={32} className="mb-2" />
-                      <span className="font-bold text-sm sm:text-base">Samochód / Droga</span>
+                      <span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeDriving}</span>
                   </button>
                   <button 
                       onClick={() => setTravelMode('WALKING')}
@@ -341,13 +331,13 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                       }`}
                   >
                       <Footprints size={32} className="mb-2" />
-                      <span className="font-bold text-sm sm:text-base">Pieszo / Szlak</span>
+                      <span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeWalking}</span>
                   </button>
               </div>
 
               {!data.tripData.travelMode && (
                   <p className="text-center text-xs text-red-500 font-bold animate-pulse">
-                      * Wybór rodzaju trasy jest wymagany
+                      {UI_TEXT.stepDetails.tripSection.modeRequired}
                   </p>
               )}
 
@@ -362,7 +352,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                                     if(preview) updatePoint('startPoint', 'addressPreview', preview);
                                 }}
                                 addressPreview={data.tripData.startPoint.addressPreview}
-                                placeholder="Punkt Startowy (np. Kraków)"
+                                placeholder={UI_TEXT.stepDetails.tripSection.startPoint}
                                 icon={<Flag size={16} className="text-green-600" />}
                                 scriptLoaded={scriptLoaded}
                                 onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -373,7 +363,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                             value={data.tripData.startPoint.description}
                             onChange={(e) => updatePoint('startPoint', 'description', e.target.value)}
                             className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
-                            placeholder="Opis startu (np. Zbiórka o 6:00)"
+                            placeholder={UI_TEXT.stepDetails.tripSection.startDesc}
                         />
                     </div>
                     <div className="w-[42px]"></div>
@@ -390,7 +380,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                                     if(preview) updateStop(stop.id, 'addressPreview', preview);
                                 }}
                                 addressPreview={stop.addressPreview}
-                                placeholder={`Przystanek ${index + 1}`}
+                                placeholder={`${UI_TEXT.stepDetails.tripSection.stopPlaceholder} ${index + 1}`}
                                 icon={<MapPin size={16} className="text-blue-500" />}
                                 scriptLoaded={scriptLoaded}
                                 onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -401,7 +391,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                              value={stop.description}
                              onChange={(e) => updateStop(stop.id, 'description', e.target.value)}
                              className="w-full p-3 border border-gray-200 rounded-md focus:border-[#EA4420] outline-none"
-                             placeholder="Co tam robiliście?"
+                             placeholder={UI_TEXT.stepDetails.tripSection.stopDescPlaceholder}
                           />
                        </div>
                        <button 
@@ -420,7 +410,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                         className="flex items-center space-x-2 text-sm font-bold text-[#EA4420] hover:bg-[#EA4420]/5 px-4 py-2 rounded-md transition-colors"
                     >
                         <Plus size={16} />
-                        <span>Dodaj przystanek</span>
+                        <span>{UI_TEXT.stepDetails.tripSection.addStop}</span>
                     </button>
                 </div>
 
@@ -434,7 +424,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                                     if(preview) updatePoint('endPoint', 'addressPreview', preview);
                                 }}
                                 addressPreview={data.tripData.endPoint.addressPreview}
-                                placeholder="Punkt Końcowy (np. Zakopane)"
+                                placeholder={UI_TEXT.stepDetails.tripSection.endPoint}
                                 icon={<Target size={16} className="text-red-600" />}
                                 scriptLoaded={scriptLoaded}
                                 onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -445,7 +435,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                             value={data.tripData.endPoint.description}
                             onChange={(e) => updatePoint('endPoint', 'description', e.target.value)}
                             className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
-                            placeholder="Opis końca (np. Nareszcie piwo)"
+                            placeholder={UI_TEXT.stepDetails.tripSection.endDesc}
                         />
                     </div>
                     <div className="w-[42px]"></div>
@@ -457,29 +447,29 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
          {/* Standard Fields */}
          <div className="space-y-6">
              <div>
-                <label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label>
+                <label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.title}</label>
                 <input 
                   type="text" 
                   value={data.title}
                   onChange={(e) => updateData({ title: e.target.value })}
                   className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
-                  placeholder="np. Roadtrip po Bałkanach"
+                  placeholder={UI_TEXT.stepDetails.fields.titlePlaceholder}
                 />
              </div>
 
              <div>
-                <label className="block text-sm font-bold text-gray-700 mb-2">Krótki opis / Notatki</label>
+                <label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.desc}</label>
                 <textarea
                   value={data.description}
                   onChange={(e) => updateData({ description: e.target.value })}
-                  placeholder="Ogólny klimat, emocje, dodatkowe szczegóły, których nie ma w planie wycieczki..."
+                  placeholder={UI_TEXT.stepDetails.fields.descPlaceholder}
                   rows={4}
                   className="w-full border border-gray-200 rounded-md p-4 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300"
                 />
              </div>
 
              <div>
-                <label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
+                <label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.files}</label>
                 <div 
                   className={`border-2 border-dashed rounded-md p-8 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
                     error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
@@ -495,8 +485,8 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                     className="hidden" 
                   />
                   <UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
-                  <p className="text-gray-600 font-medium">Kliknij, aby dodać pliki</p>
-                  <p className="text-gray-400 text-xs mt-1">GPX, PDF, JPG, PNG</p>
+                  <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>}
@@ -522,6 +512,19 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
                   </div>
                 )}
              </div>
+             
+             {/* GPX Preview Button */}
+             {(data.stats.distance || data.stats.duration || data.files.some(f => f.file.name.endsWith('.gpx'))) && (
+                 <div className="flex justify-end">
+                     <button 
+                        onClick={() => setShowGpxPreview(true)}
+                        className="text-xs font-bold text-[#EA4420] flex items-center gap-1 hover:underline"
+                     >
+                         <Eye size={14} />
+                         {UI_TEXT.stepDetails.fields.gpxPreviewBtn}
+                     </button>
+                 </div>
+             )}
          </div>
       </div>
 
@@ -534,12 +537,12 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
             {isGenerating ? (
             <>
                 <Loader2 size={24} className="animate-spin" />
-                <span>Generowanie Historii...</span>
+                <span>{UI_TEXT.stepDetails.generateBtn.loading}</span>
             </>
             ) : (
             <>
                 <Sparkles size={24} />
-                <span>Generuj Relację</span>
+                <span>{UI_TEXT.stepDetails.generateBtn.idle}</span>
             </>
             )}
         </button>