{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Dashboard</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active">Dashboard</li>
    </ol>

    <!-- Statistics Cards -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">{{ tests|length }}</h5>
                    <p class="card-text">Test Cases</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/experiments">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">{{ protocols_count }}</h5>
                    <p class="card-text">Protocols</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/plugins">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">{{ implementations_count }}</h5>
                    <p class="card-text">Implementations</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/plugins">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-danger text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">{{ services_count }}</h5>
                    <p class="card-text">Services</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/experiments">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Test Cases Table -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            Available Test Cases
        </div>
        <div class="card-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Network Environment</th>
                        <th>Iterations</th>
                        <th>Services</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for test in tests %}
                    <tr>
                        <td>{% if has_attr(test, 'test_config') %}{{ safe_getattr(test.test_config, 'name', 'N/A') }}{% else %}{{ safe_getattr(test, 'name', 'N/A') }}{% endif %}</td>
                        <td>{{ safe_getattr(test, 'description', safe_getattr(test.test_config, 'description', 'N/A') if has_attr(test, 'test_config') else 'N/A') }}</td>
                        <td>{% if has_attr(test, 'test_config') and has_attr(test.test_config, 'network_environment') %}
                                {{ safe_getattr(test.test_config.network_environment, 'type', 'N/A') }}
                            {% elif has_attr(test, 'network_environment') %}
                                {{ safe_getattr(test.network_environment, 'type', 'N/A') }}
                            {% else %}
                                N/A
                            {% endif %}
                        </td>
                        <td>{{ safe_getattr(test, 'iterations', safe_getattr(test.test_config, 'iterations', 'N/A') if has_attr(test, 'test_config') else 'N/A') }}</td>
                        <td>{{ safe_length(safe_getattr(test, 'services', {})) }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary run-test" data-test-name="{{ safe_getattr(test, 'name', '') }}">
                                <i class="fas fa-play me-1"></i> Run
                            </button>
                            <button class="btn btn-sm btn-info view-test" data-test-name="{{ safe_getattr(test, 'name', '') }}">
                                <i class="fas fa-eye me-1"></i> View
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Test Details Modal -->
<div class="modal fade" id="testDetailsModal" tabindex="-1" aria-labelledby="testDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="testDetailsModalLabel">Test Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="testDetailsContent">
                <!-- Test details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set up run test buttons
        document.querySelectorAll('.run-test').forEach(button => {
            button.addEventListener('click', function() {
                const testName = this.getAttribute('data-test-name');
                runExperiment(testName);
            });
        });

        // Set up view test buttons
        document.querySelectorAll('.view-test').forEach(button => {
            button.addEventListener('click', function() {
                const testName = this.getAttribute('data-test-name');
                viewTestDetails(testName);
            });
        });
    });

    function runExperiment(testName) {
        fetch('/api/run-experiment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ test_name: testName }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('Experiment started successfully!');
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while starting the experiment.');
        });
    }

    function viewTestDetails(testName) {
        fetch(`/api/test/${testName}`)
            .then(response => response.json())
            .then(data => {
                const modalContent = document.getElementById('testDetailsContent');
                modalContent.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;

                const modal = new bootstrap.Modal(document.getElementById('testDetailsModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while fetching test details.');
            });
    }
</script>
{% endblock %}