apix/components/VideoPromptModal.tsx

"use client";

import React from 'react';
import { X, Film, Loader2, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';

interface VideoPromptModalProps {
    isOpen: boolean;
    onClose: () => void;
    image: { data: string; prompt: string } | null;
    onGenerate: (prompt: string) => Promise<void>;
}

export function VideoPromptModal({ isOpen, onClose, image, onGenerate }: VideoPromptModalProps) {
    const [prompt, setPrompt] = React.useState('');
    const [loading, setLoading] = React.useState(false);

    React.useEffect(() => {
        if (isOpen && image) {
            setPrompt(image.prompt);
        }
    }, [isOpen, image]);

    if (!isOpen) return null;

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        try {
            await onGenerate(prompt);
            onClose();
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/90 backdrop-blur-md p-4 animate-in fade-in duration-300">
            {/* Modal Container - Whisk Style Dark Card */}
            <div className="relative w-full max-w-2xl bg-[#1a1a1e] rounded-2xl border border-white/10 shadow-2xl shadow-black/50 overflow-hidden">

                {/* Close Button */}
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 p-2 hover:bg-white/10 rounded-full transition-colors z-10 text-white/70 hover:text-white"
                >
                    <X className="h-5 w-5" />
                </button>

                {/* Header with Gradient */}
                <div className="relative px-6 pt-6 pb-4">
                    <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-blue-500/10 pointer-events-none" />
                    <div className="flex items-center gap-4 relative">
                        <div className="p-3 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-xl border border-white/10 backdrop-blur-sm">
                            <Film className="h-6 w-6 text-purple-400" />
                        </div>
                        <div>
                            <h2 className="text-xl font-semibold text-white">Animate Image</h2>
                            <p className="text-sm text-white/50">Transform your image into an 8-second video</p>
                        </div>
                    </div>
                </div>

                {/* Content */}
                <div className="px-6 pb-6">
                    {/* Image Preview & Input Row */}
                    <div className="flex gap-5">
                        {/* Image Preview */}
                        <div className="relative w-32 h-32 shrink-0 rounded-xl overflow-hidden border border-white/10 group">
                            {image && (
                                <>
                                    <img
                                        src={image.data.startsWith('data:') || image.data.startsWith('http') ? image.data : `data:image/png;base64,${image.data}`}
                                        alt="Source"
                                        className="w-full h-full object-cover"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-center pb-2">
                                        <span className="text-[10px] text-white/80 font-medium">Source Image</span>
                                    </div>
                                </>
                            )}
                        </div>

                        {/* Prompt Input */}
                        <div className="flex-1 flex flex-col gap-3">
                            <label className="text-sm font-medium text-white/70 flex items-center gap-2">
                                <Sparkles className="h-3.5 w-3.5 text-purple-400" />
                                Motion Description
                            </label>
                            <textarea
                                value={prompt}
                                onChange={(e) => setPrompt(e.target.value)}
                                className="w-full h-24 p-3 rounded-xl bg-white/5 border border-white/10 resize-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50 outline-none text-sm text-white placeholder:text-white/30 transition-all"
                                placeholder="Describe how the image should move... (e.g., 'camera slowly zooms in, wind blows through hair')"
                                autoFocus
                            />
                        </div>
                    </div>

                    {/* Info Chips */}
                    <div className="flex flex-wrap gap-2 mt-4">
                        <div className="px-2.5 py-1 bg-white/5 border border-white/10 rounded-full text-xs text-white/50">
                            <span className="text-white/70">Duration:</span> 8 seconds
                        </div>
                        <div className="px-2.5 py-1 bg-white/5 border border-white/10 rounded-full text-xs text-white/50">
                            <span className="text-white/70">Model:</span> Veo 3
                        </div>
                        <div className="px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-full text-xs text-amber-300">
                            <span className="text-amber-400">📐</span> 16:9 Landscape
                        </div>
                        <div className="px-2.5 py-1 bg-purple-500/10 border border-purple-500/20 rounded-full text-xs text-purple-300">
                            <span className="text-purple-400">✨</span> AI Animation
                        </div>
                    </div>

                    {/* Aspect Ratio Note */}
                    <div className="mt-3 px-3 py-2 bg-amber-500/5 border border-amber-500/10 rounded-lg">
                        <p className="text-xs text-amber-200/70">
                            <span className="text-amber-400 font-medium">💡 Tip:</span> Video output is 16:9 landscape. For best results, use 16:9 source images.
                        </p>
                    </div>

                    {/* Actions */}
                    <div className="flex justify-end gap-3 mt-6">
                        <button
                            onClick={onClose}
                            className="px-5 py-2.5 hover:bg-white/5 rounded-xl text-sm font-medium text-white/70 hover:text-white transition-colors"
                            disabled={loading}
                        >
                            Cancel
                        </button>
                        <button
                            onClick={handleSubmit}
                            disabled={loading || !prompt.trim()}
                            className={cn(
                                "px-6 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center gap-2",
                                "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500",
                                "text-white shadow-lg shadow-purple-500/25",
                                "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
                            )}
                        >
                            {loading ? (
                                <>
                                    <Loader2 className="h-4 w-4 animate-spin" />
                                    <span>Generating...</span>
                                </>
                            ) : (
                                <>
                                    <Film className="h-4 w-4" />
                                    <span>Animate</span>
                                </>
                            )}
                        </button>
                    </div>
                </div>

                {/* Loading Overlay */}
                {loading && (
                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm flex flex-col items-center justify-center gap-4 animate-in fade-in">
                        <div className="relative">
                            <div className="w-16 h-16 rounded-full border-2 border-purple-500/30" />
                            <div className="absolute inset-0 w-16 h-16 rounded-full border-2 border-t-purple-500 animate-spin" />
                        </div>
                        <div className="text-center">
                            <p className="text-white font-medium">Creating your video...</p>
                            <p className="text-white/50 text-sm">This may take up to a minute</p>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}