import React, { useState, useEffect, useRef } from 'react';
import { 
  Send, Copy, RotateCcw, Sparkles, Terminal, Film, 
  CheckCircle, Clock, Layers, User, 
  Mic, Clapperboard, FileText, Check, FileJson
} from 'lucide-react';

// --- Types ---
type Message = {
  id: string;
  sender: 'bot' | 'user';
  text: string;
  isError?: boolean;
};

type Answers = {
  title: string;
  duration: string;
  promptsPerScene: string;
  characterLock: string;
  voPerspective: string;
  voType: string;
  storyStructure: string;
  voDensity: string;
};

// JSON Structure for API Response
type StoryData = {
  title: string;
  production_settings: {
    duration: string;
    estimated_scenes: string;
    prompts_per_scene: string;
    vo_perspective: string;
    vo_style: string;
    vo_density: string;
  };
  story_beat: string;
  vo_script: string;
  scenes: {
    number: number;
    name: string;
    purpose: string;
    vo_lines: string;
    prompts: string[];
  }[];
};

// --- Question Flow Definitions ---
const QUESTIONS = [
  {
    id: 'title',
    text: "Cerita apa yang mau dibuat? Masukkan judul cerita.",
    icon: <FileText className="w-5 h-5 text-emerald-400" />
  },
  {
    id: 'duration',
    text: "Mau video durasi berapa menit? (contoh: 3 / 6 / 8 / 10 / 12)",
    icon: <Clock className="w-5 h-5 text-blue-400" />
  },
  {
    id: 'promptsPerScene',
    text: "Mau berapa prompt Veo 3 per scene? (contoh: 3 / 4 / 5)",
    icon: <Layers className="w-5 h-5 text-purple-400" />
  },
  {
    id: 'characterLock',
    text: "Karakter utama siapa/apa? Tempelkan CHARACTER LOCK lengkap (atau deskripsi detail karakter + pakaian).",
    icon: <User className="w-5 h-5 text-orange-400" />,
    validate: (input: string) => input.length > 20
  },
  {
    id: 'voPerspective',
    text: "VO mau seperti apa? (ketik pilihan: 'third person narrator', 'no VO', 'other')",
    icon: <Mic className="w-5 h-5 text-red-400" />
  },
  {
    id: 'voType',
    text: "Tipe VO apa? (ketik pilihan: 'National Geographic documentary (American)', 'BBC documentary', 'YouTube casual documentary', 'other')",
    icon: <Mic className="w-5 h-5 text-pink-400" />
  },
  {
    id: 'storyStructure',
    text: "Alur cerita mau seperti apa? Pilih salah satu:\nA) Hook dengan adegan inti (ekstrim/bahaya) lalu diikuti cerita\nB) Storyline urut seperti biasa (chronological)\nC) Yang lain (aku buatin)",
    icon: <Clapperboard className="w-5 h-5 text-yellow-400" />
  },
  {
    id: 'voDensity',
    text: "VO ngomongnya gimana?\nA) Massive (sering ngomong)\nB) Singkat & padat tapi penonton paham",
    icon: <Terminal className="w-5 h-5 text-cyan-400" />
  },
];

