import React, { useState, useEffect, useRef, useCallback } from 'react';

// --- Komponen Ikon SVG ---
const SparklesIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 3L9.5 8.5L4 11L9.5 13.5L12 19L14.5 13.5L20 11L14.5 8.5L12 3z" /><path d="M5 3v4" /><path d="M19 17v4" /><path d="M3 5h4" /><path d="M17 19h4" /></svg>);
const ClipboardIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /></svg>);
const CheckIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="20 6 9 17 4 12" /></svg>);
const MessageCircleIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>);
const XIcon = ({ className, onClick }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} onClick={onClick}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>);
const LightbulbIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M15 14c.2-1 .7-1.7 1.5-2.5C17.7 10.2 18 9 18 8c0-2.2-1.8-4-4-4-1.1 0-2.1.5-2.8 1.2L10 6c-.7-.7-1.7-1.2-2.8-1.2C5.8 4.8 4 6.6 4 8.8c0 1.2.3 2.4 1.5 3.5.7.8 1.2 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>);
const SaveIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><polyline points="17 21 17 13 7 13 7 21" /><polyline points="7 3 7 8 15 8" /></svg>);
const RefreshCwIcon = ({ className }) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>);
const Spinner = ({ className }) => (<div className={`w-4 h-4 border-2 border-dashed border-cyan-400 rounded-full animate-spin ${className}`}></div>);

// --- Konfigurasi Platform ---
const platformConfig = {
    'Threads': { blocks: 5, chars: 500, type: 'text' },
    'Instagram': { blocks: 1, chars: 2200, type: 'text' },
    'Facebook': { blocks: 1, chars: 5000, type: 'text' },
    'LinkedIn': { blocks: 1, chars: 3000, type: 'text' },
    'TikTok': { type: 'script' }, // Tipe khusus
    'Landing Page Lynk.id': { blocks: 1, chars: 10000, type: 'text' },
    'Email Newsletter': { blocks: 1, chars: 15000, type: 'text' },
    'Chanel WhatsApp': { blocks: 1, chars: 4096, type: 'text' },
    'Chanel Telegram': { blocks: 1, chars: 4096, type: 'text' },
};

const defaultLanguageStyles = ['Santai & Humoris','Inspiratif & Menyentuh','Tegas & Informatif','Provokatif & Mengajak Diskusi','Empati & Mendukung','Formal & Akademis','Gaul & Kekinian'];

// --- Fungsi Helper untuk API Call & Format ---
const callGeminiAPI = async (prompt, schema = null) => {
    const chatHistory = [{ role: "user", parts: [{ text: prompt }] }];
    const payload = { contents: chatHistory };
    if (schema) {
        payload.generationConfig = {
            responseMimeType: "application/json",
            responseSchema: schema,
        };
    }
    const apiKey = "";
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
    const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
    if (!response.ok) {
        const errorBody = await response.text();
        throw new Error(`Permintaan API gagal: ${response.status} ${errorBody}`);
    }
    const result = await response.json();
    if (result.candidates && result.candidates[0].content && result.candidates[0].content.parts.length > 0) {
        const text = result.candidates[0].content.parts[0].text;
        return schema ? JSON.parse(text) : text;
    } else {
        throw new Error("Struktur respons dari AI tidak valid atau konten tidak ditemukan.");
    }
};

const formatForReadability = (text) => {
    // Fungsi ini bisa dikembangkan untuk format yang lebih kompleks jika perlu
    return text;
};

