import React, { useState } from 'react';
import { GeneratedContent, WizardState } from '../types';
import { Copy, Check, Instagram, Image as ImageIcon, MessageSquare, Edit2, RefreshCw, X } from 'lucide-react';
import TripMap from './TripMap';

interface StepResultProps {
  content: GeneratedContent;
  onRegenerate: (slideCount: number, feedback: string) => void;
  isRegenerating: boolean;
  // We need to access the wizard state to check for trip data
  // But standard props here only have content. 
  // Ideally, StepResult should receive `data` too, but for now I'll check if I can pass it from App.tsx or infer it.
  // Wait, I can't access `data` unless I modify App.tsx to pass it to StepResult.
  // Let's assume the parent updates the props.
  // Actually, I'll modify the StepResultProps in this file, but I also need to modify App.tsx to pass 'data'.
  // However, looking at App.tsx, StepResult is rendered inside App.tsx. I can pass `data` there easily.
  // But wait, the previous code block for StepResult didn't show 'data' in props.
  // I will add `tripData` to the props.
}

// Extending interface to include tripData optionally passed from parent
// Note: I will update App.tsx to pass this prop.
interface ExtendedStepResultProps extends StepResultProps {
    tripData?: WizardState['tripData'];
}

const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate, isRegenerating, tripData }) => {
  const [copiedSection, setCopiedSection] = useState<string | null>(null);
  const [copiedSlideIndex, setCopiedSlideIndex] = useState<number | null>(null);
  
  // Edit Mode State
  const [isEditing, setIsEditing] = useState(false);
  const [slideCount, setSlideCount] = useState(content.slides.length || 12);
  const [feedback, setFeedback] = useState("");

  const copyToClipboard = (text: string, sectionId: string) => {
    navigator.clipboard.writeText(text);
    setCopiedSection(sectionId);
    setTimeout(() => setCopiedSection(null), 2000);
  };

  const copySlideText = (text: string, index: number) => {
    navigator.clipboard.writeText(text);
    setCopiedSlideIndex(index);
    setTimeout(() => setCopiedSlideIndex(null), 2000);
  };

  const handleApplyChanges = () => {
    onRegenerate(slideCount, feedback);
    setIsEditing(false); // Close edit panel on submit, assumes success or loading state handles visual feedback
  };

  return (
    <div className="space-y-12 animate-fade-in pb-20 relative">
      
      {/* Top Header with Edit Button */}
      <div className="text-center max-w-2xl mx-auto relative">
        <h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">Twój Vibe Gotowy! 🎉</h2>
        <p className="text-gray-500 text-lg mb-6">Oto kompletna struktura Twojego posta. Skopiuj i publikuj.</p>
        
        {!isEditing && !isRegenerating && (
          <button 
            onClick={() => setIsEditing(true)}
            className="inline-flex items-center space-x-2 text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 rounded-full transition-colors"
          >
            <Edit2 size={16} />
            <span>Edytuj / Popraw</span>
          </button>
        )}
      </div>

      {/* Edit Panel (Conditional) */}
      {(isEditing || isRegenerating) && (
        <div className="bg-white border-2 border-[#EA4420]/20 rounded-xl p-6 shadow-sm mb-10 animate-fade-in relative overflow-hidden">
           {isRegenerating && (
             <div className="absolute inset-0 bg-white/80 z-10 flex flex-col items-center justify-center backdrop-blur-[1px]">
                <RefreshCw size={32} className="text-[#EA4420] animate-spin mb-3" />
                <p className="font-bold text-gray-800">Nanuszę poprawki...</p>
             </div>
           )}
           
           <div className="flex justify-between items-start mb-6">
              <h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
                <Edit2 size={20} className="text-[#EA4420]" />
                Wprowadź poprawki
              </h3>
              {!isRegenerating && (
                <button onClick={() => setIsEditing(false)} className="text-gray-400 hover:text-gray-600">
                  <X size={24} />
                </button>
              )}
           </div>

           <div className="space-y-6">
              {/* Slider */}
              <div>
                <label className="flex justify-between text-sm font-bold text-gray-700 mb-3">
                  <span>Liczba slajdów / Elementów</span>
                  <span className="text-[#EA4420]">{slideCount}</span>
                </label>
                <input 
                  type="range" 
                  min="3" 
                  max="20" 
                  value={slideCount} 
                  onChange={(e) => setSlideCount(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#EA4420]"
                />
                <div className="flex justify-between text-xs text-gray-400 mt-2 font-medium">
                  <span>3 (Minimum)</span>
                  <span>20 (Maksimum)</span>
                </div>
              </div>

              {/* Feedback Textarea */}
              <div>
                 <label className="block text-sm font-bold text-gray-700 mb-2">Co chcesz zmienić w treści?</label>
                 <textarea
                   value={feedback}
                   onChange={(e) => setFeedback(e.target.value)}
                   placeholder="np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji w slajdzie nr 3. Zrób bardziej agresywny wstęp."
                   rows={3}
                   className="w-full border border-gray-200 rounded-md p-3 text-sm focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none"
                 />
              </div>

              {/* Action Buttons */}
              <div className="flex justify-end pt-2">
                <button
                  onClick={handleApplyChanges}
                  className="bg-[#EA4420] text-white px-6 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-colors flex items-center gap-2"
                >
                  <RefreshCw size={18} />
                  Zastosuj poprawki
                </button>
              </div>
           </div>
        </div>
      )}
      
      {/* TRIP MAP (IF APPLICABLE) */}
      {tripData && tripData.startPoint && (
          <TripMap tripData={tripData} />
      )}

      {/* Caption Section */}
      <div className="bg-white rounded-md border border-gray-200 overflow-hidden">
        <div className="bg-gray-50 px-8 py-5 border-b border-gray-200 flex justify-between items-center">
          <div className="flex items-center space-x-3 text-gray-900">
            <MessageSquare size={20} className="text-[#EA4420]" />
            <span className="font-bold">Post Caption (Opis)</span>
          </div>
          <button
            onClick={() => copyToClipboard(content.caption, 'caption')}
            className="flex items-center space-x-2 text-sm font-semibold text-[#EA4420] hover:text-[#d63b1a] transition-colors bg-white border border-gray-200 px-4 py-2 rounded-md hover:bg-gray-50"
          >
            {copiedSection === 'caption' ? <Check size={16} /> : <Copy size={16} />}
            <span>{copiedSection === 'caption' ? 'Skopiowano!' : 'Kopiuj'}</span>
          </button>
        </div>
        <div className="p-8 text-gray-700 whitespace-pre-wrap font-sans text-base leading-relaxed">
            {content.caption}
        </div>
      </div>

      {/* Slides Grid */}
      <div>
        <div className="flex items-center space-x-3 text-gray-900 mb-8 px-1">
           <ImageIcon size={28} className="text-[#EA4420]" />
           <h3 className="text-2xl font-bold tracking-tight">Struktura Wizualna (Slajdy / Zdjęcia)</h3>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {content.slides.map((slide, idx) => (
             <div key={idx} className="bg-white rounded-md border border-gray-200 flex flex-col h-full hover:border-[#EA4420]/30 transition-colors group">
                <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
                   <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">
                     Element {idx + 1}
                   </span>
                </div>
                <div className="p-6 flex-1 flex flex-col space-y-6">
                   <div>
                     <div className="flex justify-between items-start mb-2">
                        <span className="text-xs text-[#EA4420] uppercase font-bold tracking-wider">Nagłówek / Typ</span>
                        <button 
                          onClick={() => copySlideText(slide.overlay_text, idx)}
                          className="text-gray-300 hover:text-[#EA4420] transition-colors"
                          title="Kopiuj tekst"
                        >
                          {copiedSlideIndex === idx ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
                        </button>
                     </div>
                     <p className="font-bold text-gray-900 text-xl leading-tight">"{slide.overlay_text}"</p>
                   </div>
                   
                   <div className="pt-4 border-t border-gray-100 mt-auto">
                     <div className="flex items-start space-x-3 text-gray-500">
                        <ImageIcon size={16} className="mt-1 flex-shrink-0 text-gray-400" />
                        <p className="text-sm italic leading-relaxed">{slide.image_prompt}</p>
                     </div>
                   </div>
                </div>
             </div>
           ))}
        </div>
      </div>
    </div>
  );
};

export default StepResult;