// --- OPTIMIZED SCRIPT FOR SAIFS AI UNIVERSE ---

// Performance optimization variables
let animationFrameId = null;
let isAnimating = false;
let lastTime = 0;
const FPS = 60;
const frameInterval = 1000 / FPS;

// Performance monitoring
const performanceMonitor = {
    startTime: performance.now(),
    frameCount: 0,
    lastFpsTime: performance.now(),

    update() {
        this.frameCount++;
        const now = performance.now();
        if (now - this.lastFpsTime >= 1000) {
            const fps = Math.round((this.frameCount * 1000) / (now - this.lastFpsTime));
            if (fps < 30) {
                console.warn(`Low FPS detected: ${fps}`);
            }
            this.frameCount = 0;
            this.lastFpsTime = now;
        }
    }
};

// Throttle function for performance
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// Debounce function for performance
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

document.addEventListener('DOMContentLoaded', () => {
    // --- PERFORMANCE DETECTION ---
    const isLowEndDevice = () => {
        // Only check for reduced motion preference (user accessibility setting)
        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            return true;
        }

        // Only reduce animations for very low memory devices (less than 2GB)
        if (navigator.deviceMemory && navigator.deviceMemory < 2) {
            return true;
        }

        return false;
    };

    const shouldReduceAnimations = isLowEndDevice();

    if (shouldReduceAnimations) {
        console.log('Reduced motion preference detected, reducing animations for accessibility');
        document.body.classList.add('reduced-motion');
    } else {
        console.log('Animations enabled for optimal experience');
    }

    // --- 1. SOLAR SYSTEM INITIALIZATION ---
    const aiTools = [
        { name: "Image Gen", fullName: "AI Image Generator", emoji: "🎨", color: "#ff6b6b", platforms: ["Canva", "Adobe", "Photoshop"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/image_generator_round_icon.png" },
        { name: "Upscaler", fullName: "AI Image Upscaler", emoji: "⬆️", color: "#4ecdc4", platforms: ["Photoshop", "Canva"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/image_upscaler_saifs_ai.png" },
        { name: "Video Gen", fullName: "AI Video Generator", emoji: "🎬", color: "#45b7d1", platforms: ["Adobe", "Canva"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/vid_gen_circle.png" },
        { name: "Img2Video", fullName: "Image to Video Converter", emoji: "🎞️", color: "#96ceb4", platforms: ["Adobe", "Photoshop"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/img2vid_circle.png " },
        { name: "Sound FX", fullName: "AI Sound Effects Generator", emoji: "🔊", color: "#ffeaa7", platforms: ["Adobe", "Microsoft"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/ai_sound_generator_saifs.png" },
        { name: "Try On", fullName: "AI Virtual Try-On", emoji: "👗", color: "#fd79a8", platforms: ["Canva", "Figma"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/try_on_saifs_ai.jpg" },
        { name: "Editor", fullName: "AI Photo Editor", emoji: "✂️", color: "#fdcb6e", platforms: ["Photoshop", "Adobe", "Canva"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/image_editor_ai_saifs.png" },
        { name: "Memes", fullName: "AI Meme Generator", emoji: "😂", color: "#6c5ce7", platforms: ["Canva", "Adobe"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/meme_gen_circle.png" },
        { name: "Painter", fullName: "AI Digital Painter", emoji: "🎯", color: "#a29bfe", platforms: ["Photoshop", "Canva"] },
        { name: "Reviewer", fullName: "AI Content Reviewer", emoji: "⭐", color: "#fd79a8", platforms: ["Google", "Microsoft"], image:"https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/img_rev_circle.png" },
        { name: "Music", fullName: "AI Music Generator", emoji: "🎵", color: "#00b894", platforms: ["Adobe", "Microsoft"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/ai_music_generator_saifs.png" },
        { name: "Songs", fullName: "AI Song Creator", emoji: "🎤", color: "#e17055", platforms: ["Adobe", "Google"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/lyrics_to_melody.png" },
        { name: "Lyrics", fullName: "AI Lyrics Writer", emoji: "📝", color: "#81ecec", platforms: ["Google", "Microsoft"] },
        { name: "TTS", fullName: "AI Text to Speech", emoji: "🗣️", color: "#fab1a0", platforms: ["Google", "Microsoft", "Adobe"], image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/mw_assets/text_to_speech_saifs_ai.png" },
        { name: "Voice Clone", fullName: "AI Voice Cloner", emoji: "🎭", color: "#00cec9", platforms: ["Adobe", "Google"] }
    ];

    // --- 2. TOOLTIP SYSTEM ---
    const tooltip = document.getElementById('tooltip');
    let tooltipTimeout;
    let showTooltipTimeout;

    function showTooltip(event, content) {
        // Clear any existing hide timeout
        clearTimeout(tooltipTimeout);

        // Add a small delay before showing tooltip to prevent flickering
        showTooltipTimeout = setTimeout(() => {
            tooltip.innerHTML = content;
            tooltip.classList.add('show');

            const rect = event.target.getBoundingClientRect();
            const solarSystemContainer = document.getElementById('solar-system');
            const containerRect = solarSystemContainer.getBoundingClientRect();

            // Position tooltip relative to the solar system container
            const x = rect.left + rect.width / 2 - containerRect.left;
            const y = rect.top - containerRect.top - 50;

            tooltip.style.left = x + 'px';
            tooltip.style.top = y + 'px';
            tooltip.style.transform = 'translateX(-50%)';

            // Ensure tooltip is visible
            tooltip.style.zIndex = '1000';
        }, 200); // 200ms delay before showing
    }

    function hideTooltip() {
        // Clear show timeout if tooltip hasn't been shown yet
        clearTimeout(showTooltipTimeout);

        tooltipTimeout = setTimeout(() => {
            tooltip.classList.remove('show');
        }, 100);
    }

    // --- 3. PLATFORM INTERACTIONS ---
    // Platform interactions are now handled in createPlatformsOrbit() function

    // --- 4. DYNAMIC PLATFORMS ORBIT ---
    function createPlatformsOrbit() {
        const platformsOrbit = document.querySelector('.platforms-orbit');
        if (!platformsOrbit) return;

        // Clear existing platforms
        platformsOrbit.innerHTML = '';

        // Determine responsive dimensions based on screen size
        const screenWidth = window.innerWidth;
        let radius, platformSize, offset;

        if (screenWidth <= 375) {
            // Very small screens (iPhone SE)
            radius = 60; // Half of 120px orbit
            platformSize = 25;
            offset = 12.5;
        } else if (screenWidth <= 430) {
            // iPhone XR, iPhone 12 Pro, iPhone 14 Pro Max
            radius = 70; // Half of 140px orbit
            platformSize = 28;
            offset = 14;
        } else if (screenWidth <= 575) {
            // Mobile portrait
            radius = 75; // Half of 150px orbit
            platformSize = 30;
            offset = 15;
        } else if (screenWidth <= 767) {
            // Mobile landscape
            radius = 90; // Half of 180px orbit
            platformSize = 35;
            offset = 17.5;
        } else if (screenWidth <= 991) {
            // Tablet portrait
            radius = 110; // Half of 220px orbit
            platformSize = 40;
            offset = 20;
        } else if (screenWidth <= 1199) {
            // Tablet landscape and small desktop
            radius = 140; // Half of 280px orbit
            platformSize = 50;
            offset = 25;
        } else {
            // Desktop and larger
            radius = 140; // Half of 280px orbit
            platformSize = 50;
            offset = 25;
        }

        // Platform data
        const platforms = [
            { name: "canva", displayName: "Canva", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/email_campaign/canva.png", gradient: "linear-gradient(45deg, #00c4cc, #7b68ee)" },
            { name: "adobe-express", displayName: "Adobe", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/email_campaign/adobe.png", gradient: "linear-gradient(45deg, #ff0000, #ff6600)" },
            { name: "photoshop", displayName: "Photoshop", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/ps_circle.png", gradient: "linear-gradient(45deg, #001e36, #31a8ff)" },
            { name: "google", displayName: "Google", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/google_circle.png", gradient: "white" },
            { name: "office", displayName: "Microsoft", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/email_campaign/microsoft.png", gradient: "linear-gradient(45deg, #d83b01, #0078d4)" },
            { name: "figma", displayName: "Figma", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/figma_circle.png", gradient: "white" },
            { name: "chatgpt", displayName: "ChatGPT", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/general_assets/gpt_circle.png", gradient: "linear-gradient(45deg, #10a37f, #1a7f64)" },
            { name: "claude", displayName: "Claude", image: "https://multiplewords.nyc3.cdn.digitaloceanspaces.com/email_campaign/claude.jpg", gradient: "linear-gradient(45deg, #d97706, #92400e)" }
        ];

        platforms.forEach((platform, index) => {
            const platformElement = document.createElement('div');
            platformElement.className = `platform ${platform.name}`;
            platformElement.style.position = 'absolute';

            // Calculate position on the orbit using trigonometry
            const angle = (index * 45) * (Math.PI / 180);
            const x = Math.cos(angle) * radius;
            const y = Math.sin(angle) * radius;

            platformElement.style.left = `calc(50% + ${x}px - ${offset}px)`;
            platformElement.style.top = `calc(50% + ${y}px - ${offset}px)`;
            platformElement.style.width = `${platformSize}px`;
            platformElement.style.height = `${platformSize}px`;

            // Create platform content
            platformElement.innerHTML = `
                <div class="platform-circle" style="background: ${platform.gradient};">
                    <img src="${platform.image}" alt="${platform.displayName}">
                </div>
                <div class="platform-text">${platform.displayName}</div>
            `;

            // Add counter-rotation to keep text readable
            const animationName = platform.name === 'adobe-express' ? 'counterRotateAdobeExpress' :
                                 `counterRotate${platform.name.charAt(0).toUpperCase() + platform.name.slice(1)}`;
            platformElement.style.animation = `${animationName} 35s linear infinite`;

            // Add hover effects
            platformElement.addEventListener('mouseenter', (e) => {
                const tooltipContent = `<strong>${platform.displayName}</strong>`;
                showTooltip(e, tooltipContent);
            });

            platformElement.addEventListener('mouseleave', hideTooltip);

            platformsOrbit.appendChild(platformElement);
        });
    }

    // --- 5. DYNAMIC TOOLS ORBIT ---
    function createToolsOrbit() {
        const toolsOrbit = document.getElementById('toolsOrbit');
        if (!toolsOrbit) return;

        // Clear existing tools
        toolsOrbit.innerHTML = '';

        // Determine responsive dimensions based on screen size
        const screenWidth = window.innerWidth;
        let toolsRadius, toolSize, toolOffset, maxTools;

        if (screenWidth <= 375) {
            // Very small screens (iPhone SE)
            toolsRadius = 90; // Half of 180px orbit
            toolSize = 25;
            toolOffset = 12.5;
            maxTools = 6;
        } else if (screenWidth <= 430) {
            // iPhone XR, iPhone 12 Pro, iPhone 14 Pro Max
            toolsRadius = 120; // Half of 240px orbit
            toolSize = 28;
            toolOffset = 14;
            maxTools = 7;
        } else if (screenWidth <= 575) {
            // Mobile portrait
            toolsRadius = 140; // Half of 280px orbit
            toolSize = 30;
            toolOffset = 15;
            maxTools = 8;
        } else if (screenWidth <= 767) {
            // Mobile landscape
            toolsRadius = 160; // Half of 320px orbit
            toolSize = 35;
            toolOffset = 17.5;
            maxTools = 9;
        } else if (screenWidth <= 991) {
            // Tablet portrait
            toolsRadius = 190; // Half of 380px orbit
            toolSize = 40;
            toolOffset = 20;
            maxTools = 10;
        } else if (screenWidth <= 1199) {
            // Tablet landscape and small desktop
            toolsRadius = 220; // Half of 440px orbit
            toolSize = 45;
            toolOffset = 22.5;
            maxTools = 11;
        } else {
            // Desktop and larger
            toolsRadius = 260; // Half of 520px orbit
            toolSize = 50;
            toolOffset = 25;
            maxTools = 12;
        }

        // Create tools for the outer orbit based on screen size
        const selectedTools = aiTools.slice(0, maxTools);

        selectedTools.forEach((tool, index) => {
            const toolElement = document.createElement('div');
            toolElement.className = 'platform ai-tool';
            toolElement.style.position = 'absolute';

             // Calculate position on the orbit (dynamic spacing based on number of tools)
             const angleStep = 360 / maxTools;
             const angle = (index * angleStep) * (Math.PI / 180);
             const x = Math.cos(angle) * toolsRadius;
             const y = Math.sin(angle) * toolsRadius;

            toolElement.style.left = `calc(50% + ${x}px - ${toolOffset}px)`;
            toolElement.style.top = `calc(50% + ${y}px - ${toolOffset}px)`;
            toolElement.style.setProperty('width', `${toolSize}px`, 'important');
            toolElement.style.setProperty('height', `${toolSize}px`, 'important');

             // Create tool content
             toolElement.innerHTML = `
                 <div class="platform-circle" style="background: linear-gradient(45deg, ${tool.color}, ${tool.color}dd);">
                     ${tool.image ?
                         `<img src="${tool.image}" alt="${tool.name}" style="width: 80%; height: 80%; object-fit: contain; border-radius: 50%;">` :
                         `<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;">${tool.emoji}</div>`
                     }
                 </div>
                 <div class="platform-text">${tool.name}</div>
             `;

             // Add counter-rotation to keep text readable
             toolElement.style.animation = 'counterRotateTools 30s linear infinite';

            // Add hover effects
            toolElement.addEventListener('mouseenter', (e) => {
                const tooltipContent = `<strong>${tool.fullName}</strong>`;
                showTooltip(e, tooltipContent);
            });

            toolElement.addEventListener('mouseleave', hideTooltip);

            toolsOrbit.appendChild(toolElement);
        });
    }

    // Initialize both orbits
    createPlatformsOrbit();
    createToolsOrbit();

    // --- 6. ANIMATION CONTROL ---
    function startAnimations() {
        if (shouldReduceAnimations) {
            // Disable animations for accessibility
            document.querySelectorAll('.platforms-orbit, .tools-orbit').forEach(orbit => {
                orbit.style.animation = 'none';
            });
            return;
        }

        // Start animations
        isAnimating = true;
        animate();
    }

    function animate() {
        if (!isAnimating) return;

        const now = performance.now();
        if (now - lastTime >= frameInterval) {
            performanceMonitor.update();
            lastTime = now;
        }

        animationFrameId = requestAnimationFrame(animate);
    }

    function stopAnimations() {
        isAnimating = false;
        if (animationFrameId) {
            cancelAnimationFrame(animationFrameId);
        }
    }

    // --- 7. RESPONSIVE HANDLING ---
    let lastViewportWidth = window.innerWidth;

    function handleResize() {
        const currentViewportWidth = window.innerWidth;

        // Only recreate orbits if viewport width changed significantly (breakpoint change)
        const breakpoints = [2560, 1920, 1200, 992, 768, 576, 430];
        const currentBreakpoint = breakpoints.find(bp => currentViewportWidth >= bp) || 0;
        const lastBreakpoint = breakpoints.find(bp => lastViewportWidth >= bp) || 0;

        if (currentBreakpoint !== lastBreakpoint) {
            // Breakpoint changed, recreate orbits
            createPlatformsOrbit();
            createToolsOrbit();
            lastViewportWidth = currentViewportWidth;
        }
    }

    // Throttled resize handler with breakpoint detection
    const throttledResize = throttle(handleResize, 100);
    window.addEventListener('resize', throttledResize);

    // --- 8. INITIALIZATION ---
    startAnimations();

    // --- 9. CLEANUP ---
    window.addEventListener('beforeunload', () => {
        stopAnimations();
        window.removeEventListener('resize', throttledResize);
    });

    // --- 10. ACCESSIBILITY ---
    // Pause animations when page is not visible
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            stopAnimations();
        } else {
            startAnimations();
        }
    });

    console.log('Saifs AI Universe initialized successfully');
});