// --- Komponen Utama Aplikasi ---
const App = () => {
    // State untuk input utama
    const [platform, setPlatform] = useState('Threads');
    const [customPlatform, setCustomPlatform] = useState('');
    const [niche, setNiche] = useState('tips siap nikah for gen z mager');
    const [targetAudience, setTargetAudience] = useState('gen z muslim/ muslimah yang kepo about nikah but males denger ceramah');
    const [contentPrinciples, setContentPrinciples] = useState('1. Sesuai kaidah syar’i\n2. Anti pacaran\n3. Anti musik\n4. Full bahasa gen z biar relate tapi gak sok asik');
    const [topic, setTopic] = useState('');

    // State untuk form
    const [recipe, setRecipe] = useState('Kisah Nyata dari Lapangan');
    const [contentType, setContentType] = useState('Utas Berbobot');
    const [contentLimit, setContentLimit] = useState(5);
    const [maxCharsPerBlock, setMaxCharsPerBlock] = useState(500);
    const [maxCharsPerBlockArray, setMaxCharsPerBlockArray] = useState(Array(5).fill(500));
    const [style, setStyle] = useState('Santai & Humoris');
    const [bookInsight, setBookInsight] = useState('');
    const [bookDetails, setBookDetails] = useState('');
    
    // State untuk struktur konten
    const [hookType, setHookType] = useState('Pertanyaan Retoris');
    const [bodyType, setBodyType] = useState('Penjelasan Langsung');
    const [ctaType, setCtaType] = useState('Ajak Diskusi');

    // State untuk 'Bumbu Cerita'
    const [povPenghulu, setPovPenghulu] = useState('');
    const [povSyariah, setPovSyariah] = useState('');
    const [povPribadi, setPovPribadi] = useState('');

    // State untuk hasil dari AI
    const [generatedContent, setGeneratedContent] = useState([]);
    const [generatedTiktokScript, setGeneratedTiktokScript] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [copySuccess, setCopySuccess] = useState('');

    // State untuk fitur balas komentar
    const [commentInput, setCommentInput] = useState('');
    const [generatedReply, setGeneratedReply] = useState('');
    const [isReplying, setIsReplying] = useState(false);
    const [replyError, setReplyError] = useState(null);
    const [copyReplySuccess, setCopyReplySuccess] = useState('');
    const [replyStyle, setReplyStyle] = useState('Santai & Humoris');

    // State untuk rekomendasi & pengurutan dinamis
    const [recommendedTopics, setRecommendedTopics] = useState([]);
    const [isRecommendingTopics, setIsRecommendingTopics] = useState(false);
    const [recommendationError, setRecommendationError] = useState(null);
    const [languageStyles, setLanguageStyles] = useState(defaultLanguageStyles);
    const [isFetchingStyles, setIsFetchingStyles] = useState(false);
    const debounceTimeout = useRef(null);
    const sortOptionsDebounce = useRef(null);

    // State untuk draf tersimpan & konversi
    const [savedDrafts, setSavedDrafts] = useState([]);
    const [saveSuccess, setSaveSuccess] = useState(false);
    const [isConverting, setIsConverting] = useState(false);
    const [conversionTarget, setConversionTarget] = useState('Instagram');
    const [convertedContent, setConvertedContent] = useState('');
    const [copyConvertedSuccess, setCopyConvertedSuccess] = useState(false);
    
    // Konfigurasi Statis
    const contentTypes = {'Utas Berbobot': 'Utas/blok bersambung mendalam.','Carousel': 'Konten visual geser.','Motivasi/Mindset': 'Single post motivasi singkat.','Practical Tips': 'Single post berisi tips praktis.','Utas Bersambung': 'Konten bersambung dalam beberapa blok.','Single Post': 'Satu postingan tunggal.','Storytelling': 'Menceritakan sebuah kisah.'};
    const isMultiBlock = platformConfig[platform]?.blocks > 1;
    const hookOptions = {'Pertanyaan Retoris': 'Ajukan pertanyaan yang menusuk.','Fakta Mengejutkan': 'Sajikan data tak terduga.','Kutipan Kuat': 'Gunakan kutipan berpengaruh.','Cerita Personal Singkat': 'Awali dengan kisah pribadi.','Statistik Lokal': 'Sebutkan data spesifik.','"Bayangkan Jika..."': 'Ajak audiens berimajinasi.','Humor Pembuka': 'Gunakan lelucon relevan.','Definisi Ulang': 'Berikan perspektif segar.'};
    const bodyOptions = {'Penjelasan Langsung': 'Jelaskan poin utama.','Studi Kasus/Contoh': 'Gunakan contoh nyata.','Poin-poin (Listicle)': 'Sajikan dalam bentuk daftar.','Analogi/Metafora': 'Gunakan perumpamaan mudah.','Analogi Main Game': 'Gunakan perumpamaan dari game.','Tanya Jawab (Q&A)': 'Strukturkan seperti tanya jawab.','Perbandingan (Pros & Cons)': 'Bandingkan dua sisi topik.','Membantah Mitos': 'Bantah mitos umum dengan fakta.','Narasi Kronologis': 'Ceritakan secara berurutan.'};
    const ctaOptions = {'Ajak Diskusi': 'Minta pendapat di komentar.','Pertanyaan Langsung': 'Tanyakan sesuatu yang spesifik.','Bagikan & Simpan': 'Ajak untuk menyimpan/membagikan.','Tantangan Kecil': 'Berikan tantangan praktis.','Ajakan Beraksi (Spesifik)': 'Minta audiens melakukan aksi.','Refleksi Diri': 'Ajak audiens merenung.','🛍️ Jualan Langsung': 'Arahkan untuk membeli produk.'};
    const viralRecipes = {'Kisah Nyata dari Lapangan': 'Ceritakan kisah nyata.','Konsep Rumit Jadi Simpel': 'Jelaskan konsep rumit.','Sudut Pandang Personal': 'Bagikan pengalaman pribadi.','Solusi Masalah Spesifik': 'Fokus pada satu masalah audiens.','Membantah Mitos Umum': 'Bantah mitos populer.','Niche x Tren Terkini': 'Hubungkan niche dengan tren.','Insight dari Buku/Bacaan': 'Ambil ide dari sebuah buku.','Edukasi Mendalam': 'Buat konten edukasi A-Z.'};

    // State untuk opsi yang diurutkan
    const [sortedRecipes, setSortedRecipes] = useState(Object.keys(viralRecipes));
    const [sortedHooks, setSortedHooks] = useState(Object.keys(hookOptions));
    const [sortedBodies, setSortedBodies] = useState(Object.keys(bodyOptions));
    const [sortedCtas, setSortedCtas] = useState(Object.keys(ctaOptions));
    const [isSortingOptions, setIsSortingOptions] = useState(false);
    
    // --- EFEK APLIKASI ---

    useEffect(() => {
        const config = platformConfig[platform];
        if (config && config.type === 'text') {
            setContentLimit(config.blocks);
            setMaxCharsPerBlock(config.chars);
        } else if (platform === 'Threads') {
            setContentLimit(5);
            setMaxCharsPerBlock(500);
        }
    }, [platform]);
    
    useEffect(() => {
        try { const d = localStorage.getItem('savedContentDrafts'); if (d) setSavedDrafts(JSON.parse(d)); } catch (e) { console.error("Gagal memuat draf", e); }
    }, []);

    useEffect(() => {
        try { localStorage.setItem('savedContentDrafts', JSON.stringify(savedDrafts)); } catch (e) { console.error("Gagal menyimpan draf", e); }
    }, [savedDrafts]);

    const fetchLanguageStyles = useCallback(async (currentNiche) => {
        if (!currentNiche) { setLanguageStyles(defaultLanguageStyles); return; }
        setIsFetchingStyles(true);
        const prompt = `Berdasarkan niche "${currentNiche}", berikan 7 gaya bahasa yang relevan. Format JSON: {"styles": ["gaya 1", ...]}`;
        const schema = { type: "OBJECT", properties: { styles: { type: "ARRAY", items: { type: "STRING" } } }, required: ["styles"] };
        try { const r = await callGeminiAPI(prompt, schema); if (r && Array.isArray(r.styles)) { setLanguageStyles([...new Set([...defaultLanguageStyles, ...r.styles])]); } } catch (e) { console.error("Gagal fetch gaya bahasa:", e); setLanguageStyles(defaultLanguageStyles); } finally { setIsFetchingStyles(false); }
    }, []);

    useEffect(() => {
        if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
        debounceTimeout.current = setTimeout(() => { fetchLanguageStyles(niche); }, 1000);
        return () => { if (debounceTimeout.current) clearTimeout(debounceTimeout.current); };
    }, [niche, fetchLanguageStyles]);
    
    useEffect(() => {
        const fetchAndSortOptions = async () => {
            if (!niche && !topic) return;
            setIsSortingOptions(true);
            const finalPlatform = platform === 'Ketik Sendiri...' ? customPlatform : platform;

            const prompt = `Anda ahli strategi konten. Berdasarkan konteks Platform: "${finalPlatform}", Niche: "${niche}", Topik: "${topic}", urutkan daftar strategi ini dari PALING berpotensi viral ke kurang. Format JSON: {"recipes": [...], "hooks": [...], "bodies": [...], "ctas": [...]}. Isi array harus string dari daftar asli, jangan menambah/mengurangi item. Daftar Resep: ${JSON.stringify(Object.keys(viralRecipes))}. Daftar Hook: ${JSON.stringify(Object.keys(hookOptions))}. Daftar Isi: ${JSON.stringify(Object.keys(bodyOptions))}. Daftar CTA: ${JSON.stringify(Object.keys(ctaOptions))}.`;
            const schema = { type: "OBJECT", properties: { recipes: { type: "ARRAY", items: { type: "STRING" } }, hooks: { type: "ARRAY", items: { type: "STRING" } }, bodies: { type: "ARRAY", items: { type: "STRING" } }, ctas: { type: "ARRAY", items: { type: "STRING" } } }, required: ["recipes", "hooks", "bodies", "ctas"] };

            try {
                const result = await callGeminiAPI(prompt, schema);
                if (result.recipes.length === Object.keys(viralRecipes).length) setSortedRecipes(result.recipes);
                if (result.hooks.length === Object.keys(hookOptions).length) setSortedHooks(result.hooks);
                if (result.bodies.length === Object.keys(bodyOptions).length) setSortedBodies(result.bodies);
                if (result.ctas.length === Object.keys(ctaOptions).length) setSortedCtas(result.ctas);
            } catch (e) {
                console.error("Gagal mengurutkan opsi:", e);
                setSortedRecipes(Object.keys(viralRecipes)); setSortedHooks(Object.keys(hookOptions)); setSortedBodies(Object.keys(bodyOptions)); setSortedCtas(Object.keys(ctaOptions));
            } finally { setIsSortingOptions(false); }
        };

        if (sortOptionsDebounce.current) clearTimeout(sortOptionsDebounce.current);
        sortOptionsDebounce.current = setTimeout(() => { fetchAndSortOptions(); }, 1500);
        return () => { if (sortOptionsDebounce.current) clearTimeout(sortOptionsDebounce.current); };
    }, [niche, topic, platform, customPlatform]);

    useEffect(() => {
        if (isFetchingStyles) return;
        setStyle(cs => (cs === 'Ketik Sendiri...' || languageStyles.includes(cs)) ? cs : (languageStyles[0] || ''));
        setReplyStyle(crs => (crs === 'Ketik Sendiri...' || languageStyles.includes(crs)) ? crs : (languageStyles[0] || ''));
    }, [languageStyles, isFetchingStyles]);

    useEffect(() => {
        const newSize = Number(contentLimit) || 1;
        setMaxCharsPerBlockArray(oldArray => {
            const newArray = new Array(newSize).fill(maxCharsPerBlock);
            for (let i = 0; i < Math.min(newSize, oldArray.length); i++) {
                newArray[i] = oldArray[i];
            }
            return newArray;
        });
    }, [contentLimit, maxCharsPerBlock]);

    // --- FUNGSI HANDLER UTAMA ---
    const handleMaxCharsChange = (index, value) => { const newArray = [...maxCharsPerBlockArray]; newArray[index] = Number(value); setMaxCharsPerBlockArray(newArray); };
    const handleCopy = (text, type, id = '') => {
        navigator.clipboard.writeText(text).then(() => {
            if (type === 'content') { setCopySuccess(`content-${id}`); setTimeout(() => setCopySuccess(''), 2000); }
            else if (type === 'reply') { setCopyReplySuccess(text); setTimeout(() => setCopyReplySuccess(''), 2000); }
            else if (type === 'converted') { setCopyConvertedSuccess(true); setTimeout(() => setCopyConvertedSuccess(false), 2000); }
        }).catch(err => console.error('Gagal menyalin:', err));
    };
    const handleSaveDraft = () => { if (generatedContent.length === 0 && !generatedTiktokScript) return; const newDraft = { id: Date.now(), title: topic || "Draf Tanpa Judul", platform, content: generatedContent, script: generatedTiktokScript, timestamp: new Date().toISOString() }; setSavedDrafts(p => [newDraft, ...p]); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 2000); };
    
    const handleGetRecommendations = async () => {
        setIsRecommendingTopics(true); setRecommendationError(null); setRecommendedTopics([]);
        const finalPlatform = platform === 'Ketik Sendiri...' ? customPlatform : platform;
        const prompt = `Anda ahli strategi konten. Beri 5 ide topik viral untuk Platform: "${finalPlatform}", Niche: "${niche}", Audiens: "${targetAudience}", Resep: "${recipe}". Format JSON: {"topics": ["ide 1", ...]}`;
        const schema = { type: "OBJECT", properties: { topics: { type: "ARRAY", items: { type: "STRING" } } }, required: ["topics"] };
        try { const r = await callGeminiAPI(prompt, schema); if (r && Array.isArray(r.topics)) { setRecommendedTopics(r.topics); } else { throw new Error("Format respons tidak valid."); } } catch (e) { console.error(e); setRecommendationError("Gagal mencari ide."); } finally { setIsRecommendingTopics(false); }
    };

    const handleGenerate = async () => {
        setIsLoading(true); setError(null); setGeneratedContent([]); setGeneratedTiktokScript(null);
        const finalPlatform = platform === 'Ketik Sendiri...' ? customPlatform : platform;
        const isTikTok = platform === 'TikTok';

        let prompt;
        let schema;

        if (isTikTok) {
            prompt = `Anda adalah seorang sutradara dan penulis skrip TikTok viral. Buat ide konten TikTok lengkap berdasarkan detail berikut:\n\nPlatform: ${finalPlatform}\nNiche: ${niche}\nTarget Audiens: ${targetAudience}\nTopik: ${topic}\nGaya: ${style}\n\nTugas: Hasilkan ide skrip video pendek (15-60 detik) yang menarik. Fokus pada hook visual yang kuat di 3 detik pertama.\n\nATURAN WAJIB:\n1.  FORMAT OUTPUT: HARUS berupa JSON dengan struktur: {"visual_hook": "...", "on_screen_text": "...", "voiceover_script": "...", "cta": "...", "sound_suggestion": "..."}.\n2.  Bahasa: Indonesia.`;
            schema = { type: "OBJECT", properties: { visual_hook: { type: "STRING" }, on_screen_text: { type: "STRING" }, voiceover_script: { type: "STRING" }, cta: { type: "STRING" }, sound_suggestion: { type: "STRING" } }, required: ["visual_hook", "on_screen_text", "voiceover_script", "cta", "sound_suggestion"] };
        } else {
            let contentAndCharRules = '';
            if (!isMultiBlock) {
                const charLimit = Math.min(maxCharsPerBlock, 15000);
                contentAndCharRules = `4. **ATURAN KARAKTER:** Batas karakter untuk post ini adalah ${charLimit} karakter.`;
            } else {
                const limitsDetail = maxCharsPerBlockArray.map((limit, index) => `- Post ${index + 1}: HARUS KURANG DARI ${Math.min(limit, 500)} karakter.`).join('\n');
                contentAndCharRules = `4. **ATURAN KARAKTER:**\n   - Jumlah post tidak boleh melebihi ${contentLimit} blok.\n   - Patuhi batasan karakter ini: ${limitsDetail}`;
            }
            prompt = `Anda adalah copywriter ahli untuk platform ${finalPlatform}. Buat draf konten viral.\n\n--- ATURAN PALING KRITIS ---\n1.  **INTEGRITAS KALIMAT PRIORITAS #1:** JANGAN PERNAH menghasilkan teks yang berakhir dengan kalimat terpotong. Setiap blok HARUS berakhir dengan titik (.), tanda tanya (?), atau seru (!).\n2.  **SESUAIKAN, JANGAN POTONG:** Untuk mematuhi batas karakter, ringkas dan susun ulang kalimat secara cerdas. Lebih baik konten lebih pendek tapi utuh.\n\n--- KONTEKS ---\nPlatform: ${finalPlatform}\nNiche: ${niche}\nTarget Audiens: ${targetAudience}\nPrinsip: ${contentPrinciples}\n\n--- ATURAN TEKNIS ---\n1.  Fokus pada Audiens.\n2.  Gaya 'saya ke kamu'.\n3.  FORMAT OUTPUT: JSON {"threads": ["post 1", ...]}.\n${contentAndCharRules}\n\n--- DETAIL KONTEN ---\nTopik: ${topic}\nJenis Konten: ${contentType}\nResep Viral: ${recipe}\nGaya Bahasa: ${style}\nStruktur: Hook '${hookType}', Isi '${bodyType}', CTA '${ctaType}'.\nInspirasi Tambahan: ${bookInsight || povPribadi || povPenghulu || povSyariah || ''}`;
            schema = { type: "OBJECT", properties: { threads: { type: "ARRAY", items: { type: "STRING" } } }, required: ["threads"] };
        }

        try {
            const result = await callGeminiAPI(prompt, schema);
            if (isTikTok) {
                setGeneratedTiktokScript(result);
            } else {
                if (result && Array.isArray(result.threads)) { setGeneratedContent(result.threads); } else { throw new Error("Format respons tidak sesuai."); }
            }
        } catch (e) {
            console.error(e);
            setError("Gagal membuat konten. Detail: " + e.message);
        } finally {
            setIsLoading(false);
        }
    };

    const handleConversion = async () => {
        if (generatedContent.length === 0 && !generatedTiktokScript) return;
        setIsConverting(true);
        setConvertedContent('');
        const originalPlatform = platform === 'Ketik Sendiri...' ? customPlatform : platform;
        const contentToConvert = platform === 'TikTok' ? `Skrip TikTok:\nVisual Hook: ${generatedTiktokScript.visual_hook}\nTeks di Layar: ${generatedTiktokScript.on_screen_text}\nNarasi: ${generatedTiktokScript.voiceover_script}\nCTA: ${generatedTiktokScript.cta}\nSaran Suara: ${generatedTiktokScript.sound_suggestion}` : generatedContent.join('\n\n');

        const prompt = `Anda adalah ahli adaptasi konten multi-platform. Ubah konten berikut dari format ${originalPlatform} menjadi format yang optimal untuk ${conversionTarget}.\n\nPerhatikan:\n- Nada bicara yang sesuai untuk ${conversionTarget}.\n- Batasan karakter dan format.\n- Penggunaan hashtag, emoji, dan gaya CTA yang relevan.\n\nKonten Asli:\n"""\n${contentToConvert}\n"""\n\nKonten Hasil Adaptasi untuk ${conversionTarget}:`;
        
        try {
            const result = await callGeminiAPI(prompt);
            setConvertedContent(result);
        } catch (e) {
            console.error(e);
            setConvertedContent("Gagal melakukan konversi. Coba lagi.");
        } finally {
            setIsConverting(false);
        }
    };
    
    return (
        <div className="bg-slate-900 min-h-screen font-sans text-white p-4 sm:p-6 md:p-8">
            <div className="max-w-4xl mx-auto">
                <header className="text-center mb-8">
                    <h1 className="text-3xl sm:text-4xl font-bold text-cyan-400">Content Suite Cerdas</h1>
                    <p className="text-sm text-slate-400 mt-1">by @ikmalogic</p>
                </header>

                <main className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="md:col-span-2 bg-slate-800 p-6 rounded-2xl shadow-lg">
                        <h2 className="text-2xl font-semibold mb-2 border-b-2 border-cyan-500 pb-2">0. Pilih Platform Tujuan</h2>
                        <div>
                            <select id="platform" value={platform} onChange={(e) => setPlatform(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">
                                {Object.keys(platformConfig).map(p => <option key={p} value={p}>{p}</option>)}
                                <option value="Ketik Sendiri...">Ketik Sendiri...</option>
                            </select>
                            {platform === 'Ketik Sendiri...' && (
                                <div className="relative mt-2">
                                    <input type="text" value={customPlatform} onChange={(e) => setCustomPlatform(e.target.value)} placeholder="Tulis nama platform Anda di sini..." className="w-full bg-slate-900 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />
                                    {customPlatform && <XIcon onClick={() => setCustomPlatform('')} className="absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Kolom Input */}
                    <div className="bg-slate-800 p-6 rounded-2xl shadow-lg">
                        <div className="space-y-4">
                            <h2 className="text-2xl font-semibold mb-2 border-b-2 border-cyan-500 pb-2">1. Tentukan Persona Anda</h2>
                            <div><label htmlFor="niche" className="block text-sm font-medium text-slate-300 mb-1">Niche / Topik Utama Anda</label><div className="relative"><input type="text" id="niche" value={niche} onChange={(e) => setNiche(e.target.value)} placeholder="Contoh: Keuangan Pribadi" className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />{niche && <XIcon onClick={() => setNiche('')} className="absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />}</div></div>
                            <div><label htmlFor="targetAudience" className="block text-sm font-medium text-slate-300 mb-1">Target Audiens Anda</label><div className="relative"><input type="text" id="targetAudience" value={targetAudience} onChange={(e) => setTargetAudience(e.target.value)} placeholder="Contoh: Mahasiswa" className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />{targetAudience && <XIcon onClick={() => setTargetAudience('')} className="absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />}</div></div>
                            <div><label htmlFor="contentPrinciples" className="block text-sm font-medium text-slate-300 mb-1">Prinsip / Batasan Konten</label><div className="relative"><textarea id="contentPrinciples" rows="4" value={contentPrinciples} onChange={(e) => setContentPrinciples(e.target.value)} placeholder="Contoh: Berdasarkan data riset" className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"/>{contentPrinciples && <XIcon onClick={() => setContentPrinciples('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />}</div></div>

                            <h2 className="text-2xl font-semibold pt-4 mb-2 border-b-2 border-cyan-500 pb-2">2. Racik Idemu Di Sini</h2>
                            <div className="relative"><label htmlFor="topic" className="block text-sm font-medium text-slate-300 mb-1">Topik Spesifik</label><input type="text" id="topic" value={topic} onChange={(e) => setTopic(e.target.value)} placeholder="Contoh: Cara mengatur budget bulanan" className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none" />{topic && (<XIcon onClick={() => setTopic('')} className="absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                             
                             {platform !== 'TikTok' && (
                                <>
                                <div><label htmlFor="contentType" className="block text-sm font-medium text-slate-300 mb-1">Pilih Jenis Konten</label><select id="contentType" value={contentType} onChange={(e) => setContentType(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">{Object.keys(contentTypes).map(key => (<option key={key} value={key}>{key}</option>))}</select><p className="text-xs text-slate-400 mt-1">{contentTypes[contentType]}</p></div>
                                
                                {isMultiBlock ? (
                                    <>
                                        <div><label htmlFor="contentLimit" className="block text-sm font-medium text-slate-300 mb-1 mt-4">Batas Jumlah Blok Konten</label><input type="number" id="contentLimit" value={contentLimit} onChange={(e) => setContentLimit(Number(e.target.value))} min="1" max="20" className="w-full bg-slate-700 border-slate-600 rounded-lg p-2"/></div>
                                        <div><label className="block text-sm font-medium text-slate-300 mb-1 mt-4">Batas Maksimal Karakter per Blok</label><div className="space-y-2 mt-2 bg-slate-700/50 p-3 rounded-lg">{maxCharsPerBlockArray.map((value, index) => (<div key={index} className="flex items-center gap-3"><label htmlFor={`maxChars-${index}`} className="text-sm text-slate-400 w-16 shrink-0">Blok {index + 1}</label><input type="number" id={`maxChars-${index}`} value={value} onChange={(e) => handleMaxCharsChange(index, e.target.value)} className="w-full bg-slate-900 border-slate-600 rounded-lg p-2"/></div>))}</div></div>
                                    </>
                                ) : (
                                    <div><label htmlFor="maxCharsPerBlock" className="block text-sm font-medium text-slate-300 mb-1 mt-4">Batas Maksimal Karakter</label><input type="number" id="maxCharsPerBlock" value={maxCharsPerBlock} onChange={(e) => setMaxCharsPerBlock(Number(e.target.value))} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2"/></div>
                                )}

                                <div><div className="flex items-center gap-2 mb-1"><label htmlFor="recipe" className="block text-sm font-medium text-slate-300">Pilih Resep Viral</label>{isSortingOptions && <Spinner />}</div><select id="recipe" value={recipe} onChange={(e) => setRecipe(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">{sortedRecipes.map(key => ( <option key={key} value={key}>{key}</option> )) }<option value="Ketik Sendiri...">Ketik Sendiri...</option></select></div>
                                
                                {recipe === 'Insight dari Buku/Bacaan' && (
                                    <div className="mt-4 bg-slate-700/50 p-4 rounded-lg space-y-4">
                                        <div className="relative"><label htmlFor="bookDetails" className="block text-sm font-medium text-slate-300 mb-1">Judul Buku & Penulis</label><input type="text" id="bookDetails" value={bookDetails} onChange={(e) => setBookDetails(e.target.value)} placeholder="Contoh: 'Filosofi Teras' oleh Henry Manampiring" className="w-full bg-slate-900 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"/>{bookDetails && (<XIcon onClick={() => setBookDetails('')} className="absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                                        <div className="relative"><label htmlFor="bookInsight" className="block text-sm font-medium text-slate-300 mb-1">Tempel Insight/Materi dari Buku (Opsional)</label><textarea id="bookInsight" rows="5" value={bookInsight} onChange={(e) => setBookInsight(e.target.value)} placeholder="Salin kutipan atau poin penting dari buku di sini..." className="w-full bg-slate-900 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"/>{bookInsight && (<XIcon onClick={() => setBookInsight('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                                    </div>
                                )}

                                <div className="bg-slate-700/50 p-3 rounded-lg"><button onClick={handleGetRecommendations} disabled={isRecommendingTopics} className="w-full bg-amber-600 hover:bg-amber-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center transition-all duration-300 group">{isRecommendingTopics ? (<> <Spinner className="mr-3"/> Mencari Ide...</>) : (<><LightbulbIcon className="mr-2 h-5 w-5"/> Rekomendasikan Topik</>)}</button>{recommendationError && <p className="text-red-400 text-xs mt-2 text-center">{recommendationError}</p>}{recommendedTopics.length > 0 && (<div className="mt-3 space-y-2">{recommendedTopics.map((recTopic, index) => (<button key={index} onClick={() => setTopic(recTopic)} className="w-full text-left text-sm bg-slate-800 hover:bg-slate-900 p-2 rounded-md">{recTopic}</button>))}</div>)}</div>
                                 <h3 className="text-lg font-semibold pt-2 border-t border-slate-700 mt-4">Atur Struktur Konten</h3>
                                 <div><div className="flex items-center gap-2 mb-1"><label htmlFor="hookType" className="block text-sm font-medium text-slate-300">Jenis Hook (Pembuka)</label>{isSortingOptions && <Spinner />}</div><select id="hookType" value={hookType} onChange={(e) => setHookType(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">{sortedHooks.map(key => ( <option key={key} value={key}>{key}</option> )) }<option value="Ketik Sendiri...">Ketik Sendiri...</option></select></div>
                                 <div><div className="flex items-center gap-2 mb-1"><label htmlFor="bodyType" className="block text-sm font-medium text-slate-300">Jenis Isi Konten</label>{isSortingOptions && <Spinner />}</div><select id="bodyType" value={bodyType} onChange={(e) => setBodyType(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">{sortedBodies.map(key => ( <option key={key} value={key}>{key}</option> )) }<option value="Ketik Sendiri...">Ketik Sendiri...</option></select></div>
                                 <div><div className="flex items-center gap-2 mb-1"><label htmlFor="ctaType" className="block text-sm font-medium text-slate-300">Jenis CTA (Penutup)</label>{isSortingOptions && <Spinner />}</div><select id="ctaType" value={ctaType} onChange={(e) => setCtaType(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">{sortedCtas.map(key => ( <option key={key} value={key}>{key}</option> )) }<option value="Ketik Sendiri...">Ketik Sendiri...</option></select></div>
                                 <h3 className="text-lg font-semibold pt-2 border-t border-slate-700 mt-4">Tambahkan 'Bumbu' Cerita (Opsional)</h3>
                                 <div className="relative"><label htmlFor="povPenghulu" className="block text-sm font-medium text-slate-300 mb-1">Poin dari Pengalaman Lapangan</label><textarea id="povPenghulu" rows="2" value={povPenghulu} onChange={(e) => setPovPenghulu(e.target.value)} placeholder="Contoh: Kemarin ada klien yang salah paham..." className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"></textarea>{povPenghulu && (<XIcon onClick={() => setPovPenghulu('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                                 <div className="relative"><label htmlFor="povSyariah" className="block text-sm font-medium text-slate-300 mb-1">Poin dari Sudut Pandang Spesifik</label><textarea id="povSyariah" rows="2" value={povSyariah} onChange={(e) => setPovSyariah(e.target.value)} placeholder="Contoh: Menurut riset X, 70% orang..." className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"></textarea>{povSyariah && (<XIcon onClick={() => setPovSyariah('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                                 <div className="relative"><label htmlFor="povPribadi" className="block text-sm font-medium text-slate-300 mb-1">Poin dari Kehidupan Pribadi</label><textarea id="povPribadi" rows="2" value={povPribadi} onChange={(e) => setPovPribadi(e.target.value)} placeholder="Contoh: Pengalamanku sendiri waktu mencoba..." className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"></textarea>{povPribadi && (<XIcon onClick={() => setPovPribadi('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                                </>
                            )}
                            
                            <div><div className="flex items-center gap-2 mb-1"><label htmlFor="style" className="block text-sm font-medium text-slate-300">Gaya Bahasa</label>{isFetchingStyles && <Spinner />}</div><select id="style" value={style} onChange={(e) => setStyle(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none" disabled={isFetchingStyles}>{languageStyles.map(s => ( <option key={s} value={s}>{s}</option> )) }<option value="Ketik Sendiri...">Ketik Sendiri...</option></select></div>
                            <button onClick={handleGenerate} disabled={isLoading || !topic || !niche || !targetAudience} className="w-full mt-6 bg-cyan-600 hover:bg-cyan-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center transition-all duration-300 group">{isLoading ? (<><svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Membuat...</>) : (<><SparklesIcon className="mr-2 h-5 w-5 group-hover:scale-110" />Generate Konten!</>)}</button>
                        </div>
                    </div>

                    {/* Kolom Output */}
                    <div className="bg-slate-800 p-6 rounded-2xl shadow-lg flex flex-col">
                        <div className="flex justify-between items-center mb-4 border-b-2 border-cyan-500 pb-2 flex-shrink-0">
                            <h2 className="text-2xl font-semibold">3. Hasil Draf Anda</h2>
                            {(generatedContent.length > 0 || generatedTiktokScript) && !isLoading && (<button onClick={handleSaveDraft} className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-lg flex items-center transition-colors duration-200 text-sm"><SaveIcon className="h-4 w-4 mr-2" />Simpan</button>)}
                        </div>
                         {saveSuccess && <div className="mb-4 bg-green-900/50 text-green-300 p-3 rounded-lg text-center text-sm">Draf berhasil disimpan!</div>}
                        <div className="space-y-4 overflow-y-auto pr-2 flex-grow min-h-[300px]">
                            {isLoading && <p className="text-center text-slate-400 pt-16">AI sedang meracik konten terbaik untuk {platform}...</p>}
                            {error && <div className="bg-red-900/50 text-red-300 p-4 rounded-lg text-sm">{error}</div>}
                            {!isLoading && !error && generatedContent.length === 0 && !generatedTiktokScript && (<div className="text-center text-slate-500 pt-16 h-full flex flex-col justify-center items-center"><p className="font-semibold">Draf konten akan muncul di sini.</p></div>)}
                            
                            {generatedContent.map((thread, index) => (
                                <div key={index} className="bg-slate-700/50 p-4 rounded-lg relative group transition-all hover:bg-slate-700">
                                    <p className="whitespace-pre-wrap text-slate-200">{formatForReadability(thread)}</p>
                                    <span className="absolute bottom-1 right-2 text-xs text-slate-500 opacity-0 group-hover:opacity-100">{thread.length} Karakter</span>
                                    <button onClick={() => handleCopy(thread, 'content', index)} className="absolute top-2 right-2 p-1.5 bg-slate-600 rounded-md opacity-0 group-hover:opacity-100 hover:bg-slate-500">{copySuccess === `content-${index}` ? <CheckIcon className="text-green-400 h-4 w-4"/> : <ClipboardIcon className="text-slate-300 h-4 w-4"/>}</button>
                                </div>
                            ))}

                            {generatedTiktokScript && (
                                <div className="space-y-3 text-sm">
                                    <div><strong className="text-cyan-400 block">Visual Hook (3 detik pertama):</strong><p className="bg-slate-700/50 p-2 rounded mt-1">{generatedTiktokScript.visual_hook}</p></div>
                                    <div><strong className="text-cyan-400 block">Teks di Layar:</strong><p className="bg-slate-700/50 p-2 rounded mt-1">{generatedTiktokScript.on_screen_text}</p></div>
                                    <div><strong className="text-cyan-400 block">Narasi / Voiceover Script:</strong><p className="bg-slate-700/50 p-2 rounded mt-1 whitespace-pre-wrap">{generatedTiktokScript.voiceover_script}</p></div>
                                    <div><strong className="text-cyan-400 block">CTA (Audio/Visual):</strong><p className="bg-slate-700/50 p-2 rounded mt-1">{generatedTiktokScript.cta}</p></div>
                                    <div><strong className="text-cyan-400 block">Saran Sound/Musik:</strong><p className="bg-slate-700/50 p-2 rounded mt-1">{generatedTiktokScript.sound_suggestion}</p></div>
                                </div>
                            )}
                        </div>
                        
                        {(generatedContent.length > 0 || generatedTiktokScript) && !isLoading && (
                            <div className="mt-6 pt-4 border-t-2 border-slate-700">
                                <h3 className="text-lg font-semibold mb-2">Ubah Format ke Platform Lain</h3>
                                <div className="flex gap-2">
                                    <select value={conversionTarget} onChange={e => setConversionTarget(e.target.value)} className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">
                                        {Object.keys(platformConfig).filter(p => p !== platform).map(p => <option key={p} value={p}>{p}</option>)}
                                    </select>
                                    <button onClick={handleConversion} disabled={isConverting} className="bg-purple-600 hover:bg-purple-700 disabled:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center shrink-0">
                                        {isConverting ? <Spinner /> : <RefreshCwIcon className="h-5 w-5"/>}
                                        <span className="ml-2">Ubah</span>
                                    </button>
                                </div>
                                {convertedContent && (
                                    <div className="mt-3 bg-slate-700/50 p-4 rounded-lg relative group">
                                         <p className="whitespace-pre-wrap text-slate-200">{convertedContent}</p>
                                         <button onClick={() => handleCopy(convertedContent, 'converted')} className="absolute top-2 right-2 p-1.5 bg-slate-600 rounded-md opacity-0 group-hover:opacity-100 hover:bg-slate-500">{copyConvertedSuccess ? <CheckIcon className="text-green-400 h-4 w-4"/> : <ClipboardIcon className="text-slate-300 h-4 w-4"/>}</button>
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                     {/* Kolom Fitur Tambahan */}
                    <div className="md:col-span-2 bg-slate-800 p-6 rounded-2xl shadow-lg">
                        <h2 className="text-2xl font-semibold mb-4 border-b-2 border-cyan-500 pb-2">4. Fitur Tambahan</h2>
                        <div className="space-y-4">
                            <h3 className="text-lg font-semibold">Balas Komentar Audiens</h3>
                            <div className="relative"><label htmlFor="commentInput" className="block text-sm font-medium text-slate-300 mb-1">Komentar yang ingin dibalas</label><textarea id="commentInput" rows="3" value={commentInput} onChange={(e) => setCommentInput(e.target.value)} placeholder="Contoh: Kak, kalau untuk pemula..." className="w-full bg-slate-700 border-slate-600 rounded-lg p-2 pr-8 focus:ring-2 focus:ring-cyan-500 focus:outline-none"></textarea>{commentInput && (<XIcon onClick={() => setCommentInput('')} className="absolute right-2 top-2 h-5 w-5 text-slate-400 hover:text-white cursor-pointer" />)}</div>
                            <button onClick={async () => { setIsReplying(true); setReplyError(null); try { const reply = await callGeminiAPI(`Anda adalah content creator di niche "${niche}". Balas komentar ini: "${commentInput}" dengan gaya '${replyStyle}'`); setGeneratedReply(reply); } catch (e) { setReplyError('Gagal membalas.'); } finally { setIsReplying(false); } }} disabled={isReplying || !commentInput.trim()} className="w-full bg-purple-600 hover:bg-purple-700 disabled:bg-slate-600 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center">{isReplying ? <Spinner/> : <MessageCircleIcon className="mr-2 h-5 w-5" />}Buat Balasan</button>
                            {replyError && <p className="text-red-400 text-xs mt-2">{replyError}</p>}
                            {generatedReply && <div className="bg-slate-700/50 p-4 rounded-lg relative group"><p className="whitespace-pre-wrap text-slate-200">{generatedReply}</p><button onClick={() => handleCopy(generatedReply, 'reply')} className="absolute top-2 right-2 p-1.5 bg-slate-600 rounded-md opacity-0 group-hover:opacity-100 hover:bg-slate-500">{copyReplySuccess === generatedReply ? <CheckIcon className="text-green-400 h-4 w-4"/> : <ClipboardIcon className="text-slate-300 h-4 w-4"/>}</button></div>}
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
};

export default App;