import React, { useState, useEffect } from 'react';
import { Play, Sparkles, Copy, AlertCircle, Loader2, CheckCircle2, Download, RotateCcw, ImagePlus, X, History, Trash2, Image as ImageIcon, UploadCloud, LogOut, Settings, Key } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
import { getFirestore, collection, addDoc, onSnapshot, deleteDoc, doc, setDoc, getDoc } from 'firebase/firestore';
import { getStorage, ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';

// --- Firebase Configuration ---
const firebaseConfig = {
  apiKey: "AIzaSyCpUj6JELHpihhrIZIAZMg_SAJ3IZEv5ag",
  authDomain: "geminfinity-6c318.firebaseapp.com",
  projectId: "geminfinity-6c318",
  storageBucket: "geminfinity-6c318.firebasestorage.app",
  messagingSenderId: "888799027888",
  appId: "1:888799027888:web:e0e2f1bcd0ad24e9201175",
  measurementId: "G-DSS9FWB2JX"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();
const db = getFirestore(app);
const storage = getStorage(app);
const artifactAppId = typeof __app_id !== 'undefined' ? __app_id : 'gem-infinity-core';

// --- Data Constants ---
const narrativeStylesList = [
  { num: 0, name: "ไม่เลือก", icon: "⚪", desc: "ไม่ระบุสไตล์การเล่าเรื่อง", personality: '' },
  { num: 1, name: "ขายตรง ดุดัน", icon: "👊", desc: "ดุดัน เร่งด่วน ฟาดด้วยโปรโมชั่น", personality: '[Hard Sell] 👊: ดุดัน เร่งด่วน ฟาดด้วยโปรโมชั่น "ซื้อเดี๋ยวนี้ พรุ่งนี้ราคาขึ้น! อย่ามัวแต่คิด!"' },
  { num: 2, name: "ขายเนียน ป้ายยา", icon: "✨", desc: "เพื่อนสาวเม้าท์มอย เนียนๆ ป้ายยา", personality: '[Soft Sell] ✨: เพื่อนสาวเม้าท์มอย เนียนๆ ป้ายยาแนวกันเอง "แก... ฉันไปเจออันนี้มา คือมันดีต่อใจมาก"' },
  { num: 3, name: "สายแกะกล่อง", icon: "📦", desc: "ตื่นเต้นเหมือนได้ของใหม่ บรรยายละเอียดยิบ", personality: '[The Unboxer] 📦: ตื่นเต้นเหมือนได้ของใหม่ บรรยาย Texture และสัมผัสละเอียดยิบ' },
  { num: 6, name: "ฮีโร่ปะทะวายร้าย", icon: "⚔️", desc: "ปีศาจ (ปัญหา) ปะทะ ฮีโร่ (สินค้า)", personality: '[Villain vs Hero] ⚔️: ปีศาจ (ปัญหา) ปะทะ ฮีโร่ (สินค้า) สู้กันแบบดุเดือด' },
  { num: 7, name: "ด่าด้วยความหวังดี", icon: "🤬", desc: "ปากแจ๋วแต่หวังดี ด่ากราดเพื่อเตือนสติ", personality: '[Tough Love] 🤬: ปากแจ๋วแต่หวังดี ด่ากราดเพื่อเตือนสติ "หน้าพังขนาดนี้ยังไม่ดูแลอีกเหรอ! ตื่น!"' },
  { num: 12, name: "สงครามอวัยวะ", icon: "🧠", desc: "อวัยวะตีกันเอง เช่น ตับประท้วงสมอง", personality: '[Organ War] 🧠: อวัยวะตีกันเอง (เช่น ตับประท้วงสมองที่สั่งให้ดื่มแอลกอฮอล์)' },
  { num: 21, name: "สายช็อตฟีล", icon: "🛑", desc: "สายช็อตฟีล นักดับฝัน ทวนกระแส", personality: '[The De-influencer] 🛑: ทวนกระแส ไม่ป้ายยาแต่ "ห้ามซื้อ!" เปิดด้วยการด่าหรือบอกข้อเสียของฮิตๆ แล้วหักมุมมาขายของตัวเองที่ดีกว่า' },
  { num: 25, name: "ตัวมัม ตัวมารดา", icon: "💅", desc: "ตัวมัม ศูนย์กลางจักรวาล POV สุดเริ่ด", personality: '[The Main Character] 💅: เล่าผ่าน POV ของคนที่มั่นใจสุดๆ ชีวิตดีเริ่ด เชิดๆ หยิ่งๆ สินค้าคือพร็อพที่ขาดไม่ได้ในชีวิตสุดเพอร์เฟกต์' },
  { num: 39, name: "สายแซะ เสียดสี", icon: "🎭", desc: "สายแซะสังคม หยิบกระแสข่าวมาเสียดสี", personality: '[The Satirist] 🎭: เกาะกระแส Real-time เอามาล้อเลียนขำๆ แล้ววกเข้าสินค้าแบบหน้าดื้อๆ' }
];

const moodKeywordsList = [
  { id: "dark_gritty", name: "มืดหม่น ดิบเถื่อน", icon: "🌑", desc: "มืดหม่น ดิบเถื่อน" },
  { id: "cinematic_standard", name: "มาตรฐานภาพยนตร์", icon: "🎬", desc: "มาตรฐานภาพยนตร์ แสงเงาสมบูรณ์" },
  { id: "bright_airy", name: "สว่าง สดใส", icon: "☀️", desc: "สว่าง สดใส อากาศถ่ายเท" },
  { id: "action_explosive", name: "แอ็คชั่น ระเบิดภูเขา", icon: "💥", desc: "ตื่นเต้น เร้าใจ แอ็คชั่น" },
  { id: "cyberpunk_neon", name: "ไซเบอร์พังก์ นีออน", icon: "🌆", desc: "นีออนหลากสี โลกอนาคต" },
  { id: "mutelu_mystical", name: "สายมู ลึกลับ", icon: "🕉️", desc: "มนตร์ขลัง แสงเทียนสลัว ควันธูป สายมูเตลู" }
];

const visualStylesList = [
  { id: "disney_pixar_3d", name: "อนิเมชั่น 3D แบบพิกซาร์", icon: "🏰", desc: "3D ตาโตน่ารักแบบการ์ตูนฝรั่ง", category: "กระแสหลัก", prompt: "3D animated CGI feature film character, pixar animation style, expressive eyes, Unreal Engine 5 render" },
  { id: "real_cinematic", name: "คนจริง ภาพยนตร์ฮอลลีวูด", icon: "🎬", desc: "คนจริง แสงสีอลังการเหมือนหนังฮอลลีวูด", category: "กระแสหลัก", prompt: "photorealistic cinematic film still, Hollywood movie quality, dramatic lighting" },
  { id: "ghibli", name: "อนิเมะญี่ปุ่น สตูดิโอจิบลิ", icon: "🌿", desc: "ลายเส้นสีน้ำ อะนิเมะญี่ปุ่นยุคเก่า อบอุ่น", category: "กระแสหลัก", prompt: "Studio Ghibli anime style, watercolor painting, hand-drawn animation" },
  { id: "claymation", name: "สตอปโมชัน ดินน้ำมัน", icon: "🎨", desc: "ดินน้ำมัน แบบ Pingu", category: "งานคราฟต์", prompt: "claymation stop-motion style, clay sculpted characters, plasticine material" },
  { id: "cyberpunk_neon_vis", name: "โลกอนาคต ไซเบอร์พังก์", icon: "🌃", desc: "แสงนีออนจัดจ้าน ล้ำยุค", category: "ดิจิทัลอาร์ต", prompt: "cyberpunk neon style, vibrant neon lights, dark futuristic cityscape" },
  { id: "hyper_realistic", name: "ภาพเสมือนจริงขั้นสุด", icon: "👤", desc: "ภาพคนสมจริงตาแตก ชัดทุกรูขุมขน", category: "3D ขั้นสูง", prompt: "hyper-realistic portrait photography, extreme detail, 8K resolution" }
];

const visualCategories = [...new Set(visualStylesList.map(v => v.category))];

const categoryList = [
  { id: "คน", name: "คน / บุคคล / อาชีพ" },
  { id: "อวัยวะ", name: "อวัยวะภายใน / ร่างกาย" },
  { id: "สัตว์", name: "สัตว์เลี้ยง / สัตว์ประหลาด" },
  { id: "สกินแคร์", name: "เครื่องสำอาง / สกินแคร์" },
  { id: "สิ่งของ", name: "สิ่งของเครื่องใช้ทั่วไป" },
  { id: "อาหาร", name: "อาหาร / เครื่องดื่ม" },
  { id: "ผลไม้", name: "ผลไม้ / ผัก" },
  { id: "ยานพาหนะ", name: "ยานพาหนะ / อะไหล่" },
  { id: "ไอที", name: "เครื่องใช้ไฟฟ้า / ไอที" },
  { id: "สถานที่", name: "สถานที่ / อาคาร" },
  { id: "ต้นไม้", name: "พืช / ต้นไม้ / ดอกไม้" },
  { id: "นามธรรม", name: "นามธรรม (เช่น ความรัก, เวลา)" }
];

// --- Utility Functions ---
const generateThumbnail = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const MAX_DIM = 250;
        let width = img.width;
        let height = img.height;
        if (width > height) {
          if (width > MAX_DIM) { height *= MAX_DIM / width; width = MAX_DIM; }
        } else {
          if (height > MAX_DIM) { width *= MAX_DIM / height; height = MAX_DIM; }
        }
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL('image/jpeg', 0.8));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
};

