import React, { useState, useEffect, useRef } from 'react';
import { 
  ScanFace, 
  Upload, 
  X, 
  AlertCircle, 
  Wand2, 
  Download, 
  Grid3x3, 
  CheckCircle2, 
  History, 
  ArrowRight, 
  Trash2, 
  Recycle,
  Image as ImageIcon,
  ChevronDown,
  ChevronUp,
  Zap,
  MessageSquarePlus,
  Camera,
  Loader2,
  Sparkles,
  Palette,
  Eye,
  Scissors,
  UserSquare2,
  Clock
} from 'lucide-react';

// --- SOUND ASSETS ---
const SOUNDS = {
    CLICK: 'https://visual-gimmicks.lima-city.de/support/miguelangelo-assets/prompt-engine/working.mp3',
    LOADING: 'https://visual-gimmicks.lima-city.de/support/miguelangelo-assets/prompt-engine/typing.mp3',
    GENERATING: 'https://visual-gimmicks.lima-city.de/support/miguelangelo-assets/prompt-engine/please-wait.mp3',
    ROBOT: 'https://visual-gimmicks.lima-city.de/support/miguelangelo-assets/prompt-engine/robot.mp3'
};

// --- DATA: The 49 Expressions ---
const EMOTIONS = [
    // "Echte Freude" moved to the end
    { id: 2, label: "Höfliches Lächeln", desc: "Nur Mundwinkel leicht nach oben, Augenpartie bleibt unbeteiligt und starr." },
    { id: 3, label: "Wut", desc: "Brauen tief und zusammengezogen (Zornesfalte), Augen starr, Lippen schmal gepresst." },
    { id: 4, label: "Angst", desc: "Brauen hochgezogen und zusammen, Weißes im Auge sichtbar, Mund leicht geöffnet." },
    { id: 5, label: "Ekel", desc: "Nase gerümpft, Oberlippe hochgezogen, Augenbrauen leicht gesenkt, verengte Augen." },
    { id: 6, label: "Überraschung", desc: "Brauen hoch und gewölbt, Stirnfalten, Augen weit auf, Kiefer locker nach unten." },
    { id: 7, label: "Trauer", desc: "Innere Ecken der Brauen hochgezogen, hängende Lider, Mundwinkel nach unten." },
    { id: 8, label: "Verachtung", desc: "Einseitig hochgezogener Mundwinkel, leicht zurückgelegter Kopf, Blick nach unten." },
    { id: 9, label: "Skepsis", desc: "Eine Augenbraue höher als die andere, zusammengekniffene Augen, Lippen gepresst." },
    { id: 10, label: "Konzentration", desc: "Brauen leicht gesenkt und zusammen, fokussierter Blick, fest geschlossener Mund." },
    { id: 11, label: "Verwirrung", desc: "Brauen zusammengezogen, Stirn runzelig, Nase gekräuselt, Kopf leicht geneigt." },
    { id: 12, label: "Stolz", desc: "Leichtes Lächeln, aufrechte Kopfhaltung, leicht geweitete Brust, direkter Blick." },
    { id: 13, label: "Scham", desc: "Blick nach unten/zur Seite, Kopf gesenkt, angespannte Lippen, evtl. Erröten." },
    { id: 14, label: "Schuld", desc: "Wie Trauer, aber mit ausweichendem Blick und zusammengekniffenen Lippen." },
    { id: 15, label: "Langeweile", desc: "Schläfrige Augenlider, entspannter Mund, Kopf auf Hand gestützt." },
    { id: 16, label: "Interesse", desc: "Augen weit offen und fokussiert, Brauen leicht gehoben, Kopf nach vorne." },
    { id: 17, label: "Erschöpfung", desc: "Hängende Augenlider, schlaffe Gesichtszüge, leicht geöffneter kraftloser Mund." },
    { id: 18, label: "Schmerz", desc: "Augen fest zusammengekniffen, Brauen tief, Nase gerümpft, Mund verzerrt." },
    { id: 19, label: "Triumph", desc: "Breit grinsender Mund, Augen zusammengekniffen, Kopf nach hinten geworfen." },
    { id: 20, label: "Arroganz", desc: "Lider halb geschlossen, Nase hochmütig gehoben, Mundwinkel neutral oder spöttisch." },
    { id: 21, label: "Verlegenheit", desc: "Verlegenes Grinsen, gesenkter Blick, beißt auf Unterlippe." },
    { id: 22, label: "Enttäuschung", desc: "Brauen wie bei Trauer, aber leerer Blick, absackende Schultern/Haltung." },
    { id: 23, label: "Besorgnis", desc: "Brauen zusammen, Stirnfalten mittig, unruhiger Blick, Lippen gepresst." },
    { id: 24, label: "Amüsement", desc: "Mund weit offen (Lachen), Augen zu Schlitzen, Kopf leicht nach hinten." },
    { id: 25, label: "Misstrauen", desc: "Augen verengt, seitlicher Blick ohne Kopf zu drehen, Lippen fest." },
    { id: 26, label: "Ehrfurcht", desc: "Mund leicht geöffnet, Augen weit/starr, Brauen hoch, Regungslosigkeit." },
    { id: 27, label: "Zufriedenheit", desc: "Weiche Gesichtszüge, entspannte Brauen, leichtes geschlossenes Lächeln." },
    { id: 28, label: "Eifersucht", desc: "Mischung aus Wut (Brauen tief) und Trauer (Mund), starres Beobachten." },
    { id: 29, label: "Frustration", desc: "Zusammengebissene Zähne, tiefe Brauen, tiefes Ausatmen sichtbar." },
    // "Hass" removed
    { id: 31, label: "Einsamkeit", desc: "Blick ins Leere, traurige Mundpartie, Gesicht schlaff und ausdruckslos." },
    { id: 32, label: "Verlangen", desc: "Geweitete Pupillen, leicht geöffneter Mund, intensiver Blickkontakt." },
    { id: 33, label: "Entsetzen", desc: "Wie Angst, aber Augen extrem weit aufgerissen, Mund schreiend offen." },
    { id: 34, label: "Gelassenheit", desc: "Keine Stirnfalten, Augen weich, Mund entspannt ohne Spannung." },
    { id: 35, label: "Nervosität", desc: "Schnelles Blinzeln, beißende Lippen, unruhige Augen." },
    { id: 36, label: "Gleichgültigkeit", desc: "Halboffene Augen, keine Regung im Mund, maskenhaft." },
    { id: 37, label: "Zynismus", desc: "Einseitiges kurzes Hochziehen der Oberlippe, kalter Blick." },
    { id: 38, label: "Mitleid", desc: "Hochgezogene innere Augenbrauen, weicher Blick, Kopf zur Seite." },
    { id: 39, label: "Begeisterung", desc: "Funkelnde Augen, hohe Energie in Wangen, breites Lächeln mit Zähnen." },
    { id: 40, label: "Eingeschüchtert", desc: "Blick nach oben, gesenktes Kinn, zusammengezogene Schultern." },
    { id: 41, label: "Hoffnung", desc: "Blick nach oben, leichtes Lächeln, leuchtende Augen." },
    { id: 42, label: "Ungeduld", desc: "Zusammengepresste Lippen, Kiefermahlen, wandernder Blick." },
    { id: 43, label: "Reue", desc: "Blick zu Boden, zusammengezogene Brauen, Mund klein und fest." },
    { id: 44, label: "Erleichterung", desc: "Augen kurz zu, Muskeln erschlaffen, Ausatmen." },
    { id: 45, label: "Bitternis", desc: "Mundwinkel extrem nach unten, Augen hart und unversöhnlich." },
    { id: 46, label: "Spott", desc: "Augenbrauen hoch, schiefes Grinsen, leichtes Kopfschütteln." },
    { id: 47, label: "Faszination", desc: "Fixierte Augen, kein Blinzeln, Mund leicht offen, Brauen gehoben." },
    { id: 48, label: "Paranoia", desc: "Extrem weite, wandernde Augen, angespannte Nackenmuskeln." },
    { id: 49, label: "Melancholie", desc: "Verträumter trauriger Blick, keine Spannung, Kopf leicht gesenkt." },
    { id: 50, label: "Entschlossenheit", desc: "Brauen tief/fest, starrer Blick, Lippen schmal, Kinn nach vorne." },
    // "Echte Freude" moved here
    { id: 1, label: "Echte Freude", desc: "Duchenne-Lächeln: Mundwinkel nach oben, Wangen angehoben, Krähenfüße an den Augen." }
];

