"use client";

import React, { useRef, useState, useEffect } from "react";
import { useStore, ReferenceCategory } from "@/lib/store";
import { cn } from "@/lib/utils";
import { Sparkles, Maximize2, X, Hash, AlertTriangle, Upload, Zap, Brain, Settings, Settings2, Video } from "lucide-react";

const IMAGE_COUNTS = [1, 2, 4];

export function PromptHero() {
    const {
        prompt, setPrompt, addToGallery,
        settings, setSettings,
        references, setReference, addReference, removeReference, clearReferences,
        setSelectionMode, setCurrentView,
        history, setHistory,
        setIsGenerating, // Get global setter
        setShowCookieExpired
    } = useStore();

    const [isGenerating, setLocalIsGenerating] = useState(false);
    const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);
    const [uploadingRefs, setUploadingRefs] = useState<Record<string, boolean>>({});
    const [errorNotification, setErrorNotification] = useState<{ message: string; type: 'error' | 'warning' } | null>(null);
    const textareaRef = useRef<HTMLTextAreaElement>(null);

    // File input refs for each reference category
    const fileInputRefs = {
        subject: useRef<HTMLInputElement>(null),
        scene: useRef<HTMLInputElement>(null),
        style: useRef<HTMLInputElement>(null),
        video: useRef<HTMLInputElement>(null),
    };

    // Auto-resize textarea
    useEffect(() => {
        if (textareaRef.current) {
            textareaRef.current.style.height = 'auto';
            textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';
        }
    }, [prompt]);

    const handleGenerate = async () => {
        let finalPrompt = prompt.trim();
        if (!finalPrompt || isGenerating) return;

        // Try to parse JSON if it looks like it
        if (finalPrompt.startsWith('{') && finalPrompt.endsWith('}')) {
            try {
                const json = JSON.parse(finalPrompt);
                if (json.prompt || json.text || json.positive) {
                    finalPrompt = json.prompt || json.text || json.positive;
                    setPrompt(finalPrompt);
                }
            } catch (e) {
                // Ignore parse errors
            }
        }

        setIsGenerating(true);
        setLocalIsGenerating(true); // Keep local state for button UI

        try {
            // Route to the selected provider
            const provider = settings.provider || 'whisk';
            let res: Response;

            if (provider === 'grok') {
                // Grok API
                res = await fetch('/api/grok/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: finalPrompt,
                        apiKey: settings.grokApiKey,
                        cookies: settings.grokCookies,
                        imageCount: settings.imageCount
                    })
                });
            } else if (provider === 'meta') {
                // Meta AI via Python service (metaai-api)
                // Meta AI always generates 4 images, hardcode this
                res = await fetch('/api/meta-crawl', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: finalPrompt,
                        cookies: settings.metaCookies,
                        num_images: 4  // Meta AI always returns 4 images
                    })
                });
            } else {
                // Default: Whisk (Google ImageFX)
                const refsForApi = {
                    subject: references.subject?.map(r => r.id) || [],
                    scene: references.scene?.map(r => r.id) || [],
                    style: references.style?.map(r => r.id) || [],
                };

                res = await fetch('/api/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: finalPrompt,
                        aspectRatio: settings.aspectRatio,
                        preciseMode: settings.preciseMode,
                        imageCount: settings.imageCount,
                        cookies: settings.whiskCookies,
                        refs: refsForApi
                    })
                });
            }

            const responseText = await res.text();
            let data;
            try {
                data = JSON.parse(responseText);
            } catch (e) {
                console.error("API Error (Non-JSON response):", responseText.substring(0, 500));
                throw new Error(`Server Error: ${res.status} ${res.statusText}`);
            }

            if (data.error) throw new Error(data.error);

            if (data.images) {
                // Add images one by one with createdAt
                for (const img of data.images) {
                    await addToGallery({
                        data: img.data || img.url, // Use URL as fallback (Meta AI returns URLs)
                        prompt: img.prompt,
                        aspectRatio: img.aspectRatio || settings.aspectRatio,
                        createdAt: Date.now(),
                        provider: provider as 'whisk' | 'grok' | 'meta'
                    });
                }
            }

        } catch (e: any) {
            console.error(e);
            const errorMessage = e.message || '';

            // Check for various Google safety policy errors
            if (errorMessage.includes('PROMINENT_PEOPLE_FILTER_FAILED') ||
                errorMessage.includes('prominent_people')) {
                setErrorNotification({
                    message: '🚫 Content Policy: The reference image contains a recognizable person. Google blocks generating images of real/famous people. Try using a different reference image without identifiable faces.',
                    type: 'warning'
                });
            } else if (errorMessage.includes("Oops! I can't generate that image") ||
                errorMessage.includes("Can I help you imagine something else")) {
                setErrorNotification({
                    message: '🛡️ Meta AI Safety: The prompt was rejected by Meta AI safety filters. Please try a different prompt.',
                    type: 'warning'
                });
            } else if (errorMessage.includes('Safety Filter') ||
                errorMessage.includes('SAFETY_FILTER') ||
                errorMessage.includes('content_policy')) {
                setErrorNotification({
                    message: '⚠️ Content Moderation: Your prompt or image was flagged by Google\'s safety filters. Try using different wording or a safer subject.',
                    type: 'warning'
                });
            } else if (errorMessage.includes('NSFW') ||
                errorMessage.includes('nsfw_filter')) {
                setErrorNotification({
                    message: '🔞 Content Policy: The request was blocked for NSFW content. Please use appropriate prompts and images.',
                    type: 'warning'
                });
            } else if (errorMessage.includes('CHILD_SAFETY') ||
                errorMessage.includes('child_safety')) {
                setErrorNotification({
                    message: '⛔ Content Policy: Request blocked for child safety concerns.',
                    type: 'error'
                });
            } else if (errorMessage.includes('RATE_LIMIT') ||
                errorMessage.includes('429') ||
                errorMessage.includes('quota')) {
                setErrorNotification({
                    message: '⏳ Rate Limited: Too many requests. Please wait a moment and try again.',
                    type: 'warning'
                });
            } else if (errorMessage.includes('401') ||
                errorMessage.includes('Unauthorized') ||
                errorMessage.includes('cookies not found') ||
                errorMessage.includes('Auth failed')) {

                // Trigger the new popup
                setShowCookieExpired(true);

                // Also show a simplified toast as backup
                setErrorNotification({
                    message: '🔐 Authentication Error: Cookies Refreshed Required',
                    type: 'error'
                });
            } else {
                setErrorNotification({
                    message: errorMessage || 'Generation failed. Please try again.',
                    type: 'error'
                });
            }
            // Auto-dismiss after 8 seconds
            setTimeout(() => setErrorNotification(null), 8000);
        } finally {
            setIsGenerating(false);
            setLocalIsGenerating(false);
        }
    };

    // Handle video generation (Meta AI only)
    // If a subject reference is set, it will use image-to-video
    // Otherwise, it will use text-to-video
    const handleGenerateVideo = async () => {
        let finalPrompt = prompt.trim();
        if (!finalPrompt || isGeneratingVideo || settings.provider !== 'meta') return;

        setIsGeneratingVideo(true);
        setIsGenerating(true);

        try {
            // Check if we have a subject reference for image-to-video
            const subjectRefs = references.subject || [];
            const imageBase64 = subjectRefs.length > 0 ? subjectRefs[0].thumbnail : undefined;
            const mode = imageBase64 ? 'image-to-video' : 'text-to-video';

            console.log(`[PromptHero] Starting Meta AI ${mode}...`);

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

            const responseText = await res.text();
            let data;
            try {
                data = JSON.parse(responseText);
            } catch (e) {
                console.error("API Error (Non-JSON response):", responseText.substring(0, 500));
                throw new Error(`Server Error: ${res.status} ${res.statusText}`);
            }

            if (data.error) throw new Error(data.error);

            if (data.videos && data.videos.length > 0) {
                // Add videos to store
                for (const video of data.videos) {
                    useStore.getState().addVideo({
                        id: crypto.randomUUID(),
                        url: video.url,
                        prompt: video.prompt || finalPrompt,
                        thumbnail: imageBase64, // Store the source image as thumbnail
                        createdAt: Date.now()
                    });
                }
                // Show success notification
                setErrorNotification({
                    message: `🎬 Success! Generated ${data.videos.length} video(s) via ${mode}. Check the gallery.`,
                    type: 'warning' // Using warning for visibility (amber color)
                });
                setTimeout(() => setErrorNotification(null), 5000);
            } else {
                throw new Error('No videos were generated');
            }

        } catch (e: any) {
            console.error('[Video Gen]', e);
            const errorMessage = e.message || '';

            if (errorMessage.includes('401') || errorMessage.includes('cookies')) {
                setShowCookieExpired(true);
            }

            setErrorNotification({
                message: `🎬 Video Error: ${errorMessage}`,
                type: 'error'
            });
            setTimeout(() => setErrorNotification(null), 8000);
        } finally {
            setIsGeneratingVideo(false);
            setIsGenerating(false);
        }
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            handleGenerate();
        }
    };

    const handlePaste = (e: React.ClipboardEvent) => {
        try {
            const text = e.clipboardData.getData('text');
            if (text.trim().startsWith('{')) {
                const json = JSON.parse(text);
                const cleanPrompt = json.prompt || json.text || json.positive || json.caption;

                if (cleanPrompt && typeof cleanPrompt === 'string') {
                    e.preventDefault();
                    setPrompt(cleanPrompt);
                }
            }
        } catch (e) {
            // Not JSON
        }
    };

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
    };

    const handleDrop = async (e: React.DragEvent, category: ReferenceCategory) => {
        e.preventDefault();
        e.stopPropagation();

        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            const file = e.dataTransfer.files[0];
            if (!file.type.startsWith('image/')) return;
            await uploadReference(file, category);
        }
    };

    const uploadReference = async (file: File, category: ReferenceCategory) => {
        if (!settings.whiskCookies) {
            alert("Please set your Whisk Cookies in Settings first!");
            return;
        }
        setUploadingRefs(prev => ({ ...prev, [category]: true }));
        try {
            const reader = new FileReader();
            reader.onload = async (e) => {
                const base64 = e.target?.result as string;
                if (!base64) return;

                const res = await fetch('/api/references/upload', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        imageBase64: base64,
                        mimeType: file.type,
                        category: category,
                        cookies: settings.whiskCookies
                    })
                });

                const data = await res.json();
                if (data.id) {
                    // Add to array (supports multiple refs per category)
                    addReference(category, { id: data.id, thumbnail: base64 });

                    // Add to history
                    const newItem = {
                        id: data.id,
                        url: base64, // For local display history we use base64. Ideally we'd valid URL but this works for session.
                        category: category,
                        originalName: file.name
                    };
                    // exist check?
                    const exists = history.find(h => h.id === data.id);
                    if (!exists) {
                        setHistory([newItem, ...history]);
                    }

                } else {
                    console.error("Upload failed details:", JSON.stringify(data));
                    alert(`Upload failed: ${data.error}\n\nDetails: ${JSON.stringify(data) || 'Check console'}`);
                }
                setUploadingRefs(prev => ({ ...prev, [category]: false }));
            };
            reader.readAsDataURL(file);
        } catch (error) {
            console.error(error);
            setUploadingRefs(prev => ({ ...prev, [category]: false }));
        }
    };

    // Handle file input change for click-to-upload (supports multiple files)
    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>, category: ReferenceCategory) => {
        const files = e.target.files;
        if (files && files.length > 0) {
            // Upload each selected file
            Array.from(files).forEach(file => {
                if (file.type.startsWith('image/')) {
                    uploadReference(file, category);
                }
            });
        }
        // Reset input value so same file can be selected again
        e.target.value = '';
    };

    // Open file picker for a category
    const openFilePicker = (category: ReferenceCategory) => {
        const inputRef = fileInputRefs[category];
        if (inputRef.current) {
            inputRef.current.click();
        }
    };

    const toggleReference = (category: ReferenceCategory) => {
        // Always open file picker to add more references
        // Users can remove individual refs or clear all via the X button
        openFilePicker(category);
    };

    const nextAspectRatio = () => {
        const ratios = ['1:1', '16:9', '9:16', '4:3', '3:4'];
        const currentIdx = ratios.indexOf(settings.aspectRatio);
        setSettings({ aspectRatio: ratios[(currentIdx + 1) % ratios.length] });
    };

    const cycleImageCount = () => {
        const currentIdx = IMAGE_COUNTS.indexOf(settings.imageCount);
        setSettings({ imageCount: IMAGE_COUNTS[(currentIdx + 1) % IMAGE_COUNTS.length] });
    };

    // Whisk-style gradient button helper
    const GradientButton = ({ onClick, disabled, children, className }: any) => (
        <button
            onClick={onClick}
            disabled={disabled}
            className={cn(
                "relative group overflow-hidden rounded-full px-6 py-2.5 font-semibold text-sm transition-all shadow-lg",
                disabled
                    ? "bg-white/5 text-white/30 cursor-not-allowed shadow-none"
                    : "text-white shadow-purple-500/20 hover:shadow-purple-500/40 hover:scale-[1.02]",
                className
            )}
        >
            <div className={cn(
                "absolute inset-0 bg-gradient-to-r from-amber-500 to-purple-600 transition-opacity",
                disabled ? "opacity-0" : "opacity-100 group-hover:opacity-90"
            )} />
            <div className="relative flex items-center gap-2">
                {children}
            </div>
        </button>
    );

    return (
        <div className="w-full max-w-3xl mx-auto my-4 md:my-6 px-4">
            {/* Error/Warning Notification Toast */}
            {errorNotification && (
                <div className={cn(
                    "mb-4 p-3 rounded-lg border flex items-start gap-3 animate-in slide-in-from-top-4 duration-300",
                    errorNotification.type === 'warning'
                        ? "bg-amber-500/10 border-amber-500/30 text-amber-200"
                        : "bg-red-500/10 border-red-500/30 text-red-200"
                )}>
                    <AlertTriangle className={cn(
                        "h-5 w-5 shrink-0 mt-0.5",
                        errorNotification.type === 'warning' ? "text-amber-400" : "text-red-400"
                    )} />
                    <div className="flex-1">
                        <p className="text-sm font-medium">
                            {errorNotification.type === 'warning' ? '⚠️ Content Moderation' : '❌ Generation Error'}
                        </p>
                        <p className="text-xs mt-1 opacity-80">{errorNotification.message}</p>
                    </div>
                    <button
                        onClick={() => setErrorNotification(null)}
                        className="p-1 hover:bg-white/10 rounded-full transition-colors"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </div>
            )}

            <div className={cn(
                "relative flex flex-col gap-3 rounded-2xl bg-[#1A1A1E]/95 bg-gradient-to-b from-white/[0.02] to-transparent p-4 shadow-xl border border-white/5 backdrop-blur-sm transition-all",
                isGenerating && "ring-1 ring-purple-500/30"
            )}>

                {/* Header / Title + Provider Toggle */}
                <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center gap-3">
                        <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-amber-500/20 to-purple-600/20 border border-white/5 flex items-center justify-center">
                            {settings.provider === 'grok' ? (
                                <Zap className="h-4 w-4 text-yellow-400" />
                            ) : settings.provider === 'meta' ? (
                                <Brain className="h-4 w-4 text-blue-400" />
                            ) : (
                                <Sparkles className="h-4 w-4 text-amber-300" />
                            )}
                        </div>
                        <div>
                            <h2 className="text-base font-bold text-white tracking-tight flex items-center gap-2">
                                Create
                                <span className="text-[10px] font-medium text-white/40 border-l border-white/10 pl-2">
                                    by <span className={cn(
                                        settings.provider === 'grok' ? "text-yellow-400" :
                                            settings.provider === 'meta' ? "text-blue-400" :
                                                "text-amber-300"
                                    )}>
                                        {settings.provider === 'grok' ? 'Grok' :
                                            settings.provider === 'meta' ? 'Meta AI' :
                                                'Whisk'}
                                    </span>
                                </span>
                            </h2>
                        </div>
                    </div>

                    {/* Provider Toggle */}
                    <div className="flex bg-black/40 p-0.5 rounded-lg border border-white/10 backdrop-blur-md scale-90 origin-right">
                        <button
                            onClick={() => setSettings({ provider: 'whisk' })}
                            className={cn(
                                "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
                                settings.provider === 'whisk' || !settings.provider
                                    ? "bg-white/10 text-white shadow-sm"
                                    : "text-white/40 hover:text-white/70 hover:bg-white/5"
                            )}
                            title="Google Whisk"
                        >
                            <Sparkles className="h-3 w-3" />
                            <span className="hidden sm:inline">Whisk</span>
                        </button>
                        <button
                            onClick={() => setSettings({ provider: 'grok' })}
                            className={cn(
                                "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
                                settings.provider === 'grok'
                                    ? "bg-white/10 text-white shadow-sm"
                                    : "text-white/40 hover:text-white/70 hover:bg-white/5"
                            )}
                            title="Grok (xAI)"
                        >
                            <Zap className="h-3 w-3" />
                            <span className="hidden sm:inline">Grok</span>
                        </button>
                        <button
                            onClick={() => setSettings({ provider: 'meta' })}
                            className={cn(
                                "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
                                settings.provider === 'meta'
                                    ? "bg-white/10 text-white shadow-sm"
                                    : "text-white/40 hover:text-white/70 hover:bg-white/5"
                            )}
                            title="Meta AI"
                        >
                            <Brain className="h-3 w-3" />
                            <span className="hidden sm:inline">Meta</span>
                        </button>
                    </div>
                </div>

                {/* Input Area */}
                <div className="relative group">
                    <div className="absolute -inset-0.5 bg-gradient-to-r from-amber-500/20 to-purple-600/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-500" />
                    <textarea
                        ref={textareaRef}
                        value={prompt}
                        onChange={(e) => setPrompt(e.target.value)}
                        onKeyDown={handleKeyDown}
                        onPaste={handlePaste}
                        placeholder="Describe your imagination..."
                        className="relative w-full resize-none bg-[#0E0E10] rounded-lg p-3 text-sm md:text-base text-white placeholder:text-white/20 outline-none min-h-[60px] border border-white/10 focus:border-purple-500/50 transition-all shadow-inner"
                    />
                </div>

                {/* Controls Area */}
                <div className="flex flex-col md:flex-row items-center justify-between gap-3 pt-1">

                    {/* Left Controls: References */}
                    {/* For Meta AI: Only subject is enabled (for image-to-video), scene/style are disabled */}
                    <div className="flex flex-wrap gap-2">
                        {(['subject', 'scene', 'style'] as ReferenceCategory[]).map((cat) => {
                            const refs = references[cat] || [];
                            const hasRefs = refs.length > 0;
                            const isUploading = uploadingRefs[cat];
                            // For Meta AI: only enable subject (for image-to-video), disable scene/style
                            const isDisabledForMeta = settings.provider === 'meta' && cat !== 'subject';
                            return (
                                <div key={cat} className={cn(
                                    "relative group",
                                    isDisabledForMeta && "opacity-30 pointer-events-none grayscale"
                                )}>
                                    <button
                                        onClick={() => toggleReference(cat)}
                                        onDragOver={handleDragOver}
                                        onDrop={(e) => handleDrop(e, cat)}
                                        className={cn(
                                            "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[10px] font-medium transition-all border relative overflow-hidden",
                                            hasRefs
                                                ? "bg-purple-500/10 text-purple-200 border-purple-500/30 hover:bg-purple-500/20"
                                                : "bg-white/5 text-white/40 border-white/5 hover:bg-white/10 hover:text-white/70 hover:border-white/10",
                                            isUploading && "animate-pulse cursor-wait"
                                        )}
                                        title={settings.provider === 'meta' && cat === 'subject'
                                            ? "Upload an image to animate into video"
                                            : undefined}
                                    >
                                        {isUploading ? (
                                            <div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
                                        ) : hasRefs ? (
                                            <div className="flex -space-x-1.5">
                                                {refs.slice(0, 4).map((ref, idx) => (
                                                    <img
                                                        key={ref.id}
                                                        src={ref.thumbnail}
                                                        alt=""
                                                        className="h-4 w-4 rounded-sm object-cover ring-1 ring-white/20"
                                                        style={{ zIndex: 10 - idx }}
                                                    />
                                                ))}
                                            </div>
                                        ) : (
                                            <Upload className="h-3 w-3" />
                                        )}
                                        <span className="capitalize tracking-wide">{cat}</span>
                                        {refs.length > 0 && (
                                            <span className="text-[9px] bg-purple-500/30 text-purple-100 rounded-full px-1.5 h-3 flex items-center">{refs.length}</span>
                                        )}
                                    </button>
                                    {/* Clear all button */}
                                    {hasRefs && !isUploading && (
                                        <button
                                            className="absolute -top-1 -right-1 p-0.5 rounded-full bg-red-500/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
                                            onClick={(e) => { e.stopPropagation(); clearReferences(cat); }}
                                            title={`Clear all ${cat} references`}
                                        >
                                            <X className="h-2 w-2" />
                                        </button>
                                    )}
                                </div>
                            );
                        })}
                    </div>

                    {/* Hidden file inputs for upload */}
                    <input
                        type="file"
                        ref={fileInputRefs.subject}
                        accept="image/*"
                        multiple
                        className="hidden"
                        onChange={(e) => handleFileInputChange(e, 'subject')}
                    />
                    <input
                        type="file"
                        ref={fileInputRefs.scene}
                        accept="image/*"
                        multiple
                        className="hidden"
                        onChange={(e) => handleFileInputChange(e, 'scene')}
                    />
                    <input
                        type="file"
                        ref={fileInputRefs.style}
                        accept="image/*"
                        multiple
                        className="hidden"
                        onChange={(e) => handleFileInputChange(e, 'style')}
                    />

                    {/* Right Controls: Settings & Generate */}
                    <div className="flex flex-wrap items-center gap-2 w-full md:w-auto justify-end">

                        {/* Settings Group */}
                        <div className="flex items-center gap-0.5 bg-[#0E0E10] p-1 rounded-lg border border-white/10">
                            {/* Image Count */}
                            <button
                                onClick={cycleImageCount}
                                className="flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium text-white/60 hover:text-white hover:bg-white/5 transition-colors"
                                title="Number of images"
                            >
                                <Hash className="h-3 w-3 opacity-70" />
                                <span>{settings.imageCount}</span>
                            </button>

                            <div className="w-px h-3 bg-white/10 mx-1" />

                            {/* Aspect Ratio */}
                            <button
                                onClick={nextAspectRatio}
                                className="px-2 py-1 rounded-md text-[10px] font-medium text-white/60 hover:text-white hover:bg-white/5 transition-colors"
                                title="Aspect Ratio"
                            >
                                <span className="opacity-70">Ratio:</span>
                                <span className="ml-1 text-white/80">{settings.aspectRatio}</span>
                            </button>

                            <div className="w-px h-3 bg-white/10 mx-1" />

                            {/* Precise Mode */}
                            <button
                                onClick={() => setSettings({ preciseMode: !settings.preciseMode })}
                                className={cn(
                                    "px-2 py-1 rounded-md text-[10px] font-medium transition-all flex items-center gap-1",
                                    settings.preciseMode
                                        ? "text-amber-300 bg-amber-500/10 ring-1 ring-amber-500/30"
                                        : "text-white/40 hover:text-white hover:bg-white/5"
                                )}
                                title="Precise Mode"
                            >
                                {/* <span>🍌</span> */}
                                <span>Precise</span>
                            </button>
                        </div>

                        {/* Generate Button */}
                        <button
                            onClick={handleGenerate}
                            disabled={isGenerating || !prompt.trim() || settings.provider === 'grok'}
                            className={cn(
                                "relative overflow-hidden px-4 py-1.5 rounded-lg font-bold text-sm text-white shadow-lg transition-all active:scale-95 group border border-white/10",
                                settings.provider === 'grok'
                                    ? "bg-gray-700 cursor-not-allowed"
                                    : "bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 hover:shadow-indigo-500/25"
                            )}
                        >
                            <div className="relative z-10 flex items-center gap-1.5">
                                {isGenerating && !isGeneratingVideo ? (
                                    <>
                                        <div className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
                                        <span className="animate-pulse">Dreaming...</span>
                                    </>
                                ) : settings.provider === 'grok' ? (
                                    <>
                                        <span className="opacity-80">Soon</span>
                                    </>
                                ) : (
                                    <>
                                        <Sparkles className="h-3 w-3 group-hover:rotate-12 transition-transform" />
                                        <span>Generate</span>
                                    </>
                                )}
                            </div>
                        </button>

                        {/* Generate Video Button - Only for Meta AI */}
                        {settings.provider === 'meta' && (
                            <button
                                onClick={handleGenerateVideo}
                                disabled={isGenerating || !prompt.trim()}
                                className={cn(
                                    "relative overflow-hidden px-4 py-1.5 rounded-lg font-bold text-sm text-white shadow-lg transition-all active:scale-95 group border border-white/10",
                                    isGenerating
                                        ? "bg-gray-700 cursor-not-allowed"
                                        : references.subject?.length
                                            ? "bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 hover:shadow-purple-500/25"
                                            : "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-500 hover:to-cyan-500 hover:shadow-cyan-500/25"
                                )}
                                title={references.subject?.length
                                    ? "Animate the subject image (30-60+ seconds)"
                                    : "Generate video from text prompt (30-60+ seconds)"}
                            >
                                <div className="relative z-10 flex items-center gap-1.5">
                                    {isGeneratingVideo ? (
                                        <>
                                            <div className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
                                            <span className="animate-pulse">Creating...</span>
                                        </>
                                    ) : (
                                        <>
                                            <Video className="h-3 w-3 group-hover:scale-110 transition-transform" />
                                            <span>{references.subject?.length ? "Animate" : "Video"}</span>
                                        </>
                                    )}
                                </div>
                            </button>
                        )}
                    </div>
                </div>

                {/* Reference Preview Panel - shows when any references exist */}
                {(references.subject?.length || references.scene?.length || references.style?.length) ? (
                    <div className="mt-4 p-3 rounded-xl bg-white/5 border border-white/10">
                        <div className="flex flex-wrap gap-4">
                            {(['subject', 'scene', 'style'] as ReferenceCategory[]).map((cat) => {
                                const refs = references[cat] || [];
                                if (refs.length === 0) return null;
                                return (
                                    <div key={cat} className="flex-1 min-w-[120px]">
                                        <div className="text-[10px] uppercase tracking-wider text-white/40 mb-2 flex items-center justify-between">
                                            <span>{cat}</span>
                                            <span className="text-purple-300">{refs.length}</span>
                                        </div>
                                        <div className="flex flex-wrap gap-1.5">
                                            {refs.map((ref) => (
                                                <div key={ref.id} className="relative group/thumb">
                                                    <img
                                                        src={ref.thumbnail}
                                                        alt=""
                                                        className="h-10 w-10 rounded object-cover ring-1 ring-white/10 group-hover/thumb:ring-purple-500/50 transition-all"
                                                    />
                                                    <button
                                                        onClick={() => removeReference(cat, ref.id)}
                                                        className="absolute -top-1 -right-1 p-0.5 rounded-full bg-red-500 text-white opacity-0 group-hover/thumb:opacity-100 transition-opacity hover:bg-red-600"
                                                        title="Remove this reference"
                                                    >
                                                        <X className="h-2.5 w-2.5" />
                                                    </button>
                                                </div>
                                            ))}
                                            {/* Add more button */}
                                            <button
                                                onClick={() => openFilePicker(cat)}
                                                className="h-10 w-10 rounded border border-dashed border-white/20 flex items-center justify-center text-white/30 hover:text-white/60 hover:border-white/40 transition-colors"
                                                title={`Add more ${cat} references`}
                                            >
                                                <span className="text-lg">+</span>
                                            </button>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                ) : null}
            </div>
        </div>
    );
}