export default function App() {
  const defaultFormState = {
    category: 'อวัยวะ',
    name: 'ตับ',
    enemy: 'แอลกอฮอล์และไขมัน',
    product: 'อาหารเสริม Detox Pro',
    emotion: 'ปากร้าย ดุดัน แต่รักเจ้าของ',
    narrativeStyles: [7, 12], 
    mood: 'dark_gritty',
    visualStyle: 'disney_pixar_3d',
    extraDetails: '',
    sceneCount: 5,
    dialogueType: 'normal' // เพิ่มค่าเริ่มต้นของรูปแบบเสียง
  };

  // State
  const [user, setUser] = useState(null);
  const [formData, setFormData] = useState(defaultFormState);
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState('');
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);
  
  // Custom API Key Settings
  const [customApiKey, setCustomApiKey] = useState('');
  const [tempApiKey, setTempApiKey] = useState('');
  const [showSettings, setShowSettings] = useState(false);
  const systemApiKey = ""; // Default environment key if any
  
  // Image Selection State (Using Gallery Docs)
  const [charImage, setCharImage] = useState(null);
  const [prodImage, setProdImage] = useState(null);

  // Gallery & History State
  const [historyDocs, setHistoryDocs] = useState([]);
  const [showHistory, setShowHistory] = useState(false);
  const [galleryImages, setGalleryImages] = useState([]);
  const [showGalleryModal, setShowGalleryModal] = useState(false); // false, 'char', 'prod'
  const [isUploadingGallery, setIsUploadingGallery] = useState(false);

  // --- Firebase Auth & Firestore Listeners ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          try { await signInWithCustomToken(auth, __initial_auth_token); } 
          catch (tokenErr) { await signInAnonymously(auth); }
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) { console.error("Auth error:", err); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    
    // Listen to user's saved scripts history
    const colHistoryRef = collection(db, 'artifacts', artifactAppId, 'users', user.uid, 'scripts');
    const unsubscribeHistory = onSnapshot(colHistoryRef, (snapshot) => {
      const docs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      docs.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
      setHistoryDocs(docs);
    }, (err) => { console.error("Firestore history error:", err); });

    // Listen to user's image gallery
    const colGalleryRef = collection(db, 'artifacts', artifactAppId, 'users', user.uid, 'gallery');
    const unsubscribeGallery = onSnapshot(colGalleryRef, (snapshot) => {
      const docs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      docs.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
      setGalleryImages(docs);
    }, (err) => { console.error("Firestore gallery error:", err); });

    // Fetch Custom API Key if user is authenticated (not anonymous)
    if (!user.isAnonymous) {
      const fetchApiKey = async () => {
        try {
          const docRef = doc(db, 'artifacts', artifactAppId, 'users', user.uid, 'settings', 'profile');
          const docSnap = await getDoc(docRef);
          if (docSnap.exists() && docSnap.data().apiKey) {
            setCustomApiKey(docSnap.data().apiKey);
            setTempApiKey(docSnap.data().apiKey);
          }
        } catch (e) {
          console.error("Error fetching API Key:", e);
        }
      };
      fetchApiKey();
    } else {
      setCustomApiKey('');
      setTempApiKey('');
    }

    return () => { unsubscribeHistory(); unsubscribeGallery(); };
  }, [user]);

  // --- Google Auth Handlers ---
  const loginWithGoogle = async () => {
    try {
      await signInWithPopup(auth, googleProvider);
    } catch (error) {
      console.error("Google login error:", error);
      alert("เข้าสู่ระบบด้วย Google ไม่สำเร็จ: " + error.message);
    }
  };

  const handleLogout = async () => {
    if (window.confirm('คุณต้องการออกจากระบบใช่หรือไม่?')) {
      try {
        await signOut(auth);
        setCustomApiKey(''); // Clear custom API key from memory
        await signInAnonymously(auth);
      } catch (error) {
        console.error("Logout error:", error);
      }
    }
  };

  // --- Settings Handlers ---
  const saveSettings = async () => {
    if (!user || user.isAnonymous) {
      alert("โปรดล็อกอินด้วยบัญชี Google ก่อนบันทึก API Key ของคุณ");
      return;
    }
    try {
      const docRef = doc(db, 'artifacts', artifactAppId, 'users', user.uid, 'settings', 'profile');
      await setDoc(docRef, { apiKey: tempApiKey }, { merge: true });
      setCustomApiKey(tempApiKey);
      setShowSettings(false);
      alert("บันทึก API Key สำเร็จ!");
    } catch (e) {
      console.error("Error saving API Key", e);
      alert("เกิดข้อผิดพลาดในการบันทึก");
    }
  };

  // --- Input Handlers ---
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const toggleNarrativeStyle = (num) => {
    setFormData(prev => {
      if (num === 0) return { ...prev, narrativeStyles: [0] };
      let newStyles = prev.narrativeStyles.filter(n => n !== 0);
      if (newStyles.includes(num)) newStyles = newStyles.filter(n => n !== num);
      else newStyles.push(num);
      if (newStyles.length === 0) newStyles = [0];
      return { ...prev, narrativeStyles: newStyles };
    });
  };

  const resetForm = () => {
    if(window.confirm('คุณต้องการรีเซ็ตข้อมูลทั้งหมดกลับเป็นค่าเริ่มต้นหรือไม่?')) {
      setFormData(defaultFormState);
      setResult('');
      setCharImage(null);
      setProdImage(null);
    }
  };

  // --- Gallery Upload & Delete ---
  const handleGalleryUpload = async (e) => {
    const file = e.target.files[0];
    if (!file || !user) return;
    if (file.size > 5 * 1024 * 1024) {
      alert("กรุณาอัปโหลดภาพขนาดไม่เกิน 5MB");
      return;
    }
    
    setIsUploadingGallery(true);
    try {
      const thumb = await generateThumbnail(file);
      const storagePath = `artifacts/${artifactAppId}/users/${user.uid}/gallery/${Date.now()}_${file.name}`;
      const storageRef = ref(storage, storagePath);
      
      await uploadBytes(storageRef, file);
      const url = await getDownloadURL(storageRef);
      
      const newDoc = {
        name: file.name,
        url,
        storagePath,
        thumbnailBase64: thumb,
        mimeType: file.type || "image/jpeg",
        createdAt: Date.now()
      };
      
      const docRef = await addDoc(collection(db, 'artifacts', artifactAppId, 'users', user.uid, 'gallery'), newDoc);
      
      if (showGalleryModal === 'char') {
        setCharImage({ id: docRef.id, ...newDoc });
        setShowGalleryModal(false);
      } else if (showGalleryModal === 'prod') {
        setProdImage({ id: docRef.id, ...newDoc });
        setShowGalleryModal(false);
      }
      
    } catch (err) {
      console.error("Gallery upload error:", err);
      alert("เกิดข้อผิดพลาดในการอัปโหลดรูปภาพ กรุณาตรวจสอบสิทธิ์ Firebase Storage");
    } finally {
      setIsUploadingGallery(false);
      e.target.value = null; // reset input
    }
  };

  const handleGalleryDelete = async (e, docItem) => {
    e.stopPropagation();
    if (!user || !window.confirm("ต้องการลบภาพนี้ออกจากคลังภาพใช่หรือไม่?")) return;
    
    try {
      await deleteDoc(doc(db, 'artifacts', artifactAppId, 'users', user.uid, 'gallery', docItem.id));
      if (docItem.storagePath) {
        await deleteObject(ref(storage, docItem.storagePath));
      }
      if (charImage?.id === docItem.id) setCharImage(null);
      if (prodImage?.id === docItem.id) setProdImage(null);
    } catch (err) {
      console.error("Gallery delete error:", err);
    }
  };

  const selectGalleryImage = (docItem) => {
    if (showGalleryModal === 'char') setCharImage(docItem);
    if (showGalleryModal === 'prod') setProdImage(docItem);
    setShowGalleryModal(false);
  };

  // --- Generation & DB Save ---
  const generateContent = async () => {
    const activeApiKey = customApiKey || systemApiKey;
    if (!activeApiKey) {
      setError('กรุณาตั้งค่า Gemini API Key ของคุณในเมนู "ตั้งค่า" (ไอคอนฟันเฟืองด้านบน) ก่อนใช้งาน เพื่อใช้โควต้าบัญชีของคุณเอง');
      setShowSettings(true);
      return;
    }

    setIsLoading(true);
    setError('');
    setResult('');
    setCopied(false);

    const selectedNarratives = narrativeStylesList.filter(n => formData.narrativeStyles.includes(n.num));
    const narrativePersonalityString = selectedNarratives.map(n => n.personality).filter(p => p !== '').join('\n- ');
    const selectedMood = moodKeywordsList.find(m => m.id === formData.mood) || moodKeywordsList[0];
    const selectedVisual = visualStylesList.find(v => v.id === formData.visualStyle) || visualStylesList[0];

    const systemPrompt = `
      คุณคือ 'ผู้กำกับอนิเมะไซไฟสงครามร่างกาย' ระดับ Masterpiece และผู้เชี่ยวชาญอัลกอริทึม TikTok/Reels 
      จุดประสงค์: สร้าง Script, Storyboard และ Video Prompts จำนวน ${formData.sceneCount} ฉาก ที่ทรงพลัง เพื่อขายสินค้าแบบ "ยุทโธปกรณ์สนับสนุน"
      
      กฎเกณฑ์ (Rules) ขั้นเด็ดขาด:
      1. บุคลิกภาพในการเล่าเรื่อง (Narrative Personality): ต้องผสมผสานบุคลิกเหล่านี้เข้าด้วยกันอย่างลงตัวในบทพูดหรือการนำเสนอ:
      ${narrativePersonalityString || '- ผู้กำกับไซไฟสุดดาร์ก ดุดัน'}
      2. ห้ามถือสินค้าเด็ดขาด: สินค้าต้องถูกนำเสนอแบบอลังการในฐานะ "พลังงานเสริม/กล่องยังชีพ" ที่ถูกส่งลงมาจากเบื้องบน
      3. การเขียน Video Prompt: ต้องเขียนแบบ "Text-to-Video Ready" อธิบายรูปลักษณ์ตัวละครอย่างละเอียดยิบ ห้ามใช้แค่ชื่อเรียกอวัยวะ
      ${charImage ? '4. **อ้างอิงตัวละคร:** ผู้ใช้ได้แนบภาพ "ตัวละครหลัก" ให้นำลักษณะเด่นไปเขียนอธิบายใน Video Prompts\n' : ''}${prodImage ? '5. **อ้างอิงสินค้า:** ผู้ใช้ได้แนบภาพ "สินค้ากู้ชีพ" ให้นำลักษณะเด่นไปบรรยายใน Video Prompts\n' : ''}
      ${formData.dialogueType === 'mute' ? '6. **ห้ามมีบทพูดเด็ดขาด (No Dialogue):** เน้นอธิบายแอคชั่น, ท่าทางต่อสู้, กระบวนการทำงาน, และเสียงประกอบ (SFX/ASMR) แทน ตัวละครไม่ต้องขยับปากพูด' : formData.dialogueType === 'voiceover' ? '6. **รูปแบบเสียงบรรยาย (Voiceover):** ตัวละครในจอไม่ต้องขยับปากพูด ให้ใช้การพากย์เสียงบรรยายทับภาพ (VO)' : '6. **บทสนทนาปกติ:** ตัวละครต้องขยับปากพูดสอดคล้องกับบทสนทนา'}
    `;

    const userPrompt = `
      สร้างคอนเทนต์วิดีโอสั้นแนว Body Adventure ตามข้อมูลนี้:
      - หมวดหมู่: ${formData.category}
      - ชื่อตัวละครหลัก: ${formData.name}
      - ศัตรู/ปัญหา: ${formData.enemy}
      - สินค้าที่จะขาย: ${formData.product}
      - อารมณ์พื้นฐานตัวละคร: ${formData.emotion}
      - มู้ดและโทน (Mood): ${selectedMood.name}
      - สไตล์ภาพวิดีโอ (Art Style): ${selectedVisual.name}
      - รูปแบบเสียง: ${formData.dialogueType === 'mute' ? 'คลิปใบ้/ไม่มีคนพูด เน้นภาพและเสียง SFX' : formData.dialogueType === 'voiceover' ? 'พากย์เสียงบรรยายทับ (VO)' : 'ตัวละครในจอพูดปกติ'}
      - จำนวนฉากที่ต้องการ: ${formData.sceneCount} ฉาก
      - ความต้องการพิเศษ: ${formData.extraDetails || 'ไม่มี'}

      ให้ Output เป็น Markdown จัดหัวข้อให้สวยงามตามลำดับดังนี้:
      # 🎬 ชื่อวิดีโอ
      ## 🧬 การออกแบบตัวละคร (Character Design)
      ## 📖 Story Arc
      ${formData.dialogueType === 'mute' ? '## 🎵 ลำดับภาพและเสียงประกอบ (Visual & Audio Timeline) (ระบุ [SFX: ] และ [VFX: ])' : '## 🗣️ บทพูดและมุมกล้อง (Directing Script) (ระบุ [SFX: ] และ [VFX: ])'}
      ## 🎞️ สตอรี่บอร์ด (Storyboard จำนวน ${formData.sceneCount} ฉาก)
      ## 🎥 Video Prompts (Text-to-Video Ready)
      ${formData.dialogueType === 'mute' ? `รูปแบบ: ฉากที่ X [Prompt: (อธิบายรูปลักษณ์ตัวละครอ้างอิงจากรูปถ้ามี), (แอคชั่น/การเคลื่อนไหว), (มุมกล้อง), (แสง/บรรยากาศ), ${selectedVisual.prompt ? `"${selectedVisual.prompt}"` : ''}, --ar 9:16]` : formData.dialogueType === 'voiceover' ? `รูปแบบ: ฉากที่ X [Prompt: (อธิบายรูปลักษณ์ตัวละครอ้างอิงจากรูปถ้ามี), (การเคลื่อนไหว), (มุมกล้อง), (แสง/บรรยากาศ), ${selectedVisual.prompt ? `"${selectedVisual.prompt}"` : ''}, --ar 9:16, เสียงบรรยาย (VO): "(บทพากย์)"]` : `รูปแบบ: ฉากที่ X [Prompt: (อธิบายรูปลักษณ์ตัวละครอ้างอิงจากรูปถ้ามี), (การเคลื่อนไหว), (มุมกล้อง), (แสง/บรรยากาศ), ขยับปากพูด "(บทพูด)", ${selectedVisual.prompt ? `"${selectedVisual.prompt}"` : ''}, --ar 9:16]`}
      (เขียนให้ครบ ${formData.sceneCount} ฉาก ห้ามขาดห้ามเกิน)
      ## #️⃣ แฮชแท็กดันฟีด (5-7 อัน)
    `;

    const apiPayload = {
      contents: [{ role: "user", parts: [{ text: userPrompt }] }],
      systemInstruction: { parts: [{ text: systemPrompt }] }
    };

    try {
      if (charImage?.thumbnailBase64) {
        const b64 = charImage.thumbnailBase64.split(',')[1];
        if (b64) {
          apiPayload.contents[0].parts.push({ text: "\n[นี่คือภาพอ้างอิงสำหรับ: ตัวละครหลัก]\n" });
          apiPayload.contents[0].parts.push({ inlineData: { mimeType: charImage.mimeType || "image/jpeg", data: b64 } });
        }
      }
      if (prodImage?.thumbnailBase64) {
        const b64 = prodImage.thumbnailBase64.split(',')[1];
        if (b64) {
          apiPayload.contents[0].parts.push({ text: "\n[นี่คือภาพอ้างอิงสำหรับ: สินค้ากู้ชีพ]\n" });
          apiPayload.contents[0].parts.push({ inlineData: { mimeType: prodImage.mimeType || "image/jpeg", data: b64 } });
        }
      }
    } catch (fetchErr) {
      console.error("Failed to process image bytes for AI:", fetchErr);
    }

    const fetchWithRetry = async (retries = 5, delay = 1000) => {
      try {
        const response = await fetch(
          `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${activeApiKey}`,
          { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(apiPayload) }
        );
        if (!response.ok) {
          const errData = await response.json();
          throw new Error(`API Error: ${response.status} - ${errData.error?.message || 'Unknown error'}`);
        }
        const data = await response.json();
        return data.candidates[0].content.parts[0].text;
      } catch (err) {
        if (retries > 0) {
          await new Promise(res => setTimeout(res, delay));
          return fetchWithRetry(retries - 1, delay * 2);
        }
        throw err;
      }
    };

    try {
      const generatedText = await fetchWithRetry();
      setResult(generatedText);

      // Save to Firebase DB
      if (user) {
        await addDoc(collection(db, 'artifacts', artifactAppId, 'users', user.uid, 'scripts'), {
          formData,
          result: generatedText,
          charImageUrl: charImage ? charImage.url : '',
          charThumbnailBase64: charImage ? charImage.thumbnailBase64 : '',
          prodImageUrl: prodImage ? prodImage.url : '',
          prodThumbnailBase64: prodImage ? prodImage.thumbnailBase64 : '',
          createdAt: Date.now()
        });
      }

    } catch (err) {
      console.error(err);
      if (err.message.includes('API_KEY_INVALID') || err.message.includes('400')) {
        setError('API Key ไม่ถูกต้อง กรุณาตรวจสอบ API Key ในเมนูตั้งค่าอีกครั้ง');
        setShowSettings(true);
      } else {
        setError('เกิดข้อผิดพลาดในการสร้างเนื้อหา: ' + err.message);
      }
    } finally {
      setIsLoading(false);
    }
  };

  // --- Utils ---
  const copyToClipboard = (textToCopyParam = null) => {
    let textToCopy = textToCopyParam;
    if (!textToCopy) {
      const promptSection = result.split(/## 🎥 Video Prompts/i)[1]?.split('## #️⃣')[0];
      textToCopy = promptSection ? promptSection.trim() : result;
    }
    navigator.clipboard.writeText(textToCopy).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 2000);
    }).catch(err => {
      const textArea = document.createElement("textarea"); textArea.value = textToCopy;
      document.body.appendChild(textArea); textArea.select();
      try { document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 2000); } 
      catch (err) { console.error('Fallback copy failed', err); }
      document.body.removeChild(textArea);
    });
  };

  const downloadScript = (textContent = result) => {
    if (!textContent) return;
    const element = document.createElement("a");
    const file = new Blob([textContent], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = `StorySnap_Script_${Date.now()}.txt`;
    document.body.appendChild(element); 
    element.click();
    document.body.removeChild(element);
  };

  const deleteHistory = async (id) => {
    if (!user || !window.confirm("คุณต้องการลบประวัตินี้ใช่หรือไม่?")) return;
    try { await deleteDoc(doc(db, 'artifacts', artifactAppId, 'users', user.uid, 'scripts', id)); } 
    catch (err) { console.error("Delete failed:", err); }
  };

  const loadHistoryItem = (item) => {
    setFormData(item.formData);
    setResult(item.result);
    // Try to restore image references from history if they still exist
    if (item.charImageUrl) {
      const foundChar = galleryImages.find(g => g.url === item.charImageUrl);
      setCharImage(foundChar || { url: item.charImageUrl, thumbnailBase64: item.charThumbnailBase64 });
    } else { setCharImage(null); }
    
    if (item.prodImageUrl) {
      const foundProd = galleryImages.find(g => g.url === item.prodImageUrl);
      setProdImage(foundProd || { url: item.prodImageUrl, thumbnailBase64: item.prodThumbnailBase64 });
    } else { setProdImage(null); }
    
    setShowHistory(false);
  };

  return (
    <div className="min-h-screen bg-[#050505] text-gray-100 font-sans p-4 md:p-8">
      <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
        
        {/* Left Column: Form Setup */}
        <div className="lg:col-span-5 space-y-6 flex flex-col h-full max-h-screen lg:overflow-hidden relative">
          <div className="bg-gray-900 border border-indigo-500/30 rounded-2xl p-6 shadow-[0_0_15px_rgba(99,102,241,0.1)] relative flex-1 flex flex-col min-h-0">
            <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
            
            <div className="flex justify-between items-start mb-6">
              <div>
                <h1 className="text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-fuchsia-400 flex items-center gap-2">
                  <Sparkles className="text-indigo-400" size={24} />
                  STORYSNAP AI
                </h1>
                <p className="text-xs text-indigo-300/70 font-medium mt-1 tracking-widest uppercase">เวอร์ชันเชื่อมต่อคลาวด์ Firebase</p>
              </div>
              <div className="flex gap-2 items-center">
                {user && !user.isAnonymous ? (
                  <div className="flex items-center gap-2 mr-1 bg-gray-800/80 px-3 py-1.5 rounded-full border border-gray-700 shadow-sm">
                    {user.photoURL ? (
                      <img src={user.photoURL} alt="profile" className="w-5 h-5 rounded-full" />
                    ) : (
                      <div className="w-5 h-5 rounded-full bg-indigo-500 flex items-center justify-center text-[10px] font-bold text-white">
                        {user.email ? user.email[0].toUpperCase() : 'U'}
                      </div>
                    )}
                    <span className="text-xs text-gray-300 hidden sm:inline max-w-[100px] truncate">{user.displayName || user.email}</span>
                    <button onClick={handleLogout} className="text-gray-400 hover:text-red-400 ml-1 transition-colors" title="ออกจากระบบ">
                      <LogOut size={14} />
                    </button>
                  </div>
                ) : (
                  <button onClick={loginWithGoogle} className="flex items-center gap-1.5 text-[11px] font-semibold bg-white text-gray-900 px-3 py-1.5 rounded-full hover:bg-gray-200 transition-colors mr-1 shadow-[0_0_10px_rgba(255,255,255,0.2)]">
                    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24">
                      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
                      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
                      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
                      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
                    </svg>
                    <span className="hidden sm:inline">Google Login</span>
                  </button>
                )}
                
                <button onClick={() => setShowSettings(true)} className={`transition-colors p-2 rounded-lg ${customApiKey ? 'text-indigo-400 bg-indigo-500/10 hover:text-white' : 'text-gray-500 hover:text-white'}`} title="ตั้งค่า API Key">
                  <Settings size={18} />
                </button>
                <button onClick={() => setShowHistory(true)} className="text-indigo-400 hover:text-white transition-colors bg-indigo-500/10 p-2 rounded-lg" title="ประวัติการสร้าง">
                  <History size={18} />
                </button>
                <button onClick={resetForm} className="text-gray-500 hover:text-white transition-colors p-2" title="ล้างข้อมูล">
                  <RotateCcw size={18} />
                </button>
              </div>
            </div>

            <div className="space-y-5 overflow-y-auto custom-scrollbar pr-2 pb-4 flex-1">
              
              {/* --- Image Reference Selection (Gallery Based) --- */}
              <div className="grid grid-cols-2 gap-4">
                {/* Character Image */}
                <div className="bg-gray-950 border border-gray-800 rounded-xl p-3 flex flex-col">
                   <label className="flex justify-between items-center text-xs font-semibold text-gray-400 uppercase mb-2">
                    <span>ภาพตัวละครหลัก</span>
                  </label>
                  {!charImage ? (
                    <button onClick={() => setShowGalleryModal('char')} className="border-2 border-dashed border-gray-700 hover:border-indigo-500/50 rounded-lg p-3 flex-1 flex flex-col items-center justify-center cursor-pointer transition-colors bg-gray-900/50 group w-full">
                      <ImageIcon className="text-gray-500 group-hover:text-indigo-400 mb-1 transition-colors" size={20} />
                      <span className="text-[10px] text-gray-400 group-hover:text-gray-300">เลือกจากคลังภาพ</span>
                    </button>
                  ) : (
                    <div className="relative w-full flex-1 min-h-[80px]">
                      <img src={charImage.thumbnailBase64 || charImage.url} alt="Char Ref" className="w-full h-full absolute inset-0 object-cover rounded-lg border border-indigo-500/50" />
                      <button onClick={() => setCharImage(null)} className="absolute top-1 right-1 bg-gray-900/80 text-white p-1 rounded-full hover:bg-red-500 transition-colors backdrop-blur-sm z-10 shadow-lg">
                        <X size={12} />
                      </button>
                      <button onClick={() => setShowGalleryModal('char')} className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 flex items-center justify-center transition-opacity rounded-lg backdrop-blur-[2px]">
                         <span className="text-xs font-semibold text-white bg-indigo-600/80 px-2 py-1 rounded">เปลี่ยนรูป</span>
                      </button>
                    </div>
                  )}
                </div>

                {/* Product Image */}
                <div className="bg-gray-950 border border-gray-800 rounded-xl p-3 flex flex-col">
                   <label className="flex justify-between items-center text-xs font-semibold text-gray-400 uppercase mb-2">
                    <span>ภาพสินค้ากู้ชีพ</span>
                  </label>
                  {!prodImage ? (
                    <button onClick={() => setShowGalleryModal('prod')} className="border-2 border-dashed border-gray-700 hover:border-fuchsia-500/50 rounded-lg p-3 flex-1 flex flex-col items-center justify-center cursor-pointer transition-colors bg-gray-900/50 group w-full">
                      <ImageIcon className="text-gray-500 group-hover:text-fuchsia-400 mb-1 transition-colors" size={20} />
                      <span className="text-[10px] text-gray-400 group-hover:text-gray-300">เลือกจากคลังภาพ</span>
                    </button>
                  ) : (
                    <div className="relative w-full flex-1 min-h-[80px]">
                      <img src={prodImage.thumbnailBase64 || prodImage.url} alt="Prod Ref" className="w-full h-full absolute inset-0 object-cover rounded-lg border border-fuchsia-500/50" />
                      <button onClick={() => setProdImage(null)} className="absolute top-1 right-1 bg-gray-900/80 text-white p-1 rounded-full hover:bg-red-500 transition-colors backdrop-blur-sm z-10 shadow-lg">
                        <X size={12} />
                      </button>
                      <button onClick={() => setShowGalleryModal('prod')} className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 flex items-center justify-center transition-opacity rounded-lg backdrop-blur-[2px]">
                         <span className="text-xs font-semibold text-white bg-fuchsia-600/80 px-2 py-1 rounded">เปลี่ยนรูป</span>
                      </button>
                    </div>
                  )}
                </div>
              </div>

              {/* --- Core Details --- */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">หมวดหมู่</label>
                  <select name="category" value={formData.category} onChange={handleInputChange} className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm">
                    {categoryList.map(cat => (
                      <option key={cat.id} value={cat.id}>{cat.name}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">ตัวละครหลัก</label>
                  <input type="text" name="name" value={formData.name} onChange={handleInputChange} placeholder="เช่น ตับ, ยางรถ" className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm"/>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">ศัตรู / ปัญหา</label>
                  <input type="text" name="enemy" value={formData.enemy} onChange={handleInputChange} placeholder="เช่น น้ำตาล, สนิม" className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-red-500 outline-none text-sm"/>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">สินค้ากู้ชีพ</label>
                  <input type="text" name="product" value={formData.product} onChange={handleInputChange} placeholder="เช่น Detox, น้ำยาปะ" className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-emerald-500 outline-none text-sm"/>
                </div>
              </div>

              {/* เพิ่มตัวเลือกรูปแบบเสียงตรงนี้ */}
              <div>
                <label className="block text-xs font-semibold text-rose-400 uppercase mb-1.5">รูปแบบเสียงและบทพูด</label>
                <select name="dialogueType" value={formData.dialogueType} onChange={handleInputChange} className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-rose-500 outline-none text-sm">
                  <option value="normal">🗣️ บทสนทนาปกติ (ตัวละครในจอขยับปากพูด)</option>
                  <option value="voiceover">🎙️ พากย์เสียงบรรยาย (Voiceover / เล่าเรื่อง)</option>
                  <option value="mute">🔇 คลิปใบ้ / ASMR / แอคชั่น (ไม่มีบทพูดเลย)</option>
                </select>
              </div>

              {/* --- Advanced Options --- */}
              <div className="pt-2 border-t border-gray-800">
                <label className="flex justify-between items-center text-xs font-semibold text-fuchsia-400 uppercase mb-2 mt-2">
                  <span>สไตล์การเล่าเรื่อง (ผสมกันได้)</span>
                </label>
                <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto custom-scrollbar p-2 bg-[#0a0a0f] rounded-xl border border-gray-800/50">
                  {narrativeStylesList.map(style => {
                    const isSelected = formData.narrativeStyles.includes(style.num);
                    return (
                      <button
                        key={style.num}
                        onClick={() => toggleNarrativeStyle(style.num)}
                        title={style.desc}
                        className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 border flex items-center gap-1.5
                          ${isSelected 
                            ? 'bg-fuchsia-600/20 border-fuchsia-500/50 text-fuchsia-100 shadow-[0_0_10px_rgba(217,70,239,0.15)]' 
                            : 'bg-gray-900 border-gray-800 text-gray-400 hover:border-gray-600 hover:text-gray-200'}`}
                      >
                        <span>{style.icon}</span> {style.name}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4 pt-2">
                <div>
                  <label className="block text-xs font-semibold text-indigo-400 uppercase mb-1.5">มู้ด & โทน</label>
                  <select name="mood" value={formData.mood} onChange={handleInputChange} className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm">
                    {moodKeywordsList.map(m => (
                      <option key={m.id} value={m.id}>{m.icon} {m.name}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-indigo-400 uppercase mb-1.5">สไตล์ภาพ (Visual)</label>
                  <select name="visualStyle" value={formData.visualStyle} onChange={handleInputChange} className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm">
                    {visualCategories.map(cat => (
                      <optgroup key={cat} label={`--- ${cat} ---`} className="bg-gray-900 text-gray-400">
                        {visualStylesList.filter(v => v.category === cat).map(v => (
                          <option key={v.id} value={v.id} className="text-white">{v.icon} {v.name}</option>
                        ))}
                      </optgroup>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-fuchsia-400 uppercase mb-1.5">จำนวนฉาก (1-20)</label>
                  <input type="number" min="1" max="20" name="sceneCount" value={formData.sceneCount} onChange={handleInputChange} className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-fuchsia-500 outline-none text-sm" />
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">ความต้องการเพิ่มเติม</label>
                <textarea 
                  name="extraDetails" 
                  value={formData.extraDetails} 
                  onChange={handleInputChange}
                  placeholder="เช่น พระเอกมีรอยแผลเป็นที่ตาซ้าย"
                  rows="2"
                  className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm resize-none custom-scrollbar"
                ></textarea>
              </div>

            </div>

            <div className="pt-4 mt-auto">
              <button 
                onClick={generateContent}
                disabled={isLoading}
                className="w-full bg-gradient-to-r from-indigo-600 via-purple-600 to-fuchsia-600 hover:from-indigo-500 hover:to-fuchsia-500 text-white font-bold py-4 px-6 rounded-xl flex items-center justify-center gap-2 transition-all transform hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:hover:scale-100 shadow-[0_0_25px_rgba(139,92,246,0.3)] relative overflow-hidden group"
              >
                <div className="absolute inset-0 w-full h-full bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
                {isLoading ? (
                  <><Loader2 className="animate-spin" size={20} /> กำลังจำลองจักรวาลและบันทึกข้อมูล...</>
                ) : (
                  <><Play size={20} fill="currentColor" /> สร้างคอนเทนต์ & บันทึกลง Cloud</>
                )}
              </button>
            </div>
          </div>
        </div>

        {/* Right Column: Result Output */}
        <div className="lg:col-span-7 h-[85vh] lg:h-auto min-h-[600px] flex flex-col">
          <div className="bg-[#0a0b10] border border-gray-800 rounded-2xl h-full flex flex-col overflow-hidden relative shadow-2xl">
            
            <div className="bg-gray-900/90 backdrop-blur-md border-b border-gray-800 p-4 flex justify-between items-center z-20">
              <h2 className="font-semibold text-gray-200 flex items-center gap-2 text-sm md:text-base">
                🎬 จอมอนิเตอร์ผู้กำกับ
              </h2>
              {result && (
                <div className="flex gap-2">
                  <button onClick={() => downloadScript(result)} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-700">
                    <Download size={14} /> <span className="hidden sm:inline">โหลด .txt</span>
                  </button>
                  <button onClick={() => copyToClipboard()} className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all border ${
                    copied ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-indigo-600/20 text-indigo-300 border-indigo-500/30 hover:bg-indigo-600/30'
                  }`}>
                    {copied ? <CheckCircle2 size={14} /> : <Copy size={14} />}
                    {copied ? 'คัดลอกแล้ว!' : 'คัดลอก Prompts'}
                  </button>
                </div>
              )}
            </div>

            <div className="p-6 md:p-8 overflow-y-auto flex-1 custom-scrollbar relative">
              {isLoading && (
                <div className="absolute inset-0 flex flex-col items-center justify-center bg-[#0a0b10]/80 backdrop-blur-sm z-10">
                  <div className="relative">
                    <div className="w-24 h-24 border-4 border-indigo-500/10 rounded-full animate-[spin_3s_linear_infinite]"></div>
                    <div className="w-24 h-24 border-4 border-fuchsia-500/80 rounded-full animate-spin absolute top-0 left-0 border-t-transparent border-l-transparent shadow-[0_0_15px_rgba(217,70,239,0.5)]"></div>
                    <div className="absolute inset-0 flex items-center justify-center text-fuchsia-400">
                      <Sparkles className="animate-pulse" size={28} />
                    </div>
                  </div>
                  <p className="mt-6 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-fuchsia-400 font-bold tracking-widest animate-pulse">กำลังประมวลผลเรนเดอร์ภาพ...</p>
                  <p className="text-gray-500 text-xs mt-2 text-center px-4">AI กำลังวิเคราะห์ภาพและเขียนบท<br/>(อาจใช้เวลาสักครู่)</p>
                </div>
              )}

              {error && (
                <div className="bg-red-900/20 border border-red-500/50 rounded-xl p-4 text-red-400 flex items-start gap-3">
                  <AlertCircle className="mt-0.5 flex-shrink-0" size={18} />
                  <p className="text-sm">{error}</p>
                </div>
              )}

              {!isLoading && !result && !error && (
                <div className="h-full flex flex-col items-center justify-center text-gray-600 space-y-4">
                  <div className="w-24 h-24 rounded-full border-2 border-dashed border-gray-800 flex items-center justify-center bg-gray-900/30">
                    <Play className="opacity-20 ml-2" size={40} />
                  </div>
                  <p className="text-sm font-medium tracking-wide">รอคำสั่งสร้างภาพจากผู้กำกับ...</p>
                </div>
              )}

              {result && (
                <div className="prose prose-invert prose-indigo max-w-none text-sm md:text-base">
                  {result.split('\n').map((line, index) => {
                    if (line.startsWith('# ')) return <h1 key={index} className="text-2xl md:text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 mb-6 pb-4 border-b border-gray-800/80 leading-tight">{line.replace('# ', '')}</h1>;
                    if (line.startsWith('## ')) return <h2 key={index} className="text-lg md:text-xl font-bold text-fuchsia-300 mt-10 mb-5 flex items-center gap-2 bg-fuchsia-900/10 inline-block px-4 py-1.5 rounded-full border border-fuchsia-500/20">{line.replace('## ', '')}</h2>;
                    if (line.startsWith('### ')) return <h3 key={index} className="text-md md:text-lg font-semibold text-gray-200 mt-6 mb-3">{line.replace('### ', '')}</h3>;
                    
                    if (line.startsWith('- **')) {
                      const parts = line.split('**');
                      return <p key={index} className="ml-4 mb-2 pl-2 border-l-2 border-gray-700 text-gray-300"><strong className="text-indigo-300 font-semibold">{parts[1]}</strong>{parts[2]}</p>
                    }
                    if (line.startsWith('- ')) return <li key={index} className="ml-5 text-gray-300 mb-1.5 marker:text-indigo-500">{line.replace('- ', '')}</li>;
                    
                    if (line.includes('[Prompt:') || line.includes('[Image:')) {
                       return (
                         <div key={index} className="bg-[#12141d] border border-gray-700/80 p-5 rounded-xl mb-5 text-indigo-100 font-mono text-xs md:text-sm leading-relaxed relative group hover:border-indigo-500/60 transition-colors shadow-[0_8px_20px_rgba(0,0,0,0.3)] border-l-4 border-l-fuchsia-500 break-words whitespace-pre-wrap">
                            <div className="absolute -top-3 left-4 bg-gradient-to-r from-fuchsia-600 to-indigo-600 text-white text-[10px] font-bold px-3 py-1 rounded-full shadow-lg tracking-wider flex items-center gap-1">
                               <Sparkles size={10}/> TEXT-TO-VIDEO PROMPT
                            </div>
                            <div className="mt-2 text-gray-300">{line}</div>
                         </div>
                       )
                    }
                    if (line.trim() === '') return <div key={index} className="h-3"></div>;
                    
                    let formattedLine = line;
                    if(formattedLine.includes('**')) {
                       const parts = formattedLine.split('**');
                       return <p key={index} className="text-gray-300 leading-relaxed mb-3">
                         {parts.map((part, i) => i % 2 === 1 ? <strong key={i} className="text-fuchsia-300 font-semibold">{part}</strong> : part)}
                       </p>
                    }
                    if(formattedLine.includes('[SFX:') || formattedLine.includes('[VFX:')) {
                        const coloredText = formattedLine.replace(/\[SFX:([^\]]+)\]/g, '<span class="text-amber-400 text-xs bg-amber-400/10 px-1.5 py-0.5 rounded border border-amber-400/20 mr-1">[SFX:$1]</span>')
                                                         .replace(/\[VFX:([^\]]+)\]/g, '<span class="text-cyan-400 text-xs bg-cyan-400/10 px-1.5 py-0.5 rounded border border-cyan-400/20 mr-1">[VFX:$1]</span>');
                        return <p key={index} className="text-gray-300 leading-relaxed mb-3" dangerouslySetInnerHTML={{__html: coloredText}}></p>;
                    }

                    return <p key={index} className="text-gray-300 leading-relaxed mb-3">{line}</p>;
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* --- Settings Modal (BYOK) --- */}
      {showSettings && (
        <div className="fixed inset-0 bg-black/85 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden">
            <div className="p-5 border-b border-gray-800 flex justify-between items-center bg-gray-950">
              <h2 className="text-lg font-bold text-indigo-400 flex items-center gap-2">
                <Key size={20} /> ตั้งค่า Gemini API Key
              </h2>
              <button onClick={() => setShowSettings(false)} className="text-gray-400 hover:text-white p-1">
                <X size={20} />
              </button>
            </div>
            
            <div className="p-6">
              {!user || user.isAnonymous ? (
                <div className="text-center">
                  <AlertCircle className="mx-auto text-amber-500 mb-3" size={40} />
                  <p className="text-sm text-gray-300 mb-4">โปรดเข้าสู่ระบบด้วยบัญชี Google ของคุณก่อน เพื่อบันทึก API Key อย่างปลอดภัย</p>
                  <button onClick={loginWithGoogle} className="bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 w-full transition-colors">เข้าสู่ระบบด้วย Google</button>
                </div>
              ) : (
                <div className="space-y-4">
                  <p className="text-xs text-gray-400">
                    เพื่อใช้งานแบบไม่จำกัดโควต้า โปรดใส่ Gemini API Key ของคุณเอง สามารถรับคีย์ฟรีได้ที่ <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-indigo-400 hover:underline">Google AI Studio</a>
                  </p>
                  <div>
                    <label className="block text-xs font-semibold text-gray-400 uppercase mb-1.5">Your Gemini API Key</label>
                    <input 
                      type="password" 
                      value={tempApiKey} 
                      onChange={(e) => setTempApiKey(e.target.value)} 
                      placeholder="AIzaSy..." 
                      className="w-full bg-gray-950 border border-gray-800 rounded-lg p-3 text-white focus:ring-1 focus:ring-indigo-500 outline-none text-sm"
                    />
                  </div>
                  <button onClick={saveSettings} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 rounded-xl transition-colors">
                    บันทึกการตั้งค่า
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* --- Image Gallery Modal --- */}
      {showGalleryModal && (
        <div className="fixed inset-0 bg-black/85 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-4xl max-h-[85vh] flex flex-col shadow-2xl overflow-hidden">
            <div className="p-5 border-b border-gray-800 flex justify-between items-center bg-gray-950">
              <h2 className="text-xl font-bold text-indigo-400 flex items-center gap-2">
                <ImageIcon size={24} /> คลังภาพของคุณ (Image Gallery)
              </h2>
              <button onClick={() => setShowGalleryModal(false)} className="text-gray-400 hover:text-white p-1">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6 overflow-y-auto custom-scrollbar flex-1 bg-[#0a0a0f]">
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                
                {/* Upload New Button inside Gallery */}
                <label className="border-2 border-dashed border-gray-700 hover:border-indigo-500 rounded-xl aspect-square flex flex-col items-center justify-center cursor-pointer transition-colors bg-gray-900/50 group relative overflow-hidden">
                  {isUploadingGallery ? (
                    <div className="flex flex-col items-center">
                      <Loader2 className="animate-spin text-indigo-500 mb-2" size={28} />
                      <span className="text-xs text-indigo-400 font-medium">กำลังอัปโหลด...</span>
                    </div>
                  ) : (
                    <>
                      <UploadCloud className="text-gray-500 group-hover:text-indigo-400 mb-2 transition-colors" size={28} />
                      <span className="text-xs font-semibold text-gray-300 group-hover:text-white">อัปโหลดภาพใหม่</span>
                      <span className="text-[10px] text-gray-500 mt-1 text-center px-2">รูปจะถูกบันทึกลงคลังและเลือกใช้งานทันที</span>
                      <input type="file" className="hidden" accept="image/*" onChange={handleGalleryUpload} disabled={isUploadingGallery} />
                    </>
                  )}
                </label>

                {/* Render Existing Images */}
                {galleryImages.map((imgDoc) => (
                  <div key={imgDoc.id} onClick={() => selectGalleryImage(imgDoc)} className="relative aspect-square rounded-xl overflow-hidden border border-gray-700 hover:border-indigo-400 cursor-pointer group shadow-lg bg-gray-800">
                    <img src={imgDoc.thumbnailBase64 || imgDoc.url} alt="Gallery item" className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[2px]">
                       <span className="text-xs font-bold text-white bg-indigo-600 px-3 py-1.5 rounded-lg shadow-lg">เลือกรูปนี้</span>
                    </div>
                    {/* Delete Button */}
                    <button 
                      onClick={(e) => handleGalleryDelete(e, imgDoc)}
                      className="absolute top-2 right-2 bg-black/60 text-gray-300 p-1.5 rounded-lg hover:bg-red-600 hover:text-white transition-colors opacity-0 group-hover:opacity-100 z-10"
                      title="ลบออกจากคลังภาพ"
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- History Modal --- */}
      {showHistory && (
        <div className="fixed inset-0 bg-black/85 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-4xl max-h-[85vh] flex flex-col shadow-2xl overflow-hidden">
            <div className="p-5 border-b border-gray-800 flex justify-between items-center bg-gray-950">
              <h2 className="text-xl font-bold text-indigo-400 flex items-center gap-2">
                <History size={24} /> แฟ้มประวัติการสร้าง (Firebase Cloud)
              </h2>
              <button onClick={() => setShowHistory(false)} className="text-gray-400 hover:text-white p-1">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6 overflow-y-auto custom-scrollbar flex-1 bg-[#0a0a0f]">
              {historyDocs.length === 0 ? (
                <div className="text-center text-gray-500 py-10">ยังไม่มีประวัติการสร้างในฐานข้อมูล</div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {historyDocs.map((docItem) => {
                    const displayCharImg = docItem.charImageUrl || docItem.charThumbnailBase64;
                    const displayProdImg = docItem.prodImageUrl || docItem.prodThumbnailBase64;
                    
                    return (
                    <div key={docItem.id} className="bg-gray-800/50 border border-gray-700 rounded-xl p-4 hover:border-indigo-500/50 transition-colors flex flex-col">
                      <div className="flex justify-between items-start mb-3">
                        <div>
                          <h3 className="font-bold text-gray-200 text-lg">{docItem.formData?.name || 'ไม่มีชื่อ'} vs {docItem.formData?.enemy}</h3>
                          <p className="text-xs text-gray-400 mt-1">
                            {new Date(docItem.createdAt).toLocaleString('th-TH')}
                          </p>
                        </div>
                        
                        <div className="flex gap-2 ml-3 flex-shrink-0">
                          {displayCharImg && (
                            <div className="w-12 h-12 md:w-16 md:h-16 rounded bg-gray-900 overflow-hidden border border-gray-700" title="ภาพอ้างอิงตัวละคร">
                              <img src={displayCharImg} alt="char ref" className="w-full h-full object-cover" />
                            </div>
                          )}
                          {displayProdImg && (
                            <div className="w-12 h-12 md:w-16 md:h-16 rounded bg-gray-900 overflow-hidden border border-gray-700" title="ภาพอ้างอิงสินค้า">
                              <img src={displayProdImg} alt="prod ref" className="w-full h-full object-cover" />
                            </div>
                          )}
                        </div>
                      </div>
                      
                      <div className="mt-auto pt-4 flex gap-2 border-t border-gray-700">
                        <button 
                          onClick={() => loadHistoryItem(docItem)}
                          className="flex-1 bg-indigo-600/20 hover:bg-indigo-600/40 text-indigo-300 py-2 rounded-lg text-sm font-medium transition-colors"
                        >
                          โหลดเนื้อหานี้
                        </button>
                        <button 
                          onClick={() => deleteHistory(docItem.id)}
                          className="px-3 bg-red-500/10 hover:bg-red-500/30 text-red-400 rounded-lg transition-colors"
                        >
                          <Trash2 size={16} />
                        </button>
                      </div>
                    </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4f46e5; }
        button { user-select: none; }
      `}} />
    </div>
  );
}