// Workflow Builder JavaScript

// Global state
let workflowState = {
    steps: [],
    properties: {
        name: '',
        description: '',
        tags: []
    },
    components: {
        agents: [],
        commands: [],
        mcps: []
    }
};

// GitHub API configuration
const GITHUB_CONFIG = {
    owner: 'davila7',
    repo: 'claude-code-templates',
    branch: 'main'
};

// Initialize the workflow builder
document.addEventListener('DOMContentLoaded', async function() {
    showLoadingSpinner();

    try {
        await loadAllComponents();
        initializeDragAndDrop();
        initializeEventListeners();
        initializeModalEventListeners();
        initializeSortableSteps();
    } catch (error) {
        console.error('Error initializing Workflow Builder:', error);
        showError('Failed to load components. Please refresh the page.');
    } finally {
        hideLoadingSpinner();
    }
});

// Load all components from GitHub using the Git Trees API
async function loadAllComponents() {
    try {
        const response = await fetch('components.json');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const allComponents = await response.json();

        workflowState.components = {
            agents: allComponents.agents.sort((a, b) => a.path.localeCompare(b.path)),
            commands: allComponents.commands.sort((a, b) => a.path.localeCompare(b.path)),
            mcps: allComponents.mcps.sort((a, b) => a.path.localeCompare(b.path))
        };

        renderComponentsList('agents', workflowState.components.agents);
        renderComponentsList('commands', workflowState.components.commands);
        renderComponentsList('mcps', workflowState.components.mcps);

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

async function loadComponentsWithFallback() {
    const [agents, commands, mcps] = [
        getFallbackComponentData('agents'),
        getFallbackComponentData('commands'),
        getFallbackComponentData('mcps')
    ];
    workflowState.components = { agents, commands, mcps };
    renderComponentsList('agents', agents);
    renderComponentsList('commands', commands);
    renderComponentsList('mcps', mcps);
}

// Get fallback component data
function getFallbackComponentData(type) {
    const fallbackData = {
        agents: [
            { name: 'code-reviewer', path: 'development/code-reviewer', category: 'development', type: 'agent', icon: '🤖' },
            { name: 'documentation-writer', path: 'development/documentation-writer', category: 'development', type: 'agent', icon: '🤖' },
            { name: 'bug-hunter', path: 'development/bug-hunter', category: 'development', type: 'agent', icon: '🤖' },
            { name: 'security-auditor', path: 'security/security-auditor', category: 'security', type: 'agent', icon: '🤖' },
            { name: 'performance-optimizer', path: 'optimization/performance-optimizer', category: 'optimization', type: 'agent', icon: '🤖' }
        ],
        commands: [
            { name: 'git-setup', path: 'development/git-setup', category: 'development', type: 'command', icon: '⚡' },
            { name: 'project-init', path: 'development/project-init', category: 'development', type: 'command', icon: '⚡' },
            { name: 'docker-setup', path: 'devops/docker-setup', category: 'devops', type: 'command', icon: '⚡' },
            { name: 'test-runner', path: 'testing/test-runner', category: 'testing', type: 'command', icon: '⚡' },
            { name: 'build-pipeline', path: 'devops/build-pipeline', category: 'devops', type: 'command', icon: '⚡' }
        ],
        mcps: [
            { name: 'database-connector', path: 'database/database-connector', category: 'database', type: 'mcp', icon: '🔌' },
            { name: 'api-client', path: 'api/api-client', category: 'api', type: 'mcp', icon: '🔌' },
            { name: 'file-manager', path: 'system/file-manager', category: 'system', type: 'mcp', icon: '🔌' },
            { name: 'redis-cache', path: 'database/redis-cache', category: 'database', type: 'mcp', icon: '🔌' },
            { name: 'email-service', path: 'communication/email-service', category: 'communication', type: 'mcp', icon: '🔌' }
        ]
    };
    
    const typeKey = type;
    const data = fallbackData[typeKey] || [];
    return data;
}

// Get icon for component type
function getComponentIcon(type) {
    const icons = { 'agent': '🤖', 'command': '⚡', 'mcp': '🔌' };
    return icons[type] || '📦';
}

// Render components list in the UI
function renderComponentsList(type, components) {
    const container = document.getElementById(`${type}-tree`);
    const countElement = document.getElementById(`${type}-count`);
    
    if (!container || !countElement) return;
    
    countElement.textContent = components.length;
    container.innerHTML = '';
    
    const groupedComponents = components.reduce((acc, component) => {
        const category = component.category === 'root' ? 'general' : component.category;
        if (!acc[category]) acc[category] = [];
        acc[category].push(component);
        return acc;
    }, {});
    
    Object.entries(groupedComponents).forEach(([category, categoryComponents]) => {
        const folderElement = createTreeFolder(category, categoryComponents, type);
        container.appendChild(folderElement);
    });
}

// Create tree folder element
function createTreeFolder(category, components, type) {
    const folderElement = document.createElement('div');
    folderElement.className = 'tree-node';
    const folderId = `${type}-${category.replace(/[^a-z0-9]/gi, '_').toLowerCase()}`;
    
    folderElement.innerHTML = `
        <div class="tree-node-header" data-folder="${folderId}">
            <span class="tree-icon folder-icon">📁</span>
            <span class="tree-label">${category}</span>
            <span class="tree-count">${components.length}</span>
            <span class="tree-arrow">▶</span>
        </div>
        <div class="tree-children" id="${folderId}"></div>
    `;
    
    const childrenContainer = folderElement.querySelector('.tree-children');
    components.forEach(component => {
        const fileElement = createTreeFile(component);
        childrenContainer.appendChild(fileElement);
    });
    
    return folderElement;
}

// Create tree file element
function createTreeFile(component) {
    const element = document.createElement('div');
    element.className = 'tree-file';
    element.draggable = true;
    element.dataset.componentType = component.type;
    element.dataset.componentName = component.name;
    element.dataset.componentPath = component.path;
    element.dataset.componentCategory = component.category;
    
    element.innerHTML = `
        <div class="tree-file-header">
            <span class="tree-icon file-icon">${getFileIcon(component.type)}</span>
            <span class="tree-file-name">${component.name}</span>
            <div class="tree-file-actions">
                <button class="tree-action-btn" title="View Details" onclick="showComponentDetails('${component.type}', '${component.name}', '${component.path}', '${component.category}')">ℹ️</button>
                <button class="tree-action-btn" title="Add to Workflow" onclick="addComponentFromButton(event)">➕</button>
            </div>
        </div>
    `;
    return element;
}

// Get file icon based on type
function getFileIcon(type) {
    const icons = { 'agent': '📄', 'command': '⚡', 'mcp': '⚙️' };
    return icons[type] || '📄';
}

// Initialize drag and drop
function initializeDragAndDrop() {
    const workflowSteps = document.getElementById('workflowSteps');
    document.addEventListener('dragstart', (event) => {
        if (event.target.closest('.tree-file')) {
            handleDragStart(event);
        }
    });
    workflowSteps.addEventListener('dragover', handleDragOver);
    workflowSteps.addEventListener('drop', handleDrop);
    workflowSteps.addEventListener('dragenter', (e) => e.target.closest('.drop-zone')?.classList.add('drag-over'));
    workflowSteps.addEventListener('dragleave', (e) => e.target.closest('.drop-zone')?.classList.remove('drag-over'));
}

function handleDragStart(event) {
    const treeFile = event.target.closest('.tree-file');
    const componentData = { ...treeFile.dataset };
    event.dataTransfer.setData('application/json', JSON.stringify(componentData));
    event.dataTransfer.effectAllowed = 'copy';
}

function handleDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}

function handleDrop(event) {
    event.preventDefault();
    event.target.closest('.drop-zone')?.classList.remove('drag-over');
    try {
        const componentData = JSON.parse(event.dataTransfer.getData('application/json'));
        addWorkflowStep(componentData);
    } catch (error) {
        console.error('Error handling drop:', error);
    }
}

function addComponentFromButton(event) {
    const treeFile = event.target.closest('.tree-file');
    const componentData = { ...treeFile.dataset };
    addWorkflowStep(componentData);
}

function addWorkflowStep(componentData) {
    const step = {
        id: `step_${Date.now()}`,
        type: componentData.componentType,
        name: componentData.componentName,
        path: componentData.componentPath,
        category: componentData.componentCategory,
        description: `Execute ${componentData.componentName}`,
        icon: getComponentIcon(componentData.componentType)
    };
    workflowState.steps.push(step);
    renderWorkflowSteps();
    updateWorkflowStats();
}

function renderWorkflowSteps() {
    const container = document.getElementById('workflowSteps');
    const dropZone = container.querySelector('.drop-zone');
    const existingSteps = container.querySelectorAll('.workflow-step');
    existingSteps.forEach(step => step.remove());

    if (workflowState.steps.length > 0) {
        dropZone.style.display = 'none';
        workflowState.steps.forEach((step, index) => {
            const stepElement = document.createElement('div');
            stepElement.className = 'workflow-step';
            stepElement.dataset.stepId = step.id;
            stepElement.innerHTML = `
                <div class="step-number">${index + 1}</div>
                <div class="step-icon">${step.icon}</div>
                <div class="step-content">
                    <div class="step-name">${step.name}</div>
                    <div class="step-type">${step.type}</div>
                </div>
                <div class="step-actions">
                    <button class="step-action details" onclick="showComponentDetails('${step.type}', '${step.name}', '${step.path}', '${step.category}')">ℹ️</button>
                    <button class="step-action remove" onclick="removeStep('${step.id}')">🗑️</button>
                </div>
            `;
            container.appendChild(stepElement);
        });
    } else {
        dropZone.style.display = 'flex';
    }
    initializeSortableSteps();
}

function initializeSortableSteps() {
    const workflowSteps = document.getElementById('workflowSteps');
    if (workflowState.steps.length > 0) {
        new Sortable(workflowSteps, {
            animation: 150,
            onEnd: (evt) => {
                const movedStep = workflowState.steps.splice(evt.oldIndex, 1)[0];
                workflowState.steps.splice(evt.newIndex, 0, movedStep);
                renderWorkflowSteps();
            }
        });
    }
}

function removeStep(stepId) {
    workflowState.steps = workflowState.steps.filter(step => step.id !== stepId);
    renderWorkflowSteps();
    updateWorkflowStats();
}

function updateWorkflowStats() {
    const stats = { agents: 0, commands: 0, mcps: 0 };
    workflowState.steps.forEach(step => stats[step.type + 's']++);
    document.getElementById('agentCount').textContent = stats.agents;
    document.getElementById('commandCount').textContent = stats.commands;
    document.getElementById('mcpCount').textContent = stats.mcps;
    document.getElementById('totalSteps').textContent = workflowState.steps.length;
}

function initializeEventListeners() {
    document.getElementById('componentSearch').addEventListener('input', handleComponentSearch);
    document.getElementById('clearCanvas').addEventListener('click', clearWorkflow);
    document.getElementById('generateWorkflow').addEventListener('click', openPropertiesModal);
    document.getElementById('closePropertiesModal').addEventListener('click', closePropertiesModal);
    document.getElementById('saveWorkflowProperties').addEventListener('click', saveAndGenerateWorkflow);
    
    // Category accordion toggle
    document.querySelectorAll('.category-card-header').forEach(header => {
        header.addEventListener('click', () => {
            header.parentElement.classList.toggle('expanded');
        });
    });

    // Add event listener for sub-folders
    document.addEventListener('click', function(event) {
        const header = event.target.closest('.tree-node-header');
        if (header) {
            const children = header.nextElementSibling;
            if (children && children.classList.contains('tree-children')) {
                header.classList.toggle('expanded');
                children.classList.toggle('expanded');
            }
        }
    });
}

function handleComponentSearch(event) {
    const searchTerm = event.target.value.toLowerCase();
    document.querySelectorAll('.tree-file').forEach(file => {
        const match = file.dataset.componentName.toLowerCase().includes(searchTerm);
        file.style.display = match ? '' : 'none';
    });
}

function clearWorkflow() {
    if (confirm('Are you sure you want to clear the workflow?')) {
        workflowState.steps = [];
        renderWorkflowSteps();
        updateWorkflowStats();
    }
}

function openPropertiesModal() {
    if (workflowState.steps.length === 0) {
        showError('Add at least one component to the workflow.');
        return;
    }
    document.getElementById('propertiesModal').style.display = 'block';
}

function closePropertiesModal() {
    document.getElementById('propertiesModal').style.display = 'none';
}

function saveAndGenerateWorkflow() {
    workflowState.properties.name = document.getElementById('workflowName').value;
    workflowState.properties.description = document.getElementById('workflowDescription').value;
    workflowState.properties.tags = document.getElementById('workflowTags').value.split(',').map(t => t.trim());
    
    if (!workflowState.properties.name) {
        showError('Workflow name is required.');
        return;
    }
    
    closePropertiesModal();
    generateWorkflow();
}

async function generateWorkflow() {
    showLoadingSpinner();
    try {
        const workflowHash = await generateWorkflowHash();
        const yamlContent = generateWorkflowYAML();
        showGenerateModal(workflowHash, yamlContent);
    } catch (error) {
        console.error('Error generating workflow:', error);
    } finally {
        hideLoadingSpinner();
    }
}

async function generateWorkflowHash() {
    const dataString = JSON.stringify(workflowState);
    const hash = CryptoJS.SHA256(dataString).toString(CryptoJS.enc.Hex).substring(0, 12);
    localStorage.setItem(`workflow_${hash}`, dataString);
    return hash;
}

function generateWorkflowYAML() {
    return `# Workflow: ${workflowState.properties.name}\n` +
           `steps:\n` +
           workflowState.steps.map((step, i) => `  - step: ${i+1}\n    type: ${step.type}\n    name: "${step.name}"`).join('\n');
}

function showGenerateModal(hash, yaml) {
    document.getElementById('workflowCommand').textContent = `npx claude-code-templates@latest --workflow:#${hash}`;
    document.getElementById('yamlContent').textContent = yaml;
    document.getElementById('generateModal').style.display = 'block';
}

function showLoadingSpinner() { document.getElementById('loadingSpinner').style.display = 'flex'; }
function hideLoadingSpinner() { document.getElementById('loadingSpinner').style.display = 'none'; }
function showError(msg) { alert(msg); }

async function showComponentDetails(type, name, path, category) {
    const component = workflowState.components[type + 's'].find(c => c.name === name);
    if (!component) {
        console.warn('Component not found:', type, name);
        return;
    }

    showComponentModal(component);
}

// Show detailed component modal (recreated from original version)
function showComponentModal(component) {
    const typeConfig = {
        agent: { icon: '🤖', color: '#ff6b6b', label: 'AGENT' },
        command: { icon: '⚡', color: '#4ecdc4', label: 'COMMAND' },
        mcp: { icon: '🔌', color: '#45b7d1', label: 'MCP' }
    };
    
    const config = typeConfig[component.type];
    const installCommand = generateInstallCommand(component);
    
    const modalHTML = `
        <div class="modal-overlay" onclick="closeComponentModal()">
            <div class="modal-content component-modal" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <div class="component-modal-title">
                        <span class="component-icon" style="color: ${config.color}">${config.icon}</span>
                        <h3>${formatComponentName(component.name)}</h3>
                        <span class="component-type-badge" style="background: ${config.color}">${config.label}</span>
                    </div>
                    <button class="modal-close" onclick="closeComponentModal()">×</button>
                </div>
                <div class="modal-body">
                    <div class="component-details">
                        <div class="component-description">
                            ${getComponentDescription(component)}
                        </div>
                        
                        <div class="installation-section">
                            <h4>📦 Installation</h4>
                            <div class="command-line">
                                <code>${installCommand}</code>
                                <button class="copy-btn" onclick="copyToClipboard('${installCommand}')">Copy</button>
                            </div>
                        </div>
                        
                        <div class="component-content">
                            <h4>📋 Component Details</h4>
                            <div class="component-preview">
                                <pre><code>${component.content ? component.content.substring(0, 500) + (component.content.length > 500 ? '...' : '') : 'No content available.'}</code></pre>
                            </div>
                        </div>
                        
                        <div class="modal-actions">
                            <button class="github-folder-link" onclick="viewOnGitHub('${component.path}')">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                                View on GitHub
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.querySelector('.modal-overlay');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

// Helper functions for the modal
function formatComponentName(name) {
    return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

function generateInstallCommand(component) {
    return `npx claude-code-templates@latest --${component.type} "${component.path}"`;
}

function getComponentDescription(component) {
    if (!component.content) {
        return 'No description available.';
    }
    
    // Try to extract description from frontmatter
    const descMatch = component.content.match(/description:\s*(.+?)(?:\n|$)/);
    if (descMatch) {
        return descMatch[1].trim().replace(/^["']|["']$/g, '');
    }
    
    // Use first paragraph if no frontmatter description
    const lines = component.content.split('\n');
    const firstParagraph = lines.find(line => line.trim() && !line.startsWith('---') && !line.startsWith('#'));
    if (firstParagraph) {
        return firstParagraph.trim();
    }
    
    return 'No description available.';
}

function viewOnGitHub(path) {
    const url = `https://github.com/davila7/claude-code-templates/tree/main/${path}`;
    window.open(url, '_blank');
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showSuccess('Command copied to clipboard!');
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}

function closeComponentModal() {
    const modalOverlay = document.querySelector('.modal-overlay');
    if (modalOverlay) {
        modalOverlay.remove();
    }
}

function initializeModalEventListeners() {
    // Component modal event listeners
    document.getElementById('closeComponentModal').addEventListener('click', closeComponentModal);
    document.getElementById('closeComponentModalBtn').addEventListener('click', closeComponentModal);
    document.getElementById('addComponentToWorkflow').addEventListener('click', () => {
        const componentData = JSON.parse(document.getElementById('componentModal').dataset.currentComponent);
        addWorkflowStep({
            componentType: componentData.type,
            componentName: componentData.name,
            componentPath: componentData.path,
            componentCategory: componentData.category
        });
        closeComponentModal();
    });
    document.getElementById('copyUsageCommand').addEventListener('click', () => {
        const command = document.getElementById('componentModalUsage').textContent;
        navigator.clipboard.writeText(command).then(() => showSuccess('Command copied!'));
    });

    // Generate modal event listeners
    const closeModal = document.getElementById('closeModal');
    if (closeModal) {
        closeModal.addEventListener('click', () => {
            document.getElementById('generateModal').style.display = 'none';
        });
    }

    const copyCommand = document.getElementById('copyCommand');
    if (copyCommand) {
        copyCommand.addEventListener('click', () => {
            const command = document.getElementById('workflowCommand').textContent;
            navigator.clipboard.writeText(command).then(() => showSuccess('Command copied!'));
        });
    }

    const copyYaml = document.getElementById('copyYaml');
    if (copyYaml) {
        copyYaml.addEventListener('click', () => {
            const yaml = document.getElementById('yamlContent').textContent;
            navigator.clipboard.writeText(yaml).then(() => showSuccess('YAML copied!'));
        });
    }

    // Close modals when clicking outside
    window.addEventListener('click', (event) => {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    });
}

function showSuccess(message) {
    // Simple success notification
    const notification = document.createElement('div');
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #10b981;
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        z-index: 10000;
        font-family: system-ui, -apple-system, sans-serif;
    `;
    document.body.appendChild(notification);
    setTimeout(() => {
        document.body.removeChild(notification);
    }, 2000);
}

// Add functions to window object for inline event handlers
window.removeStep = removeStep;
window.showComponentDetails = showComponentDetails;
window.addComponentFromButton = addComponentFromButton;