"use client";

import React from 'react';
import { useStore } from '@/lib/store';
import { cn } from "@/lib/utils";
import { motion, AnimatePresence } from 'framer-motion';
import { Download, Maximize2, Sparkles, Trash2, X, ChevronLeft, ChevronRight, Copy, Film, Wand2 } from 'lucide-react';
import { VideoPromptModal } from './VideoPromptModal';
import { EditPromptModal } from './EditPromptModal';

// Helper function to get proper image src (handles URLs vs base64)
const getImageSrc = (data: string): string => {
    if (!data) return '';
    const cleanData = data.trim();
    // If it's already a URL, use it directly
    if (cleanData.indexOf('http') === 0 || cleanData.indexOf('data:') === 0) {
        return cleanData;
    }

    // Otherwise, treat as base64 (don't warn - base64 often contains 'http' as random characters)
    return `data:image/png;base64,${cleanData}`;
};

export function Gallery() {
    const {
        gallery, loadGallery, addToGallery, removeFromGallery, clearGallery,
        isGenerating,
        settings,
        videos, addVideo, removeVideo,
        setPrompt
    } = useStore();
    const [videoModalOpen, setVideoModalOpen] = React.useState(false);
    const [videoSource, setVideoSource] = React.useState<{ data: string, prompt: string, provider?: string } | null>(null);
    const [editModalOpen, setEditModalOpen] = React.useState(false);
    const [editSource, setEditSource] = React.useState<{ data: string, prompt: string, provider?: 'whisk' | 'meta' } | null>(null);
    const [editPromptValue, setEditPromptValue] = React.useState('');
    const [videoPromptValue, setVideoPromptValue] = React.useState('');
    const [useSourceImage, setUseSourceImage] = React.useState(true);
    const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);
    const [showControls, setShowControls] = React.useState(true);
    const [isMobile, setIsMobile] = React.useState(false);

    React.useEffect(() => {
        const checkMobile = () => setIsMobile(window.innerWidth < 768);
        checkMobile();
        window.addEventListener('resize', checkMobile);
        return () => window.removeEventListener('resize', checkMobile);
    }, []);

    React.useEffect(() => {
        if (selectedIndex !== null && gallery[selectedIndex]) {
            setEditSource(gallery[selectedIndex]);
            setEditPromptValue(gallery[selectedIndex].prompt || '');
            setVideoPromptValue('');
            setUseSourceImage(true);
        }
    }, [selectedIndex, gallery]);

    React.useEffect(() => {
        loadGallery();
    }, []); // Only load on mount

    const openVideoModal = (img: { data: string, prompt: string, provider?: string }) => {
        setVideoSource(img);
        setVideoModalOpen(true);
    };

    const openEditModal = (img: { data: string, prompt: string }) => {
        setEditSource(img);
        setEditModalOpen(true);
    };

    const [isGeneratingMetaVideo, setIsGeneratingMetaVideo] = React.useState(false); // Kept for UI state compatibility
    const [isGeneratingWhiskVideo, setIsGeneratingWhiskVideo] = React.useState(false);

    // Handle Meta AI video generation (text-to-video via Kadabra)
    const handleGenerateMetaVideo = async (img: { data: string; prompt: string }, customPrompt?: string) => {
        if (!settings.metaCookies && !settings.facebookCookies) {
            alert("Please set your Meta AI (or Facebook) Cookies in Settings first!");
            return;
        }

        setIsGeneratingMetaVideo(true);

        try {
            console.log("[Gallery] Starting Meta AI video generation...");

            // Create a descriptive prompt that includes the original image context + animation
            const originalPrompt = img.prompt || "";
            const animationDescription = customPrompt || "natural movement";

            // Combine original image description with animation instruction
            const promptText = originalPrompt
                ? `Create a video of: ${originalPrompt}. Animation: ${animationDescription}`
                : `Create an animated video with: ${animationDescription}`;

            console.log("[Gallery] Meta video prompt:", promptText);

            // Merge cookies safely
            let mergedCookies = settings.metaCookies;
            try {
                const safeParse = (str: string) => {
                    if (!str || str === "undefined" || str === "null") return [];
                    try { return JSON.parse(str); } catch { return []; }
                };
                const m = safeParse(settings.metaCookies);
                const f = safeParse(settings.facebookCookies);
                if (Array.isArray(m) || Array.isArray(f)) {
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    mergedCookies = [...(Array.isArray(m) ? m : []), ...(Array.isArray(f) ? f : [])] as any;
                }
            } catch (e) { console.error("Cookie merge failed", e); }

            const res = await fetch('/api/meta/video', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    prompt: promptText,
                    cookies: typeof mergedCookies === 'string' ? mergedCookies : JSON.stringify(mergedCookies)
                })
            });

            const data = await res.json();
            console.log("[Gallery] Meta video response:", data);

            if (data.success && data.videos?.length > 0) {
                for (const video of data.videos) {
                    addVideo({
                        id: crypto.randomUUID(),
                        url: video.url,
                        prompt: promptText,
                        thumbnail: img.data,
                        createdAt: Date.now()
                    });
                }
                alert('🎬 Video generation complete! Scroll up to see your video.');
                setVideoModalOpen(false);
            } else {
                throw new Error(data.error || 'No videos generated');
            }
        } catch (error: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
            console.error("[Gallery] Meta video error:", error);
            let errorMessage = error.message || 'Video generation failed';
            if (errorMessage.includes('401') || errorMessage.includes('cookies') || errorMessage.includes('expired')) {
                errorMessage = '🔐 Your Meta AI cookies have expired. Please go to Settings and update them.';
            }
            alert(errorMessage);
        } finally {
            setIsGeneratingMetaVideo(false);
        }
    };

    const handleGenerateVideo = async (prompt: string, sourceOverride?: { data: string; prompt: string; provider?: string; aspectRatio?: string }) => {
        const activeSource = sourceOverride || videoSource;
        if (!activeSource) return;

        // Route to Meta AI video for meta provider
        if (activeSource.provider === 'meta') {
            await handleGenerateMetaVideo(activeSource, prompt);
            return;
        }

        if (!settings.whiskCookies) {
            alert("Please set your Whisk Cookies in Settings first!");
            throw new Error("Missing Whisk cookies");
        }

        setIsGeneratingWhiskVideo(true);

        try {
            const res = await fetch('/api/video/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    prompt: prompt,
                    imageBase64: activeSource.data,
                    cookies: settings.whiskCookies
                })
            });

            const data = await res.json();
            console.log("[Gallery] Video API response:", data);
            if (data.success) {
                console.log("[Gallery] Adding video to store:", { id: data.id, url: data.url?.substring(0, 50) });
                addVideo({
                    id: data.id,
                    url: data.url,
                    prompt: prompt,
                    thumbnail: activeSource.data,
                    createdAt: Date.now()
                });
                alert('🎬 Video generation complete!\n\nYour video has been saved. Go to the "Uploads" page and select the "Videos" tab to view it.');
            } else {
                console.error(data.error);
                let errorMessage = data.error;
                if (data.error?.includes('NCII')) {
                    errorMessage = '🚫 Content Policy: Video blocked by Google\'s NCII protection. Please try with a different source image.';
                } else if (data.error?.includes('PROMINENT_PEOPLE') || data.error?.includes('prominent')) {
                    errorMessage = '🚫 Content Policy: Video blocked because the image contains a recognizable person.';
                } else if (data.error?.includes('safety') || data.error?.includes('SAFETY')) {
                    errorMessage = '⚠️ Content Policy: Video blocked by Google\'s safety filters.';
                } else if (data.error?.includes('401') || data.error?.includes('UNAUTHENTICATED')) {
                    errorMessage = '🔐 Authentication Error: Your Whisk cookies have expired. Please update in Settings.';
                } else if (data.error?.includes('429') || data.error?.includes('RESOURCE_EXHAUSTED')) {
                    errorMessage = '⏱️ Rate Limit: Too many requests. Please wait a few minutes and try again.';
                }
                alert(errorMessage);
                throw new Error(data.error);
            }
        } finally {
            setIsGeneratingWhiskVideo(false);
        }
    };



    const handleRemix = async (prompt: string, options: { keepSubject: boolean; keepScene: boolean; keepStyle: boolean }) => {
        if (!editSource) return;

        // Meta AI Remix Flow (Prompt Edit Only)
        if (editSource.provider === 'meta') {
            if (!settings.metaCookies && !settings.facebookCookies) {
                alert("Please set your Meta AI (or Facebook) Cookies in Settings first!");
                return;
            }

            try {
                // Merge cookies safely
                let mergedCookies = settings.metaCookies;
                try {
                    const safeParse = (str: string) => {
                        if (!str || str === "undefined" || str === "null") return [];
                        try { return JSON.parse(str); } catch { return []; }
                    };
                    const m = safeParse(settings.metaCookies);
                    const f = safeParse(settings.facebookCookies);
                    if (Array.isArray(m) || Array.isArray(f)) {
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        mergedCookies = [...(Array.isArray(m) ? m : []), ...(Array.isArray(f) ? f : [])] as any;
                    }
                } catch (e) { console.error("Cookie merge failed", e); }

                const res = await fetch('/api/meta/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: prompt,
                        cookies: typeof mergedCookies === 'string' ? mergedCookies : JSON.stringify(mergedCookies),
                        imageCount: 4
                    })
                });

                const data = await res.json();
                if (data.error) throw new Error(data.error);

                if (data.success && data.images?.length > 0) {
                    // Add new images to gallery
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    const newImages = data.images.map((img: any) => ({
                        id: crypto.randomUUID(),
                        data: img.data, // Base64
                        prompt: prompt,
                        createdAt: Date.now(),
                        width: 1024,
                        height: 1024,
                        aspectRatio: settings.aspectRatio,
                        provider: 'meta'
                    }));

                    // Add to store
                    newImages.forEach(addToGallery);

                    alert('✨ Remix complete! New images added to gallery.');
                    setEditModalOpen(false);
                } else {
                    throw new Error('No images generated');
                }
            } catch (e: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
                console.error("Meta Remix failed", e);
                alert("Remix failed: " + e.message);
            }
            return;
        }

        // Whisk Remix Flow (Reference Injection)
        if (!settings.whiskCookies) {
            alert("Please set your Whisk Cookies in Settings first!");
            throw new Error("Missing Whisk cookies");
        }

        // First upload the current image as a reference
        const uploadRes = await fetch('/api/references/upload', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                imageBase64: `data:image/png;base64,${editSource.data}`,
                mimeType: 'image/png',
                category: 'subject', // Use as subject reference
                cookies: settings.whiskCookies
            })
        });

        const uploadData = await uploadRes.json();
        if (!uploadData.id) {
            throw new Error("Failed to upload reference image");
        }

        // Build refs based on consistency options
        const refs: { subject?: string[]; scene?: string[]; style?: string[] } = {};
        if (options.keepSubject) refs.subject = [uploadData.id];
        if (options.keepScene) refs.scene = [uploadData.id];
        if (options.keepStyle) refs.style = [uploadData.id];

        // Generate new image with references
        const res = await fetch('/api/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                prompt: prompt,
                aspectRatio: settings.aspectRatio,
                imageCount: 1, // Generate one remix at a time
                cookies: settings.whiskCookies,
                refs: refs
            })
        });

        const data = await res.json();
        if (data.error) {
            console.error(data.error);
            alert("Remix generation failed: " + data.error);
            throw new Error(data.error);
        }

        if (data.images) {
            for (const img of data.images) {
                await addToGallery({
                    data: img.data,
                    prompt: img.prompt,
                    aspectRatio: img.aspectRatio,
                    createdAt: Date.now()
                });
            }
        }
    };

    React.useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (selectedIndex === null) return;
            if (e.key === 'Escape') setSelectedIndex(null);
            if (e.key === 'ArrowLeft') setSelectedIndex(prev => (prev !== null && prev > 0 ? prev - 1 : prev));
            if (e.key === 'ArrowRight') setSelectedIndex(prev => (prev !== null && prev < gallery.length - 1 ? prev + 1 : prev));
        };
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [selectedIndex, gallery.length]);

    if (gallery.length === 0) {
        return null; // Or return generic empty state if controlled by parent, but parent checks length usually
    }

    const handleClearAll = async () => {
        const count = gallery.length;
        if (!window.confirm(`Delete all ${count} images? This will reset the gallery database.`)) return;

        try {
            console.log("[Gallery] Hard clearing...");

            // 1. Clear Zustand Store visual state immediate
            clearGallery();

            // 2. Nuclear Option: Delete the entire database file
            console.log("[Gallery] Deleting IndexedDB...");
            const req = window.indexedDB.deleteDatabase('kv-pix-db');

            req.onsuccess = () => {
                console.log("✅ DB Deleted successfully");
                // Clear localStorage persistence too just in case
                localStorage.removeItem('kv-pix-storage');
                window.location.reload();
            };

            req.onerror = (e) => {
                console.error("❌ Failed to delete DB", e);
                alert("Failed to delete database. Browser might be blocking it.");
                window.location.reload();
            };

            req.onblocked = () => {
                console.warn("⚠️ DB Delete blocked - reloading to free locks");
                window.location.reload();
            };

        } catch (e) {
            console.error("[Gallery] Delete error:", e);
            alert("❌ Failed to delete: " + String(e));
        }
    };

    const selectedImage = selectedIndex !== null ? gallery[selectedIndex] : null;

    return (
        <div className="pb-32">
            {/* Header with Clear All */}
            <div className="flex items-center justify-between mb-8 px-2 relative z-10">
                <div>
                    <h2 className="text-xl font-extrabold text-foreground tracking-tight">{gallery.length} Creations</h2>
                    <p className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground mt-0.5">Your library of generated images</p>
                </div>
                {gallery.length > 0 && (
                    <button
                        onClick={handleClearAll}
                        className="text-destructive hover:bg-destructive/10 text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all px-4 py-2 rounded-xl border border-destructive/20"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                        <span>Reset</span>
                    </button>
                )}
            </div>

            {/* Videos Section - Show generated videos */}
            {videos.length > 0 && (
                <div className="mb-8">
                    <div className="flex items-center gap-2 mb-4 px-1">
                        <Film className="h-5 w-5 text-blue-500" />
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{videos.length} Generated Video{videos.length > 1 ? 's' : ''}</h3>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        {videos.map((vid) => (
                            <motion.div
                                key={vid.id}
                                layout
                                initial={{ opacity: 0, scale: 0.9 }}
                                animate={{ opacity: 1, scale: 1 }}
                                className="group relative aspect-video rounded-2xl overflow-hidden bg-black border border-gray-200 dark:border-gray-800 shadow-sm"
                            >
                                <video
                                    src={vid.url}
                                    poster={vid.thumbnail ? `data:image/png;base64,${vid.thumbnail}` : undefined}
                                    className="w-full h-full object-cover"
                                    controls
                                    preload="metadata"
                                />
                                <button
                                    onClick={() => removeVideo(vid.id)}
                                    className="absolute top-3 right-3 w-8 h-8 bg-black/50 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-black/70 transition-colors opacity-0 group-hover:opacity-100"
                                    title="Delete video"
                                >
                                    <X className="h-4 w-4" />
                                </button>
                                <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                                    <p className="text-white text-xs line-clamp-1 font-medium">{vid.prompt}</p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            )}

            {/* Gallery Grid */}
            <div className="columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4">
                {/* Skeleton Loading State */}
                {isGenerating && (
                    <>
                        {Array.from({ length: settings.imageCount || 4 }).map((_, i) => (
                            <div key={`skeleton-${i}`} className="break-inside-avoid rounded-2xl overflow-hidden bg-gray-100 dark:bg-[#1a2332] border border-gray-200 dark:border-gray-800 shadow-sm mb-4 relative aspect-[2/3] animate-pulse">
                            </div>
                        ))}
                    </>
                )}

                <AnimatePresence mode='popLayout'>
                    {gallery.map((img, i) => (
                        <motion.div
                            key={img.id || `video-${i}`}
                            layout
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, scale: 0.9 }}
                            className="group relative break-inside-avoid rounded-[2rem] overflow-hidden bg-card shadow-soft hover:shadow-premium transition-all duration-500 cursor-pointer border border-border/50"
                            onClick={() => setSelectedIndex(i)}
                        >
                            <img
                                src={getImageSrc(img.data)}
                                alt={img.prompt}
                                className="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700"
                                loading="lazy"
                            />

                            {/* Overlay Gradient */}
                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-40 group-hover:opacity-60 transition-opacity duration-500" />

                            {/* Provider Badge */}
                            <div className={cn(
                                "absolute top-4 left-4 text-white text-[9px] font-black tracking-widest px-2.5 py-1 rounded-lg shadow-lg backdrop-blur-xl border border-white/20",
                                img.provider === 'meta' ? "bg-primary/80" : "bg-secondary/80"
                            )}>
                                {img.provider === 'meta' ? 'META AI' : 'WHISK'}
                            </div>

                            {/* Delete button (Floating) */}
                            <button
                                onClick={(e) => { e.stopPropagation(); if (img.id) removeFromGallery(img.id); }}
                                className="absolute top-4 right-4 w-9 h-9 bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl flex items-center justify-center text-white hover:bg-destructive transition-all md:opacity-0 md:group-hover:opacity-100 active:scale-90"
                            >
                                <X className="h-4 w-4" />
                            </button>

                            {/* Caption - Glass Style */}
                            <div className="absolute bottom-4 left-4 right-4 p-3 glass-panel rounded-2xl border-white/10 md:opacity-0 md:group-hover:opacity-100 translate-y-2 md:group-hover:translate-y-0 transition-all duration-500">
                                <p className="text-white text-[10px] font-bold line-clamp-2 leading-tight tracking-tight">
                                    {img.prompt}
                                </p>
                            </div>
                        </motion.div>
                    ))}
                </AnimatePresence>
            </div>

            {/* Lightbox Modal - Split Panel Design */}
            <AnimatePresence>
                {selectedIndex !== null && selectedImage && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 z-[110] flex items-center justify-center bg-background/95 dark:bg-black/95 backdrop-blur-3xl"
                        onClick={() => setSelectedIndex(null)}
                    >
                        {/* Top Controls Bar */}
                        <div className="absolute top-0 inset-x-0 h-20 flex items-center justify-between px-6 z-[120] pointer-events-none">
                            <div className="pointer-events-auto">
                                <button
                                    onClick={() => setShowControls(!showControls)}
                                    className={cn(
                                        "p-3 rounded-full transition-all border shadow-xl backdrop-blur-md active:scale-95",
                                        showControls
                                            ? "bg-primary text-white border-primary/50"
                                            : "bg-black/60 text-white border-white/20 hover:bg-black/80"
                                    )}
                                    title={showControls ? "Hide Controls" : "Show Controls"}
                                >
                                    <Sparkles className={cn("h-5 w-5", showControls ? "animate-pulse" : "")} />
                                </button>
                            </div>

                            <button
                                className="p-3 bg-background/50 hover:bg-background rounded-full text-foreground transition-colors border border-border shadow-xl backdrop-blur-md pointer-events-auto"
                                onClick={() => setSelectedIndex(null)}
                            >
                                <X className="h-5 w-5" />
                            </button>
                        </div>


                        {/* Split Panel Container */}
                        <motion.div
                            initial={{ scale: 0.95, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            exit={{ scale: 0.95, opacity: 0 }}
                            className="relative w-full h-full flex flex-col md:flex-row gap-0 overflow-hidden"
                            onClick={(e: React.MouseEvent) => e.stopPropagation()}
                            onPanEnd={(_, info) => {
                                // Swipe Up specific (check velocity or offset)
                                // Negative Y is UP.
                                if (!showControls && info.offset.y < -50) {
                                    setShowControls(true);
                                }
                            }}
                        >
                            {/* Left: Image Container (Full size) */}
                            <div className="flex-1 flex items-center justify-center min-h-0 relative group/arrows p-4 md:p-12">
                                <motion.img
                                    layout
                                    src={getImageSrc(selectedImage.data)}
                                    alt={selectedImage.prompt}
                                    className={cn(
                                        "max-w-full max-h-full object-contain rounded-2xl shadow-2xl transition-all duration-500",
                                        showControls ? "md:scale-[0.9] scale-[0.85] translate-y-[-10%] md:translate-y-0" : "scale-100"
                                    )}
                                />

                                {/* Repositioned Arrows (relative to image container) */}
                                {selectedIndex > 0 && (
                                    <button
                                        className="absolute left-6 top-1/2 -translate-y-1/2 p-4 bg-background/30 hover:bg-background/50 rounded-full text-foreground transition-all z-10 border border-border/20 shadow-2xl backdrop-blur-md active:scale-90"
                                        onClick={(e) => { e.stopPropagation(); setSelectedIndex(prev => prev! - 1); }}
                                    >
                                        <ChevronLeft className="h-8 w-8" />
                                    </button>
                                )}
                                {selectedIndex < gallery.length - 1 && (
                                    <button
                                        className="absolute right-6 top-1/2 -translate-y-1/2 p-4 bg-background/30 hover:bg-background/50 rounded-full text-foreground transition-all z-10 border border-border/20 shadow-2xl backdrop-blur-md active:scale-90"
                                        onClick={(e) => { e.stopPropagation(); setSelectedIndex(prev => prev! + 1); }}
                                    >
                                        <ChevronRight className="h-8 w-8" />
                                    </button>
                                )}

                                {/* Swipe Up Hint Handle (Only when controls are hidden) */}
                                <AnimatePresence>
                                    {!showControls && (
                                        <motion.div
                                            initial={{ opacity: 0, y: 10 }}
                                            animate={{ opacity: 1, y: 0 }}
                                            exit={{ opacity: 0, y: 10 }}
                                            className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 z-20 pointer-events-none"
                                        >
                                            <div className="w-12 h-1.5 bg-white/30 rounded-full backdrop-blur-sm shadow-sm" />
                                            {/* Optional: Add a chevron up or just the line. User asked for "hint handle", implying likely just the pill shape or similar to iOS home bar but specifically for swiping up content */}
                                        </motion.div>
                                    )}
                                </AnimatePresence>
                            </div>

                            {/* Right: Controls Panel (Retractable) */}
                            <AnimatePresence>
                                {showControls && (
                                    <motion.div
                                        initial={isMobile ? { y: "100%", opacity: 0 } : { x: "100%", opacity: 0 }}
                                        animate={{ x: 0, y: 0, opacity: 1 }}
                                        exit={isMobile ? { y: "100%", opacity: 0 } : { x: "100%", opacity: 0 }}
                                        transition={{ type: "spring", damping: 30, stiffness: 300, mass: 0.8 }}
                                        drag={isMobile ? "y" : false}
                                        dragConstraints={{ top: 0, bottom: 0 }}
                                        dragElastic={{ top: 0, bottom: 0.5 }}
                                        onDragEnd={(_, info) => {
                                            if (isMobile && info.offset.y > 100) {
                                                setShowControls(false);
                                            }
                                        }}
                                        className="w-full md:w-[400px] flex flex-col bg-card/80 dark:bg-black/80 border-l border-border backdrop-blur-2xl shadow-left-premium z-[130] absolute bottom-0 inset-x-0 md:relative md:inset-auto md:h-full h-[70vh] rounded-t-[3rem] md:rounded-none overflow-hidden touch-none"
                                    >
                                        {/* Drag Handle (Mobile) */}
                                        <div className="h-1.5 w-12 bg-zinc-500/40 group-hover:bg-zinc-500/60 rounded-full mx-auto mt-4 mb-2 md:hidden cursor-grab active:cursor-grabbing transition-colors" />

                                        <div className="flex-1 flex flex-col gap-6 p-6 md:p-8 overflow-y-auto custom-scrollbar pb-32 md:pb-8">
                                            {/* Provider Badge */}
                                            {selectedImage.provider && (
                                                <div className={cn(
                                                    "self-start px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider",
                                                    selectedImage.provider === 'meta' ? "bg-blue-500/20 text-blue-300 border border-blue-500/30" :
                                                        "bg-amber-500/20 text-amber-300 border border-amber-500/30"
                                                )}>
                                                    {selectedImage.provider}
                                                </div>
                                            )}

                                            {/* Prompt Section (Editable) */}
                                            <div className="space-y-2">
                                                <div className="flex items-center justify-between">
                                                    <h3 className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/70">Original Prompt</h3>
                                                    {editPromptValue !== selectedImage.prompt && (
                                                        <span className="text-[10px] text-amber-400 font-medium animate-pulse">Modified</span>
                                                    )}
                                                </div>
                                                <textarea
                                                    value={editPromptValue}
                                                    onChange={(e) => setEditPromptValue(e.target.value)}
                                                    className="w-full h-24 bg-background/50 border border-border/50 rounded-2xl p-4 text-xs text-foreground resize-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 outline-none transition-all placeholder:text-muted-foreground/30 font-medium"
                                                    placeholder="Enter prompt..."
                                                />
                                                <div className="flex gap-2">
                                                    {(!selectedImage.provider || selectedImage.provider === 'whisk' || selectedImage.provider === 'meta') && (
                                                        <button
                                                            onClick={() => openEditModal({ ...selectedImage, prompt: editPromptValue })}
                                                            className="flex-1 py-2.5 bg-primary text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all flex items-center justify-center gap-2 active:scale-95 shadow-lg shadow-primary/20"
                                                        >
                                                            <Wand2 className="h-3 w-3" />
                                                            <span>Remix</span>
                                                        </button>
                                                    )}
                                                    <button
                                                        onClick={() => {
                                                            navigator.clipboard.writeText(editPromptValue);
                                                            alert("Prompt copied!");
                                                        }}
                                                        className={cn(
                                                            "px-3 py-2.5 bg-muted hover:bg-muted/80 rounded-xl text-foreground transition-all border border-border/50 active:scale-95",
                                                            (!selectedImage.provider || selectedImage.provider === 'whisk') ? "" : "flex-1"
                                                        )}
                                                        title="Copy Prompt"
                                                    >
                                                        <Copy className="h-4 w-4 mx-auto" />
                                                    </button>
                                                </div>
                                            </div>

                                            {/* Divider */}
                                            <div className="border-t border-white/10" />

                                            {/* Video Generation Section */}
                                            <div className="space-y-2">
                                                <div className="flex items-center justify-between">
                                                    <h3 className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/70 flex items-center gap-2">
                                                        <Film className="h-3 w-3" />
                                                        Animate
                                                    </h3>
                                                </div>
                                                <textarea
                                                    value={videoPromptValue}
                                                    onChange={(e) => setVideoPromptValue(e.target.value)}
                                                    placeholder="Describe movement..."
                                                    className="w-full h-20 bg-background/50 border border-border/50 rounded-2xl p-4 text-xs text-foreground resize-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 outline-none transition-all placeholder:text-muted-foreground/30 font-medium"
                                                />
                                                {(() => {
                                                    const isGenerating = isGeneratingMetaVideo || isGeneratingWhiskVideo;
                                                    const isWhisk = !selectedImage.provider || selectedImage.provider === 'whisk';
                                                    const isMeta = selectedImage.provider === 'meta';
                                                    const is16by9 = selectedImage.aspectRatio === '16:9';
                                                    // Only Whisk with 16:9 can generate video - Meta video API not available
                                                    const canGenerate = isWhisk && is16by9;

                                                    return (
                                                        <button
                                                            onClick={() => handleGenerateVideo(videoPromptValue, selectedImage)}
                                                            disabled={isGenerating || !canGenerate}
                                                            className={cn(
                                                                "relative z-10 w-full py-2 rounded-lg text-xs font-medium text-white transition-all flex items-center justify-center gap-2",
                                                                isGenerating
                                                                    ? "bg-gray-600 cursor-wait"
                                                                    : !canGenerate
                                                                        ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50 border border-border/50"
                                                                        : "bg-blue-600 hover:bg-blue-500 shadow-lg shadow-blue-500/20"
                                                            )}
                                                        >
                                                            {isGenerating ? (
                                                                <>
                                                                    <div className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
                                                                    <span>Generating Video...</span>
                                                                </>
                                                            ) : isMeta ? (
                                                                <>
                                                                    <Film className="h-3.5 w-3.5 opacity-50" />
                                                                    <span>Video coming soon</span>
                                                                </>
                                                            ) : !canGenerate ? (
                                                                <>
                                                                    <Film className="h-3.5 w-3.5 opacity-50" />
                                                                    <span>Video requires 16:9 ratio</span>
                                                                </>
                                                            ) : (
                                                                <>
                                                                    <Film className="h-3.5 w-3.5" />
                                                                    <span>Generate Video</span>
                                                                </>
                                                            )}
                                                        </button>
                                                    );
                                                })()}
                                            </div>

                                            {/* Divider */}
                                            <div className="border-t border-white/10" />

                                            {/* Other Actions */}
                                            <div className="space-y-2">
                                                <h3 className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/70">Library Actions</h3>

                                                <div className="grid grid-cols-2 gap-2">
                                                    <a
                                                        href={getImageSrc(selectedImage.data)}
                                                        download={"generated-" + selectedIndex + "-" + Date.now() + ".png"}
                                                        className="flex items-center justify-center gap-2 px-3 py-2.5 bg-muted/50 hover:bg-muted rounded-xl text-foreground text-[10px] font-black uppercase tracking-widest transition-all border border-border/50"
                                                    >
                                                        <Download className="h-3.5 w-3.5" />
                                                        <span>Download</span>
                                                    </a>

                                                    <button
                                                        onClick={() => {
                                                            setPrompt(selectedImage.prompt);
                                                            setSelectedIndex(null);
                                                        }}
                                                        className="flex items-center justify-center gap-2 px-3 py-2.5 bg-muted/50 hover:bg-muted rounded-xl text-foreground text-[10px] font-black uppercase tracking-widest transition-all border border-border/50"
                                                    >
                                                        <Sparkles className="h-3.5 w-3.5" />
                                                        <span>Use Prompt</span>
                                                    </button>
                                                </div>

                                                <button
                                                    onClick={() => {
                                                        if (selectedImage.id) {
                                                            removeFromGallery(selectedImage.id);
                                                            setSelectedIndex(null);
                                                        }
                                                    }}
                                                    className="flex items-center justify-center gap-2 w-full px-3 py-2.5 bg-destructive/10 hover:bg-destructive/20 rounded-xl text-destructive text-[10px] font-black uppercase tracking-widest transition-all border border-destructive/20 active:scale-95"
                                                >
                                                    <Trash2 className="h-3.5 w-3.5" />
                                                    <span>Delete Image</span>
                                                </button>
                                            </div>

                                        </div>
                                    </motion.div>
                                )}
                            </AnimatePresence>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
            {/* Video Modal */}
            <VideoPromptModal
                isOpen={videoModalOpen}
                onClose={() => setVideoModalOpen(false)}
                image={videoSource}
                onGenerate={handleGenerateVideo}
            />
            {/* Edit/Remix Modal */}
            <EditPromptModal
                isOpen={editModalOpen}
                onClose={() => setEditModalOpen(false)}
                image={editSource}
                onGenerate={handleRemix}
            />
        </div >
    );
}