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

// --- HELPER COMPONENT: PLACE AUTOCOMPLETE INPUT (WIDGET VERSION) ---
interface PlaceAutocompleteInputProps {
    value: string;
    onChange: (val: string, preview?: string) => void;
    placeholder: string;
    icon: React.ReactNode;
    scriptLoaded: boolean;
    disabled?: boolean;
    onError?: (msg: string) => void;
    addressPreview?: string;
}

const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value, onChange, placeholder, icon, scriptLoaded, disabled, onError, addressPreview }) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const autocompleteRef = useRef<any>(null);

    useEffect(() => {
        if (!scriptLoaded || !inputRef.current || !(window as any).google || autocompleteRef.current) return;
        try {
            const google = (window as any).google;
            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;
                const name = place.name || place.formatted_address || "";
                const address = place.formatted_address;
                onChange(name, address);
            });
        } catch (e) {
            console.error("Autocomplete init error", e);
            if(onError) onError("Błąd inicjalizacji widgetu Google Maps.");
        }
    }, [scriptLoaded, onError, onChange]);

    return (
        <div className="relative w-full">
            <div className="absolute left-3 top-3.5 z-10 pointer-events-none">
                {icon}
            </div>
            <input 
                ref={inputRef}
                type="text"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                disabled={disabled}
                className="w-full pl-9 p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none font-medium disabled:bg-gray-100 disabled:text-gray-400 transition-colors"
                placeholder={placeholder}
                autoComplete="off"
            />
            {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" />
                    <span className="truncate">{addressPreview}</span>
                </div>
            )}
        </div>
    );
};


interface StepDetailsProps {
  data: WizardState;
  updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
  onGenerate: () => void;
  isGenerating: boolean;
}

