// InsightFlow Frontend - Phase 6 (API Platform)
const API_BASE = '/api/v1';

let currentProject = null;
let currentData = null;
let selectedEntity = null;
let projectRelations = [];
let projectEntities = [];
let entityDetailsCache = {};

// Graph Analysis State
let graphStats = null;
let centralityData = null;
let communitiesData = null;
let currentPathData = null;

// Init
document.addEventListener('DOMContentLoaded', () => {
    const isWorkbench = window.location.pathname.includes('workbench');
    if (isWorkbench) {
        initWorkbench();
    }
});

// Initialize workbench
async function initWorkbench() {
    const projectId = localStorage.getItem('currentProject');
    if (!projectId) {
        window.location.href = '/';
        return;
    }
    
    try {
        const projects = await fetchProjects();
        currentProject = projects.find(p => p.id === projectId);
        
        if (!currentProject) {
            localStorage.removeItem('currentProject');
            window.location.href = '/';
            return;
        }
        
        const nameEl = document.getElementById('projectName');
        if (nameEl) nameEl.textContent = currentProject.name;
        
        initUpload();
        initAgentPanel();
        initEntityCard();
        await loadProjectData();
        
    } catch (err) {
        console.error('Init failed:', err);
        alert('加载失败，请返回项目列表');
    }
}

// ==================== API Calls ====================

async function fetchProjects() {
    const res = await fetch(`${API_BASE}/projects`);
    if (!res.ok) throw new Error('Failed to fetch projects');
    return await res.json();
}

async function uploadAudio(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    const res = await fetch(`${API_BASE}/projects/${currentProject.id}/upload`, {
        method: 'POST',
        body: formData
    });
    
    if (!res.ok) throw new Error('Upload failed');
    return await res.json();
}

async function loadProjectData() {
    try {
        const [entitiesRes, relationsRes] = await Promise.all([
            fetch(`${API_BASE}/projects/${currentProject.id}/entities`),
            fetch(`${API_BASE}/projects/${currentProject.id}/relations`)
        ]);
        
        if (entitiesRes.ok) {
            projectEntities = await entitiesRes.json();
        }
        if (relationsRes.ok) {
            projectRelations = await relationsRes.json();
        }
        
        // 预加载实体详情
        await preloadEntityDetails();
        
        currentData = {
            transcript_id: 'project_view',
            project_id: currentProject.id,
            segments: [],
            entities: projectEntities,
            full_text: '',
            relations: projectRelations
        };
        
        renderTranscript();
        renderGraph();
        renderEntityList();
        
    } catch (err) {
        console.error('Load project data failed:', err);
    }
}

async function preloadEntityDetails() {
    const promises = projectEntities.slice(0, 20).map(async entity => {
        try {
            const res = await fetch(`${API_BASE}/entities/${entity.id}/details`);
            if (res.ok) {
                entityDetailsCache[entity.id] = await res.json();
            }
        } catch (e) {
            // Ignore errors
        }
    });
    await Promise.all(promises);
}

// ==================== View Switching ====================

window.switchView = function(viewName) {
    // Update sidebar buttons
    document.querySelectorAll('.sidebar-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    const views = {
        'workbench': 'workbenchView',
        'knowledge-base': 'knowledgeBaseView',
        'timeline': 'timelineView',
        'reasoning': 'reasoningView',
        'graph-analysis': 'graphAnalysisView',
        'api-keys': 'apiKeysView'
    };
    
    // Hide all views
    Object.values(views).forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.style.display = 'none';
            el.classList.remove('active', 'show');
        }
    });
    
    // Show selected view
    const targetId = views[viewName];
    if (targetId) {
        const targetEl = document.getElementById(targetId);
        if (targetEl) {
            targetEl.style.display = 'flex';
            targetEl.classList.add('active', 'show');
        }
    }
    
    // Update active button
    const btnMap = {
        'workbench': 0,
        'knowledge-base': 1,
        'timeline': 2,
        'reasoning': 3,
        'graph-analysis': 4,
        'api-keys': 5
    };
    const buttons = document.querySelectorAll('.sidebar-btn');
    if (buttons[btnMap[viewName]]) {
        buttons[btnMap[viewName]].classList.add('active');
    }
    
    // Load view-specific data
    if (viewName === 'knowledge-base') {
        loadKnowledgeBase();
    } else if (viewName === 'timeline') {
        loadTimeline();
    } else if (viewName === 'graph-analysis') {
        initGraphAnalysis();
    } else if (viewName === 'api-keys') {
        loadApiKeys();
    }
};

