{% extends "base.html" %}

{% block title %}Dashboard - AI Coding Agent System{% endblock %}

{% block content %}
<div class="row">
    <!-- Welcome Section -->
    <div class="col-12 mb-4">
        <div class="card border-0 bg-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <div class="card-body text-white">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="display-6 fw-bold mb-3">
                            <i class="fas fa-robot me-3"></i>
                            AI Coding Agent System
                        </h1>
                        <p class="lead mb-0">
                            Autonomous multi-agent development platform powered by AI
                        </p>
                    </div>
                    <div class="col-md-4 text-center">
                        <a href="/new-project" class="btn btn-light btn-lg">
                            <i class="fas fa-plus me-2"></i>
                            Start New Project
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="col-12 mb-4">
        <div class="row" id="statsRow">
            <div class="col-md-3 mb-3">
                <div class="card text-center border-0 shadow-sm">
                    <div class="card-body">
                        <div class="text-primary mb-2">
                            <i class="fas fa-folder fa-2x"></i>
                        </div>
                        <h3 class="card-title" id="totalProjects">-</h3>
                        <p class="card-text text-muted">Total Projects</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-center border-0 shadow-sm">
                    <div class="card-body">
                        <div class="text-success mb-2">
                            <i class="fas fa-play fa-2x"></i>
                        </div>
                        <h3 class="card-title" id="activeSessions">-</h3>
                        <p class="card-text text-muted">Active Sessions</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-center border-0 shadow-sm">
                    <div class="card-body">
                        <div class="text-info mb-2">
                            <i class="fas fa-check fa-2x"></i>
                        </div>
                        <h3 class="card-title" id="completedTasks">-</h3>
                        <p class="card-text text-muted">Completed Tasks</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-center border-0 shadow-sm">
                    <div class="card-body">
                        <div class="text-warning mb-2">
                            <i class="fas fa-code fa-2x"></i>
                        </div>
                        <h3 class="card-title" id="filesGenerated">-</h3>
                        <p class="card-text text-muted">Files Generated</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Task Progress Heatmap -->
    <div class="col-12 mb-4">
        <div class="heatmap-container" id="task-heatmap">
            <div class="heatmap-loading">
                <i class="fas fa-spinner-third"></i>
                <span class="ms-2">Loading heatmap...</span>
            </div>
        </div>
    </div>

    <!-- Recent Projects -->
    <div class="col-md-8 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock me-2 text-primary"></i>
                        Recent Projects
                    </h5>
                    <a href="/projects" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
            </div>
            <div class="card-body">
                <div id="recentProjects">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Loading projects...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Status -->
    <div class="col-md-4 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="card-title mb-0">
                    <i class="fas fa-heartbeat me-2 text-success"></i>
                    System Status
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded">
                            <i class="fas fa-users text-primary fa-2x mb-2"></i>
                            <h6>Agents</h6>
                            <span class="badge bg-success" id="agentStatus">6 Active</span>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded">
                            <i class="fas fa-database text-info fa-2x mb-2"></i>
                            <h6>Database</h6>
                            <span class="badge bg-success" id="dbStatus">Connected</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3 bg-light rounded">
                            <i class="fas fa-cogs text-warning fa-2x mb-2"></i>
                            <h6>Workflow</h6>
                            <span class="badge bg-success" id="workflowStatus">Ready</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3 bg-light rounded">
                            <i class="fas fa-code-branch text-secondary fa-2x mb-2"></i>
                            <h6>Git</h6>
                            <span class="badge bg-success" id="gitStatus">Ready</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="card-title mb-0">
                    <i class="fas fa-bolt me-2 text-warning"></i>
                    Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-primary w-100" data-action="create-project">
                            <i class="fas fa-folder-plus fa-2x d-block mb-2"></i>
                            Create Project
                        </button>
                    </div>
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-success w-100" data-action="run-task">
                            <i class="fas fa-play fa-2x d-block mb-2"></i>
                            Run Task
                        </button>
                    </div>
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-info w-100" data-action="view-logs">
                            <i class="fas fa-list fa-2x d-block mb-2"></i>
                            View Logs
                        </button>
                    </div>
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-secondary w-100" data-action="settings">
                            <i class="fas fa-cog fa-2x d-block mb-2"></i>
                            Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Task Execution Modal -->
