"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import useStore from "@/lib/store";
import modelAdapter from "@/lib/services/adapter-instance";
import type { Slide, SlidesPresentation } from "@/types";
import {
    Presentation,
    Copy,
    Loader2,
    CheckCircle2,
    ChevronLeft,
    ChevronRight,
    Download,
    Maximize2,
    Minimize2,
    Settings,
    Globe,
    Palette,
    Users,
    Building2,
    Hash,
    Play,
    Pause,
    Upload,
    X,
    FileText,
    Image as ImageIcon,
    File,
    Sparkles,
    BarChart3,
    TrendingUp,
    Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { translations } from "@/lib/i18n/translations";

const LANGUAGES = [
    { code: "en", name: "English", nativeName: "English" },
    { code: "zh", name: "Chinese", nativeName: "中文" },
    { code: "es", name: "Spanish", nativeName: "Español" },
    { code: "fr", name: "French", nativeName: "Français" },
    { code: "de", name: "German", nativeName: "Deutsch" },
    { code: "ja", name: "Japanese", nativeName: "日本語" },
    { code: "ko", name: "Korean", nativeName: "한국어" },
    { code: "ru", name: "Russian", nativeName: "Русский" },
    { code: "ar", name: "Arabic", nativeName: "العربية" },
    { code: "pt", name: "Portuguese", nativeName: "Português" },
    { code: "it", name: "Italian", nativeName: "Italiano" },
    { code: "hi", name: "Hindi", nativeName: "हिन्दी" },
    { code: "tr", name: "Turkish", nativeName: "Türkçe" },
    { code: "vi", name: "Vietnamese", nativeName: "Tiếng Việt" },
    { code: "th", name: "Thai", nativeName: "ไทย" },
    { code: "nl", name: "Dutch", nativeName: "Nederlands" },
    { code: "pl", name: "Polish", nativeName: "Polski" },
    { code: "uk", name: "Ukrainian", nativeName: "Українська" },
];

const THEMES = [
    { id: "corporate-blue", name: "Corporate Blue", colors: ["#0f172a", "#3b82f6", "#60a5fa", "#ffffff"], icon: "🏢", gradient: "linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%)" },
    { id: "executive-dark", name: "Executive Dark", colors: ["#09090b", "#6366f1", "#a855f7", "#fafafa"], icon: "👔", gradient: "linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%)" },
    { id: "modern-gradient", name: "Modern Gradient", colors: ["#0c0a09", "#f97316", "#eab308", "#fafaf9"], icon: "✨", gradient: "linear-gradient(135deg, #0c0a09 0%, #1c1917 50%, #292524 100%)" },
    { id: "tech-neon", name: "Tech Neon", colors: ["#020617", "#22d3ee", "#a3e635", "#f8fafc"], icon: "⚡", gradient: "linear-gradient(135deg, #020617 0%, #0c1929 50%, #172554 100%)" },
    { id: "minimal-light", name: "Minimal Light", colors: ["#ffffff", "#18181b", "#71717a", "#f4f4f5"], icon: "◻️", gradient: "linear-gradient(135deg, #ffffff 0%, #f4f4f5 50%, #e4e4e7 100%)" },
    { id: "premium-gold", name: "Premium Gold", colors: ["#1a1a2e", "#d4af37", "#ffd700", "#f5f5dc"], icon: "👑", gradient: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)" },
    { id: "nature-green", name: "Nature Green", colors: ["#14532d", "#22c55e", "#86efac", "#f0fdf4"], icon: "🌿", gradient: "linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%)" },
    { id: "sunset-warm", name: "Sunset Warm", colors: ["#1f1f1f", "#f43f5e", "#fb923c", "#fef2f2"], icon: "🌅", gradient: "linear-gradient(135deg, #1f1f1f 0%, #2d1b1b 50%, #3d2424 100%)" },
];

const AUDIENCES = [
    { id: "executives", name: "Executives & C-Suite", icon: "👔", style: "Sophisticated, data-driven, strategic focus" },
    { id: "investors", name: "Investors & Board", icon: "💼", style: "ROI-focused, metrics-heavy, growth narrative" },
    { id: "technical", name: "Technical Team", icon: "💻", style: "Detailed, architecture diagrams, code snippets" },
    { id: "marketing", name: "Marketing & Sales", icon: "📈", style: "Persuasive, visual storytelling, emotional appeal" },
    { id: "general", name: "General Audience", icon: "👥", style: "Clear, engaging, accessible language" },
    { id: "stakeholders", name: "Stakeholders", icon: "🤝", style: "Project updates, milestones, risk mitigation" },
    { id: "clients", name: "Clients & Customers", icon: "⭐", style: "Benefits-focused, testimonials, case studies" },
];

const ANIMATION_STYLES = [
    { id: "professional", name: "Professional", description: "Subtle fade & slide transitions" },
    { id: "dynamic", name: "Dynamic", description: "Engaging animations with emphasis effects" },
    { id: "minimal", name: "Minimal", description: "Clean, simple transitions only" },
    { id: "impressive", name: "Impressive", description: "Bold animations, parallax, morphing effects" },
];

interface AttachedFile {
    id: string;
    name: string;
    type: string;
    size: number;
    content?: string;
    preview?: string;
    colors?: string[];
}

const ACCEPTED_FILE_TYPES = {
    documents: [".pdf", ".doc", ".docx", ".txt", ".rtf", ".md"],
    presentations: [".pptx", ".ppt", ".key", ".odp"],
    images: [".png", ".jpg", ".jpeg", ".svg", ".webp", ".gif"],
    data: [".json", ".csv", ".xlsx", ".xls"],
    design: [".ase", ".aco", ".gpl", ".css"], // Color palette formats
};

const ALL_ACCEPTED = Object.values(ACCEPTED_FILE_TYPES).flat().join(",");

export default function SlidesGenerator() {
    const {
        selectedProvider,
        selectedModels,
        availableModels,
        apiKeys,
        isProcessing,
        error,
        slidesPresentation,
        setSelectedProvider,
        setSlidesPresentation,
        setProcessing,
        setError,
        setAvailableModels,
        setSelectedModel,
        language: uiLanguage,
    } = useStore();

    const t = translations[uiLanguage].slidesGen;
    const common = translations[uiLanguage].common;

    const [topic, setTopic] = useState("");
    const [language, setLanguage] = useState("en");
    const [theme, setTheme] = useState("executive-dark");
    const [audience, setAudience] = useState("executives");
    const [organization, setOrganization] = useState("");
    const [slideCount, setSlideCount] = useState(10);
    const [animationStyle, setAnimationStyle] = useState("professional");
    const [copied, setCopied] = useState(false);
    const [currentSlide, setCurrentSlide] = useState(0);
    const [isFullscreen, setIsFullscreen] = useState(false);
    const [isAutoPlaying, setIsAutoPlaying] = useState(false);
    const [showAdvanced, setShowAdvanced] = useState(false);
    const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
    const [isDragOver, setIsDragOver] = useState(false);
    const [uploadProgress, setUploadProgress] = useState<string | null>(null);
    const slideContainerRef = useRef<HTMLDivElement>(null);
    const autoPlayRef = useRef<NodeJS.Timeout | null>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const slideFrameRef = useRef<HTMLIFrameElement>(null);

    const selectedModel = selectedModels[selectedProvider];
    const models = availableModels[selectedProvider] || modelAdapter.getAvailableModels(selectedProvider);

    useEffect(() => {
        if (typeof window !== "undefined") {
            loadAvailableModels();
            const saved = localStorage.getItem("promptarch-api-keys");
            if (saved) {
                try {
                    const keys = JSON.parse(saved);
                    if (keys.qwen) modelAdapter.updateQwenApiKey(keys.qwen);
                    if (keys.ollama) modelAdapter.updateOllamaApiKey(keys.ollama);
                    if (keys.zai) modelAdapter.updateZaiApiKey(keys.zai);
                } catch (e) {
                    console.error("Failed to load API keys:", e);
                }
            }
        }
    }, [selectedProvider]);

    useEffect(() => {
        if (isAutoPlaying && slidesPresentation?.slides) {
            autoPlayRef.current = setInterval(() => {
                setCurrentSlide((prev) =>
                    prev >= (slidesPresentation.slides.length - 1) ? 0 : prev + 1
                );
            }, 5000);
        }
        return () => {
            if (autoPlayRef.current) {
                clearInterval(autoPlayRef.current);
            }
        };
    }, [isAutoPlaying, slidesPresentation?.slides?.length]);

    const loadAvailableModels = async () => {
        const fallbackModels = modelAdapter.getAvailableModels(selectedProvider);
        setAvailableModels(selectedProvider, fallbackModels);

        try {
            const result = await modelAdapter.listModels(selectedProvider);
            if (result.success && result.data) {
                setAvailableModels(selectedProvider, result.data[selectedProvider] || fallbackModels);
            }
        } catch (error) {
            console.error("Failed to load models:", error);
        }
    };

    // Extract colors from image
    const extractColorsFromImage = (file: File): Promise<string[]> => {
        return new Promise((resolve) => {
            const img = document.createElement("img");
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");

            img.onload = () => {
                canvas.width = 50;
                canvas.height = 50;
                ctx?.drawImage(img, 0, 0, 50, 50);

                const imageData = ctx?.getImageData(0, 0, 50, 50);
                if (!imageData) {
                    resolve([]);
                    return;
                }

                const colorCounts: Record<string, number> = {};
                for (let i = 0; i < imageData.data.length; i += 4) {
                    const r = Math.round(imageData.data[i] / 32) * 32;
                    const g = Math.round(imageData.data[i + 1] / 32) * 32;
                    const b = Math.round(imageData.data[i + 2] / 32) * 32;
                    const hex = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
                    colorCounts[hex] = (colorCounts[hex] || 0) + 1;
                }

                const sortedColors = Object.entries(colorCounts)
                    .sort((a, b) => b[1] - a[1])
                    .slice(0, 5)
                    .map(([color]) => color);

                resolve(sortedColors);
                URL.revokeObjectURL(img.src);
            };

            img.src = URL.createObjectURL(file);
        });
    };

    // Process uploaded file
    const processFile = async (file: File): Promise<AttachedFile | null> => {
        const id = Math.random().toString(36).substr(2, 9);
        const ext = file.name.split(".").pop()?.toLowerCase() || "";

        const attachedFile: AttachedFile = {
            id,
            name: file.name,
            type: file.type || ext,
            size: file.size,
        };

        try {
            // Handle text-based files
            if ([...ACCEPTED_FILE_TYPES.documents, ".json", ".csv", ".css", ".md"].some(e => file.name.endsWith(e))) {
                const text = await file.text();
                attachedFile.content = text.slice(0, 50000); // Limit to 50KB of text

                // Extract colors from CSS files
                if (file.name.endsWith(".css")) {
                    const colorMatches = text.match(/#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)/g);
                    if (colorMatches) {
                        attachedFile.colors = [...new Set(colorMatches)].slice(0, 10);
                    }
                }

                // Parse JSON color palettes
                if (file.name.endsWith(".json")) {
                    try {
                        const json = JSON.parse(text);
                        if (json.colors || json.palette) {
                            attachedFile.colors = (json.colors || json.palette).slice(0, 10);
                        }
                    } catch { }
                }
            }

            // Handle images
            if (ACCEPTED_FILE_TYPES.images.some(e => file.name.toLowerCase().endsWith(e))) {
                attachedFile.preview = URL.createObjectURL(file);
                attachedFile.colors = await extractColorsFromImage(file);
            }

            // Handle presentations (extract text content if possible)
            if (ACCEPTED_FILE_TYPES.presentations.some(e => file.name.toLowerCase().endsWith(e))) {
                attachedFile.content = `[Presentation file: ${file.name}] - Analyze structure and content for redesign.`;
            }

            return attachedFile;
        } catch (err) {
            console.error("Error processing file:", err);
            return attachedFile;
        }
    };

    const handleFileDrop = useCallback(async (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragOver(false);

        const files = Array.from(e.dataTransfer.files);
        await handleFileUpload(files);
    }, []);

    const handleFileUpload = async (files: File[]) => {
        setUploadProgress("Processing files...");

        const newFiles: AttachedFile[] = [];
        for (const file of files) {
            setUploadProgress(`Processing ${file.name}...`);
            const processed = await processFile(file);
            if (processed) {
                newFiles.push(processed);
            }
        }

        setAttachedFiles(prev => [...prev, ...newFiles]);
        setUploadProgress(null);
    };

    const removeFile = (id: string) => {
        setAttachedFiles(prev => {
            const file = prev.find(f => f.id === id);
            if (file?.preview) {
                URL.revokeObjectURL(file.preview);
            }
            return prev.filter(f => f.id !== id);
        });
    };

    const getFileIcon = (type: string, name: string) => {
        if (name.match(/\.(png|jpg|jpeg|svg|webp|gif)$/i)) return <ImageIcon className="h-4 w-4" />;
        if (name.match(/\.(pdf|doc|docx|txt|md)$/i)) return <FileText className="h-4 w-4" />;
        if (name.match(/\.(pptx|ppt|key)$/i)) return <Presentation className="h-4 w-4" />;
        return <File className="h-4 w-4" />;
    };

    const buildFileContext = (): string => {
        if (attachedFiles.length === 0) return "";

        let context = "\n\n## ATTACHED FILES CONTEXT:\n";

        for (const file of attachedFiles) {
            context += `\n### File: ${file.name}\n`;

            if (file.colors && file.colors.length > 0) {
                context += `Brand Colors Extracted: ${file.colors.join(", ")}\n`;
                context += "USE THESE EXACT COLORS in the presentation design.\n";
            }

            if (file.content) {
                context += `Content:\n\`\`\`\n${file.content.slice(0, 10000)}\n\`\`\`\n`;
            }

            if (file.name.match(/\.(pptx|ppt|key)$/i)) {
                context += "This is an existing presentation - analyze its structure and REDESIGN with modern aesthetics while preserving the content flow.\n";
            }
        }

        return context;
    };

    const parseSlides = (content: string): SlidesPresentation | null => {
        try {
            const jsonMatch = content.match(/```(?:json)?\s*([\s\S]*?)```/);
            const jsonStr = jsonMatch ? jsonMatch[1].trim() : content.trim();
            const parsed = JSON.parse(jsonStr);

            if (parsed.slides && Array.isArray(parsed.slides)) {
                return {
                    id: Math.random().toString(36).substr(2, 9),
                    title: parsed.title || "Untitled Presentation",
                    subtitle: parsed.subtitle || "",
                    author: parsed.author || "",
                    organization: organization,
                    theme: parsed.theme || theme,
                    language: parsed.language || LANGUAGES.find(l => l.code === language)?.name || "English",
                    slides: parsed.slides.map((slide: any, index: number) => ({
                        id: slide.id || `slide-${index + 1}`,
                        title: slide.title || `Slide ${index + 1}`,
                        content: slide.content || "",
                        htmlContent: slide.htmlContent || generateAnimatedHtml(slide, index),
                        notes: slide.notes || "",
                        layout: slide.layout || "content",
                        order: slide.order || index + 1,
                    })),
                    rawContent: content,
                    createdAt: new Date(),
                    updatedAt: new Date(),
                };
            }
        } catch (e) {
            console.error("Failed to parse slides:", e);
        }
        return null;
    };

    const buildSlideDoc = (html: string): string => {
        const normalized = (html || "").trim();
        if (!normalized) return "";
        const isFullDoc = /^<!DOCTYPE/i.test(normalized) || /^<html/i.test(normalized);
        if (isFullDoc) {
            return normalized;
        }
        return `
            <!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <style>
                  html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
                  body { background: transparent; }
                </style>
              </head>
              <body>
                ${normalized}
              </body>
            </html>
        `;
    };

    const generateAnimatedHtml = (slide: any, index: number): string => {
        const themeConfig = THEMES.find(t => t.id === theme) || THEMES[1];
        const [bg, accent, secondary, text] = themeConfig.colors;
        const gradient = themeConfig.gradient;

        // Get brand colors from attached files if available
        const brandColors = attachedFiles.flatMap(f => f.colors || []).slice(0, 3);
        const primaryColor = brandColors[0] || accent;
        const secondaryColor = brandColors[1] || secondary;

        return `
      <div class="slide-container" style="
        min-height: 100%;
        padding: 4rem;
        background: ${gradient};
        color: ${text};
        font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
      ">
        <!-- Animated Background Elements -->
        <div style="
          position: absolute;
          top: -50%;
          right: -20%;
          width: 80%;
          height: 150%;
          background: radial-gradient(ellipse at center, ${primaryColor}15 0%, transparent 70%);
          animation: pulse 8s ease-in-out infinite;
        "></div>
        <div style="
          position: absolute;
          bottom: -30%;
          left: -10%;
          width: 60%;
          height: 100%;
          background: radial-gradient(ellipse at center, ${secondaryColor}10 0%, transparent 70%);
          animation: pulse 10s ease-in-out infinite reverse;
        "></div>
        
        <!-- Content -->
        <div style="position: relative; z-index: 2;">
          <h2 style="
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 2rem;
            line-height: 1.1;
            background: linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: slideIn 0.8s ease-out;
          ">${slide.title || `Slide ${index + 1}`}</h2>
          
          <div style="
            font-size: 1.35rem;
            line-height: 1.9;
            opacity: 0.95;
            max-width: 90%;
            animation: fadeIn 1s ease-out 0.3s both;
          ">
            ${slide.content || "Content goes here..."}
          </div>
        </div>

        <!-- Decorative Elements -->
        <div style="
          position: absolute;
          bottom: 3rem;
          right: 4rem;
          display: flex;
          gap: 0.5rem;
        ">
          <div style="width: 8px; height: 8px; border-radius: 50%; background: ${primaryColor}; opacity: 0.6;"></div>
          <div style="width: 8px; height: 8px; border-radius: 50%; background: ${secondaryColor}; opacity: 0.4;"></div>
          <div style="width: 8px; height: 8px; border-radius: 50%; background: ${text}; opacity: 0.2;"></div>
        </div>

        <style>
          @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.05); }
          }
          @keyframes slideIn {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
          }
          @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 0.95; transform: translateY(0); }
          }
        </style>
      </div>
    `;
    };

    const handleGenerate = async () => {
        if (!topic.trim()) {
            setError("Please enter a topic for your presentation");
            return;
        }

        const apiKey = apiKeys[selectedProvider];
        const isQwenOAuth = selectedProvider === "qwen" && modelAdapter.hasQwenAuth();

        if (!isQwenOAuth && (!apiKey || !apiKey.trim())) {
            setError(`Please configure your ${selectedProvider.toUpperCase()} API key in Settings`);
            return;
        }

        setProcessing(true);
        setError(null);
        setCurrentSlide(0);

        console.log("[SlidesGenerator] Starting animated slides generation...", {
            selectedProvider,
            selectedModel,
            topic,
            language,
            theme,
            animationStyle,
            attachedFilesCount: attachedFiles.length
        });

        try {
            const languageName = LANGUAGES.find(l => l.code === language)?.name || "English";
            const audienceConfig = AUDIENCES.find(a => a.id === audience);
            const animConfig = ANIMATION_STYLES.find(a => a.id === animationStyle);
            const themeConfig = THEMES.find(t => t.id === theme);
            const fileContext = buildFileContext();

            // Build enhanced topic with file context
            const enhancedTopic = `${topic}${fileContext}`;

            const result = await modelAdapter.generateSlides(
                enhancedTopic,
                {
                    language: languageName,
                    theme,
                    slideCount,
                    audience: audienceConfig?.name || "General Audience",
                    organization,
                    animationStyle: animConfig?.name,
                    audienceStyle: audienceConfig?.style,
                    themeColors: themeConfig?.colors,
                    brandColors: attachedFiles.flatMap(f => f.colors || []).slice(0, 5),
                },
                selectedProvider,
                selectedModel
            );

            console.log("[SlidesGenerator] Generation result:", result);

            if (result.success && result.data) {
                const presentation = parseSlides(result.data);
                if (presentation) {
                    setSlidesPresentation(presentation);
                } else {
                    setSlidesPresentation({
                        id: Math.random().toString(36).substr(2, 9),
                        title: topic.slice(0, 50),
                        subtitle: "",
                        organization,
                        theme: theme as any,
                        language: languageName,
                        slides: [{
                            id: "slide-1",
                            title: "Generated Content",
                            content: result.data,
                            htmlContent: `
                <div style="padding: 2rem; font-family: system-ui; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); min-height: 100%; color: #f8fafc;">
                  <pre style="white-space: pre-wrap; font-size: 0.875rem; opacity: 0.9;">${result.data}</pre>
                </div>
              `,
                            layout: "content",
                            order: 1,
                        }],
                        rawContent: result.data,
                        createdAt: new Date(),
                        updatedAt: new Date(),
                    });
                }
            } else {
                console.error("[SlidesGenerator] Generation failed:", result.error);
                setError(result.error || "Failed to generate slides");
            }
        } catch (err) {
            console.error("[SlidesGenerator] Generation error:", err);
            setError(err instanceof Error ? err.message : "An error occurred");
        } finally {
            setProcessing(false);
        }
    };

    const handleCopy = async () => {
        if (slidesPresentation?.rawContent) {
            await navigator.clipboard.writeText(slidesPresentation.rawContent);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        }
    };

    const handleDownloadHtml = () => {
        if (!slidesPresentation) return;

        const themeConfig = THEMES.find(t => t.id === slidesPresentation.theme) || THEMES[1];
        const [bg, accent, secondary, text] = themeConfig.colors;
        const brandColors = attachedFiles.flatMap(f => f.colors || []);
        const primaryColor = brandColors[0] || accent;
        const secondaryColor = brandColors[1] || secondary;

        const html = `<!DOCTYPE html>
<html lang="${language}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${slidesPresentation.title}</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', system-ui, sans-serif; 
      background: ${bg}; 
      color: ${text};
      overflow: hidden;
    }
    .slides-container { width: 100vw; height: 100vh; overflow: hidden; position: relative; }
    .slide { 
      width: 100%; 
      height: 100%; 
      display: none; 
      position: absolute;
      top: 0;
      left: 0;
    }
    .slide.active { 
      display: block; 
      animation: slideEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide.exit {
      animation: slideExit 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes slideEnter {
      from { opacity: 0; transform: translateX(40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideExit {
      from { opacity: 1; transform: translateX(0); }
      to { opacity: 0; transform: translateX(-40px); }
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.05); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .controls { 
      position: fixed; 
      bottom: 2rem; 
      left: 50%; 
      transform: translateX(-50%);
      display: flex; 
      gap: 1rem; 
      background: rgba(0,0,0,0.85); 
      backdrop-filter: blur(20px);
      padding: 0.875rem 1.75rem; 
      border-radius: 2rem;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      z-index: 100;
    }
    .controls button { 
      background: linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%);
      color: white; 
      border: none; 
      padding: 0.625rem 1.25rem;
      border-radius: 0.625rem; 
      cursor: pointer; 
      font-weight: 600;
      font-size: 0.875rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 15px ${primaryColor}40;
    }
    .controls button:hover { 
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 25px ${primaryColor}50;
    }
    .controls button:active {
      transform: translateY(0) scale(0.98);
    }
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, ${primaryColor}, ${secondaryColor});
      transition: width 0.3s ease;
      z-index: 100;
    }
    .slide-counter { 
      position: fixed; 
      bottom: 2rem; 
      right: 2rem; 
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(10px);
      padding: 0.625rem 1.25rem; 
      border-radius: 1rem; 
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid rgba(255,255,255,0.1);
      z-index: 100;
    }
    ${organization ? `
    .org-logo {
      position: fixed;
      top: 2rem;
      left: 2rem;
      font-weight: 700;
      font-size: 0.875rem;
      opacity: 0.6;
      z-index: 100;
    }` : ''}
  </style>
</head>
<body>
  <div class="progress-bar" id="progress"></div>
  ${organization ? `<div class="org-logo">${organization}</div>` : ''}
  <div class="slides-container">
    ${slidesPresentation.slides.map((slide, i) => `
      <div class="slide${i === 0 ? ' active' : ''}" data-slide="${i}">
        ${slide.htmlContent}
      </div>
    `).join('')}
  </div>
  <div class="controls">
    <button onclick="prevSlide()">← Prev</button>
    <button onclick="toggleAutoplay()" id="autoplayBtn">▶ Auto</button>
    <button onclick="nextSlide()">Next →</button>
  </div>
  <div class="slide-counter"><span id="current">1</span> / ${slidesPresentation.slides.length}</div>
  <script>
    let current = 0;
    let autoplay = null;
    const slides = document.querySelectorAll('.slide');
    const counter = document.getElementById('current');
    const progress = document.getElementById('progress');
    const autoplayBtn = document.getElementById('autoplayBtn');
    const total = slides.length;
    
    function updateProgress() {
      progress.style.width = ((current + 1) / total * 100) + '%';
    }
    
    function showSlide(n, direction = 1) {
      const prev = current;
      slides[prev].classList.add('exit');
      slides[prev].classList.remove('active');
      
      current = (n + total) % total;
      
      setTimeout(() => {
        slides[prev].classList.remove('exit');
        slides[current].classList.add('active');
      }, 400);
      
      counter.textContent = current + 1;
      updateProgress();
    }
    
    function nextSlide() { showSlide(current + 1, 1); }
    function prevSlide() { showSlide(current - 1, -1); }
    
    function toggleAutoplay() {
      if (autoplay) {
        clearInterval(autoplay);
        autoplay = null;
        autoplayBtn.textContent = '▶ Auto';
      } else {
        autoplay = setInterval(nextSlide, 5000);
        autoplayBtn.textContent = '⏸ Stop';
      }
    }
    
    document.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
      if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
      if (e.key === 'f' || e.key === 'F') document.documentElement.requestFullscreen?.();
      if (e.key === 'Escape' && document.fullscreenElement) document.exitFullscreen?.();
    });
    
    updateProgress();
  </script>
</body>
</html>`;

        const blob = new Blob([html], { type: "text/html" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = `${slidesPresentation.title.replace(/[^a-z0-9]/gi, '_')}_animated_presentation.html`;
        a.click();
        URL.revokeObjectURL(url);
    };

    const toggleFullscreen = () => {
        if (!slideContainerRef.current) return;

        if (!document.fullscreenElement) {
            slideContainerRef.current.requestFullscreen().catch(console.error);
            setIsFullscreen(true);
        } else {
            document.exitFullscreen();
            setIsFullscreen(false);
        }
    };

    const goToSlide = (index: number) => {
        if (slidesPresentation?.slides) {
            setCurrentSlide(Math.max(0, Math.min(index, slidesPresentation.slides.length - 1)));
        }
    };

    const formatFileSize = (bytes: number) => {
        if (bytes < 1024) return bytes + " B";
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
        return (bytes / (1024 * 1024)).toFixed(1) + " MB";
    };

    return (
        <div className="mx-auto grid max-w-7xl gap-4 lg:gap-6 grid-cols-1 xl:grid-cols-2 text-start">
            {/* Input Panel */}
            <Card className="h-fit">
                <CardHeader className="p-4 lg:p-6 text-start">
                    <CardTitle className="flex items-center gap-2 text-base lg:text-lg">
                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500 text-white shadow-lg shadow-violet-500/25">
                            <Sparkles className="h-4 w-4" />
                        </div>
                        <span>{t.title}</span>
                        <span className="ml-auto text-[10px] font-normal px-2 py-0.5 rounded-full bg-gradient-to-r from-amber-500/10 to-orange-500/10 text-amber-600 border border-amber-200/50">
                            PRO
                        </span>
                    </CardTitle>
                    <CardDescription className="text-xs lg:text-sm">
                        {t.description}
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4 lg:space-y-5 p-4 lg:p-6 pt-0 lg:pt-0">
                    {/* AI Provider Selection */}
                    <div className="space-y-2 text-start">
                        <label className="text-xs lg:text-sm font-medium">{common.aiProvider}</label>
                        <div className="flex flex-wrap gap-1.5 lg:gap-2">
                            {(["qwen", "ollama", "zai"] as const).map((provider) => (
                                <Button
                                    key={provider}
                                    variant={selectedProvider === provider ? "default" : "outline"}
                                    size="sm"
                                    onClick={() => setSelectedProvider(provider)}
                                    className="capitalize text-xs lg:text-sm h-8 lg:h-9 px-2.5 lg:px-3"
                                >
                                    {provider === "qwen" ? "Qwen" : provider === "ollama" ? "Ollama" : "Z.AI"}
                                </Button>
                            ))}
                        </div>
                    </div>

                    {/* Model Selection */}
                    <div className="space-y-2 text-start">
                        <label className="text-xs lg:text-sm font-medium">{common.model}</label>
                        <select
                            value={selectedModel}
                            onChange={(e) => setSelectedModel(selectedProvider, e.target.value)}
                            className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs lg:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        >
                            {models.map((model) => (
                                <option key={model} value={model}>
                                    {model}
                                </option>
                            ))}
                        </select>
                    </div>

                    {/* Topic Input */}
                    <div className="space-y-2 text-start">
                        <label className="text-xs lg:text-sm font-medium">{uiLanguage === "ru" ? "Тема презентации" : uiLanguage === "he" ? "נושא המצגת" : "Presentation Topic"}</label>
                        <Textarea
                            placeholder={t.placeholder}
                            value={topic}
                            onChange={(e) => setTopic(e.target.value)}
                            className="min-h-[100px] lg:min-h-[120px] resize-y text-sm"
                        />
                    </div>

                    {/* File Upload Zone */}
                    <div className="space-y-2 text-start">
                        <label className="text-xs lg:text-sm font-medium flex items-center gap-1.5">
                            <Upload className="h-3.5 w-3.5 text-blue-500" />
                            {t.attachFiles}
                            <span className="text-[10px] text-muted-foreground font-normal">({uiLanguage === "ru" ? "необязательно" : uiLanguage === "he" ? "אופציונלי" : "Optional"})</span>
                        </label>
                        <div
                            className={cn(
                                "relative border-2 border-dashed rounded-lg p-4 transition-all text-center",
                                isDragOver
                                    ? "border-violet-500 bg-violet-500/5"
                                    : "border-muted-foreground/25 hover:border-muted-foreground/50"
                            )}
                            onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
                            onDragLeave={() => setIsDragOver(false)}
                            onDrop={handleFileDrop}
                            onClick={() => fileInputRef.current?.click()}
                        >
                            <input
                                ref={fileInputRef}
                                type="file"
                                multiple
                                accept={ALL_ACCEPTED}
                                className="hidden"
                                onChange={(e) => e.target.files && handleFileUpload(Array.from(e.target.files))}
                            />
                            <div className="flex flex-col items-center gap-2 cursor-pointer">
                                <div className="p-3 rounded-full bg-muted/50">
                                    <Upload className="h-5 w-5 text-muted-foreground" />
                                </div>
                                <div>
                                    <p className="text-xs font-medium">
                                        {isDragOver ? "Drop files here" : "Drag & drop or click to upload"}
                                    </p>
                                    <p className="text-[10px] text-muted-foreground mt-0.5">
                                        PowerPoint, PDFs, Docs, Images, Color Palettes
                                    </p>
                                </div>
                            </div>
                        </div>

                        {uploadProgress && (
                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                <Loader2 className="h-3 w-3 animate-spin" />
                                {uploadProgress}
                            </div>
                        )}

                        {/* Attached Files List */}
                        {attachedFiles.length > 0 && (
                            <div className="space-y-1.5 mt-2">
                                {attachedFiles.map((file) => (
                                    <div
                                        key={file.id}
                                        className="flex items-center gap-2 p-2 rounded-md bg-muted/30 border text-xs group"
                                    >
                                        {file.preview ? (
                                            <img src={file.preview} alt="" className="w-8 h-8 rounded object-cover" />
                                        ) : (
                                            <div className="w-8 h-8 rounded bg-muted flex items-center justify-center">
                                                {getFileIcon(file.type, file.name)}
                                            </div>
                                        )}
                                        <div className="flex-1 min-w-0">
                                            <p className="font-medium truncate">{file.name}</p>
                                            <p className="text-[10px] text-muted-foreground">
                                                {formatFileSize(file.size)}
                                                {file.colors && file.colors.length > 0 && (
                                                    <span className="ml-2">
                                                        • {file.colors.length} colors extracted
                                                    </span>
                                                )}
                                            </p>
                                        </div>
                                        {file.colors && file.colors.length > 0 && (
                                            <div className="flex gap-0.5">
                                                {file.colors.slice(0, 4).map((color, i) => (
                                                    <div
                                                        key={i}
                                                        className="w-4 h-4 rounded-sm border border-white/20"
                                                        style={{ backgroundColor: color }}
                                                        title={color}
                                                    />
                                                ))}
                                            </div>
                                        )}
                                        <button
                                            onClick={(e) => { e.stopPropagation(); removeFile(file.id); }}
                                            className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
                                        >
                                            <X className="h-3.5 w-3.5" />
                                        </button>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Language & Theme Row */}
                    <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-2 text-start">
                            <label className="text-xs lg:text-sm font-medium flex items-center gap-1.5">
                                <Globe className="h-3.5 w-3.5 text-blue-500" />
                                {t.language}
                            </label>
                            <select
                                value={language}
                                onChange={(e) => setLanguage(e.target.value)}
                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs lg:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            >
                                {LANGUAGES.map((lang) => (
                                    <option key={lang.code} value={lang.code}>
                                        {lang.nativeName} ({lang.name})
                                    </option>
                                ))}
                            </select>
                        </div>

                        <div className="space-y-2">
                            <label className="text-xs lg:text-sm font-medium flex items-center gap-1.5">
                                <Palette className="h-3.5 w-3.5 text-purple-500" />
                                Theme
                            </label>
                            <select
                                value={theme}
                                onChange={(e) => setTheme(e.target.value)}
                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs lg:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            >
                                {THEMES.map((t) => (
                                    <option key={t.id} value={t.id}>
                                        {t.icon} {t.name}
                                    </option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* Animation Style */}
                    <div className="space-y-2 text-start">
                        <label className="text-xs lg:text-sm font-medium flex items-center gap-1.5">
                            <Zap className="h-3.5 w-3.5 text-amber-500" />
                            {t.animations}
                        </label>
                        <div className="grid grid-cols-2 gap-2">
                            {ANIMATION_STYLES.map((style) => (
                                <button
                                    key={style.id}
                                    onClick={() => setAnimationStyle(style.id)}
                                    className={cn(
                                        "p-2.5 rounded-lg border text-left transition-all",
                                        animationStyle === style.id
                                            ? "border-violet-500 bg-violet-500/10"
                                            : "border-muted hover:border-violet-300"
                                    )}
                                >
                                    <p className="text-xs font-medium">{style.name}</p>
                                    <p className="text-[10px] text-muted-foreground">{style.description}</p>
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* Advanced Options Toggle */}
                    <button
                        onClick={() => setShowAdvanced(!showAdvanced)}
                        className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
                    >
                        <Settings className="h-3.5 w-3.5" />
                        {showAdvanced ? (uiLanguage === "ru" ? "Скрыть" : uiLanguage === "he" ? "הסתר" : "Hide") : (uiLanguage === "ru" ? "Показать" : uiLanguage === "he" ? "הצג" : "Show")} {uiLanguage === "ru" ? "Раширенные настройки" : uiLanguage === "he" ? "אפשרויות מתקדמות" : "Advanced Options"}
                    </button>

                    {/* Advanced Options */}
                    {showAdvanced && (
                        <div className="space-y-3 p-3 rounded-lg bg-muted/30 border text-start">
                            <div className="grid grid-cols-2 gap-3">
                                <div className="space-y-2 text-start">
                                    <label className="text-xs font-medium flex items-center gap-1.5">
                                        <Users className="h-3.5 w-3.5 text-green-500" />
                                        {t.audience}
                                    </label>
                                    <select
                                        value={audience}
                                        onChange={(e) => setAudience(e.target.value)}
                                        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    >
                                        {AUDIENCES.map((a) => (
                                            <option key={a.id} value={a.id}>
                                                {a.icon} {a.name}
                                            </option>
                                        ))}
                                    </select>
                                </div>

                                <div className="space-y-2">
                                    <label className="text-xs font-medium flex items-center gap-1.5">
                                        <Hash className="h-3.5 w-3.5 text-orange-500" />
                                        Number of Slides
                                    </label>
                                    <select
                                        value={slideCount}
                                        onChange={(e) => setSlideCount(parseInt(e.target.value))}
                                        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    >
                                        {[5, 8, 10, 12, 15, 20, 25, 30].map((n) => (
                                            <option key={n} value={n}>{n} slides</option>
                                        ))}
                                    </select>
                                </div>
                            </div>

                            <div className="space-y-2">
                                <label className="text-xs font-medium flex items-center gap-1.5">
                                    <Building2 className="h-3.5 w-3.5 text-cyan-500" />
                                    Organization Name (Optional)
                                </label>
                                <input
                                    type="text"
                                    placeholder="e.g., Acme Corporation"
                                    value={organization}
                                    onChange={(e) => setOrganization(e.target.value)}
                                    className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                />
                            </div>

                            {/* Feature badges */}
                            <div className="flex flex-wrap gap-1.5 pt-2">
                                <span className="text-[10px] px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 border border-blue-200/50 flex items-center gap-1">
                                    <BarChart3 className="h-2.5 w-2.5" /> SVG Charts
                                </span>
                                <span className="text-[10px] px-2 py-0.5 rounded-full bg-purple-500/10 text-purple-600 border border-purple-200/50 flex items-center gap-1">
                                    <Sparkles className="h-2.5 w-2.5" /> Animations
                                </span>
                                <span className="text-[10px] px-2 py-0.5 rounded-full bg-green-500/10 text-green-600 border border-green-200/50 flex items-center gap-1">
                                    <TrendingUp className="h-2.5 w-2.5" /> Data Viz
                                </span>
                            </div>
                        </div>
                    )}

                    {/* Error Display */}
                    {error && (
                        <div className="rounded-md bg-destructive/10 p-2.5 lg:p-3 text-xs lg:text-sm text-destructive">
                            {error}
                            {!apiKeys[selectedProvider] && (
                                <div className="mt-1.5 lg:mt-2 flex items-center gap-2">
                                    <Settings className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
                                    <span className="text-[10px] lg:text-xs">Configure API key in Settings</span>
                                </div>
                            )}
                        </div>
                    )}

                    {/* Generate Button */}
                    <Button
                        onClick={handleGenerate}
                        disabled={isProcessing || !topic.trim()}
                        className="w-full h-10 lg:h-11 text-sm lg:text-base font-medium bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 hover:from-violet-700 hover:via-purple-700 hover:to-fuchsia-700 shadow-lg shadow-violet-500/25"
                    >
                        {isProcessing ? (
                            <>
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                {t.generating}
                            </>
                        ) : (
                            <>
                                <Sparkles className="mr-2 h-4 w-4" />
                                {t.generate}
                            </>
                        )}
                    </Button>
                </CardContent>
            </Card>

            {/* Preview Panel */}
            <Card className={cn("overflow-hidden", !slidesPresentation && "opacity-60")}>
                <CardHeader className="p-4 lg:p-6 pb-3">
                    <CardTitle className="flex items-center justify-between text-base lg:text-lg">
                        <span className="flex items-center gap-2">
                            <CheckCircle2 className={cn("h-4 w-4 lg:h-5 lg:w-5", slidesPresentation ? "text-green-500" : "text-muted-foreground")} />
                            {uiLanguage === "ru" ? "Предпросмотр слайдов" : uiLanguage === "he" ? "תצוגה מקדימה של השקופיות" : "Slide Preview"}
                        </span>
                        {slidesPresentation && (
                            <div className="flex items-center gap-1">
                                <Button variant="ghost" size="icon" onClick={() => setIsAutoPlaying(!isAutoPlaying)} className="h-8 w-8">
                                    {isAutoPlaying ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
                                </Button>
                                <Button variant="ghost" size="icon" onClick={toggleFullscreen} className="h-8 w-8">
                                    {isFullscreen ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
                                </Button>
                                <Button variant="ghost" size="icon" onClick={handleDownloadHtml} className="h-8 w-8">
                                    <Download className="h-3.5 w-3.5" />
                                </Button>
                                <Button variant="ghost" size="icon" onClick={handleCopy} className="h-8 w-8">
                                    {copied ? <CheckCircle2 className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
                                </Button>
                            </div>
                        )}
                    </CardTitle>
                    {slidesPresentation && (
                        <CardDescription className="text-xs lg:text-sm">
                            {slidesPresentation.title} • {slidesPresentation.slides.length} slides • {slidesPresentation.language}
                        </CardDescription>
                    )}
                </CardHeader>
                <CardContent className="p-4 lg:p-6 pt-0">
                    {slidesPresentation ? (
                        <div className="space-y-4">
                            {/* Slide Display */}
                            <div
                                ref={slideContainerRef}
                                className="relative aspect-video rounded-lg overflow-hidden border bg-slate-900 shadow-2xl"
                            >
                                <iframe
                                    ref={slideFrameRef}
                                    title="Slide Preview"
                                    className="absolute inset-0 w-full h-full border-none"
                                    sandbox="allow-scripts"
                                    srcDoc={buildSlideDoc(slidesPresentation.slides[currentSlide]?.htmlContent || "")}
                                />

                                {/* Navigation Arrows */}
                                <button
                                    onClick={() => goToSlide(currentSlide - 1)}
                                    disabled={currentSlide === 0}
                                    className="absolute left-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 disabled:opacity-30 disabled:cursor-not-allowed transition-all backdrop-blur-sm"
                                >
                                    <ChevronLeft className="h-5 w-5" />
                                </button>
                                <button
                                    onClick={() => goToSlide(currentSlide + 1)}
                                    disabled={currentSlide >= slidesPresentation.slides.length - 1}
                                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 disabled:opacity-30 disabled:cursor-not-allowed transition-all backdrop-blur-sm"
                                >
                                    <ChevronRight className="h-5 w-5" />
                                </button>

                                {/* Progress Bar */}
                                <div className="absolute top-0 left-0 right-0 h-1 bg-black/30">
                                    <div
                                        className="h-full bg-gradient-to-r from-violet-500 to-fuchsia-500 transition-all duration-300"
                                        style={{ width: `${((currentSlide + 1) / slidesPresentation.slides.length) * 100}%` }}
                                    />
                                </div>

                                {/* Slide Counter */}
                                <div className="absolute bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-black/60 text-white text-xs font-medium backdrop-blur-sm">
                                    {currentSlide + 1} / {slidesPresentation.slides.length}
                                </div>
                            </div>

                            {/* Slide Thumbnails */}
                            <div className="flex gap-2 overflow-x-auto pb-2">
                                {slidesPresentation.slides.map((slide, index) => (
                                    <button
                                        key={slide.id}
                                        onClick={() => setCurrentSlide(index)}
                                        className={cn(
                                            "flex-shrink-0 w-20 h-12 rounded border-2 overflow-hidden transition-all",
                                            currentSlide === index
                                                ? "border-violet-500 ring-2 ring-violet-500/30"
                                                : "border-muted hover:border-violet-300"
                                        )}
                                    >
                                        <div className="w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center text-[8px] text-white/70 font-medium">
                                            {index + 1}
                                        </div>
                                    </button>
                                ))}
                            </div>

                            {/* Current Slide Info */}
                            <div className="p-3 rounded-lg bg-muted/30 border">
                                <h4 className="font-medium text-sm mb-1">
                                    {slidesPresentation.slides[currentSlide]?.title}
                                </h4>
                                <p className="text-xs text-muted-foreground line-clamp-2">
                                    {slidesPresentation.slides[currentSlide]?.content}
                                </p>
                                {slidesPresentation.slides[currentSlide]?.notes && (
                                    <p className="text-xs text-blue-500 mt-2 italic">
                                        Notes: {slidesPresentation.slides[currentSlide]?.notes}
                                    </p>
                                )}
                            </div>
                        </div>
                    ) : (
                        <div className="flex h-[300px] lg:h-[400px] items-center justify-center text-center italic">
                            <div className="space-y-3">
                                <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20 flex items-center justify-center">
                                    <Sparkles className="h-8 w-8 text-violet-500/50" />
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-muted-foreground">{t.emptyState}</p>
                                    <p className="text-xs text-muted-foreground/70 mt-1">
                                        {uiLanguage === "ru" ? "Введите тему и создайте анимированные слайды" : uiLanguage === "he" ? "הזן נושא וחולל שקופיות אקטיביות" : "Enter a topic and generate your animated slides"}
                                    </p>
                                </div>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}