// ==================== Phase 6: API Key Management ====================

let apiKeysData = [];
let currentApiKeyId = null;

// Load API Keys
async function loadApiKeys() {
    try {
        const res = await fetch(`${API_BASE}/api-keys`);
        if (!res.ok) throw new Error('Failed to fetch API keys');
        const data = await res.json();
        apiKeysData = data.keys || [];
        renderApiKeys();
        updateApiKeyStats();
    } catch (err) {
        console.error('Failed to load API keys:', err);
        document.getElementById('apiKeysListContent').innerHTML = `
            <div class="api-key-empty">
                <p>加载失败: ${err.message}</p>
            </div>
        `;
    }
}

// Update API Key Stats
function updateApiKeyStats() {
    const total = apiKeysData.length;
    const active = apiKeysData.filter(k => k.status === 'active').length;
    const revoked = apiKeysData.filter(k => k.status === 'revoked').length;
    const totalCalls = apiKeysData.reduce((sum, k) => sum + (k.total_calls || 0), 0);
    
    document.getElementById('apiKeyTotalCount').textContent = total;
    document.getElementById('apiKeyActiveCount').textContent = active;
    document.getElementById('apiKeyRevokedCount').textContent = revoked;
    document.getElementById('apiKeyTotalCalls').textContent = totalCalls.toLocaleString();
}

// Render API Keys List
function renderApiKeys() {
    const container = document.getElementById('apiKeysListContent');
    
    if (apiKeysData.length === 0) {
        container.innerHTML = `
            <div class="api-key-empty">
                <p>暂无 API Keys</p>
                <button class="btn btn-small" onclick="showCreateApiKeyModal()" style="margin-top:12px;">创建第一个 API Key</button>
            </div>
        `;
        return;
    }
    
    container.innerHTML = apiKeysData.map(key => `
        <div class="api-key-item">
            <div>
                <div class="api-key-name">${escapeHtml(key.name)}</div>
                <div class="api-key-preview">${key.key_preview}</div>
            </div>
            <div class="api-key-permissions">
                ${key.permissions.map(p => `<span class="api-key-permission ${p}">${p}</span>`).join('')}
            </div>
            <div>${key.rate_limit}/min</div>
            <div>
                <span class="api-key-status ${key.status}">${key.status}</span>
            </div>
            <div>${key.total_calls || 0}</div>
            <div class="api-key-actions">
                ${key.status === 'active' ? `
                    <button class="api-key-btn" onclick="showApiKeyStats('${key.id}', '${escapeHtml(key.name)}')">统计</button>
                    <button class="api-key-btn danger" onclick="revokeApiKey('${key.id}')">撤销</button>
                ` : '<span style="color:#666;font-size:0.8rem;">已失效</span>'}
            </div>
        </div>
    `).join('');
}

// Show Create API Key Modal
window.showCreateApiKeyModal = function() {
    document.getElementById('apiKeyCreateModal').classList.add('show');
    document.getElementById('apiKeyName').value = '';
    document.getElementById('apiKeyName').focus();
};

// Hide Create API Key Modal
window.hideCreateApiKeyModal = function() {
    document.getElementById('apiKeyCreateModal').classList.remove('show');
};

// Create API Key
window.createApiKey = async function() {
    const name = document.getElementById('apiKeyName').value.trim();
    if (!name) {
        alert('请输入 API Key 名称');
        return;
    }
    
    const permissions = [];
    if (document.getElementById('permRead').checked) permissions.push('read');
    if (document.getElementById('permWrite').checked) permissions.push('write');
    if (document.getElementById('permDelete').checked) permissions.push('delete');
    
    if (permissions.length === 0) {
        alert('请至少选择一个权限');
        return;
    }
    
    const rateLimit = parseInt(document.getElementById('apiKeyRateLimit').value);
    const expiresDays = document.getElementById('apiKeyExpires').value;
    
    try {
        const res = await fetch(`${API_BASE}/api-keys`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name,
                permissions,
                rate_limit: rateLimit,
                expires_days: expiresDays ? parseInt(expiresDays) : null
            })
        });
        
        if (!res.ok) throw new Error('Failed to create API key');
        
        const data = await res.json();
        hideCreateApiKeyModal();
        
        // Show the created key
        document.getElementById('createdApiKeyValue').textContent = data.api_key;
        document.getElementById('apiKeyCreatedModal').classList.add('show');
        
        // Refresh list
        await loadApiKeys();
    } catch (err) {
        console.error('Failed to create API key:', err);
        alert('创建失败: ' + err.message);
    }
};