const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate, isGenerating }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  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);

  const getEffectiveKey = () => {
    if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
    return getEnvVar('VITE_GOOGLE_MAPS_KEY');
  };

  const effectiveKey = getEffectiveKey();
  const isKeyMissing = !effectiveKey;

  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(() => {
              if ((window as any).google?.maps?.places) {
                  setScriptLoaded(true);
                  setMapError(null);
                  clearInterval(interval);
              }
          }, 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;
      script.onload = () => {
          setTimeout(() => {
            if ((window as any).google?.maps?.places) {
                setScriptLoaded(true);
                setMapError(null);
            }
          }, 200);
      };
      script.onerror = () => {
          setMapError({ title: "Błąd sieci", msg: "Nie udało się pobrać skryptu Google Maps." });
      };
      document.head.appendChild(script);
  };

  useEffect(() => {
    if (data.eventType === 'trip') {
        (window as any).gm_authFailure = () => {
            setMapError({ title: "Klucz odrzucony przez Google", msg: "Podany klucz jest niepoprawny lub domena nie jest autoryzowana." });
            setScriptLoaded(false); 
        };
        if (effectiveKey) loadMapsScript(effectiveKey);
    }
  }, [data.eventType, effectiveKey]); 

  useEffect(() => {
    if (data.eventType === 'trip') {
        if (!data.tripData) {
            updateData({
                tripData: {
                startPoint: { place: '', description: '' },
                endPoint: { place: '', description: '' },
                stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
                travelMode: null, 
                googleMapsKey: ''
                }
            });
        } 
    }
  }, [data.eventType, updateData]);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const newFiles = Array.from(e.target.files || []);
    if (newFiles.length === 0) return;
    if (data.files.length + newFiles.length > 3) {
      setError('Maksymalnie 3 pliki.');
      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) => {
    updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
  };

  const updateApiKey = (val: string) => {
      updateData(prev => ({
          tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
      }));
      if (val.length > 10) setMapError(null);
  };

  const updatePoint = (pointType: 'startPoint' | 'endPoint', field: 'place' | 'description' | 'addressPreview', value: string) => {
      updateData(prev => {
          if (!prev.tripData) return {};
          return {
              tripData: { ...prev.tripData, [pointType]: { ...prev.tripData[pointType], [field]: value } }
          };
      });
  };

  const updateStop = (id: string, field: 'place' | 'description' | 'addressPreview', value: string) => {
    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 } };
    });
  };

  const addStop = () => {
    updateData(prev => {
        if (!prev.tripData) return {};
        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) } };
    });
  };

  const setTravelMode = (mode: 'DRIVING' | 'WALKING') => {
      updateData(prev => {
          if (!prev.tripData) return {};
          return { tripData: { ...prev.tripData, travelMode: mode } };
      });
  };

  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-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 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-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 bg-white">
                      <button 
                          onClick={() => setShowGpxPreview(false)}
                          className="px-6 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">{UI_TEXT.stepDetails.title}</h2>
        <p className="text-gray-500 mb-8 text-lg">
          {data.eventType === 'trip' ? UI_TEXT.stepDetails.subtitleTrip : UI_TEXT.stepDetails.subtitleEvent}
        </p>
      </div>

      <div className="space-y-8">
         
         {/* TRIP SECTION */}
         {data.eventType === 'trip' && data.tripData && (
           <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
              
              {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">{UI_TEXT.stepDetails.tripSection.apiKeyMissing}</h4>
                            <p className="text-xs text-yellow-700 mt-1 mb-2">
                                {UI_TEXT.stepDetails.tripSection.apiKeyMissingDesc}
                            </p>
                            <input 
                                type="text" 
                                value={data.tripData?.googleMapsKey || ''}
                                onChange={(e) => updateApiKey(e.target.value)}
                                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>
                    </div>
                </div>
              )}

              {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} />
                      <div className="text-sm">
                          <p className="font-bold text-red-800">{mapError.title}</p>
                          <p className="mt-1 leading-relaxed">{mapError.msg}</p>
                      </div>
                  </div>
              )}

              <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">{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
                        </span>
                    )}
                 </div>
              </div>
              
              <div className="grid grid-cols-2 gap-4 w-full">
                  <button 
                      onClick={() => setTravelMode('DRIVING')}
                      className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
                          data.tripData.travelMode === 'DRIVING' 
                          ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420] ring-1 ring-[#EA4420] shadow-sm' 
                          : 'border-gray-200 bg-white text-gray-600 hover:border-[#EA4420]/50 hover:bg-gray-50'
                      }`}
                  >
                      <Car size={32} className="mb-2" />
                      <span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeDriving}</span>
                  </button>
                  <button 
                      onClick={() => setTravelMode('WALKING')}
                      className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
                          data.tripData.travelMode === 'WALKING' 
                          ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420] ring-1 ring-[#EA4420] shadow-sm' 
                          : 'border-gray-200 bg-white text-gray-600 hover:border-[#EA4420]/50 hover:bg-gray-50'
                      }`}
                  >
                      <Footprints size={32} className="mb-2" />
                      <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">
                      {UI_TEXT.stepDetails.tripSection.modeRequired}
                  </p>
              )}

              <div className="space-y-4 pt-2">
                <div className="flex gap-3 items-start">
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="relative">
                            <PlaceAutocompleteInput
                                value={data.tripData.startPoint.place}
                                onChange={(val, preview) => {
                                    updatePoint('startPoint', 'place', val);
                                    if(preview) updatePoint('startPoint', 'addressPreview', preview);
                                }}
                                addressPreview={data.tripData.startPoint.addressPreview}
                                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})}
                            />
                        </div>
                        <input 
                            type="text"
                            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={UI_TEXT.stepDetails.tripSection.startDesc}
                        />
                    </div>
                    <div className="w-[42px]"></div>
                </div>

                {data.tripData.stops.map((stop, index) => (
                    <div key={stop.id} className="flex gap-3 items-start group">
                       <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
                          <div className="relative">
                             <PlaceAutocompleteInput
                                value={stop.place}
                                onChange={(val, preview) => {
                                    updateStop(stop.id, 'place', val);
                                    if(preview) updateStop(stop.id, 'addressPreview', preview);
                                }}
                                addressPreview={stop.addressPreview}
                                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})}
                             />
                          </div>
                          <input 
                             type="text"
                             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={UI_TEXT.stepDetails.tripSection.stopDescPlaceholder}
                          />
                       </div>
                       <button 
                         onClick={() => removeStop(stop.id)}
                         className="p-3 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
                         title="Usuń przystanek"
                       >
                         <Trash2 size={18} />
                       </button>
                    </div>
                ))}

                <div className="pl-1">
                    <button 
                        onClick={addStop}
                        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>{UI_TEXT.stepDetails.tripSection.addStop}</span>
                    </button>
                </div>

                <div className="flex gap-3 items-start">
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="relative">
                            <PlaceAutocompleteInput
                                value={data.tripData.endPoint.place}
                                onChange={(val, preview) => {
                                    updatePoint('endPoint', 'place', val);
                                    if(preview) updatePoint('endPoint', 'addressPreview', preview);
                                }}
                                addressPreview={data.tripData.endPoint.addressPreview}
                                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})}
                            />
                        </div>
                        <input 
                            type="text"
                            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={UI_TEXT.stepDetails.tripSection.endDesc}
                        />
                    </div>
                    <div className="w-[42px]"></div>
                </div>
              </div>
           </div>
         )}

         {/* Standard Fields */}
         <div className="space-y-6">
             <div>
                <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={UI_TEXT.stepDetails.fields.titlePlaceholder}
                />
             </div>

             <div>
                <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={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">{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'
                  }`}
                  onClick={() => data.files.length < 3 && fileInputRef.current?.click()}
                >
                  <input 
                    type="file" 
                    ref={fileInputRef} 
                    onChange={handleFileChange} 
                    multiple
                    accept=".gpx,.pdf,image/*"
                    className="hidden" 
                  />
                  {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>}

                {data.files.length > 0 && (
                  <div className="mt-4 grid grid-cols-1 gap-3">
                    {data.files.map((file) => (
                      <div key={file.id} className="flex items-center justify-between bg-gray-50 border border-gray-200 p-3 rounded-md">
                        <div className="flex items-center space-x-3 overflow-hidden">
                           <div className="w-10 h-10 bg-white rounded border border-gray-200 flex items-center justify-center flex-shrink-0 text-gray-400">
                              {file.mimeType.includes('image') ? <ImageIcon size={20} /> : <FileText size={20} />}
                           </div>
                           <span className="text-sm font-medium text-gray-700 truncate">{file.file.name}</span>
                        </div>
                        <button 
                          onClick={() => removeFile(file.id)}
                          className="text-gray-400 hover:text-red-500 p-1"
                        >
                          <X size={18} />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
             </div>
             
             {/* GPX Preview Button */}
             {(data.gpxSummary || data.stats.distance || data.stats.duration) && (
                 <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>

      <div className="pt-6">
        <button 
            onClick={onGenerate}
            disabled={isGenerating || !isReadyToGenerate}
            className="w-full flex items-center justify-center space-x-2 bg-[#EA4420] text-white px-8 py-4 rounded-md hover:bg-[#d63b1a] transition-all disabled:opacity-75 disabled:cursor-not-allowed font-bold text-lg shadow-sm hover:shadow-md"
        >
            {isGenerating ? (
            <>
                <Loader2 size={24} className="animate-spin" />
                <span>{UI_TEXT.stepDetails.generateBtn.loading}</span>
            </>
            ) : (
            <>
                <Sparkles size={24} />
                <span>{UI_TEXT.stepDetails.generateBtn.idle}</span>
            </>
            )}
        </button>
      </div>
    </div>
  );
};

export default StepDetails;