/**
 * n8n-install Welcome Page
 * Dynamic rendering of services and credentials from data.json
 * Supabase-inspired design
 */

(function() {
    'use strict';

    // Service metadata - hardcoded info about each service
    const SERVICE_METADATA = {
        'n8n': {
            name: 'n8n',
            description: 'Workflow Automation',
            icon: 'n8n',
            color: 'bg-orange-500',
            category: 'automation'
        },
        'flowise': {
            name: 'Flowise',
            description: 'AI Agent Builder',
            icon: 'FL',
            color: 'bg-blue-500',
            category: 'ai'
        },
        'open-webui': {
            name: 'Open WebUI',
            description: 'ChatGPT-like Interface',
            icon: 'AI',
            color: 'bg-emerald-500',
            category: 'ai'
        },
        'grafana': {
            name: 'Grafana',
            description: 'Monitoring Dashboard',
            icon: 'GF',
            color: 'bg-orange-600',
            category: 'monitoring'
        },
        'prometheus': {
            name: 'Prometheus',
            description: 'Metrics Collection',
            icon: 'PM',
            color: 'bg-red-500',
            category: 'monitoring'
        },
        'portainer': {
            name: 'Portainer',
            description: 'Docker Management UI',
            icon: 'PT',
            color: 'bg-cyan-500',
            category: 'infra'
        },
        'postgresus': {
            name: 'Postgresus',
            description: 'PostgreSQL Backups & Monitoring',
            icon: 'PG',
            color: 'bg-blue-600',
            category: 'database'
        },
        'langfuse': {
            name: 'Langfuse',
            description: 'AI Observability',
            icon: 'LF',
            color: 'bg-violet-500',
            category: 'ai'
        },
        'supabase': {
            name: 'Supabase',
            description: 'Backend as a Service',
            icon: 'SB',
            color: 'bg-emerald-500',
            category: 'database'
        },
        'dify': {
            name: 'Dify',
            description: 'AI Application Platform',
            icon: 'DF',
            color: 'bg-indigo-500',
            category: 'ai'
        },
        'qdrant': {
            name: 'Qdrant',
            description: 'Vector Database',
            icon: 'QD',
            color: 'bg-purple-500',
            category: 'database'
        },
        'weaviate': {
            name: 'Weaviate',
            description: 'Vector Database',
            icon: 'WV',
            color: 'bg-green-600',
            category: 'database'
        },
        'neo4j': {
            name: 'Neo4j',
            description: 'Graph Database',
            icon: 'N4',
            color: 'bg-blue-700',
            category: 'database'
        },
        'searxng': {
            name: 'SearXNG',
            description: 'Private Metasearch Engine',
            icon: 'SX',
            color: 'bg-teal-500',
            category: 'tools'
        },
        'ragapp': {
            name: 'RAGApp',
            description: 'RAG UI & API',
            icon: 'RA',
            color: 'bg-amber-500',
            category: 'ai'
        },
        'ragflow': {
            name: 'RAGFlow',
            description: 'Document Understanding RAG',
            icon: 'RF',
            color: 'bg-rose-500',
            category: 'ai'
        },
        'lightrag': {
            name: 'LightRAG',
            description: 'Graph-based RAG',
            icon: 'LR',
            color: 'bg-lime-600',
            category: 'ai'
        },
        'letta': {
            name: 'Letta',
            description: 'Agent Server & SDK',
            icon: 'LT',
            color: 'bg-fuchsia-500',
            category: 'ai'
        },
        'comfyui': {
            name: 'ComfyUI',
            description: 'Stable Diffusion UI',
            icon: 'CU',
            color: 'bg-pink-500',
            category: 'ai'
        },
        'libretranslate': {
            name: 'LibreTranslate',
            description: 'Translation API',
            icon: 'TR',
            color: 'bg-sky-500',
            category: 'tools'
        },
        'docling': {
            name: 'Docling',
            description: 'Document Converter',
            icon: 'DL',
            color: 'bg-stone-500',
            category: 'tools'
        },
        'paddleocr': {
            name: 'PaddleOCR',
            description: 'OCR API Server',
            icon: 'OC',
            color: 'bg-yellow-600',
            category: 'tools'
        },
        'postiz': {
            name: 'Postiz',
            description: 'Social Publishing Platform',
            icon: 'PZ',
            color: 'bg-violet-600',
            category: 'tools'
        },
        'waha': {
            name: 'WAHA',
            description: 'WhatsApp HTTP API',
            icon: 'WA',
            color: 'bg-green-700',
            category: 'tools'
        },
        'crawl4ai': {
            name: 'Crawl4AI',
            description: 'Web Crawler for AI',
            icon: 'C4',
            color: 'bg-gray-600',
            category: 'tools'
        },
        'gotenberg': {
            name: 'Gotenberg',
            description: 'PDF Generator API',
            icon: 'GT',
            color: 'bg-red-600',
            category: 'tools'
        },
        'ollama': {
            name: 'Ollama',
            description: 'Local LLM Runner',
            icon: 'OL',
            color: 'bg-gray-700',
            category: 'ai'
        },
        'redis': {
            name: 'Redis (Valkey)',
            description: 'In-Memory Data Store',
            icon: 'RD',
            color: 'bg-red-700',
            category: 'infra'
        },
        'postgres': {
            name: 'PostgreSQL',
            description: 'Relational Database',
            icon: 'PG',
            color: 'bg-blue-800',
            category: 'infra'
        },
        'python-runner': {
            name: 'Python Runner',
            description: 'Custom Python Scripts',
            icon: 'PY',
            color: 'bg-yellow-500',
            category: 'tools'
        },
        'cloudflare-tunnel': {
            name: 'Cloudflare Tunnel',
            description: 'Zero-Trust Network Access',
            icon: 'CF',
            color: 'bg-orange-500',
            category: 'infra'
        }
    };

    // Make commands data
    const COMMANDS = [
        { cmd: 'make status', desc: 'Show container status' },
        { cmd: 'make logs', desc: 'View logs (all services)' },
        { cmd: 'make logs s=<service>', desc: 'View logs for specific service' },
        { cmd: 'make monitor', desc: 'Live CPU/memory monitoring' },
        { cmd: 'make restarts', desc: 'Show restart count per container' },
        { cmd: 'make doctor', desc: 'Run system diagnostics' },
        { cmd: 'make update', desc: 'Update system and services' },
        { cmd: 'make update-preview', desc: 'Preview available updates' },
        { cmd: 'make clean', desc: 'Remove unused Docker resources' }
    ];

    // DOM Elements
    const servicesContainer = document.getElementById('services-container');
    const quickstartContainer = document.getElementById('quickstart-container');
    const commandsContainer = document.getElementById('commands-container');
    const domainInfo = document.getElementById('domain-info');
    const errorToast = document.getElementById('error-toast');
    const errorMessage = document.getElementById('error-message');

    /**
     * Create a copy button for any text
     */
    function createCopyButton(textToCopy) {
        const copyBtn = document.createElement('button');
        copyBtn.className = 'p-1.5 rounded-lg hover:bg-surface-400 transition-colors focus:outline-none focus:ring-2 focus:ring-brand/50';
        copyBtn.innerHTML = `
            <svg class="w-4 h-4 text-gray-500 hover:text-brand transition-colors copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
            </svg>
            <svg class="w-4 h-4 text-brand check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        `;
        copyBtn.title = 'Copy to clipboard';

        copyBtn.addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(textToCopy);
                const copyIcon = copyBtn.querySelector('.copy-icon');
                const checkIcon = copyBtn.querySelector('.check-icon');
                copyIcon.classList.add('hidden');
                checkIcon.classList.remove('hidden');
                setTimeout(() => {
                    copyIcon.classList.remove('hidden');
                    checkIcon.classList.add('hidden');
                }, 2000);
            } catch (err) {
                console.error('Failed to copy:', err);
            }
        });

        return copyBtn;
    }

    /**
     * Show error toast
     */
    function showError(message) {
        errorMessage.textContent = message;
        errorToast.classList.remove('hidden');
        setTimeout(() => {
            errorToast.classList.remove('translate-y-20', 'opacity-0');
        }, 10);

        setTimeout(() => {
            errorToast.classList.add('translate-y-20', 'opacity-0');
            setTimeout(() => errorToast.classList.add('hidden'), 300);
        }, 5000);
    }

    /**
     * Create password field with toggle and copy buttons
     */
    function createPasswordField(password) {
        const container = document.createElement('div');
        container.className = 'flex items-center gap-1';

        const passwordSpan = document.createElement('span');
        passwordSpan.className = 'font-mono text-sm select-all text-gray-300';
        passwordSpan.textContent = '*'.repeat(Math.min(password.length, 12));
        passwordSpan.dataset.password = password;
        passwordSpan.dataset.hidden = 'true';

        // Toggle visibility button (eye icon)
        const toggleBtn = document.createElement('button');
        toggleBtn.className = 'p-1.5 rounded-lg hover:bg-surface-400 transition-colors focus:outline-none focus:ring-2 focus:ring-brand/50';
        toggleBtn.innerHTML = `
            <svg class="w-4 h-4 text-gray-500 hover:text-brand transition-colors eye-open" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            <svg class="w-4 h-4 text-gray-500 hover:text-brand transition-colors eye-closed hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
            </svg>
        `;
        toggleBtn.title = 'Toggle visibility';

        // Toggle password visibility on click
        toggleBtn.addEventListener('click', () => {
            const isHidden = passwordSpan.dataset.hidden === 'true';
            const eyeOpen = toggleBtn.querySelector('.eye-open');
            const eyeClosed = toggleBtn.querySelector('.eye-closed');

            if (isHidden) {
                passwordSpan.textContent = passwordSpan.dataset.password;
                passwordSpan.dataset.hidden = 'false';
                eyeOpen.classList.add('hidden');
                eyeClosed.classList.remove('hidden');
            } else {
                passwordSpan.textContent = '*'.repeat(Math.min(password.length, 12));
                passwordSpan.dataset.hidden = 'true';
                eyeOpen.classList.remove('hidden');
                eyeClosed.classList.add('hidden');
            }
        });

        // Copy button
        const copyBtn = document.createElement('button');
        copyBtn.className = 'p-1.5 rounded-lg hover:bg-surface-400 transition-colors focus:outline-none focus:ring-2 focus:ring-brand/50';
        copyBtn.innerHTML = `
            <svg class="w-4 h-4 text-gray-500 hover:text-brand transition-colors copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
            </svg>
            <svg class="w-4 h-4 text-brand check-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        `;
        copyBtn.title = 'Copy to clipboard';

        copyBtn.addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(password);
                // Show checkmark
                const copyIcon = copyBtn.querySelector('.copy-icon');
                const checkIcon = copyBtn.querySelector('.check-icon');
                copyIcon.classList.add('hidden');
                checkIcon.classList.remove('hidden');
                // Revert after 2 seconds
                setTimeout(() => {
                    copyIcon.classList.remove('hidden');
                    checkIcon.classList.add('hidden');
                }, 2000);
            } catch (err) {
                console.error('Failed to copy:', err);
            }
        });

        container.appendChild(passwordSpan);
        container.appendChild(toggleBtn);
        container.appendChild(copyBtn);

        return container;
    }

    /**
     * Render a single service card
     */
    function renderServiceCard(key, serviceData) {
        const metadata = SERVICE_METADATA[key] || {
            name: key,
            description: '',
            icon: key.substring(0, 2).toUpperCase(),
            color: 'bg-gray-600'
        };

        const card = document.createElement('div');
        card.className = 'bg-surface-100 rounded-xl border border-surface-400 p-5 hover:border-brand/30 hover:bg-surface-200 transition-all';

        // Build credentials section
        let credentialsHtml = '';
        if (serviceData.credentials) {
            const creds = serviceData.credentials;

            if (creds.note) {
                credentialsHtml = `
                    <div class="mt-4 pt-4 border-t border-surface-400">
                        <p class="text-sm text-gray-500 italic">${escapeHtml(creds.note)}</p>
                    </div>
                `;
            } else {
                let fields = [];
                if (creds.username) {
                    fields.push(`
                        <div class="flex justify-between items-center" id="user-${key}">
                            <span class="text-gray-500 text-sm">Username:</span>
                            <div class="flex items-center gap-1">
                                <span class="font-mono text-sm select-all text-gray-300">${escapeHtml(creds.username)}</span>
                            </div>
                        </div>
                    `);
                }
                if (creds.password) {
                    fields.push(`
                        <div class="flex justify-between items-center" id="pwd-${key}">
                            <span class="text-gray-500 text-sm">Password:</span>
                        </div>
                    `);
                }
                if (creds.api_key) {
                    fields.push(`
                        <div class="flex justify-between items-center" id="api-${key}">
                            <span class="text-gray-500 text-sm">API Key:</span>
                        </div>
                    `);
                }

                if (fields.length > 0) {
                    credentialsHtml = `
                        <div class="mt-4 pt-4 border-t border-surface-400 space-y-2">
                            ${fields.join('')}
                        </div>
                    `;
                }
            }
        }

        // Build extra info section (internal URLs, etc.)
        let extraHtml = '';
        if (serviceData.extra) {
            const extraItems = [];
            const extra = serviceData.extra;

            if (extra.internal_api) {
                extraItems.push(`<span class="text-xs text-gray-600 font-mono">Internal: ${escapeHtml(extra.internal_api)}</span>`);
            }
            if (extra.internal_url) {
                extraItems.push(`<span class="text-xs text-gray-600 font-mono">Internal: ${escapeHtml(extra.internal_url)}</span>`);
            }
            if (extra.workers) {
                extraItems.push(`<span class="text-xs text-gray-600">Workers: ${escapeHtml(extra.workers)}</span>`);
            }
            if (extra.recommendation) {
                extraItems.push(`<span class="text-xs text-brand">${escapeHtml(extra.recommendation)}</span>`);
            }

            if (extraItems.length > 0) {
                extraHtml = `<div class="mt-2 flex flex-wrap gap-2">${extraItems.join('')}</div>`;
            }
        }

        card.innerHTML = `
            <div class="flex items-start gap-4">
                <div class="${metadata.color} w-11 h-11 rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0 shadow-lg">
                    ${metadata.icon}
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-white">${escapeHtml(metadata.name)}</h3>
                    <p class="text-sm text-gray-500 mb-2">${escapeHtml(metadata.description)}</p>
                    ${serviceData.hostname ? `
                        <a href="https://${escapeHtml(serviceData.hostname)}" target="_blank" rel="noopener"
                           class="text-brand hover:text-brand-400 text-sm font-medium inline-flex items-center gap-1 group transition-colors">
                            ${escapeHtml(serviceData.hostname)}
                            <svg class="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                        </a>
                    ` : '<span class="text-sm text-gray-600 italic">Internal service</span>'}
                    ${extraHtml}
                </div>
            </div>
            ${credentialsHtml}
        `;

        // Add password fields and copy buttons after card is created
        if (serviceData.credentials) {
            const creds = serviceData.credentials;

            setTimeout(() => {
                if (creds.username) {
                    const userContainer = card.querySelector(`#user-${key} .flex.items-center`);
                    if (userContainer) {
                        userContainer.appendChild(createCopyButton(creds.username));
                    }
                }
                if (creds.password) {
                    const pwdContainer = card.querySelector(`#pwd-${key}`);
                    if (pwdContainer) {
                        pwdContainer.appendChild(createPasswordField(creds.password));
                    }
                }
                if (creds.api_key) {
                    const apiContainer = card.querySelector(`#api-${key}`);
                    if (apiContainer) {
                        apiContainer.appendChild(createPasswordField(creds.api_key));
                    }
                }
            }, 0);
        }

        return card;
    }

    /**
     * Render all services
     */
    function renderServices(services) {
        servicesContainer.innerHTML = '';

        if (!services || Object.keys(services).length === 0) {
            servicesContainer.innerHTML = `
                <div class="col-span-full text-center py-12 text-gray-500">
                    <p>No services configured. Run the installer to set up services.</p>
                </div>
            `;
            return;
        }

        // Sort services: external first (with hostname), then internal
        const sortedKeys = Object.keys(services).sort((a, b) => {
            const aHasHostname = services[a].hostname ? 1 : 0;
            const bHasHostname = services[b].hostname ? 1 : 0;
            return bHasHostname - aHasHostname;
        });

        sortedKeys.forEach(key => {
            servicesContainer.appendChild(renderServiceCard(key, services[key]));
        });
    }

    /**
     * Render quick start steps
     */
    function renderQuickStart(steps) {
        quickstartContainer.innerHTML = '';

        if (!steps || steps.length === 0) {
            // Default steps if none provided
            steps = [
                { step: 1, title: 'Log into n8n', description: 'Use the email you provided during installation' },
                { step: 2, title: 'Create your first workflow', description: 'Start with a Manual Trigger + HTTP Request nodes' },
                { step: 3, title: 'Explore community workflows', description: 'Check imported workflows for 300+ examples' },
                { step: 4, title: 'Monitor your system', description: 'Use Grafana to track performance' }
            ];
        }

        steps.forEach(item => {
            const stepEl = document.createElement('div');
            stepEl.className = 'flex items-start gap-4 p-4 bg-surface-100 rounded-xl border border-surface-400 hover:border-brand/30 transition-all';

            stepEl.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-brand/20 border border-brand/30 text-brand flex items-center justify-center font-semibold text-sm flex-shrink-0">
                    ${item.step}
                </div>
                <div>
                    <h4 class="font-semibold text-white">${escapeHtml(item.title)}</h4>
                    <p class="text-sm text-gray-500">${escapeHtml(item.description)}</p>
                </div>
            `;

            quickstartContainer.appendChild(stepEl);
        });
    }

    /**
     * Render make commands
     */
    function renderCommands() {
        commandsContainer.innerHTML = '';

        const grid = document.createElement('div');
        grid.className = 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3';

        COMMANDS.forEach(item => {
            const cmdEl = document.createElement('div');
            cmdEl.className = 'flex flex-col gap-1 p-3 rounded-lg bg-surface-200/50 border border-surface-400 hover:border-brand/30 transition-all';

            cmdEl.innerHTML = `
                <code class="text-brand font-mono text-sm">${escapeHtml(item.cmd)}</code>
                <span class="text-gray-500 text-xs">${escapeHtml(item.desc)}</span>
            `;

            grid.appendChild(cmdEl);
        });

        commandsContainer.appendChild(grid);
    }

    /**
     * Escape HTML to prevent XSS
     */
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    /**
     * Load data and render page
     */
    async function init() {
        // Always render commands (static content)
        renderCommands();

        try {
            const response = await fetch('data.json');

            if (!response.ok) {
                throw new Error(`Failed to load data (${response.status})`);
            }

            const data = await response.json();

            // Update domain info
            if (data.domain) {
                domainInfo.textContent = `Domain: ${data.domain}`;
            }
            if (data.generated_at) {
                const date = new Date(data.generated_at);
                domainInfo.textContent += ` | Generated: ${date.toLocaleString()}`;
            }

            // Render services
            renderServices(data.services);

            // Render quick start
            renderQuickStart(data.quick_start);

        } catch (error) {
            console.error('Error loading data:', error);

            // Show error in UI
            servicesContainer.innerHTML = `
                <div class="col-span-full bg-red-900/20 border border-red-800/50 rounded-xl p-6 text-center">
                    <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                    <h3 class="font-semibold text-red-400 mb-2">Unable to load service data</h3>
                    <p class="text-sm text-red-300/80">Make sure the installation completed successfully and data.json was generated.</p>
                </div>
            `;

            // Still render default quick start
            renderQuickStart(null);
        }
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
