// Navigation
const navLinks = document.querySelectorAll('.nav-link');
const pages = document.querySelectorAll('.page');

navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetPage = link.dataset.page;
        
        // Update active nav link
        navLinks.forEach(l => l.classList.remove('active'));
        link.classList.add('active');
        
        // Show target page
        pages.forEach(page => {
            page.classList.remove('active');
            if (page.id === `page-${targetPage}`) {
                page.classList.add('active');
            }
        });
        
        // Load page data
        if (targetPage === 'wiki') loadWiki();
        if (targetPage === 'agents') loadAgents();
        if (targetPage === 'usage') loadUsage();
    });
});

// Task Dashboard
const COLUMNS = {
    'Backlog': { title: '📋 Backlog', tasks: [] },
    'Todo': { title: '📝 Todo', tasks: [] },
    'In Progress': { title: '🔄 In Progress', tasks: [] },
    'Review': { title: '👀 Review', tasks: [] },
    'Done': { title: '✅ Done', tasks: [] }
};

async function loadTasks() {
    const res = await fetch('/api/tasks');
    const tasks = await res.json();
    
    // Reset columns
    Object.keys(COLUMNS).forEach(status => {
        COLUMNS[status].tasks = [];
    });
    
    // Group tasks by status
    tasks.forEach(task => {
        if (COLUMNS[task.status]) {
            COLUMNS[task.status].tasks.push(task);
        }
    });
    
    renderBoard();
}

function renderBoard() {
    const board = document.getElementById('board');
    board.innerHTML = '';
    
    Object.entries(COLUMNS).forEach(([status, column]) => {
        const columnEl = document.createElement('div');
        columnEl.className = 'column';
        
        columnEl.innerHTML = `
            <div class="column-header">
                <h3>${column.title}</h3>
                <span class="column-count">${column.tasks.length}</span>
            </div>
            <div class="cards"></div>
        `;
        
        const cardsEl = columnEl.querySelector('.cards');
        
        column.tasks.forEach(task => {
            const cardEl = document.createElement('div');
            cardEl.className = 'card';
            cardEl.innerHTML = `
                <div class="card-head">
                    <h3 class="card-title">${escapeHtml(task.title)}</h3>
                    <span class="badge priority-${task.priority}">${task.priority}</span>
                </div>
                <p class="card-desc">${escapeHtml(task.description || '')}</p>
                <p class="meta assignee">${task.assignee || 'Unassigned'}</p>
                <p class="meta tags">${task.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
                <label>
                    <input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
                    Mark Complete
                </label>
            `;
            
            // Checkbox handler
            const checkbox = cardEl.querySelector('.card-check');
            checkbox.addEventListener('change', async () => {
                await fetch(`/api/tasks/${task.id}`, {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: 'Done' })
                });
                loadTasks();
            });
            
            cardsEl.appendChild(cardEl);
        });
        
        board.appendChild(columnEl);
    });
}

// Task form
document.getElementById('task-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const task = {
        title: formData.get('title'),
        description: formData.get('description'),
        assignee: formData.get('assignee'),
        priority: formData.get('priority'),
        status: formData.get('status'),
        tags: formData.get('tags').split(',').map(t => t.trim()).filter(t => t)
    };
    
    await fetch('/api/tasks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(task)
    });
    
    e.target.reset();
    loadTasks();
});

// Populate agent dropdown
async function populateAgentDropdown() {
    try {
        const res = await fetch('/api/agents');
        const agents = await res.json();
        
        const select = document.getElementById('assignee');
        if (!select) return;
        
        // Keep the first option ("Select agent...")
        const firstOption = select.options[0];
        select.innerHTML = '';
        select.appendChild(firstOption);
        
        // Add agent options
        agents.forEach(agent => {
            const option = document.createElement('option');
            option.value = agent.name;
            option.textContent = agent.name;
            select.appendChild(option);
        });
    } catch (err) {
        console.error('Failed to load agents for dropdown:', err);
    }
}

// Populate dropdown on page load
document.addEventListener('DOMContentLoaded', () => {
    populateAgentDropdown();
});

// Wiki
async function loadWiki() {
    const res = await fetch('/api/wiki');
    const pages = await res.json();
    
    const wikiList = document.getElementById('wiki-list');
    wikiList.innerHTML = '';
    
    pages.forEach(page => {
        const itemEl = document.createElement('div');
        itemEl.className = 'wiki-item';
        itemEl.innerHTML = `
            <h4 class="wiki-title">${escapeHtml(page.filename.replace('.md', ''))}</h4>
            <p class="wiki-date">${new Date(page.created).toLocaleDateString()}</p>
        `;
        
        itemEl.addEventListener('click', async () => {
            // Mark active
            wikiList.querySelectorAll('.wiki-item').forEach(i => i.classList.remove('active'));
            itemEl.classList.add('active');
            
            // Load content
            const contentRes = await fetch(`/api/wiki/${page.filename}`);
            const contentData = await contentRes.json();
            
            const wikiContent = document.getElementById('wiki-content');
            wikiContent.innerHTML = `<pre>${escapeHtml(contentData.content)}</pre>`;
        });
        
        wikiList.appendChild(itemEl);
    });
}

// Agents
async function loadAgents() {
    const res = await fetch('/api/agents');
    const agents = await res.json();
    
    const grid = document.getElementById('agents-grid');
    grid.innerHTML = '';
    
    agents.forEach(agent => {
        const cardEl = document.createElement('div');
        cardEl.className = 'agent-card';
        
        cardEl.innerHTML = `
            <div class="agent-header">
                <h3 class="agent-name">${escapeHtml(agent.name)}</h3>
                <span class="agent-status">${agent.status}</span>
            </div>
            <div class="agent-body">
                <div class="agent-section">
                    <h4>📋 Current Task</h4>
                    <p class="agent-task">${agent.currentTask || 'No active task'}</p>
                </div>
                <div class="agent-section">
                    <h4>🛠️ Tools</h4>
                    <div class="agent-tools">
                        ${agent.tools.map(tool => `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('')}
                    </div>
                </div>
                <div class="agent-section">
                    <h4>📄 Workspace Files</h4>
                    <div class="agent-files">
                        ${agent.files.map(file => `<span class="file-tag">${escapeHtml(file)}</span>`).join('')}
                    </div>
                </div>
            </div>
        `;
        
        grid.appendChild(cardEl);
    });
}

// Usage
async function loadUsage() {
    const res = await fetch('/api/usage');
    const usage = await res.json();
    
    const usageData = document.getElementById('usage-data');
    usageData.innerHTML = `
        <h3>📊 Provider Usage</h3>
        <div class="usage-grid">
            ${usage.providers.map(provider => `
                <div class="provider-card">
                    <h4>${escapeHtml(provider.name)}</h4>
                    <div class="model-list">
                        ${provider.models.map(model => `
                            <div class="model-item">
                                <span class="model-name">${escapeHtml(model.name)}</span>
                                <span class="model-type">${escapeHtml(model.type)}</span>
                                <span class="model-context">${escapeHtml(model.contextWindow)}</span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `).join('')}
        </div>
    `;
}

// Helper function to escape HTML
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

// Initial load
loadTasks();