{% extends "base.html" %}

{% block title %}AI Room Reservation Optimizer{% endblock %}

{% block extra_css %}
<style>
.optimization-card {
    transition: transform 0.2s ease-in-out;
}

.optimization-card:hover {
    transform: translateY(-2px);
}

.commission-item {
    border-left: 4px solid #007bff;
    transition: all 0.2s ease;
}

.commission-item:hover {
    border-left-color: #0056b3;
    background-color: #f8f9fa;
}

.commission-item.selected {
    border-left-color: #28a745;
    background-color: #d4edda;
}

.algorithm-status {
    position: sticky;
    top: 20px;
}

.loading-spinner {
    display: none;
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.fitness-meter {
    height: 20px;
    background: linear-gradient(to right, #dc3545, #ffc107, #28a745);
    border-radius: 10px;
    position: relative;
}

.fitness-indicator {
    position: absolute;
    top: -5px;
    width: 30px;
    height: 30px;
    background: white;
    border: 3px solid #007bff;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.5s ease;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h1 class="card-title mb-3">
                        <i class="fas fa-brain me-2"></i>
                        AI Room Reservation Optimizer
                    </h1>
                    <p class="card-text mb-0">
                        Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Algorithm Status Card -->
    <div class="row mb-4">
        <div class="col-lg-4">
            <div class="card algorithm-status">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>
                        Algorithm Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <small class="text-muted">System Status</small>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Available Classrooms</span>
                            <span class="badge bg-success" id="available-classrooms">--</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Active Commissions</span>
                            <span class="badge bg-info" id="active-commissions">--</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Existing Reservations</span>
                            <span class="badge bg-secondary" id="existing-reservations">--</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <small class="text-muted">Algorithm Configuration</small>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Population Size</span>
                            <span class="text-muted">50</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Generations</span>
                            <span class="text-muted">100</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Mutation Rate</span>
                            <span class="text-muted">10%</span>
                        </div>
                    </div>
                    
                    <button class="btn btn-sm btn-outline-primary w-100" onclick="geneticManager.getAlgorithmStatus()">
                        <i class="fas fa-sync-alt me-1"></i>
                        Refresh Status
                    </button>
                </div>
            </div>
        </div>

        <!-- Commission Selection -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-list-check me-2"></i>
                        Select Commissions to Optimize
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex gap-2 mb-2">
                            <button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
                                Select All
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
                                Deselect All
                            </button>
                            <button class="btn btn-sm btn-outline-info" onclick="filterCommissions()">
                                <i class="fas fa-filter me-1"></i>
                                Filter
                            </button>
                        </div>
                    </div>
                    
                    <div id="commissions-list" class="row">
                        <!-- Commissions will be loaded here -->
                        <div class="col-12 text-center text-muted">
                            <i class="fas fa-spinner fa-spin me-2"></i>
                            Loading commissions...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optimization Controls -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-play-circle me-2"></i>
                        Optimization Controls
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="start-date" class="form-label">Start Date Range</label>
                                <input type="datetime-local" class="form-control" id="start-date" name="start_date">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="end-date" class="form-label">End Date Range</label>
                                <input type="datetime-local" class="form-control" id="end-date" name="end_date">
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2 flex-wrap">
                        <button class="btn btn-info" id="preview-optimization-btn">
                            <i class="fas fa-eye me-2"></i>
                            Preview Optimization
                        </button>
                        <button class="btn btn-success" id="optimize-assignments-btn">
                            <i class="fas fa-rocket me-2"></i>
                            Run Full Optimization
                        </button>
                        <button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
                            <i class="fas fa-check me-2"></i>
                            Apply Reservations
                        </button>
                        <button class="btn btn-secondary" onclick="resetOptimization()">
                            <i class="fas fa-undo me-2"></i>
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Results Section -->
    <div class="row mb-4">
        <div class="col-12">
            <!-- Preview Results -->
            <div id="preview-results"></div>
            
            <!-- Optimization Results -->
            <div id="optimization-results"></div>
            
            <!-- Alert Container -->
            <div id="alert-container"></div>
        </div>
    </div>
</div>

<!-- Loading Spinner Overlay -->
<div class="spinner-overlay" id="loading-spinner">
    <div class="text-center text-white">
        <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Optimizing...</span>
        </div>
        <p class="mt-3 mb-0">Running genetic algorithm optimization...</p>
        <small class="d-block mt-2">This may take a few moments</small>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Reservation Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be populated dynamically -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="downloadReservations()">
                    <i class="fas fa-download me-2"></i>
                    Download
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/genetic-algorithm.js') }}"></script>
<script>
// Additional utility functions for the genetic optimizer interface
function selectAllCommissions() {
    const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
    checkboxes.forEach(cb => {
        cb.checked = true;
        updateCommissionCard(cb.value, true);
    });
}

function deselectAllCommissions() {
    const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
    checkboxes.forEach(cb => {
        cb.checked = false;
        updateCommissionCard(cb.value, false);
    });
}

function updateCommissionCard(commissionId, selected) {
    const card = document.querySelector(`[data-commission-id="${commissionId}"]`);
    if (card) {
        if (selected) {
            card.classList.add('selected');
        } else {
            card.classList.remove('selected');
        }
    }
}

function filterCommissions() {
    // Implement filtering logic
    console.log('Filter commissions feature not implemented yet');
}

function resetOptimization() {
    deselectAllCommissions();
    geneticManager.clearResults();
    geneticManager.clearPreview();
    document.getElementById('start-date').value = '';
    document.getElementById('end-date').value = '';
}

function downloadReservations() {
    const reservations = geneticManager.getPendingReservations();
    if (!reservations || reservations.length === 0) {
        alert('No reservations to download');
        return;
    }
    
    // Create CSV content
    const headers = ['Commission ID', 'Classroom ID', 'Purpose', 'Start Time', 'End Time', 'Expected Attendees'];
    const csvContent = [
        headers.join(','),
        ...reservations.map(res => [
            res.commission_id,
            res.classroom_id,
            `"${res.purpose}"`,
            new Date(res.start_time).toISOString(),
            new Date(res.end_time).toISOString(),
            res.expected_attendees
        ].join(','))
    ].join('\n');
    
    // Download file
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `optimization_results_${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
    URL.revokeObjectURL(url);
}

// Load commissions on page load
document.addEventListener('DOMContentLoaded', async function() {
    await loadCommissions();
    await geneticManager.getAlgorithmStatus();
});

async function loadCommissions() {
    try {
const response = await fetch('/api/genetic/commissions');
        const data = await response.json();
        
        const commissionsList = document.getElementById('commissions-list');
        
        if (data.success && data.commissions && data.commissions.length > 0) {
            const commissionsHtml = data.commissions.map(commission => `
                <div class="col-md-6 mb-3">
                    <div class="card commission-item" data-commission-id="${commission.id}">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="commission_ids" 
                                       value="${commission.id}" id="commission-${commission.id}"
                                       onchange="updateCommissionCard('${commission.id}', this.checked)">
                                <label class="form-check-label" for="commission-${commission.id}">
                                    <strong>${commission.get_full_code || commission.code}</strong>
                                    <br>
                                    <small class="text-muted">${commission.subject?.name || 'Unknown Subject'}</small>
                                    <br>
                                    <span class="badge bg-info">${commission.current_students || 0}/${commission.max_students} students</span>
                                    ${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
            
            commissionsList.innerHTML = commissionsHtml;
        } else {
            commissionsList.innerHTML = `
                <div class="col-12 text-center text-muted">
                    <i class="fas fa-info-circle me-2"></i>
                    No active commissions found.
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading commissions:', error);
        document.getElementById('commissions-list').innerHTML = `
            <div class="col-12 text-center text-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Error loading commissions: ${error.message}
            </div>
        `;
    }
}

// Override the genetic algorithm status handler
const originalGetAlgorithmStatus = geneticManager.getAlgorithmStatus;
geneticManager.getAlgorithmStatus = async function() {
    try {
        const result = await originalGetAlgorithmStatus.call(this);
        
        if (result.success) {
            const data = result.data;
            document.getElementById('available-classrooms').textContent = data.system_status.available_classrooms;
            document.getElementById('active-commissions').textContent = data.system_status.active_commissions;
            document.getElementById('existing-reservations').textContent = data.system_status.confirmed_reservations;
        }
    } catch (error) {
        console.error('Error updating algorithm status:', error);
    }
};

// Override the loading function to use our custom spinner
geneticManager.showLoading = function(show) {
    const spinner = document.getElementById('loading-spinner');
    if (spinner) {
        spinner.style.display = show ? 'flex' : 'none';
    }
};
</script>
{% endblock %}