"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() {
    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 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 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"
                        >
                            <div
                                className="absolute inset-0"
                                dangerouslySetInnerHTML={{
                                    __html: 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>
);
}