// --- API Helper ---
const generateStoryWithGemini = async (answers: Answers, apiKey: string): Promise<StoryData> => {
  const systemPrompt = `
    You are "VEO STORY WIZARD" — an interactive prompt generator for Veo 3.
    
    GOAL:
    Generate a complete video package based on the user's inputs. Return ONLY valid JSON.
    
    USER INPUTS:
    1. Title: ${answers.title}
    2. Duration: ${answers.duration} minutes
    3. Prompts per scene: ${answers.promptsPerScene}
    4. CHARACTER LOCK BLOCK: """${answers.characterLock}"""
    5. VO Perspective: ${answers.voPerspective}
    6. VO Type: ${answers.voType}
    7. Story Structure Choice: ${answers.storyStructure}
    8. VO Density: ${answers.voDensity}

    HARD CONSTRAINTS (MUST ENFORCE):
    - Only ONE on-screen character: the main character defined in the CHARACTER LOCK. No other humans.
    - No first-person voiceover. No "I / my / me" from the character.
    - No direct-to-camera behavior. Character never looks at lens.
    - Documentary/observational realism. Avoid "AI look".
    - Prompts must be in English. VO must be American English (NatGeo style).

    CRITICAL - CONTINUITY & FLOW RULES:
    1. **Seamless Transitions:** Ensure strict narrative flow. Scene 2 must logically follow Scene 1 in terms of geography, time of day, and action. If Scene 1 ends with the character walking towards a cabin, Scene 2 must start near or entering that cabin. Do not make random jumps.
    2. **Prop Consistency:** If a prop is introduced (e.g., "wooden sled", "red lantern"), reuse the EXACT same phrasing in subsequent scenes where it appears.
    3. **Environmental Continuity:** Weather and lighting must transition logically (e.g., from afternoon sun to sunset to twilight).
    
    OUTPUT FORMAT (JSON ONLY):
    {
      "title": "String",
      "production_settings": {
        "duration": "String",
        "estimated_scenes": "String",
        "prompts_per_scene": "String",
        "vo_perspective": "String",
        "vo_style": "String",
        "vo_density": "String"
      },
      "story_beat": "String (Explain structure)",
      "vo_script": "String (Full script with timecodes using \\n for line breaks)",
      "scenes": [
        {
          "number": Number,
          "name": "String",
          "purpose": "String",
          "vo_lines": "String (Specific VO lines for this scene)",
          "prompts": ["String (Full Prompt 1)", "String (Full Prompt 2)"] 
        }
      ]
    }
    
    IMPORTANT PROMPT FORMAT: 
    - In the "prompts" array, each string MUST be the COMPLETE prompt: Start verbatim with the CHARACTER LOCK BLOCK, then a blank line, then "SCENE: [Description]".
    - Generate ${answers.promptsPerScene} variations per scene.
    - Describe the scene action as a continuation of the previous scene's event.
  `;

  try {
    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        contents: [{ parts: [{ text: systemPrompt }] }],
        generationConfig: {
          response_mime_type: "application/json"
        }
      })
    });

    const data = await response.json();
    if (data.error) throw new Error(data.error.message);
    const text = data.candidates[0].content.parts[0].text;
    return JSON.parse(text);
  } catch (error) {
    throw error;
  }
};