// Copy API Key to clipboard
window.copyApiKey = function() {
    const key = document.getElementById('createdApiKeyValue').textContent;
    navigator.clipboard.writeText(key).then(() => {
        showNotification('API Key 已复制到剪贴板', 'success');
    }).catch(() => {
        // Fallback
        const textarea = document.createElement('textarea');
        textarea.value = key;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showNotification('API Key 已复制到剪贴板', 'success');
    });
};

// Hide API Key Created Modal
window.hideApiKeyCreatedModal = function() {
    document.getElementById('apiKeyCreatedModal').classList.remove('show');
};

// Show API Key Stats
window.showApiKeyStats = async function(keyId, keyName) {
    currentApiKeyId = keyId;
    document.getElementById('apiKeyStatsTitle').textContent = `API Key 统计 - ${keyName}`;
    document.getElementById('apiKeyStatsModal').classList.add('show');
    
    try {
        const res = await fetch(`${API_BASE}/api-keys/${keyId}/stats?days=30`);
        if (!res.ok) throw new Error('Failed to fetch stats');
        
        const data = await res.json();
        
        // Update stats
        document.getElementById('statsTotalCalls').textContent = data.summary.total_calls.toLocaleString();
        document.getElementById('statsSuccessCalls').textContent = data.summary.success_calls.toLocaleString();
        document.getElementById('statsErrorCalls').textContent = data.summary.error_calls.toLocaleString();
        document.getElementById('statsAvgTime').textContent = Math.round(data.summary.avg_response_time_ms);
        
        // Render logs
        renderApiKeyLogs(data.logs || []);
    } catch (err) {
        console.error('Failed to load stats:', err);
        document.getElementById('apiKeyLogs').innerHTML = `
            <div class="api-key-empty">
                <p>加载统计失败</p>
            </div>
        `;
    }
};

// Render API Key Logs
function renderApiKeyLogs(logs) {
    const container = document.getElementById('apiKeyLogs');
    
    if (logs.length === 0) {
        container.innerHTML = `
            <div class="api-key-empty">
                <p>暂无调用记录</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = logs.map(log => `
        <div class="api-key-log-item">
            <div class="api-key-log-endpoint" title="${escapeHtml(log.endpoint)}">${escapeHtml(log.endpoint)}</div>
            <div class="api-key-log-method">${log.method}</div>
            <div class="api-key-log-status ${log.status_code < 400 ? 'success' : 'error'}">${log.status_code}</div>
            <div class="api-key-log-time">${log.response_time_ms}ms</div>
        </div>
    `).join('');
}

// Hide API Key Stats Modal
window.hideApiKeyStatsModal = function() {
    document.getElementById('apiKeyStatsModal').classList.remove('show');
    currentApiKeyId = null;
};

// Revoke API Key
window.revokeApiKey = async function(keyId) {
    if (!confirm('确定要撤销此 API Key 吗？撤销后将无法恢复。')) {
        return;
    }
    
    try {
        const res = await fetch(`${API_BASE}/api-keys/${keyId}`, {
            method: 'DELETE'
        });
        
        if (!res.ok) throw new Error('Failed to revoke API key');
        
        showNotification('API Key 已撤销', 'success');
        await loadApiKeys();
    } catch (err) {
        console.error('Failed to revoke API key:', err);
        alert('撤销失败: ' + err.message);
    }
};

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

// Show notification helper
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'success' ? 'rgba(0, 212, 255, 0.9)' : type === 'error' ? 'rgba(255, 107, 107, 0.9)' : '#333'};
        color: ${type === 'success' || type === 'error' ? '#000' : '#fff'};
        padding: 12px 20px;
        border-radius: 8px;
        z-index: 10000;
        font-size: 0.9rem;
        animation: slideIn 0.3s ease;
    `;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => {
            if (notification.parentNode) {
                document.body.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// Placeholder functions for other views
function initUpload() {}
function initAgentPanel() {}
function initEntityCard() {}
function renderTranscript() {}
function renderGraph() {}
function renderEntityList() {}
function loadKnowledgeBase() {}
function loadTimeline() {}
function initGraphAnalysis() {}