apix/components/PromptHero.tsx

"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, Brain, Settings, Settings2 } from "lucide-react";

// FastAPI backend URL - /api in production (nginx proxy), localhost in dev
const API_BASE = process.env.NEXT_PUBLIC_API_URL || (typeof window !== 'undefined' && window.location.hostname !== 'localhost' ? '/api' : 'http://localhost:8000');

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 { addVideo } = useStore();

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

    // CLEANUP: Remove corrupted localStorage keys that crash browser extensions
    useEffect(() => {
        try {
            if (typeof window !== 'undefined') {
                for (let i = 0; i < localStorage.length; i++) {
                    const key = localStorage.key(i);
                    if (key) {
                        const val = localStorage.getItem(key);
                        // Clean up "undefined" string values which cause JSON.parse errors in extensions
                        if (val === "undefined" || val === "null") {
                            console.warn(`[Cleanup] Removing corrupted localStorage key: ${key}`);
                            localStorage.removeItem(key);
                        }
                    }
                }
            }
        } catch (e) {
            console.error("Storage cleanup failed", e);
        }
    }, []);

    // Auto-enable Precise mode when references are added
    useEffect(() => {
        const hasReferences = Object.values(references).some(refs => refs && refs.length > 0);
        if (hasReferences && !settings.preciseMode) {
            setSettings({ preciseMode: true });
        }
    }, [references, settings.preciseMode, setSettings]);

    // 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 === 'meta') {
                // Image Generation Path (Meta AI)
                // Video is now handled by handleGenerateVideo

                // Prepend aspect ratio for better adherence
                let metaPrompt = finalPrompt;
                if (settings.aspectRatio === '16:9') {
                    metaPrompt = "wide 16:9 landscape image of " + finalPrompt;
                } else if (settings.aspectRatio === '9:16') {
                    metaPrompt = "tall 9:16 portrait image of " + finalPrompt;
                }

                // Merge cookies safely
                let mergedCookies: string | any[] = 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)) {
                        mergedCookies = [...(Array.isArray(m) ? m : []), ...(Array.isArray(f) ? f : [])];
                    }
                } catch (e) { console.error("Cookie merge failed", e); }

                // Meta AI always generates 4 images, hardcode this
                // Extract subject reference if available (for Image-to-Image)
                const subjectRef = references.subject?.[0];
                const imageUrl = subjectRef ? subjectRef.thumbnail : undefined; // Use full data URI from thumbnail property

                res = await fetch(`${API_BASE}/meta/generate`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: metaPrompt,
                        cookies: typeof mergedCookies === 'string' ? mergedCookies : JSON.stringify(mergedCookies),
                        imageCount: 4,  // Meta AI always returns 4 images
                        useMetaFreeWrapper: settings.useMetaFreeWrapper,
                        metaFreeWrapperUrl: settings.metaFreeWrapperUrl
                    })
                });
            } 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_BASE}/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: finalPrompt, // Use original user prompt to avoid showing engineered prompts
                        aspectRatio: img.aspectRatio || settings.aspectRatio,
                        createdAt: Date.now(),
                        provider: provider as 'whisk' | '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);
        }
    };

    // Note: Meta AI Video generation was removed - use Whisk for video generation from the gallery lightbox

    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) => {
        // Enforce Whisk cookies ONLY if using Whisk provider
        if ((!settings.provider || settings.provider === 'whisk') && !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) {
                    setUploadingRefs(prev => ({ ...prev, [category]: false }));
                    return;
                }

                let refId = '';

                // If Whisk, upload to backend to get ID
                if (!settings.provider || settings.provider === 'whisk') {
                    try {
                        const res = await fetch(`${API_BASE}/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) {
                            refId = data.id;
                        } else {
                            console.error("Upload failed details:", JSON.stringify(data));
                            alert(`Upload failed: ${data.error}\n\nDetails: ${JSON.stringify(data) || 'Check console'}`);
                        }
                    } catch (err) {
                        console.error("API Upload Error", err);
                        alert("API Upload failed");
                    }
                } else {
                    // For Meta/Grok, just use local generated ID
                    refId = 'loc-' + Date.now() + Math.random().toString(36).substr(2, 5);
                }

                if (refId) {
                    // Add to array (supports multiple refs per category)
                    // Note: Store uses 'thumbnail' property for the image data
                    addReference(category, { id: refId, thumbnail: base64 });

                    // Add to history
                    const newItem = {
                        id: refId,
                        url: base64,
                        category: category,
                        originalName: file.name
                    };

                    const exists = history.find(h => h.id === refId);
                    if (!exists) {
                        setHistory([newItem, ...history].slice(0, 50));
                    }
                }
                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-lg md:max-w-3xl mx-auto mb-8 transition-all">
            {/* Error/Warning Notification Toast */}
            {errorNotification && (
                <div className={cn(
                    "mb-4 p-3 rounded-xl border flex items-start gap-3 animate-in fade-in slide-in-from-top-4 duration-300",
                    errorNotification.type === 'warning'
                        ? "bg-amber-500/10 border-amber-500/20 text-amber-600 dark:text-amber-400"
                        : "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400"
                )}>
                    <AlertTriangle className="h-5 w-5 shrink-0 mt-0.5" />
                    <div className="flex-1">
                        <p className="text-sm font-semibold">
                            {errorNotification.type === 'warning' ? 'Content Moderation' : 'Generation Error'}
                        </p>
                        <p className="text-xs mt-1 opacity-90 leading-relaxed">{errorNotification.message}</p>
                    </div>
                    <button
                        onClick={() => setErrorNotification(null)}
                        className="p-1 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </div>
            )}

            <div className={cn(
                "bg-card rounded-3xl p-6 md:p-8 shadow-premium border border-border/50 relative overflow-hidden transition-all duration-500",
                isGenerating && "ring-2 ring-primary/20 border-primary/50 shadow-lg shadow-primary/10"
            )}>
                {/* Visual Background Accent */}
                <div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
                <div className="absolute bottom-0 left-0 -ml-16 -mb-16 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none" />

                {/* Header */}
                <div className="flex items-center justify-between mb-8 relative z-10">
                    <div className="flex items-center space-x-3">
                        <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-primary to-violet-700 flex items-center justify-center text-white shadow-lg shadow-primary/20">
                            {settings.provider === 'meta' ? <Brain className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
                        </div>
                        <div>
                            <h2 className="font-extrabold text-xl text-foreground tracking-tight">Create</h2>
                            <span className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">
                                Powered by <span className="text-secondary">{settings.provider === 'meta' ? 'Meta AI' : 'Google Whisk'}</span>
                            </span>
                        </div>
                    </div>
                    <div className="flex bg-muted/50 p-1 rounded-xl border border-border/50">
                        <button
                            onClick={() => setSettings({ provider: settings.provider === 'meta' ? 'whisk' : 'meta' })}
                            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-card shadow-sm border border-border/50 text-xs font-bold text-foreground hover:bg-muted transition-all active:scale-95"
                            title="Switch Provider"
                        >
                            <Settings2 className="h-3.5 w-3.5 text-primary" />
                            <span>Switch</span>
                        </button>
                    </div>
                </div>

                {/* Input Area */}
                <div className="relative mb-6 group z-10">
                    <textarea
                        ref={textareaRef}
                        value={prompt}
                        onChange={(e) => setPrompt(e.target.value)}
                        onKeyDown={handleKeyDown}
                        onPaste={handlePaste}
                        className="w-full bg-muted/30 border border-border/50 rounded-2xl p-5 text-sm md:text-base focus:ring-2 focus:ring-primary/20 focus:border-primary/50 outline-none resize-none min-h-[140px] placeholder-muted-foreground/50 text-foreground transition-all shadow-inner"
                        placeholder="What's on your mind? Describe your vision..."
                    />
                </div>

                {/* Reference Upload Grid */}
                <div className="grid grid-cols-3 gap-4 mb-6 relative z-10">
                    {((settings.provider === 'meta' ? ['subject'] : ['subject', 'scene', 'style']) as ReferenceCategory[]).map((cat) => {
                        const refs = references[cat] || [];
                        const hasRefs = refs.length > 0;
                        const isUploading = uploadingRefs[cat];

                        return (
                            <button
                                key={cat}
                                onClick={() => toggleReference(cat)}
                                onDragOver={handleDragOver}
                                onDrop={(e) => handleDrop(e, cat)}
                                className={cn(
                                    "flex flex-col items-center justify-center gap-2 py-4 rounded-2xl border transition-all relative overflow-hidden group/btn shadow-soft",
                                    hasRefs
                                        ? "bg-primary/5 border-primary/30"
                                        : "bg-muted/50 hover:bg-muted border-border/50"
                                )}
                            >
                                {isUploading ? (
                                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                                ) : hasRefs ? (
                                    <div className="relative pt-1">
                                        <div className="flex -space-x-2.5 justify-center">
                                            {refs.slice(0, 3).map((ref, idx) => (
                                                <img key={ref.id} src={ref.thumbnail} className="w-8 h-8 rounded-full object-cover ring-2 ring-background shadow-md" style={{ zIndex: 10 - idx }} />
                                            ))}
                                        </div>
                                        <div className="absolute -top-1 -right-3 bg-secondary text-secondary-foreground text-[10px] font-black px-1.5 py-0.5 rounded-full shadow-sm">{refs.length}</div>
                                    </div>
                                ) : (
                                    <div className="p-2 rounded-xl bg-background/50 group-hover/btn:bg-primary/10 transition-colors">
                                        <Upload className="h-4 w-4 text-muted-foreground group-hover/btn:text-primary transition-colors" />
                                    </div>
                                )}
                                <span className={cn(
                                    "text-[10px] uppercase font-black tracking-widest transition-colors",
                                    hasRefs ? "text-primary" : "text-muted-foreground"
                                )}>
                                    {cat}
                                </span>
                            </button>
                        );
                    })}
                </div>

                {/* Settings & Generate Row */}
                <div className="flex items-center gap-2 relative z-10">
                    <div className="flex items-center gap-0.5 bg-muted/50 p-1 rounded-2xl border border-border/50 shrink-0">
                        <button
                            onClick={settings.provider === 'meta' ? undefined : cycleImageCount}
                            className={cn(
                                "flex items-center gap-1.5 px-2.5 py-2 rounded-xl transition-all whitespace-nowrap",
                                settings.provider === 'meta' ? "opacity-30 cursor-not-allowed" : "hover:bg-card"
                            )}
                            title="Image Count"
                        >
                            <Hash className="h-3.5 w-3.5 text-primary" />
                            <span className="text-xs font-bold text-foreground">{settings.provider === 'meta' ? 4 : settings.imageCount}</span>
                        </button>

                        <button
                            onClick={nextAspectRatio}
                            className="flex items-center gap-1.5 px-2.5 py-2 rounded-xl hover:bg-card transition-all whitespace-nowrap"
                            title="Aspect Ratio"
                        >
                            <Maximize2 className="h-3.5 w-3.5 text-secondary" />
                            <span className="text-xs font-bold text-foreground">{settings.aspectRatio}</span>
                        </button>

                        <button
                            onClick={() => setSettings({ preciseMode: !settings.preciseMode })}
                            className={cn(
                                "px-2.5 py-2 rounded-xl transition-all font-black text-[10px] tracking-tight uppercase whitespace-nowrap",
                                settings.preciseMode
                                    ? "bg-secondary text-secondary-foreground shadow-sm"
                                    : "text-muted-foreground hover:bg-card"
                            )}
                            title="Precise Mode"
                        >
                            Precise
                        </button>
                    </div>

                    <button
                        onClick={handleGenerate}
                        disabled={isGenerating || !prompt.trim()}
                        className={cn(
                            "group/gen flex-1 min-w-[120px] bg-primary hover:bg-violet-700 text-white font-black uppercase tracking-widest text-[11px] md:text-sm h-[52px] rounded-2xl shadow-premium-lg flex items-center justify-center gap-2 transition-all active:scale-[0.97] border-b-4 border-violet-800 disabled:opacity-50 disabled:cursor-not-allowed disabled:border-transparent",
                            isGenerating && "animate-pulse"
                        )}
                    >
                        {isGenerating ? (
                            <>
                                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                                <span>Generating...</span>
                            </>
                        ) : (
                            <>
                                <Sparkles className="h-4 w-4 group-hover/gen:rotate-12 transition-transform" />
                                <span>Dream Big</span>
                            </>
                        )}
                    </button>
                </div>
            </div>

            {/* Hidden File Inputs */}
            <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')} />
        </div>
    );
}