export default function VeoStoryWizard() {
  const [apiKey, setApiKey] = useState('');
  const [hasKey, setHasKey] = useState(false);
  const [step, setStep] = useState(0); 
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputText, setInputText] = useState('');
  const [answers, setAnswers] = useState<Answers>({
    title: '',
    duration: '',
    promptsPerScene: '',
    characterLock: '',
    voPerspective: '',
    voType: '',
    storyStructure: '',
    voDensity: '',
  });
  const [isGenerating, setIsGenerating] = useState(false);
  const [finalResult, setFinalResult] = useState<StoryData | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Initialize chat
  useEffect(() => {
    if (hasKey && messages.length === 0) {
      setMessages([{
        id: 'init',
        sender: 'bot',
        text: QUESTIONS[0].text
      }]);
    }
  }, [hasKey]);

  // Auto-scroll
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isGenerating, finalResult]);

  const handleSendMessage = async () => {
    if (!inputText.trim()) return;

    const currentQ = QUESTIONS[step];
    
    const userMsg: Message = {
      id: Date.now().toString(),
      sender: 'user',
      text: inputText
    };
    setMessages(prev => [...prev, userMsg]);
    
    if (currentQ.validate && !currentQ.validate(inputText)) {
      setMessages(prev => [...prev, {
        id: Date.now().toString() + 'err',
        sender: 'bot',
        text: "Input terlalu pendek atau tidak lengkap. Mohon masukkan deskripsi yang lebih detail.",
        isError: true
      }]);
      setInputText('');
      return;
    }

    const newAnswers = { ...answers, [currentQ.id]: inputText };
    setAnswers(newAnswers);
    setInputText('');

    if (step < QUESTIONS.length - 1) {
      const nextStep = step + 1;
      setStep(nextStep);
      setTimeout(() => {
        setMessages(prev => [...prev, {
          id: Date.now().toString(),
          sender: 'bot',
          text: QUESTIONS[nextStep].text
        }]);
      }, 500);
    } else {
      setIsGenerating(true);
      try {
        const result = await generateStoryWithGemini(newAnswers, apiKey);
        setFinalResult(result);
      } catch (error: any) {
        setMessages(prev => [...prev, {
          id: Date.now().toString(),
          sender: 'bot',
          text: `Error generating story: ${error.message || 'Unknown error'}. Please check your API key.`,
          isError: true
        }]);
      } finally {
        setIsGenerating(false);
      }
    }
  };

  // Robust Copy Function using document.execCommand for iframe compatibility
  const copyText = (text: string, id: string) => {
    try {
      // Create a temporary textarea element
      const textArea = document.createElement("textarea");
      textArea.value = text;
      
      // Ensure it's not visible but part of DOM
      textArea.style.position = "fixed";
      textArea.style.left = "-9999px";
      textArea.style.top = "0";
      document.body.appendChild(textArea);
      
      // Select and copy
      textArea.focus();
      textArea.select();
      
      const successful = document.execCommand('copy');
      document.body.removeChild(textArea);
      
      if (successful) {
        setCopiedId(id);
        setTimeout(() => setCopiedId(null), 2000);
      } else {
        console.error('Copy command failed');
      }
    } catch (err) {
      console.error('Fallback copy failed', err);
    }
  };

  const copyFullScript = () => {
    if (!finalResult) return;
    let fullText = `# ${finalResult.title}\n\n## Story Beat\n${finalResult.story_beat}\n\n## VO Script\n${finalResult.vo_script}\n\n## Scenes\n`;
    finalResult.scenes.forEach(scene => {
      fullText += `\n### Scene ${scene.number}: ${scene.name}\nVO: ${scene.vo_lines}\n`;
      scene.prompts.forEach((p, i) => {
        fullText += `\nPrompt ${i+1}:\n${p}\n`;
      });
    });
    copyText(fullText, 'full-script');
  };

  const resetWizard = () => {
    setStep(0);
    setMessages([{ id: 'init', sender: 'bot', text: QUESTIONS[0].text }]);
    setAnswers({
      title: '',
      duration: '',
      promptsPerScene: '',
      characterLock: '',
      voPerspective: '',
      voType: '',
      storyStructure: '',
      voDensity: '',
    });
    setFinalResult(null);
  };

  // --- Render Functions ---

  if (!hasKey) {
    return (
      <div className="min-h-screen bg-[#0a0a12] text-slate-200 flex items-center justify-center p-4 font-sans relative overflow-hidden">
        {/* Decorative Background Elements */}
        <div className="absolute top-0 left-0 w-96 h-96 bg-emerald-500/10 rounded-full blur-[128px] pointer-events-none"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-[128px] pointer-events-none"></div>

        <div className="max-w-md w-full bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-8 shadow-2xl relative z-10">
          <div className="flex flex-col items-center gap-4 mb-8">
            <div className="w-16 h-16 bg-slate-800 rounded-2xl flex items-center justify-center shadow-lg border border-slate-700">
              <Film className="w-8 h-8 text-emerald-400" />
            </div>
            <div className="text-center">
              <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-emerald-400 to-blue-500 bg-clip-text text-transparent">VEO STORY WIZARD</h1>
              <p className="text-slate-400 mt-2 text-sm">Interactive Cinematic Prompt Generator</p>
            </div>
          </div>
          
          <div className="space-y-5">
            <div>
              <label className="block text-xs uppercase tracking-wider text-slate-500 mb-2 font-medium">Gemini API Key</label>
              <input 
                type="password" 
                value={apiKey}
                onChange={(e) => setApiKey(e.target.value)}
                placeholder="AIzaSy..."
                className="w-full bg-black/40 border border-slate-700 rounded-xl p-3.5 text-white focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 focus:outline-none transition-all placeholder:text-slate-700"
              />
            </div>
            <button 
              onClick={() => apiKey.length > 10 && setHasKey(true)}
              disabled={apiKey.length <= 10}
              className="w-full bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-emerald-900/20 flex items-center justify-center gap-2"
            >
              Start Wizard <Sparkles className="w-4 h-4" />
            </button>
            <p className="text-xs text-center text-slate-600 mt-4">
              Requires Google Gemini API Key. <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-emerald-500 hover:text-emerald-400 transition-colors">Get it here</a>.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0a0a12] text-slate-200 font-sans flex flex-col relative">
       {/* Background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-emerald-900/10 rounded-full blur-[150px]"></div>
         <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-900/10 rounded-full blur-[150px]"></div>
       </div>

      {/* Header */}
      <header className="bg-slate-900/80 backdrop-blur-lg border-b border-white/5 p-4 sticky top-0 z-20">
        <div className="max-w-5xl mx-auto flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="bg-emerald-500/10 p-2 rounded-lg border border-emerald-500/20">
              <Terminal className="w-5 h-5 text-emerald-400" />
            </div>
            <div>
              <h1 className="font-bold tracking-wide text-sm md:text-base text-slate-100">VEO STORY WIZARD</h1>
              {!finalResult && (
                <div className="flex items-center gap-2 text-xs text-slate-500 mt-0.5">
                  <span className="flex h-2 w-2 relative">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                  </span>
                  Step {step + 1} of {QUESTIONS.length}
                </div>
              )}
            </div>
          </div>
          <div className="flex gap-2">
            {finalResult && (
              <button 
                onClick={copyFullScript}
                className="group px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-medium flex items-center gap-2 transition-all shadow-lg shadow-emerald-900/20"
              >
                {copiedId === 'full-script' ? <CheckCircle className="w-3.5 h-3.5" /> : <FileJson className="w-3.5 h-3.5" />} 
                {copiedId === 'full-script' ? 'Copied All' : 'Copy All'}
              </button>
            )}
            <button 
              onClick={resetWizard}
              className="group px-3 py-1.5 rounded-lg border border-slate-700 hover:bg-slate-800 text-slate-400 hover:text-white text-xs font-medium flex items-center gap-2 transition-all"
            >
              <RotateCcw className="w-3.5 h-3.5 group-hover:-rotate-180 transition-transform duration-500" /> Reset
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 max-w-5xl w-full mx-auto p-4 md:p-6 flex flex-col gap-6 z-10">
        
        {/* Progress Bar (Visible only during chat) */}
        {!finalResult && (
          <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
            <div 
              className="h-full bg-gradient-to-r from-emerald-500 to-blue-500 transition-all duration-500 ease-out"
              style={{ width: `${((step) / (QUESTIONS.length)) * 100}%` }}
            ></div>
          </div>
        )}

        {/* Chat Area */}
        {!finalResult && (
          <div className="flex-1 flex flex-col gap-6 mb-24">
            {messages.map((msg, idx) => (
              <div 
                key={msg.id} 
                className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}
              >
                <div className={`flex gap-3 max-w-[85%] md:max-w-[75%] ${msg.sender === 'user' ? 'flex-row-reverse' : ''}`}>
                  <div className={`
                    w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center border
                    ${msg.sender === 'user' 
                      ? 'bg-slate-800 border-slate-700 text-slate-300' 
                      : 'bg-emerald-900/30 border-emerald-500/30 text-emerald-400'
                    }
                  `}>
                    {msg.sender === 'user' ? <User className="w-4 h-4" /> : (QUESTIONS[idx] ? QUESTIONS[idx].icon : <Terminal className="w-4 h-4" />)}
                  </div>
                  <div 
                    className={`
                      px-5 py-3.5 rounded-2xl shadow-sm text-sm md:text-base leading-relaxed whitespace-pre-line
                      ${msg.sender === 'user' 
                        ? 'bg-emerald-600 text-white rounded-tr-none shadow-emerald-900/20' 
                        : msg.isError 
                          ? 'bg-red-900/20 text-red-200 border border-red-500/30 rounded-tl-none'
                          : 'bg-slate-800/80 border border-slate-700/50 text-slate-100 rounded-tl-none backdrop-blur-sm'
                      }
                    `}
                  >
                    {msg.text}
                  </div>
                </div>
              </div>
            ))}
            
            {isGenerating && (
              <div className="flex justify-start animate-in fade-in duration-300">
                 <div className="flex gap-3 max-w-[85%]">
                    <div className="w-8 h-8 rounded-full bg-emerald-900/30 border border-emerald-500/30 text-emerald-400 flex items-center justify-center">
                      <Sparkles className="w-4 h-4" />
                    </div>
                    <div className="bg-slate-800/80 border border-slate-700/50 rounded-2xl rounded-tl-none px-6 py-4 flex items-center gap-4">
                      <div className="flex gap-1">
                        <span className="w-2 h-2 bg-emerald-400 rounded-full animate-bounce"></span>
                        <span className="w-2 h-2 bg-emerald-400 rounded-full animate-bounce [animation-delay:0.2s]"></span>
                        <span className="w-2 h-2 bg-emerald-400 rounded-full animate-bounce [animation-delay:0.4s]"></span>
                      </div>
                      <span className="text-emerald-400 text-sm font-medium">Crafting story package...</span>
                    </div>
                 </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>
        )}

        {/* Final Result Area */}
        {finalResult && (
          <div className="animate-in zoom-in-95 duration-500 ease-out pb-20">
            {/* Title & Stats */}
            <div className="mb-6 space-y-4">
              <h2 className="text-3xl font-bold text-white tracking-tight">{finalResult.title}</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                <div className="bg-[#1e1e24] border border-white/5 p-3 rounded-lg">
                  <div className="text-xs text-slate-500 uppercase tracking-wider mb-1">Duration</div>
                  <div className="text-sm font-semibold text-blue-400">{finalResult.production_settings.duration}</div>
                </div>
                <div className="bg-[#1e1e24] border border-white/5 p-3 rounded-lg">
                  <div className="text-xs text-slate-500 uppercase tracking-wider mb-1">Scenes</div>
                  <div className="text-sm font-semibold text-purple-400">{finalResult.production_settings.estimated_scenes}</div>
                </div>
                <div className="bg-[#1e1e24] border border-white/5 p-3 rounded-lg">
                  <div className="text-xs text-slate-500 uppercase tracking-wider mb-1">Style</div>
                  <div className="text-sm font-semibold text-orange-400">{finalResult.production_settings.vo_style}</div>
                </div>
                <div className="bg-[#1e1e24] border border-white/5 p-3 rounded-lg">
                  <div className="text-xs text-slate-500 uppercase tracking-wider mb-1">Density</div>
                  <div className="text-sm font-semibold text-cyan-400">{finalResult.production_settings.vo_density}</div>
                </div>
              </div>
            </div>

            {/* Story & VO */}
            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="bg-[#1e1e24] border border-white/5 rounded-xl p-5">
                <div className="flex items-center gap-2 mb-3 text-yellow-400">
                  <Clapperboard className="w-5 h-5" />
                  <h3 className="font-semibold text-sm uppercase tracking-wide">Story Beat</h3>
                </div>
                <p className="text-sm text-slate-300 leading-relaxed">{finalResult.story_beat}</p>
              </div>
              <div className="bg-[#1e1e24] border border-white/5 rounded-xl p-5">
                <div className="flex items-center gap-2 mb-3 text-red-400">
                  <Mic className="w-5 h-5" />
                  <h3 className="font-semibold text-sm uppercase tracking-wide">VO Script Preview</h3>
                </div>
                <div className="text-sm text-slate-300 leading-relaxed whitespace-pre-line h-40 overflow-y-auto custom-scrollbar pr-2">
                  {finalResult.vo_script}
                </div>
              </div>
            </div>

            {/* SCENES ITERATION */}
            <div className="space-y-6">
               <h3 className="text-xl font-bold text-white flex items-center gap-2">
                <Film className="w-5 h-5 text-emerald-400" /> Scene Breakdown & Prompts
               </h3>
               
               {finalResult.scenes.map((scene, index) => (
                 <div key={index} className="bg-[#1e1e24] border border-white/10 rounded-xl overflow-hidden shadow-lg ring-1 ring-white/5">
                    {/* Scene Header */}
                    <div className="bg-[#2a2a35] border-b border-white/5 p-4 flex flex-col md:flex-row md:items-center justify-between gap-4">
                      <div>
                        <div className="flex items-center gap-2 mb-1">
                          <span className="bg-emerald-500/20 text-emerald-400 text-xs font-bold px-2 py-0.5 rounded">SCENE {scene.number}</span>
                          <h4 className="font-semibold text-white">{scene.name}</h4>
                        </div>
                        <p className="text-xs text-slate-400">{scene.purpose}</p>
                      </div>
                      <div className="bg-black/30 rounded-lg p-3 max-w-md border border-white/5">
                        <div className="flex items-start gap-2">
                          <Mic className="w-3 h-3 text-slate-500 mt-1" />
                          <p className="text-xs text-slate-300 italic">"{scene.vo_lines}"</p>
                        </div>
                      </div>
                    </div>

                    {/* Prompts List */}
                    <div className="p-4 bg-[#18181b] space-y-4">
                      {scene.prompts.map((prompt, pIndex) => (
                        <div key={pIndex} className="relative group">
                          <div className="absolute -left-3 top-3 bottom-3 w-1 bg-slate-800 group-hover:bg-emerald-500/50 transition-colors rounded-full"></div>
                          <div className="bg-[#202027] p-4 rounded-lg border border-white/5 group-hover:border-emerald-500/20 transition-all">
                            <div className="flex justify-between items-start gap-4 mb-2">
                              <span className="text-xs font-medium text-slate-500 uppercase">Prompt Option {pIndex + 1}</span>
                              <button 
                                onClick={() => copyText(prompt, `s${scene.number}-p${pIndex}`)}
                                className={`
                                  flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all
                                  ${copiedId === `s${scene.number}-p${pIndex}` 
                                    ? 'bg-emerald-500 text-white' 
                                    : 'bg-slate-700 hover:bg-emerald-600 text-slate-200 hover:text-white'
                                  }
                                `}
                              >
                                {copiedId === `s${scene.number}-p${pIndex}` ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
                                {copiedId === `s${scene.number}-p${pIndex}` ? 'Copied' : 'Copy Prompt'}
                              </button>
                            </div>
                            <p className="font-mono text-xs md:text-sm text-slate-300 leading-relaxed whitespace-pre-wrap selection:bg-emerald-500/30">
                              {prompt}
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                 </div>
               ))}
            </div>

          </div>
        )}

      </main>

      {/* Input Area (Only visible during chat) */}
      {!finalResult && (
        <div className="fixed bottom-0 left-0 right-0 bg-slate-900/80 backdrop-blur-md border-t border-white/10 p-4 md:p-6 z-20">
          <div className="max-w-4xl mx-auto relative group">
            <input
              type="text"
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && !isGenerating && handleSendMessage()}
              placeholder="Type your answer here..."
              disabled={isGenerating}
              autoFocus
              className="w-full bg-slate-950/50 text-white border border-slate-700/50 rounded-2xl pl-6 pr-16 py-4 focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500/50 focus:outline-none shadow-xl transition-all disabled:opacity-50 placeholder:text-slate-600"
            />
            <button
              onClick={handleSendMessage}
              disabled={!inputText.trim() || isGenerating}
              className="absolute right-2 top-2 bottom-2 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:text-slate-600 text-white px-4 rounded-xl transition-all flex items-center justify-center shadow-lg active:scale-95"
            >
              <Send className="w-5 h-5" />
            </button>
          </div>
        </div>
      )}
      
      <style>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: #1e1e24; 
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: #3f3f46; 
          border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: #52525b; 
        }
      `}</style>
    </div>
  );
}