{% extends "base.html" %}

{% block title %}Coverage Analysis - Network Management{% endblock %}

{% block head_extra %}
<style>
    /* Coverage Analysis Styles - Material Design 3 */
    .coverage-header {
        margin-bottom: 32px;
    }

    /* Summary Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .stat-card {
        text-align: center;
        padding: 24px;
    }

    .stat-number {
        font: var(--md-typescale-display-small);
        color: var(--md-primary);
        margin: 0 0 8px 0;
        font-weight: 500;
    }

    .stat-label {
        font: var(--md-typescale-body-medium);
        color: var(--md-on-surface-variant);
        margin: 0;
    }

    /* Vendor Coverage Matrix */
    .coverage-matrix {
        margin-bottom: 32px;
    }

    .matrix-table {
        width: 100%;
        border-collapse: collapse;
        font: var(--md-typescale-body-small);
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }

    .matrix-table thead,
    .matrix-table tbody {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .matrix-table th,
    .matrix-table td {
        padding: 8px 12px;
        text-align: center;
        border: 1px solid var(--md-outline-variant);
        min-width: 100px;
    }

    .matrix-table th {
        background: var(--md-surface-container-high);
        color: var(--md-on-surface);
        font-weight: 500;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .matrix-table th:first-child {
        text-align: left;
        min-width: 150px;
    }

    /* Coverage percentage badges */
    .coverage-badge {
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
        min-width: 50px;
        display: inline-block;
    }

    .coverage-high { background: var(--md-success-container); color: var(--md-on-success-container); }
    .coverage-medium { background: var(--md-warning-container); color: var(--md-on-warning-container); }
    .coverage-low { background: var(--md-error-container); color: var(--md-on-error-container); }

    /* Device Tables */
    .devices-section {
        margin-bottom: 32px;
    }

    .folder-header {
        background: var(--md-primary-container);
        color: var(--md-on-primary-container);
        padding: 16px 20px;
        border-radius: var(--md-shape-corner-small);
        margin: 20px 0 0 0;
        font: var(--md-typescale-title-medium);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .device-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        background: var(--md-surface);
        border-radius: var(--md-shape-corner-small);
        overflow: hidden;
        border: 1px solid var(--md-outline-variant);
    }

    .device-table th,
    .device-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--md-outline-variant);
        font: var(--md-typescale-body-small);
    }

    .device-table th {
        background: var(--md-surface-container-high);
        font-weight: 500;
        color: var(--md-on-surface);
    }

    .device-table tbody tr:hover {
        background: var(--md-surface-container);
    }

    .device-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Device name styling */
    .device-name {
        font-weight: 500;
        color: var(--md-primary);
        min-width: 180px;
    }

    /* Vendor badges */
    .vendor-badge {
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
    }

    .vendor-cisco { background: var(--md-primary-container); color: var(--md-on-primary-container); }
    .vendor-hp { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
    .vendor-arista { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
    .vendor-unknown { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }

    /* Capture status indicators */
    .capture-status {
        width: 20px;
        height: 20px;
        border-radius: var(--md-shape-corner-small);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
    }

    .status-success {
        background: var(--md-success);
        color: var(--md-on-success);
    }

    .status-failed {
        background: var(--md-error);
        color: var(--md-on-error);
    }

    /* Score badges */
    .score-badge {
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
        min-width: 40px;
        text-align: center;
    }

    .score-perfect { background: var(--md-success-container); color: var(--md-on-success-container); }
    .score-good { background: var(--md-warning-container); color: var(--md-on-warning-container); }
    .score-poor { background: var(--md-error-container); color: var(--md-on-error-container); }

    /* Error state */
    .error-state {
        text-align: center;
        padding: 48px 24px;
        color: var(--md-error);
        background: var(--md-error-container);
        border-radius: var(--md-shape-corner-medium);
        margin: 20px 0;
    }

    /* Responsive table wrapper */
    .table-wrapper {
        overflow-x: auto;
        margin-bottom: 20px;
    }

    /* Legend */
    .legend {
        background: var(--md-surface-variant);
        padding: 16px 20px;
        border-radius: var(--md-shape-corner-small);
        margin-bottom: 24px;
    }

    .legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font: var(--md-typescale-body-small);
    }

    /* Generated timestamp */
    .timestamp {
        text-align: center;
        color: var(--md-on-surface-variant);
        font: var(--md-typescale-body-small);
        margin-top: 32px;
        padding: 16px;
        background: var(--md-surface-variant);
        border-radius: var(--md-shape-corner-small);
    }
</style>
{% endblock %}

{% block content %}
<div class="coverage-header">
    <h1 class="md-headline-large md-primary md-flex md-align-center" style="gap: 16px; margin: 0 0 8px 0;">
        <i data-lucide="pie-chart"></i>
        Coverage Analysis
    </h1>
    <p class="md-body-large" style="color: var(--md-on-surface-variant); margin: 0;">
        Network device capture gap analysis and coverage statistics
    </p>
</div>

{% if error %}
    <div class="error-state">
        <i data-lucide="alert-circle" size="48"></i>
        <h3 class="md-title-large" style="margin: 16px 0 8px 0;">Analysis Error</h3>
        <p class="md-body-medium">{{ error }}</p>
    </div>
{% else %}
    <!-- Summary Statistics -->
    <div class="stats-grid">
        <div class="md-card outlined stat-card">
            <div class="stat-number">{{ summary_stats.total_devices or 0 }}</div>
            <div class="stat-label">Network Devices</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-number">{{ summary_stats.capture_types_count or 0 }}</div>
            <div class="stat-label">Capture Types</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-number">{{ summary_stats.total_successful_captures or 0 }}</div>
            <div class="stat-label">Successful Captures</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-number">{{ summary_stats.perfect_capture_count or 0 }}</div>
            <div class="stat-label">100% Complete</div>
        </div>
    </div>

    <!-- Legend -->
    <div class="legend">
        <h4 class="md-title-small" style="margin: 0 0 12px 0;">Legend</h4>
        <div class="legend-items">
            <div class="legend-item">
                <div class="capture-status status-success">✓</div>
                <span>Data Available</span>
            </div>
            <div class="legend-item">
                <div class="capture-status status-failed">✗</div>
                <span>Missing Data</span>
            </div>
            <div class="legend-item">
                <span class="vendor-badge vendor-cisco">Cisco</span>
            </div>
            <div class="legend-item">
                <span class="vendor-badge vendor-hp">HP/Aruba</span>
            </div>
            <div class="legend-item">
                <span class="vendor-badge vendor-arista">Arista</span>
            </div>
        </div>
    </div>

    <!-- Vendor Coverage Matrix -->
    {% if vendor_coverage and capture_types %}
    <div class="md-card outlined coverage-matrix">
        <div class="md-card-header">
            <h2 class="md-card-title md-flex md-align-center" style="gap: 12px;">
                <i data-lucide="grid"></i>
                Vendor Coverage Matrix
            </h2>
        </div>
        <div class="md-card-content">
            <div class="table-wrapper">
                <table class="matrix-table">
                    <thead>
                        <tr>
                            <th>Capture Type</th>
                            <th>Total Success</th>
                            {% for vendor in vendor_coverage.vendors|sort %}
                            <th>{{ vendor }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for capture_type in capture_types|sort %}
                        <tr>
                            <td style="text-align: left;"><strong>{{ capture_type }}</strong></td>
                            <td>
                                {% set total_success = summary_stats.capture_stats.get(capture_type, {}).get('count', 0) %}
                                {% set total_devices = summary_stats.total_devices %}
                                {% set percentage = summary_stats.capture_stats.get(capture_type, {}).get('percentage', 0) %}
                                <span class="coverage-badge {% if percentage >= 80 %}coverage-high{% elif percentage >= 50 %}coverage-medium{% else %}coverage-low{% endif %}">
                                    {{ total_success }}/{{ total_devices }} ({{ "%.1f"|format(percentage) }}%)
                                </span>
                            </td>
                            {% for vendor in vendor_coverage.vendors|sort %}
                            <td>
                                {% set vendor_data = vendor_coverage.by_capture.get(capture_type, {}).get('vendors', {}).get(vendor, {'success': 0, 'total': 0}) %}
                                {% if vendor_data.total > 0 %}
                                    {% set vendor_pct = (vendor_data.success / vendor_data.total * 100) %}
                                    <span class="coverage-badge {% if vendor_pct >= 80 %}coverage-high{% elif vendor_pct >= 50 %}coverage-medium{% else %}coverage-low{% endif %}">
                                        {{ vendor_data.success }}/{{ vendor_data.total }}
                                    </span>
                                {% else %}
                                    <span class="coverage-badge coverage-low">N/A</span>
                                {% endif %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Device Details by Folder -->
    {% if devices_by_folder %}
    <div class="devices-section">
        {% for folder_name, devices in devices_by_folder.items() %}
        <div class="folder-header">
            <i data-lucide="folder"></i>
            {{ folder_name }} ({{ devices|length }} devices)
        </div>

        <div class="table-wrapper">
            <table class="device-table">
                <thead>
                    <tr>
                        <th>Device Name</th>
                        <th>Host</th>
                        <th>Vendor</th>
                        {% for capture_type in capture_types[:10] %}
                        <th style="min-width: 60px;">{{ capture_type }}</th>
                        {% endfor %}
                        <th>Score</th>
                    </tr>
                </thead>
                <tbody>
                    {% for device_name, device_info in devices %}
                    <tr>
                        <td class="device-name">{{ device_name }}</td>
                        <td>{{ device_info.host }}</td>
                        <td>
                            {% set vendor = device_info.vendor.lower() %}
                            <span class="vendor-badge
                                {% if 'cisco' in vendor %}vendor-cisco
                                {% elif 'hp' in vendor or 'aruba' in vendor %}vendor-hp
                                {% elif 'arista' in vendor %}vendor-arista
                                {% else %}vendor-unknown{% endif %}">
                                {{ device_info.vendor or 'Unknown' }}
                            </span>
                        </td>
                        {% for capture_type in capture_types[:10] %}
                        <td style="text-align: center;">
                            {% if device_info.captures.get(capture_type, False) %}
                                <div class="capture-status status-success">✓</div>
                            {% else %}
                                <div class="capture-status status-failed">✗</div>
                            {% endif %}
                        </td>
                        {% endfor %}
                        <td>
                            {% set score_pct = (device_info.total_captures / capture_types|length * 100) if capture_types|length > 0 else 0 %}
                            <span class="score-badge
                                {% if score_pct >= 90 %}score-perfect
                                {% elif score_pct >= 50 %}score-good
                                {% else %}score-poor{% endif %}">
                                {{ device_info.total_captures }}/{{ capture_types|length }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Generation Timestamp -->
    <div class="timestamp">
        <i data-lucide="clock" size="16"></i>
        Report generated on {{ generated_at }}
    </div>
{% endif %}

<script>
    // Initialize Lucide icons
    lucide.createIcons();
</script>
{% endblock %}