{% extends "base.html" %}

{% block title %}Optimization History - MHA Flow{% endblock %}

{% block extra_css %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
    }

    /* Header Styles */
    .history-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 50px;
        border-radius: 20px;
        margin-bottom: 30px;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
        animation: slideDown 0.8s ease-out;
    }

    .history-header h1 {
        color: white;
        font-size: 2.8rem;
        font-weight: 800;
        margin: 0 0 15px 0;
        text-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .history-header p {
        color: rgba(255,255,255,0.95);
        font-size: 1.2rem;
        font-weight: 400;
        margin: 0;
    }

    /* Statistics Cards */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
        animation: fadeIn 1s ease-out;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
    }

    .stat-card:hover::before {
        transform: scaleX(1);
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 8px 0;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
    }

    .stat-icon {
        font-size: 2.5rem;
        opacity: 0.1;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    /* Search and Filter */
    .controls-container {
        background: white;
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        animation: fadeIn 1.2s ease-out;
    }

    .search-box {
        position: relative;
        margin-bottom: 15px;
    }

    .search-box input {
        width: 100%;
        padding: 15px 50px 15px 20px;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .search-box input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .search-box i {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
    }

    /* History Table */
    .history-table-container {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        animation: fadeIn 1.4s ease-out;
        overflow-x: auto;
    }

    .history-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .history-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .history-table thead th {
        color: white;
        padding: 18px 15px;
        text-align: left;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: none;
    }

    .history-table thead th:first-child {
        border-top-left-radius: 12px;
    }

    .history-table thead th:last-child {
        border-top-right-radius: 12px;
    }

    .history-table tbody tr {
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
    }

    .history-table tbody tr:hover {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
        transform: scale(1.01);
    }

    .history-table tbody td {
        padding: 18px 15px;
        color: #495057;
        font-size: 0.95rem;
    }

    .algorithm-badge {
        display: inline-block;
        padding: 6px 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .fitness-value {
        font-weight: 700;
        color: #28a745;
        font-size: 1.05rem;
    }

    .time-value {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .date-value {
        color: #6c757d;
        font-size: 0.9rem;
        font-style: italic;
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .btn-action {
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-view {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .btn-view:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-rerun {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
    }

    .btn-rerun:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
    }

    .btn-delete {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
    }

    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
    }

    .empty-state-icon {
        font-size: 5rem;
        color: #e9ecef;
        margin-bottom: 20px;
    }

    .empty-state h3 {
        color: #6c757d;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .empty-state p {
        color: #adb5bd;
        font-size: 1.1rem;
    }

    /* Loading Spinner */
    .spinner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60px;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* Toast Notification */
    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        padding: 20px 25px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        display: none;
        z-index: 9999;
        animation: slideInRight 0.5s ease;
    }

    .toast-notification.show {
        display: block;
    }

    .toast-notification.success {
        border-left: 4px solid #28a745;
    }

    .toast-notification.error {
        border-left: 4px solid #dc3545;
    }

    .toast-notification .toast-icon {
        font-size: 1.5rem;
        margin-right: 15px;
    }

    .toast-notification .toast-message {
        font-weight: 600;
        color: #495057;
    }

    /* Animations */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(100px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .history-header h1 {
            font-size: 2rem;
        }

        .stats-container {
            grid-template-columns: 1fr;
        }

        .action-buttons {
            flex-direction: column;
        }

        .history-table {
            font-size: 0.85rem;
        }

        .btn-action {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="history-header">
        <h1>📊 Optimization History</h1>
        <p>Manage and review your previous optimization experiments</p>
    </div>

    <!-- Statistics -->
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-value" id="totalRuns">0</div>
            <div class="stat-label">Total Runs</div>
            <div class="stat-icon">🚀</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="uniqueAlgos">0</div>
            <div class="stat-label">Unique Algorithms</div>
            <div class="stat-icon">🧠</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="totalTime">0s</div>
            <div class="stat-label">Total Compute Time</div>
            <div class="stat-icon">⏱️</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" id="bestFitness">-</div>
            <div class="stat-label">Best Fitness</div>
            <div class="stat-icon">🏆</div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="controls-container">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="🔍 Search by algorithm name, objective function, or date...">
            <i class="fas fa-search"></i>
        </div>
    </div>

    <!-- History Table -->
    <div class="history-table-container">
        <div id="loadingSpinner" class="spinner-container">
            <div class="spinner"></div>
        </div>

        <div id="emptyState" class="empty-state" style="display: none;">
            <div class="empty-state-icon">📭</div>
            <h3>No Optimization History</h3>
            <p>Run some optimizations to see them here!</p>
            <a href="{{ url_for('optimize_page') }}" class="btn btn-action btn-view" style="margin-top: 20px;">
                <i class="fas fa-plus"></i> Start New Optimization
            </a>
        </div>

        <table class="history-table" id="historyTable" style="display: none;">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Algorithm</th>
                    <th>Objective Function</th>
                    <th>Best Fitness</th>
                    <th>Time</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="historyTableBody">
                <!-- Dynamic content -->
            </tbody>
        </table>
    </div>
</div>

<!-- Toast Notification -->
<div id="toastNotification" class="toast-notification">
    <span class="toast-icon"></span>
    <span class="toast-message"></span>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let historyData = [];

    // Load history on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadHistory();

        // Search functionality
        document.getElementById('searchInput').addEventListener('input', function(e) {
            filterHistory(e.target.value);
        });
    });

    // Load history from API
    async function loadHistory() {
        try {
            const response = await fetch('/api/history');
            const data = await response.json();
            historyData = data.history;

            document.getElementById('loadingSpinner').style.display = 'none';

            if (historyData.length === 0) {
                document.getElementById('emptyState').style.display = 'block';
            } else {
                document.getElementById('historyTable').style.display = 'table';
                displayHistory(historyData);
                updateStatistics(historyData);
            }
        } catch (error) {
            console.error('Error loading history:', error);
            showToast('Failed to load history', 'error');
            document.getElementById('loadingSpinner').style.display = 'none';
            document.getElementById('emptyState').style.display = 'block';
        }
    }

    // Display history in table
    function displayHistory(data) {
        const tbody = document.getElementById('historyTableBody');
        tbody.innerHTML = '';

        data.forEach((item, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${index + 1}</td>
                <td><span class="algorithm-badge">${item.algorithm}</span></td>
                <td>${item.objective_function || 'N/A'}</td>
                <td><span class="fitness-value">${item.best_fitness.toExponential(4)}</span></td>
                <td><span class="time-value">${item.execution_time.toFixed(3)}s</span></td>
                <td><span class="date-value">${formatDate(item.created_at)}</span></td>
                <td>
                    <div class="action-buttons">
                        <button class="btn-action btn-view" onclick="viewResult(${item.id})">
                            <i class="fas fa-eye"></i> View
                        </button>
                        <button class="btn-action btn-rerun" onclick="rerunOptimization(${item.id})">
                            <i class="fas fa-redo"></i> Rerun
                        </button>
                        <button class="btn-action btn-delete" onclick="deleteResult(${item.id})">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </div>
                </td>
            `;
            tbody.appendChild(row);
        });
    }

    // Update statistics
    function updateStatistics(data) {
        const totalRuns = data.length;
        const uniqueAlgos = new Set(data.map(item => item.algorithm)).size;
        const totalTime = data.reduce((sum, item) => sum + item.execution_time, 0);
        const bestFitness = Math.min(...data.map(item => item.best_fitness));

        document.getElementById('totalRuns').textContent = totalRuns;
        document.getElementById('uniqueAlgos').textContent = uniqueAlgos;
        document.getElementById('totalTime').textContent = totalTime.toFixed(2) + 's';
        document.getElementById('bestFitness').textContent = bestFitness.toExponential(4);
    }

    // Filter history
    function filterHistory(searchTerm) {
        const filtered = historyData.filter(item => {
            const searchLower = searchTerm.toLowerCase();
            return item.algorithm.toLowerCase().includes(searchLower) ||
                   (item.objective_function && item.objective_function.toLowerCase().includes(searchLower)) ||
                   formatDate(item.created_at).toLowerCase().includes(searchLower);
        });
        displayHistory(filtered);
    }

    // View result details
    function viewResult(resultId) {
        const result = historyData.find(item => item.id === resultId);
        if (result) {
            // Store result in localStorage and navigate to results page
            localStorage.setItem('viewedResults', JSON.stringify([result]));
            window.location.href = '/results';
        }
    }

    // Rerun optimization
    async function rerunOptimization(resultId) {
        try {
            const response = await fetch(`/api/history/${resultId}/rerun`, {
                method: 'POST'
            });

            if (response.ok) {
                const params = await response.json();
                // Store parameters and redirect to optimize page
                localStorage.setItem('rerunParams', JSON.stringify(params));
                showToast('Redirecting to optimization page...', 'success');
                setTimeout(() => {
                    window.location.href = '/optimize';
                }, 1500);
            } else {
                showToast('Failed to get rerun parameters', 'error');
            }
        } catch (error) {
            console.error('Error rerunning optimization:', error);
            showToast('Error: ' + error.message, 'error');
        }
    }

    // Delete result
    async function deleteResult(resultId) {
        if (!confirm('Are you sure you want to delete this optimization result? This action cannot be undone.')) {
            return;
        }

        try {
            const response = await fetch(`/api/history/${resultId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                showToast('Result deleted successfully', 'success');
                // Remove from local array
                historyData = historyData.filter(item => item.id !== resultId);
                
                if (historyData.length === 0) {
                    document.getElementById('historyTable').style.display = 'none';
                    document.getElementById('emptyState').style.display = 'block';
                } else {
                    displayHistory(historyData);
                    updateStatistics(historyData);
                }
            } else {
                const error = await response.json();
                showToast(error.error || 'Failed to delete result', 'error');
            }
        } catch (error) {
            console.error('Error deleting result:', error);
            showToast('Error: ' + error.message, 'error');
        }
    }

    // Show toast notification
    function showToast(message, type = 'success') {
        const toast = document.getElementById('toastNotification');
        const icon = toast.querySelector('.toast-icon');
        const messageEl = toast.querySelector('.toast-message');

        toast.className = 'toast-notification show ' + type;
        icon.textContent = type === 'success' ? '✅' : '❌';
        messageEl.textContent = message;

        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // Format date
    function formatDate(dateString) {
        if (!dateString) return 'N/A';
        const date = new Date(dateString);
        return date.toLocaleString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }
</script>
{% endblock %}