<div class="modal fade" id="taskModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-play me-2"></i>
                    Quick Task Execution
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="quickTaskForm">
                    <div class="mb-3">
                        <label for="taskDescription" class="form-label">Task Description</label>
                        <textarea class="form-control" id="taskDescription" rows="3" 
                                  placeholder="Describe what you want the AI agents to build..."></textarea>
                    </div>
                    
                    <!-- Image Upload Section -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-image me-2 text-success"></i>
                            Images (Optional - for vision-capable models)
                        </label>
                        <div id="imageUploadArea" class="upload-area border-2 border-dashed rounded p-4 text-center">
                            <div class="upload-content">
                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                <p class="mb-2">Drag and drop images here, or <strong>click to browse</strong></p>
                                <small class="text-muted">Supports: JPG, PNG, GIF • Max size: 10MB per image</small>
                            </div>
                            <input type="file" id="imageInput" accept="image/*" multiple style="display: none;">
                        </div>
                        
                        <!-- Uploaded Images Preview -->
                        <div id="uploadedImages" class="mt-3" style="display: none;">
                            <h6 class="mb-2">
                                <i class="fas fa-images me-2"></i>
                                Uploaded Images
                            </h6>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="projectSelect" class="form-label">Project (Optional)</label>
                        <select class="form-select" id="projectSelect">
                            <option value="">Create new project</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="executeQuickTask()">
                    <i class="fas fa-rocket me-2"></i>
                    Execute Task
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
/* Image Upload Styling */
.upload-area {
    border: 2px dashed #dee2e6;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #28a745;
    background-color: #e8f5e9;
}

.upload-area.dragover {
    border-color: #28a745;
    background-color: #e8f5e9;
    transform: scale(1.02);
}

.upload-progress {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.uploaded-image {
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

.uploaded-image:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#uploadedImages:not(:empty) {
    display: block !important;
    max-height: 200px;
    overflow-y: auto;
}
</style>
{% endblock %}

{% block scripts %}
<script>
// Dashboard functionality
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardData();
});

function loadDashboardData() {
    // Load projects and statistics
    fetch('/api/projects')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateStats(data.projects);
                displayRecentProjects(data.projects.slice(0, 5));
            }
        })
        .catch(error => console.error('Error loading dashboard data:', error));
}

function updateStats(projects) {
    document.getElementById('totalProjects').textContent = projects.length;
    
    let activeSessions = 0;
    let completedTasks = 0;
    let filesGenerated = 0;
    
    projects.forEach(project => {
        if (project.sessions) {
            project.sessions.forEach(session => {
                if (session.status === 'running') activeSessions++;
                if (session.status === 'completed') completedTasks++;
                if (session.files_created) {
                    filesGenerated += JSON.parse(session.files_created).length;
                }
            });
        }
    });
    
    document.getElementById('activeSessions').textContent = activeSessions;
    document.getElementById('completedTasks').textContent = completedTasks;
    document.getElementById('filesGenerated').textContent = filesGenerated;
}

function displayRecentProjects(projects) {
    const container = document.getElementById('recentProjects');
    
    if (projects.length === 0) {
        container.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                <p class="text-muted">No projects yet. <a href="/new-project">Create your first project</a></p>
            </div>
        `;
        return;
    }
    
    const projectsHtml = projects.map(project => `
        <div class="d-flex align-items-center py-2 border-bottom">
            <div class="flex-shrink-0 me-3">
                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" 
                     style="width: 40px; height: 40px;">
                    <i class="fas fa-folder text-white"></i>
                </div>
            </div>
            <div class="flex-grow-1">
                <h6 class="mb-0">
                    <a href="/project/${project.id}" class="text-decoration-none">${project.name}</a>
                </h6>
                <small class="text-muted">${project.description || 'No description'}</small>
            </div>
            <div class="flex-shrink-0">
                <span class="badge bg-${project.status === 'active' ? 'success' : 'secondary'}">${project.status}</span>
            </div>
        </div>
    `).join('');
    
    container.innerHTML = projectsHtml;
}

// All button functionality is now handled by app.js via data-action attributes
// This ensures consistent behavior across the entire web interface
</script>
{% endblock %}