export default function App() {
    const [inputImage, setInputImage] = useState(null);
    const [inputFileName, setInputFileName] = useState("image"); 
    const [outputImage, setOutputImage] = useState(null);
    const [loading, setLoading] = useState(false);
    const [loadingType, setLoadingType] = useState(null); 
    const [selectedEmotionIds, setSelectedEmotionIds] = useState([]);
    const [customPrompt, setCustomPrompt] = useState("");
    const [history, setHistory] = useState([]);
    const [error, setError] = useState(null);
    const [showHistory, setShowHistory] = useState(false);
    const [currentOutputBoost, setCurrentOutputBoost] = useState(false);
    const [sessionCounter, setSessionCounter] = useState(0); 
    const [currentResultData, setCurrentResultData] = useState(null); 

    // New State for Mood Match & Modal
    const [moodMatchImage, setMoodMatchImage] = useState(null);
    const [isMoodMatchSelected, setIsMoodMatchSelected] = useState(false);
    const [analyzedMoodDescription, setAnalyzedMoodDescription] = useState(null);
    const [isAnalyzingMood, setIsAnalyzingMood] = useState(false);
    const [isVibeModalOpen, setIsVibeModalOpen] = useState(false);
    const [vibeMatchInstruction, setVibeMatchInstruction] = useState("Gesichtsausdruck übernehmen");

    // Timer State
    const [timeElapsed, setTimeElapsed] = useState(0); 
    const TOTAL_TIME = 60 * 60; 

    const typingAudioRef = useRef(null);

    // Initialize Audio Ref (empty initially)
    useEffect(() => {
        typingAudioRef.current = new Audio();
        typingAudioRef.current.loop = true;
        
        return () => {
            if (typingAudioRef.current) {
                typingAudioRef.current.pause();
                typingAudioRef.current = null;
            }
        };
    }, []);

    // Handle Background Sounds (Typing vs Generating)
    useEffect(() => {
        const audio = typingAudioRef.current;
        if (!audio) return;

        // Logic: Generating (Image) > Analyzing (Text) > Stop
        if (loading) {
            if (!audio.src.includes('please-wait.mp3')) {
                audio.src = SOUNDS.GENERATING;
                audio.currentTime = 0;
                audio.play().catch(e => console.error("Gen sound failed", e));
            } else if (audio.paused) {
                audio.play().catch(() => {});
            }
        } else if (isAnalyzingMood) {
            if (!audio.src.includes('typing.mp3')) {
                audio.src = SOUNDS.LOADING;
                audio.currentTime = 0;
                audio.play().catch(e => console.error("Typing sound failed", e));
            } else if (audio.paused) {
                audio.play().catch(() => {});
            }
        } else {
            audio.pause();
            audio.currentTime = 0;
        }
    }, [loading, isAnalyzingMood]);

    // Timer Logic
    useEffect(() => {
        const timerInterval = setInterval(() => {
            setTimeElapsed(prev => {
                if (prev >= TOTAL_TIME) {
                    const audio = new Audio(SOUNDS.ROBOT);
                    audio.play().catch(e => console.error("Robot sound failed", e));
                    return 0; 
                }
                return prev + 1;
            });
        }, 1000);
        return () => clearInterval(timerInterval);
    }, []);

    const playClickSound = () => {
        try { const audio = new Audio(SOUNDS.CLICK); audio.volume = 0.5; audio.play().catch(e => {}); } catch (e) {}
    };

    // History Logic
    useEffect(() => { try { const saved = localStorage.getItem('vibe_history_v1'); if (saved) setHistory(JSON.parse(saved)); } catch (e) {} }, []);
    useEffect(() => { try { const historyToSave = history.slice(0, 10); localStorage.setItem('vibe_history_v1', JSON.stringify(historyToSave)); } catch (e) {} }, [history]);

    // Handle Uploads
    const handleFileUpload = (e) => {
        const file = e.target.files[0];
        if (file) {
            playClickSound();
            const name = file.name.split('.').slice(0, -1).join('.') || "image";
            setInputFileName(name);
            const reader = new FileReader();
            reader.onload = (event) => setInputImage(event.target.result);
            reader.readAsDataURL(file);
        }
    };

    const handleDrop = (e) => {
        e.preventDefault(); e.stopPropagation();
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            playClickSound();
            const name = file.name.split('.').slice(0, -1).join('.') || "dropped_image";
            setInputFileName(name);
            const reader = new FileReader();
            reader.onload = (event) => setInputImage(event.target.result);
            reader.readAsDataURL(file);
        }
    };

    // --- MOOD MATCH MODAL LOGIC ---

    const openVibeModal = () => { playClickSound(); setIsVibeModalOpen(true); };
    const closeVibeModal = () => { playClickSound(); setIsVibeModalOpen(false); };

    const handleModalDrop = (e) => {
        e.preventDefault(); e.stopPropagation();
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            playClickSound();
            const reader = new FileReader();
            reader.onload = (event) => setMoodMatchImage(event.target.result);
            reader.readAsDataURL(file);
        }
    };

    const handleModalUpload = (e) => {
        const file = e.target.files[0];
        if (file) {
            playClickSound();
            const reader = new FileReader();
            reader.onload = (event) => setMoodMatchImage(event.target.result);
            reader.readAsDataURL(file);
        }
    };

    useEffect(() => {
        const handlePaste = (e) => {
            const items = e.clipboardData.items;
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    const blob = items[i].getAsFile();
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        playClickSound();
                        if (isVibeModalOpen) {
                            setMoodMatchImage(event.target.result);
                        } else {
                            setInputImage(event.target.result);
                            setInputFileName("pasted_image");
                        }
                    };
                    reader.readAsDataURL(blob);
                }
            }
        };
        window.addEventListener("paste", handlePaste);
        return () => window.removeEventListener("paste", handlePaste);
    }, [isVibeModalOpen]); 

    // DIRECT ACTION HANDLER FROM MODAL
    const handleModalAction = async () => {
        if (!moodMatchImage) return; 
        if (!inputImage) {
            alert("Bitte zuerst ein Hauptbild im Hauptfenster hochladen!"); 
            return;
        }

        playClickSound();
        setIsVibeModalOpen(false); 
        
        try {
            // PHASE 1: TEXT ANALYSIS
            const analysis = await analyzeVibeTarget(moodMatchImage, vibeMatchInstruction, false); 
            
            // PHASE 2: GENERATION
            await generateVibe(false, analysis);

        } catch (e) {
            console.error("Combined Action Failed", e);
            setError("Vibe-Analyse oder Generierung fehlgeschlagen.");
            setLoading(false);
        }
    };

    const analyzeVibeTarget = async (base64Image, instruction, returnOnly = false) => {
        if (!returnOnly) {
            setIsAnalyzingMood(true);
            setLoading(false);
        }
        setAnalyzedMoodDescription(null);
        setError(null);

        const apiKey = "";
        const prompt = `Analysiere dieses Bild. Der User möchte folgendes Feature auf ein anderes Bild übertragen: "${instruction}". Beschreibe dieses Feature visuell präzise und detailliert, damit eine KI es reproduzieren kann. Konzentriere dich NUR auf dieses Feature.`;

        try {
            const base64Data = base64Image.split(',')[1];
            const mimeType = base64Image.substring(base64Image.indexOf(':') + 1, base64Image.indexOf(';'));

            const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    contents: [{
                        parts: [
                            { text: prompt },
                            { inlineData: { mimeType: mimeType, data: base64Data } }
                        ]
                    }]
                })
            });

            if (!response.ok) throw new Error("Analyse fehlgeschlagen");

            const data = await response.json();
            const analysisText = data.candidates?.[0]?.content?.parts?.[0]?.text;
            
            if (analysisText) {
                if (!returnOnly) {
                    setAnalyzedMoodDescription(analysisText);
                    setIsMoodMatchSelected(true);
                    setSelectedEmotionIds([]); 
                }
                return analysisText;
            } else {
                throw new Error("Keine Beschreibung generiert.");
            }

        } catch (err) {
            console.error(err);
            if (!returnOnly) {
                setError("Vibe-Analyse fehlgeschlagen.");
                setIsMoodMatchSelected(false);
            }
            throw err;
        } finally {
            if (!returnOnly) setIsAnalyzingMood(false);
        }
    };

    const toggleEmotion = (id) => {
        playClickSound();
        setIsMoodMatchSelected(false); 
        setSelectedEmotionIds(prev => {
            if (prev.includes(id)) {
                return prev.filter(eId => eId !== id);
            } else {
                return [...prev, id];
            }
        });
    };

    const createFilename = (baseName, moodStr, count) => {
        const date = new Date().toISOString().split('T')[0];
        const safeBase = baseName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
        const safeMood = moodStr.replace(/[^a-z0-9]/gi, '-').toLowerCase().substring(0, 50);
        return `${safeBase}-${safeMood}-${date}-${count}.png`;
    };

    const generateVibe = async (boost = false, analysisOverride = null) => {
        if (!inputImage && !analysisOverride) {
             if (!inputImage || (!isMoodMatchSelected && selectedEmotionIds.length === 0 && !customPrompt.trim())) return;
        }
        
        setLoading(true);
        setLoadingType(boost ? 'boost' : 'normal');
        setError(null);
        setOutputImage(null);
        setCurrentResultData(null);

        const apiKey = "";
        
        // Construct Prompt
        let mainInstruction = "Bearbeite das Input-Bild.";
        let targetDescription = "";
        let labelDisplay = "";
        let filenameMood = "";

        const effectiveAnalysis = analysisOverride || (isMoodMatchSelected ? analyzedMoodDescription : null);

        if (effectiveAnalysis) {
            mainInstruction = `Übertrage folgendes Feature (${vibeMatchInstruction}) auf die Person im Bild.`;
            targetDescription = `Visuelle Referenz-Beschreibung des Features: ${effectiveAnalysis}. `;
            labelDisplay = `Vibe: ${vibeMatchInstruction}`;
            filenameMood = `vibe-${vibeMatchInstruction}`;
        } else if (selectedEmotionIds.length > 0) {
            mainInstruction = "Ändere den Gesichtsausdruck der Person in diesem Bild.";
            const selectedEmotions = EMOTIONS.filter(e => selectedEmotionIds.includes(e.id));
            const emotionLabels = selectedEmotions.map(e => e.label).join(" + ");
            const emotionDescs = selectedEmotions.map(e => e.desc).join(" ");
            
            targetDescription = `Ziel-Emotionen: ${emotionLabels}. Mimik-Details: ${emotionDescs}. `;
            labelDisplay = emotionLabels;
            filenameMood = emotionLabels;
        }

        if (customPrompt.trim()) {
            targetDescription += ` ZUSÄTZLICHE USER-ANWEISUNG (Priorität): ${customPrompt}. `;
            labelDisplay += labelDisplay ? " + Custom" : "Custom Prompt";
            filenameMood += "-custom";
        }

        let boostInstruction = "";
        if (boost) {
            boostInstruction = "ANWEISUNG: Übertreibe den Effekt maximal! Mache den Ausdruck oder das Feature fast karikaturhaft stark (150% Intensität).";
            targetDescription += " (EXTREME INTENSITÄT)";
            labelDisplay += " ⚡";
            filenameMood += "-boost";
        }

        const prompt = `${mainInstruction} 
        ${targetDescription}
        ${boostInstruction}
        WICHTIG: Erhalte den exakten künstlerischen Stil des Input-Bildes (z.B. Ölgemälde, Skizze, Foto, Beleuchtung, Textur, Pinselstriche) und den Hintergrund zu 100% bei. 
        Ändere NUR das beschriebene Feature. Die Identität der Person (außer bei Face Swap) muss gleich bleiben. Das Bild darf nicht beschnitten werden.`;

        try {
            const base64Data = inputImage.split(',')[1];
            const mimeType = inputImage.substring(inputImage.indexOf(':') + 1, inputImage.indexOf(';'));

            const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    contents: [{
                        parts: [
                            { text: prompt },
                            { inlineData: { mimeType: mimeType, data: base64Data } }
                        ]
                    }],
                    generationConfig: { responseModalities: ["IMAGE"] }
                })
            });

            if (!response.ok) throw new Error("API Fehler");

            const data = await response.json();
            const generatedBase64 = data.candidates?.[0]?.content?.parts?.find(p => p.inlineData)?.inlineData?.data;

            if (generatedBase64) {
                const finalImage = `data:image/png;base64,${generatedBase64}`;
                const newCount = sessionCounter + 1;
                setSessionCounter(newCount);
                setOutputImage(finalImage);
                setCurrentOutputBoost(boost);
                
                const downloadFilename = createFilename(inputFileName, filenameMood, newCount);

                const newEntry = {
                    id: Date.now(),
                    input: inputImage,
                    output: finalImage,
                    emotion: { label: labelDisplay },
                    timestamp: new Date().toLocaleTimeString(),
                    boost: boost,
                    filename: downloadFilename,
                    inputName: inputFileName
                };
                
                setCurrentResultData(newEntry);
                setHistory(prev => [newEntry, ...prev]);
                setShowHistory(true); 
            } else {
                throw new Error("Kein Bild generiert.");
            }

        } catch (err) {
            console.error(err);
            setError("Fehler bei der Generierung.");
        } finally {
            setLoading(false);
            setLoadingType(null);
        }
    };

    const useAsInput = (imgSrc) => { playClickSound(); setInputImage(imgSrc); setOutputImage(null); setCurrentResultData(null); setInputFileName("remixed_image"); };
    const deleteHistoryItem = (id) => { playClickSound(); setHistory(prev => prev.filter(item => item.id !== id)); };
    const downloadImage = (dataUrl, filename) => { playClickSound(); const link = document.createElement('a'); link.href = dataUrl; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); };
    const toggleHistory = () => { playClickSound(); setShowHistory(!showHistory); };
    const clearInput = () => { playClickSound(); setInputImage(null); setOutputImage(null); setCurrentResultData(null); }

    // Helper functions re-added to scope
    const getActiveLabels = () => {
        if (isMoodMatchSelected) return `Match: ${vibeMatchInstruction} ${analyzedMoodDescription ? '(Ready)' : '(Analysiere...)'}`;
        let textParts = [];
        if (selectedEmotionIds.length > 0) {
            const labels = EMOTIONS.filter(e => selectedEmotionIds.includes(e.id)).map(e => e.label);
            if (labels.length <= 2) textParts.push(labels.join(" + "));
            else textParts.push(`${labels[0]} + ${labels[1]}...`);
        }
        if (customPrompt.trim()) textParts.push(`"${customPrompt.substring(0, 15)}..."`);
        if (textParts.length === 0) return 'Warte auf Input...';
        return textParts.join(" + ");
    };

    const getActiveLabelsFull = () => {
         if (isMoodMatchSelected) return `Vibe Match (${vibeMatchInstruction}): ` + (analyzedMoodDescription || "Analysiere...");
         let fullText = "";
         if (selectedEmotionIds.length > 0) fullText += EMOTIONS.filter(e => selectedEmotionIds.includes(e.id)).map(e => e.label).join(" + ");
         if (customPrompt.trim()) fullText += (fullText ? " + " : "") + `Custom: ${customPrompt}`;
         return fullText;
    };

    // Calculate Timer
    const progressPercentage = Math.min((timeElapsed / TOTAL_TIME) * 100, 100);
    const getTimerColor = () => {
        if (progressPercentage < 25) return 'from-emerald-500 to-green-500';
        if (progressPercentage < 50) return 'from-yellow-400 to-yellow-600';
        if (progressPercentage < 75) return 'from-orange-500 to-orange-600';
        return 'from-red-500 to-red-700';
    };

    return (
        <div className="h-screen w-screen bg-[#0a0a12] text-slate-100 font-sans overflow-hidden flex flex-col selection:bg-fuchsia-500/30">
            <style>{`
                .glass-panel { background: rgba(20, 20, 30, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
                .glass-panel-active { background: rgba(20, 20, 30, 0.8); border: 1px solid rgba(0, 255, 255, 0.2); box-shadow: 0 0 15px rgba(0, 255, 255, 0.1); }
                .glass-input { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: white; }
                .glass-input:focus { background: rgba(0, 0, 0, 0.6); border-color: rgba(6, 182, 212, 0.5); outline: none; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }
                .loader { border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid #06b6d4; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; }
                .loader-boost { border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid #facc15; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; }
                @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
                .no-scrollbar::-webkit-scrollbar { display: none; }
                .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
                .boost-glow { animation: pulse-gold 1.5s infinite; }
                @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } }
                .modal-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 100; }
            `}</style>

            {/* HEADER */}
            <div className="h-16 shrink-0 bg-[#050508] border-b border-white/5 flex items-center px-4 justify-between relative overflow-hidden">
                <div className={`absolute bottom-0 left-0 h-1 bg-gradient-to-r transition-all duration-1000 ease-linear ${getTimerColor()}`} style={{ width: `${progressPercentage}%` }}></div>
                <div className="flex items-center gap-3 z-10">
                    <div className="w-8 h-8 rounded bg-gradient-to-br from-fuchsia-600 to-purple-800 flex items-center justify-center shadow-lg shadow-purple-500/20"><Sparkles className="w-5 h-5 text-white" /></div>
                    <h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">AI George's Face-Tune</h1>
                </div>
                <div className="flex items-center gap-4 z-10">
                    <div className="flex items-center gap-2 px-3 py-1 bg-white/5 rounded-full border border-white/5">
                        <Clock className="w-4 h-4 text-slate-400" /> <span className="font-mono text-sm text-slate-300">{Math.floor(timeElapsed / 60)}m</span>
                    </div>
                </div>
            </div>

            <div className="flex-1 flex flex-col p-2 overflow-y-auto overflow-x-hidden no-scrollbar gap-2">
                
                {/* IMAGES */}
                <div className="flex-1 min-h-[400px] grid grid-cols-2 gap-2">
                    <div className={`w-full glass-panel rounded-xl p-1 relative overflow-hidden group transition-all flex flex-col ${!inputImage ? 'border-dashed border-2 border-slate-700 hover:border-cyan-400 hover:bg-slate-800/40' : 'border-cyan-900/30'}`} onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
                        {!inputImage ? (
                            <label className="flex-grow flex flex-col items-center justify-center cursor-pointer transition-colors rounded-lg">
                                <div className="w-24 h-24 rounded-full bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform shadow-[0_0_20px_rgba(6,182,212,0.1)] group-hover:shadow-[0_0_30px_rgba(6,182,212,0.3)]"><Upload className="text-cyan-400 w-10 h-10" /></div>
                                <p className="text-2xl font-bold text-slate-200">Upload / Drag & Drop</p>
                                <p className="text-slate-500 mt-2 font-mono text-sm text-cyan-200/50">STRG+V Paste Supported</p>
                                <input type="file" onChange={handleFileUpload} accept="image/*" className="hidden" />
                            </label>
                        ) : (
                            <div className="relative w-full h-full bg-black/40 rounded-lg overflow-hidden border border-white/5">
                                <img src={inputImage} alt="Input" className="w-full h-full object-contain" />
                                <div className="absolute top-0 left-0 p-3 w-full flex justify-between items-start pointer-events-none">
                                    <span className="text-xs font-bold text-cyan-300 uppercase tracking-wider bg-black/60 px-3 py-1 rounded backdrop-blur-md pointer-events-auto border border-cyan-500/20 shadow-lg">Original</span>
                                    <button onClick={clearInput} className="p-2 bg-red-500/80 hover:bg-red-600 text-white rounded-full backdrop-blur-md transition-colors shadow-lg pointer-events-auto"><X className="w-5 h-5" /></button>
                                </div>
                            </div>
                        )}
                    </div>
                    <div className={`w-full glass-panel rounded-xl p-1 relative overflow-hidden flex flex-col ${outputImage ? 'glass-panel-active' : ''}`}>
                        {outputImage ? (
                            <div className="relative w-full h-full bg-black/40 rounded-lg overflow-hidden animate-in fade-in">
                                <img src={outputImage} alt="Output" className="w-full h-full object-contain" />
                                <div className="absolute top-0 right-0 p-3 pointer-events-none">
                                    <span className={`text-xs font-bold uppercase tracking-wider bg-black/60 px-3 py-1 rounded backdrop-blur-md border shadow-lg ${currentOutputBoost ? 'text-yellow-300 border-yellow-500/50 shadow-yellow-500/20' : 'text-fuchsia-300 border-fuchsia-500/20'}`}>{currentOutputBoost ? '⚡ MAX Vibe' : 'Remixed'}</span>
                                </div>
                            </div>
                        ) : (
                            <div className="w-full h-full flex flex-col items-center justify-center text-slate-600">
                                <div className="w-20 h-20 rounded-full bg-slate-800/50 flex items-center justify-center mb-4 border border-slate-700/50"><ImageIcon className="w-8 h-8 opacity-30" /></div>
                                <p className="text-lg font-medium opacity-40">Dein Vibe erscheint hier</p>
                            </div>
                        )}
                    </div>
                </div>

                {error && (<div className="px-4 py-3 bg-red-950/50 border border-red-500/40 rounded-xl text-red-200 text-sm flex items-center gap-2 animate-in fade-in shadow-[0_0_20px_rgba(239,68,68,0.2)]"><AlertCircle className="w-5 h-5 shrink-0 text-red-400" />{error}</div>)}

                {/* CONTROLS */}
                <div className="shrink-0 grid grid-cols-2 gap-2 h-20">
                    <div className="w-full h-full relative group">
                        <button onClick={() => generateVibe(false)} disabled={!inputImage || (!isMoodMatchSelected && selectedEmotionIds.length === 0 && !customPrompt.trim()) || loading || isAnalyzingMood} className={`w-full h-full rounded-xl font-bold text-2xl shadow-xl flex items-center pl-8 pr-24 justify-center gap-4 transition-all transform active:scale-[0.99] relative overflow-hidden ${(!inputImage || (!isMoodMatchSelected && selectedEmotionIds.length === 0 && !customPrompt.trim()) || isAnalyzingMood) ? 'bg-slate-900 text-slate-700 cursor-not-allowed border border-slate-800' : loading && loadingType === 'boost' ? 'bg-slate-800 text-yellow-500/50 cursor-wait border border-yellow-900/30' : loading ? 'bg-slate-800 text-cyan-300 cursor-wait border border-cyan-900' : 'bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white shadow-[0_0_30px_rgba(8,145,178,0.3)] border border-cyan-400/30'}`}>
                            {loading && loadingType === 'normal' ? (
                                <> <span className="loader"></span> <span className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-cyan-200 to-white">RENDERING...</span> </>
                            ) : isAnalyzingMood ? (
                                <> <span className="loader"></span> <span className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-emerald-200 to-white">ANALYZING VIBE...</span> </>
                            ) : loading && loadingType === 'boost' ? (
                                <span className="text-slate-600">...</span>
                            ) : (
                                <> <Wand2 className="w-7 h-7" /> ACTION </>
                            )}
                        </button>
                        <button onClick={(e) => { e.stopPropagation(); generateVibe(true); }} title="Direct Boost: High Intensity!" disabled={loading || isAnalyzingMood || !inputImage || (!isMoodMatchSelected && selectedEmotionIds.length === 0 && !customPrompt.trim())} className={`absolute right-4 top-1/2 -translate-y-1/2 w-14 h-12 rounded-xl flex items-center justify-center transition-all duration-300 z-20 border-l border-white/10 ${loading && loadingType === 'boost' ? 'bg-yellow-400 text-black shadow-[0_0_20px_rgba(250,204,21,0.5)] w-full right-0 rounded-xl' : 'bg-black/30 text-yellow-500 hover:bg-yellow-500 hover:text-black hover:shadow-[0_0_20px_rgba(250,204,21,0.6)]'} ${(!inputImage || (!isMoodMatchSelected && selectedEmotionIds.length === 0 && !customPrompt.trim()) || isAnalyzingMood) ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'}`}>
                            {loading && loadingType === 'boost' ? (<div className="flex items-center gap-3"> <span className="loader-boost border-black/20 border-t-black"></span> <span className="font-bold">BOOSTING...</span> </div>) : (<Zap className="w-7 h-7 fill-current" />)}
                        </button>
                    </div>
                    <div className="w-full h-full glass-panel rounded-xl flex items-center justify-between px-6 bg-slate-900/60 border-l-4 border-l-fuchsia-600">
                        {outputImage && currentResultData ? (
                            <>
                                <div className="flex flex-col justify-center overflow-hidden flex-1 mr-4">
                                    <span className="text-xs uppercase tracking-widest text-fuchsia-400 font-bold mb-1">Current Mix</span>
                                    <span className="text-2xl font-bold text-white leading-none truncate drop-shadow-[0_0_10px_rgba(232,121,249,0.5)] flex items-center gap-2" title={getActiveLabelsFull()}>{currentResultData.emotion.label}</span>
                                </div>
                                <button onClick={() => downloadImage(outputImage, currentResultData.filename)} className="flex items-center gap-3 px-8 py-3 bg-fuchsia-700 hover:bg-fuchsia-600 text-white rounded-lg transition-all border border-fuchsia-400/30 shadow-[0_0_20px_rgba(192,38,211,0.4)] hover:shadow-[0_0_30px_rgba(192,38,211,0.6)] shrink-0 ml-4"><Download className="w-6 h-6" /> <span className="font-bold text-lg">Save</span></button>
                            </>
                        ) : (
                            <div className="w-full text-center flex items-center justify-center gap-3 opacity-60"><span className="w-2 h-2 rounded-full bg-fuchsia-500 animate-pulse"></span><span className="text-lg text-slate-300 font-light truncate">Wähle Vibes, tippe Text & Action!</span><ArrowRight className="w-5 h-5 text-fuchsia-500 shrink-0" /></div>
                        )}
                    </div>
                </div>

                {/* MATRIX & MOOD MATCH */}
                <div className="shrink-0 glass-panel rounded-xl p-3 bg-slate-950/50 flex flex-col gap-2">
                    <div className="grid grid-cols-10 gap-2">
                        {/* 50TH SLOT: MOOD MATCH BUTTON (Opens Modal) - MOVED TO START */}
                        <button onClick={openVibeModal} className={`relative h-10 rounded-lg border text-center flex items-center justify-center transition-all duration-200 cursor-pointer overflow-hidden ${isMoodMatchSelected ? 'bg-gradient-to-br from-teal-500 to-emerald-700 border-emerald-400 shadow-[0_0_20px_rgba(16,185,129,0.5)] z-10 scale-105' : 'bg-slate-900/80 border-slate-800 hover:bg-slate-800 text-slate-400 hover:text-emerald-300 hover:border-emerald-500/30'}`}>
                            {moodMatchImage && isMoodMatchSelected ? (
                                <>
                                    <img src={moodMatchImage} alt="Mood" className="absolute inset-0 w-full h-full object-cover opacity-60 hover:opacity-100 transition-opacity" />
                                    <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                                        {isAnalyzingMood ? <Loader2 className="w-4 h-4 text-white animate-spin" /> : <span className="text-white font-bold text-[9px] uppercase shadow-black drop-shadow-md px-1">{vibeMatchInstruction.substring(0, 8)}...</span>}
                                    </div>
                                    <CheckCircle2 className="absolute top-0.5 right-0.5 w-2 h-2 text-emerald-200 z-10" />
                                </>
                            ) : (
                                <div className="flex flex-col items-center gap-0.5"><Camera className="w-3 h-3" /> <span className="text-[9px] uppercase font-bold">Vibe Match</span></div>
                            )}
                        </button>

                        {/* OTHER EMOTIONS */}
                        {EMOTIONS.map((emotion) => {
                            const isSelected = selectedEmotionIds.includes(emotion.id);
                            return (
                                <button key={emotion.id} onClick={() => toggleEmotion(emotion.id)} className={`relative h-10 rounded-lg border text-center flex items-center justify-center px-2 transition-all duration-200 ${isSelected ? 'bg-gradient-to-br from-fuchsia-600 to-purple-800 border-fuchsia-400 text-white shadow-[0_0_20px_rgba(217,70,239,0.5)] z-10 scale-105' : 'bg-slate-900/80 border-slate-800 hover:bg-slate-800 text-slate-400 hover:text-cyan-200 hover:border-cyan-500/30 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]'}`}>
                                    <span className={`text-[10px] md:text-xs leading-tight line-clamp-2 ${isSelected ? 'font-bold' : 'font-medium'}`}>{emotion.label}</span>
                                    {isSelected && <CheckCircle2 className="absolute top-0.5 right-0.5 w-2 h-2 text-fuchsia-200" />}
                                </button>
                            );
                        })}
                    </div>
                    
                    {/* CUSTOM INPUT */}
                    <div className="relative w-full mt-1">
                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"> <MessageSquarePlus className="w-5 h-5" /> </div>
                        <input type="text" value={customPrompt} onChange={(e) => setCustomPrompt(e.target.value)} placeholder="Optional: Eigene Wünsche, Details oder Edits hier eingeben..." className="w-full glass-input rounded-lg py-3 pl-12 pr-4 text-base placeholder:text-slate-500 focus:placeholder:text-slate-400 transition-all" />
                    </div>
                </div>

                {/* VIBE MATCH MODAL */}
                {isVibeModalOpen && (
                    <div className="fixed inset-0 modal-overlay flex items-center justify-center p-4 animate-in fade-in duration-200" onClick={closeVibeModal}>
                        <div className="glass-panel w-full max-w-4xl max-h-[90vh] rounded-2xl flex flex-col overflow-hidden shadow-2xl border border-emerald-500/30" onClick={e => e.stopPropagation()}>
                            <div className="p-6 border-b border-emerald-500/20 bg-emerald-950/20 flex justify-between items-center">
                                <h2 className="text-2xl font-bold text-emerald-400 flex items-center gap-3"><Camera className="w-8 h-8" /> VIBE MATCH STUDIO</h2>
                                <button onClick={closeVibeModal} className="p-2 hover:bg-white/10 rounded-full transition-colors text-slate-400 hover:text-white"><X className="w-6 h-6" /></button>
                            </div>
                            <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-8 overflow-y-auto">
                                <div className="flex flex-col gap-4">
                                    <div className={`flex-1 min-h-[300px] glass-panel rounded-xl relative overflow-hidden group transition-all flex flex-col items-center justify-center ${!moodMatchImage ? 'border-dashed border-2 border-emerald-700/50 hover:border-emerald-400 hover:bg-emerald-900/10' : 'border-emerald-500/30'}`} onDragOver={e => e.preventDefault()} onDrop={handleModalDrop}>
                                        {!moodMatchImage ? (
                                            <label className="flex flex-col items-center justify-center cursor-pointer w-full h-full">
                                                <div className="w-20 h-20 rounded-full bg-emerald-900/40 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"><Upload className="text-emerald-400 w-10 h-10" /></div>
                                                <p className="text-lg font-medium text-emerald-100">Mood Bild hochladen</p>
                                                <p className="text-slate-500 text-sm mt-2">Paste & Drag&Drop ready</p>
                                                <input type="file" onChange={handleModalUpload} accept="image/*" className="hidden" />
                                            </label>
                                        ) : (
                                            <> <img src={moodMatchImage} className="w-full h-full object-contain" /> <button onClick={() => setMoodMatchImage(null)} className="absolute top-3 right-3 p-2 bg-red-500/80 hover:bg-red-600 text-white rounded-full backdrop-blur-md shadow-lg"><X className="w-4 h-4" /></button> </>
                                        )}
                                    </div>
                                </div>
                                <div className="flex flex-col gap-6">
                                    <div>
                                        <label className="block text-emerald-200 text-sm font-bold uppercase tracking-wider mb-3">Was soll übertragen werden?</label>
                                        <input type="text" value={vibeMatchInstruction} onChange={(e) => setVibeMatchInstruction(e.target.value)} className="w-full bg-black/40 border border-emerald-500/30 rounded-lg p-4 text-white placeholder-slate-500 focus:border-emerald-400 focus:outline-none transition-colors" placeholder="z.B. Frisur, Gesichtsausdruck, Brille..." />
                                    </div>
                                    <div>
                                        <label className="block text-emerald-200/70 text-xs font-bold uppercase tracking-wider mb-2">Schnellwahl</label>
                                        <div className="flex flex-wrap gap-2">
                                            {[
                                                { label: "Gesichtsausdruck", icon: ScanFace }, { label: "Face Swap", icon: UserSquare2 }, { label: "Frisur", icon: Scissors },
                                                { label: "Augen", icon: Eye }, { label: "Makeup", icon: Palette }, { label: "Stil / Vibe", icon: Sparkles }, { label: "Brille", icon: ImageIcon }
                                            ].map((opt) => (
                                                <button key={opt.label} onClick={() => { playClickSound(); setVibeMatchInstruction(opt.label); }} className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${vibeMatchInstruction === opt.label ? 'bg-emerald-600 border-emerald-400 text-white' : 'bg-slate-800 border-slate-700 text-slate-400 hover:text-emerald-300 hover:border-emerald-500/50'}`}>
                                                    <opt.icon className="w-3 h-3" /> {opt.label}
                                                </button>
                                            ))}
                                        </div>
                                    </div>
                                    <div className="mt-auto">
                                        <button onClick={handleModalAction} disabled={!moodMatchImage} className={`w-full py-4 rounded-xl font-bold text-lg shadow-lg flex items-center justify-center gap-2 transition-all ${!moodMatchImage ? 'bg-slate-800 text-slate-500 cursor-not-allowed' : 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white shadow-emerald-500/20'}`}>
                                            <Wand2 className="w-5 h-5" /> ACTION
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* HISTORY */}
                <div className="shrink-0 flex justify-center pb-2">
                    <button onClick={toggleHistory} className="flex items-center gap-2 text-cyan-500/70 hover:text-cyan-400 text-xs uppercase tracking-[0.2em] py-2 px-6 rounded-full hover:bg-cyan-950/30 transition-all border border-transparent hover:border-cyan-900/50">
                        <History className="w-4 h-4" /> {showHistory ? 'Hide History' : 'Show History'} {showHistory ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
                    </button>
                </div>

                {showHistory && (
                    <div className="shrink-0 animate-in slide-in-from-bottom-4 fade-in duration-300 pb-4">
                        {history.length === 0 ? (
                            <div className="text-center py-8 text-slate-700 border border-dashed border-slate-800 rounded-xl bg-slate-900/30"> History is empty </div>
                        ) : (
                            <div className="grid grid-cols-4 lg:grid-cols-6 gap-3">
                                {history.map((item) => (
                                    <div key={item.id} className="glass-panel p-2 rounded-lg flex flex-col gap-2 bg-slate-900/80 border-slate-800">
                                        <div className="flex gap-1 h-24">
                                            <div className="w-1/2 h-full relative"> <img src={item.input} className="w-full h-full object-cover rounded bg-black/50 opacity-50 grayscale hover:grayscale-0 transition-all" /> <span className="absolute bottom-1 left-1 text-[9px] text-slate-400 bg-black/60 px-1 rounded">IN</span> </div>
                                            <div className="w-1/2 h-full relative"> <img src={item.output} className="w-full h-full object-cover rounded bg-black/50 border border-fuchsia-500/30" /> <span className="absolute bottom-1 right-1 text-[9px] text-fuchsia-300 bg-black/60 px-1 rounded flex items-center gap-1"> OUT {item.boost && <Zap className="w-2 h-2 fill-yellow-400 text-yellow-400" />} </span> </div>
                                        </div>
                                        <div className="flex justify-between items-center px-1">
                                            <span className="text-xs font-bold text-cyan-300 truncate w-20" title={item.emotion.label}>{item.emotion.label}</span>
                                            <div className="flex gap-1">
                                                <button onClick={() => useAsInput(item.output)} className="p-1.5 hover:bg-cyan-900/50 text-slate-500 hover:text-cyan-300 rounded transition-colors" title="Reuse"><Recycle className="w-3 h-3" /></button>
                                                <button onClick={() => downloadImage(item.output, item.filename)} className="p-1.5 hover:bg-slate-800 text-slate-500 hover:text-white rounded transition-colors" title="Save"><Download className="w-3 h-3" /></button>
                                                <button onClick={() => deleteHistoryItem(item.id)} className="p-1.5 hover:bg-red-950/50 text-slate-600 hover:text-red-400 rounded transition-colors" title="Del"><Trash2 className="w-3 h-3" /></button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
}