// Demo Workflow JavaScript
// This file provides a comprehensive demo of the Mycelium Dashboard functionality

class DemoWorkflow {
    constructor() {
        this.currentStep = 0;
        this.steps = [
            {
                title: "Welcome to Mycelium Dashboard Demo",
                description: "This demo will showcase the complete interactive functionality of the Mycelium ecosystem.",
                action: () => this.showWelcome()
            },
            {
                title: "Application Provider: Register New Application",
                description: "Let's start by registering a new application as an Application Provider.",
                action: () => this.demoAppRegistration()
            },
            {
                title: "Service Provider: Create New Service",
                description: "Now let's create a new service offering as a Service Provider.",
                action: () => this.demoServiceCreation()
            },
            {
                title: "Marketplace Integration",
                description: "See how your apps and services automatically appear in the marketplace.",
                action: () => this.demoMarketplaceIntegration()
            },
            {
                title: "User: Deploy Application",
                description: "As a user, let's deploy an application from the marketplace.",
                action: () => this.demoAppDeployment()
            },
            {
                title: "ResourceProvider: Node Management",
                description: "Manage your farming nodes and monitor capacity.",
                action: () => this.demoNodeManagement()
            },
            {
                title: "Cross-Dashboard Integration",
                description: "See how actions in one dashboard affect others in real-time.",
                action: () => this.demoCrossIntegration()
            },
            {
                title: "Demo Complete",
                description: "You've seen the complete Mycelium ecosystem in action!",
                action: () => this.showCompletion()
            }
        ];
        this.initializeDemo();
    }

    initializeDemo() {
        this.createDemoUI();
        this.bindEvents();
    }

    createDemoUI() {
        // Create demo control panel
        const demoPanel = document.createElement('div');
        demoPanel.id = 'demo-panel';
        demoPanel.className = 'demo-panel';
        demoPanel.style.cssText = `
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: white;
            border: 2px solid #007bff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 10000;
            max-width: 400px;
            font-family: 'Poppins', sans-serif;
        `;

        demoPanel.innerHTML = `
            <div class="demo-header">
                <h5 class="mb-2">🚀 Mycelium Demo</h5>
                <div class="progress mb-3" style="height: 6px;">
                    <div class="progress-bar bg-primary" id="demo-progress" role="progressbar" style="width: 0%"></div>
                </div>
            </div>
            <div class="demo-content">
                <h6 id="demo-title">Welcome to Mycelium Dashboard Demo</h6>
                <p id="demo-description" class="text-muted small">This demo will showcase the complete interactive functionality of the Mycelium ecosystem.</p>
            </div>
            <div class="demo-controls mt-3">
                <button class="btn btn-primary btn-sm me-2" id="demo-next">Start Demo</button>
                <button class="btn btn-outline-secondary btn-sm me-2" id="demo-prev" disabled>Previous</button>
                <button class="btn btn-outline-danger btn-sm" id="demo-close">Close</button>
            </div>
        `;

        document.body.appendChild(demoPanel);
    }

    bindEvents() {
        document.getElementById('demo-next').addEventListener('click', () => this.nextStep());
        document.getElementById('demo-prev').addEventListener('click', () => this.prevStep());
        document.getElementById('demo-close').addEventListener('click', () => this.closeDemo());
    }

    nextStep() {
        if (this.currentStep < this.steps.length - 1) {
            this.currentStep++;
            this.executeStep();
        }
    }

    prevStep() {
        if (this.currentStep > 0) {
            this.currentStep--;
            this.executeStep();
        }
    }

    executeStep() {
        const step = this.steps[this.currentStep];
        
        // Update UI
        document.getElementById('demo-title').textContent = step.title;
        document.getElementById('demo-description').textContent = step.description;
        
        // Update progress
        const progress = ((this.currentStep + 1) / this.steps.length) * 100;
        document.getElementById('demo-progress').style.width = `${progress}%`;
        
        // Update buttons
        document.getElementById('demo-prev').disabled = this.currentStep === 0;
        const nextBtn = document.getElementById('demo-next');
        if (this.currentStep === this.steps.length - 1) {
            nextBtn.textContent = 'Finish';
        } else {
            nextBtn.textContent = 'Next';
        }
        
        // Execute step action
        step.action();
    }

    showWelcome() {
        showNotification('Welcome to the Mycelium Dashboard Demo! 🎉', 'info');
    }

    demoAppRegistration() {
        showNotification('Demo: Navigating to App Provider dashboard...', 'info');
        
        setTimeout(() => {
            if (window.location.pathname !== '/dashboard/application-provider') {
                showNotification('Please navigate to the App Provider dashboard to continue the demo', 'warning');
                return;
            }
            
            // Simulate clicking the register app button
            const registerBtn = document.querySelector('[data-bs-target="#registerAppModal"]');
            if (registerBtn) {
                registerBtn.click();
                
                setTimeout(() => {
                    // Fill in demo data
                    this.fillAppRegistrationForm();
                }, 500);
            }
        }, 1000);
    }

