<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - MHA Flow</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">
                <i class="fas fa-brain"></i> MHA Flow
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/dashboard"><i class="fas fa-home me-1"></i> Home</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/dashboard"><i class="fas fa-chart-line me-1"></i> Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/optimize"><i class="fas fa-cog me-1"></i> Optimize</a></li>
                    <li class="nav-item"><a class="nav-link" href="/compare"><i class="fas fa-chart-bar me-1"></i> Compare</a></li>
                    <li class="nav-item"><a class="nav-link" href="/upload-algorithm"><i class="fas fa-upload me-1"></i> Upload</a></li>
                    <li class="nav-item"><a class="nav-link" href="/history"><i class="fas fa-history me-1"></i> History</a></li>
                    <li class="nav-item"><a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt me-1"></i> Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-5">
        <!-- Main Header -->
        <div class="main-header">
            <h1>🧬 MHA Toolbox - Optimization Suite</h1>
            <p>Welcome back, {{ current_user.username }}! Ready to optimize?</p>
        </div>

        <!-- Statistics Cards -->
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-card-icon">🧬</div>
                    <div class="stat-card-value">{{ stats.total_algorithms }}</div>
                    <div class="stat-card-label">Available Algorithms</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-card-icon">📊</div>
                    <div class="stat-card-value">{{ stats.user_experiments }}</div>
                    <div class="stat-card-label">Your Experiments</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-card-icon">🏆</div>
                    <div class="stat-card-value">{{ stats.successful_runs }}</div>
                    <div class="stat-card-label">Successful Runs</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-card-icon">📈</div>
                    <div class="stat-card-value">{{ stats.avg_improvement }}%</div>
                    <div class="stat-card-label">Avg Improvement</div>
                </div>
            </div>
        </div>

        <!-- Two Column Layout -->
        <div class="row g-4 mb-4">
            <!-- Quick Start Guide -->
            <div class="col-lg-6">
                <div class="info-card">
                    <h4>🚀 Quick Start Guide</h4>
                    <div class="step-box">
                        <div class="step-box-number">1</div>
                        <div class="step-box-text">Select a sample dataset or upload your own CSV file</div>
                    </div>
                    <div class="step-box">
                        <div class="step-box-number">2</div>
                        <div class="step-box-text">Choose optimization algorithms from 140+ options</div>
                    </div>
                    <div class="step-box">
                        <div class="step-box-number">3</div>
                        <div class="step-box-text">Configure parameters or use intelligent defaults</div>
                    </div>
                    <div class="step-box">
                        <div class="step-box-number">4</div>
                        <div class="step-box-text">Run optimization and analyze results with Plotly charts</div>
                    </div>
                    <div class="step-box">
                        <div class="step-box-number">5</div>
                        <div class="step-box-text">Export results in CSV, Excel, JSON, or NPZ format</div>
                    </div>
                    <div class="mt-3">
                        <a href="/optimize" class="btn btn-primary w-100">
                            <i class="fas fa-rocket me-2"></i> Start New Optimization
                        </a>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="col-lg-6">
                <div class="info-card">
                    <h4>📋 Recent Activity</h4>
                    {% if recent_results %}
                        {% for result in recent_results %}
                        <div class="recent-activity-item">
                            <strong>{{ result.algorithm_name }}</strong> on {{ result.objective_function }}<br>
                            <small class="text-muted">
                                <i class="fas fa-clock me-1"></i> {{ result.created_at.strftime('%Y-%m-%d %H:%M') }}
                                | Best: {{ "%.6f"|format(result.best_fitness) }}
                            </small>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No experiments yet. Start your first optimization!</p>
                            <a href="/optimize" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i> Create Experiment
                            </a>
                        </div>
                    {% endif %}
                    
                    {% if recent_results %}
                    <div class="mt-3">
                        <a href="/history" class="btn btn-secondary w-100">
                            <i class="fas fa-history me-2"></i> View All History
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Algorithm Categories -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="page-header">
                    <h2><i class="fas fa-layer-group me-2"></i> Algorithm Categories</h2>
                    <p>Explore our comprehensive collection of metaheuristic algorithms</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">🐝</div>
                        <h5>Swarm Intelligence</h5>
                        <p class="text-muted">PSO, GWO, WOA, ALO, HHO, JS, and more</p>
                        <span class="algorithm-badge badge-swarm">{{ stats.swarm_count }} algorithms</span>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">🧬</div>
                        <h5>Evolutionary</h5>
                        <p class="text-muted">GA, DE, ES, GP, and genetic variants</p>
                        <span class="algorithm-badge badge-evolutionary">{{ stats.evolutionary_count }} algorithms</span>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">⚛️</div>
                        <h5>Physics-Based</h5>
                        <p class="text-muted">GSA, MVO, SA, and physics-inspired</p>
                        <span class="algorithm-badge badge-physics">{{ stats.physics_count }} algorithms</span>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">🔬</div>
                        <h5>Hybrid</h5>
                        <p class="text-muted">PSO-GA, GWO-PSO, and combinations</p>
                        <span class="algorithm-badge badge-hybrid">{{ stats.hybrid_count }} algorithms</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">📦</div>
                        <h5>Sample Datasets</h5>
                        <p class="text-muted">Try optimization with built-in datasets</p>
                        <a href="/optimize" class="btn btn-primary w-100">Explore Datasets</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">📊</div>
                        <h5>Compare Algorithms</h5>
                        <p class="text-muted">Run multiple algorithms simultaneously</p>
                        <a href="/compare" class="btn btn-primary w-100">Start Comparison</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="fs-1 mb-3">📤</div>
                        <h5>Custom Algorithms</h5>
                        <p class="text-muted">Upload your own algorithm implementations</p>
                        <a href="/upload-algorithm" class="btn btn-primary w-100">Upload Algorithm</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Info -->
        <div class="alert alert-info mt-4">
            <h5><i class="fas fa-info-circle me-2"></i> Platform Features</h5>
            <div class="row">
                <div class="col-md-6">
                    <ul class="mb-0">
                        <li><strong>140+ Algorithms:</strong> Comprehensive collection with Levy flights</li>
                        <li><strong>15 Objective Functions:</strong> Standard benchmark functions</li>
                        <li><strong>Dataset Support:</strong> Upload CSV or use 6 demo datasets</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <ul class="mb-0">
                        <li><strong>Interactive Charts:</strong> Plotly visualizations</li>
                        <li><strong>Export Options:</strong> CSV, Excel, JSON, NPZ formats</li>
                        <li><strong>Session Management:</strong> Save and resume experiments</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