    fillAppRegistrationForm() {
        const formData = {
            appName: 'Demo Secure Chat App',
            appDesc: 'A decentralized, end-to-end encrypted chat application built for the Mycelium Grid',
            appCategory: 'communication',
            appType: 'container',
            appRepo: 'https://github.com/demo/secure-chat',
            minCPU: '2',
            minRAM: '4',
            minStorage: '10',
            pricingType: 'subscription',
            priceAmount: '15'
        };

        Object.entries(formData).forEach(([key, value]) => {
            const element = document.getElementById(key);
            if (element) {
                element.value = value;
                element.dispatchEvent(new Event('change'));
            }
        });

        // Check self-healing
        const selfHealingCheckbox = document.getElementById('selfHealing');
        if (selfHealingCheckbox) {
            selfHealingCheckbox.checked = true;
        }

        showNotification('Demo form filled! Click "Register Application" to continue.', 'success');
    }

    demoServiceCreation() {
        showNotification('Demo: Navigating to Service Provider dashboard...', 'info');
        
        setTimeout(() => {
            if (window.location.pathname !== '/dashboard/service-provider') {
                showNotification('Please navigate to the Service Provider dashboard to continue the demo', 'warning');
                return;
            }
            
            // Simulate clicking the create service button
            const createBtn = document.querySelector('[data-bs-target="#createServiceModal"]');
            if (createBtn) {
                createBtn.click();
                
                setTimeout(() => {
                    // Fill in demo data
                    this.fillServiceCreationForm();
                }, 500);
            }
        }, 1000);
    }

    fillServiceCreationForm() {
        const formData = {
            serviceName: 'Demo Mycelium Migration Service',
            serviceDesc: 'Professional migration service to help businesses move their workloads to the Mycelium Grid with zero downtime',
            serviceCategory: 'migration',
            serviceDelivery: 'hybrid',
            pricingType: 'hourly',
            priceAmount: '85',
            serviceExperience: 'expert',
            availableHours: '30',
            responseTime: '4',
            serviceSkills: 'Docker, Kubernetes, Mycelium Grid, Cloud Migration, DevOps'
        };

        Object.entries(formData).forEach(([key, value]) => {
            const element = document.getElementById(key);
            if (element) {
                element.value = value;
                element.dispatchEvent(new Event('change'));
            }
        });

        showNotification('Demo form filled! Click "Create Service" to continue.', 'success');
    }

    demoMarketplaceIntegration() {
        showNotification('Demo: Your apps and services are now available in the marketplace!', 'success');
        
        setTimeout(() => {
            showNotification('Navigate to /marketplace/applications or /marketplace/services to see your listings', 'info');
        }, 2000);
    }

    demoAppDeployment() {
        showNotification('Demo: Simulating app deployment from marketplace...', 'info');
        
        // Simulate marketplace purchase
        const purchaseEvent = new CustomEvent('marketplacePurchase', {
            detail: {
                name: 'Demo Secure Chat App',
                provider_name: 'Demo Provider',
                price: 15
            }
        });
        document.dispatchEvent(purchaseEvent);
    }

    demoNodeManagement() {
        showNotification('Demo: Simulating resource_provider node management...', 'info');
        
        setTimeout(() => {
            // Simulate node status change
            const nodeEvent = new CustomEvent('nodeStatusChange', {
                detail: {
                    node: { id: 'TF-DEMO-001' },
                    oldStatus: 'Online',
                    newStatus: 'Maintenance'
                }
            });
            document.dispatchEvent(nodeEvent);
        }, 1000);
    }

    demoCrossIntegration() {
        showNotification('Demo: Showing cross-dashboard integration...', 'info');
        
        setTimeout(() => {
            // Simulate deployment status change
            const deploymentEvent = new CustomEvent('deploymentStatusChange', {
                detail: {
                    deployment: { app_name: 'Demo Secure Chat App' },
                    oldStatus: 'Deploying',
                    newStatus: 'Active'
                }
            });
            document.dispatchEvent(deploymentEvent);
        }, 1000);

        setTimeout(() => {
            // Simulate new client request
            const clientEvent = new CustomEvent('newClientRequest', {
                detail: {
                    client_name: 'Demo Client Corp'
                }
            });
            document.dispatchEvent(clientEvent);
        }, 2000);
    }

    showCompletion() {
        showNotification('🎉 Demo completed! You\'ve experienced the full Mycelium ecosystem.', 'success');
        
        setTimeout(() => {
            this.closeDemo();
        }, 3000);
    }

    closeDemo() {
        const demoPanel = document.getElementById('demo-panel');
        if (demoPanel) {
            demoPanel.remove();
        }
        showNotification('Demo closed. Explore the dashboards on your own!', 'info');
    }
}

// Auto-start demo if URL parameter is present
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('demo') === 'true') {
        setTimeout(() => {
            new DemoWorkflow();
        }, 2000); // Wait for page to fully load
    }
});

// Add demo starter button to all dashboard pages (currently hidden)
document.addEventListener('DOMContentLoaded', function() {
    // Demo button is temporarily hidden
    // Uncomment the code below to re-enable the Start Demo button
    /*
    if (window.location.pathname.includes('/dashboard/')) {
        const demoButton = document.createElement('button');
        demoButton.className = 'btn btn-outline-primary btn-sm demo-starter';
        demoButton.innerHTML = '🚀 Start Demo';
        demoButton.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9998;
        `;
        
        demoButton.addEventListener('click', () => {
            new DemoWorkflow();
        });
        
        document.body.appendChild(demoButton);
    }
    */
});

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = DemoWorkflow;
}