{% extends "base.html" %}

{% block title %}{{ snapshot.name }} - AWS Inventory Browser{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2">
                    <li>
                        <a href="/snapshots" class="text-sm text-gray-500 hover:text-gray-700">Snapshots</a>
                    </li>
                    <li class="flex items-center">
                        <svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="ml-2 text-sm font-medium text-gray-900">{{ snapshot.name }}</span>
                    </li>
                </ol>
            </nav>
            <div class="flex items-center">
                <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">{{ snapshot.name }}</h1>
                {% if snapshot.is_active %}
                <span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
                    Active Baseline
                </span>
                {% endif %}
            </div>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            {% if not snapshot.is_active %}
            <button hx-post="/api/snapshots/{{ snapshot.name }}/activate"
                    hx-swap="none"
                    hx-on::after-request="window.location.reload()"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Set as Active
            </button>
            {% endif %}
            <a href="/diff?snapshot1={{ snapshot.name }}"
               class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                Compare
            </a>
        </div>
    </div>

    <!-- Metadata Grid -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Resources</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ snapshot.resource_count | format_number }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Created</dt>
                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.created_at }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Regions</dt>
                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.regions | join(', ') if snapshot.regions else 'N/A' }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-amber-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Account ID</dt>
                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.account_id }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Resources by Type -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Resources by Type</h3>
            <div class="h-64">
                <canvas id="chart-by-type"></canvas>
            </div>
        </div>

        <!-- Resources by Region -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Resources by Region</h3>
            <div class="h-64">
                <canvas id="chart-by-region"></canvas>
            </div>
        </div>
    </div>

    <!-- Resource Table -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6 flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">Resources</h3>
            <a href="/resources?snapshot={{ snapshot.name }}" class="text-sm text-blue-600 hover:text-blue-500">
                View all in Resource Explorer
            </a>
        </div>
        <div id="resource-table"
             hx-get="/api/snapshots/{{ snapshot.name }}/resources?limit=20"
             hx-trigger="load"
             hx-swap="innerHTML">
            <div class="p-8 text-center text-gray-500">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                <p class="mt-2">Loading resources...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Load charts with snapshot-specific data
        fetch('/api/charts/resources-by-type?snapshot={{ snapshot.name }}')
            .then(r => r.json())
            .then(data => {
                new Chart(document.getElementById('chart-by-type'), {
                    type: 'doughnut',
                    data: data,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: { boxWidth: 12 }
                            }
                        }
                    }
                });
            });

        fetch('/api/charts/resources-by-region?snapshot={{ snapshot.name }}')
            .then(r => r.json())
            .then(data => {
                new Chart(document.getElementById('chart-by-region'), {
                    type: 'bar',
                    data: data,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            y: { beginAtZero: true }
                        }
                    }
                });
            });
    });

    // Handle resource table response
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target.id === 'resource-table') {
            const data = JSON.parse(evt.detail.xhr.responseText);
            renderResourceTable(data, evt.detail.target);
        }
    });

    function renderResourceTable(data, target) {
        if (!data.resources || data.resources.length === 0) {
            target.innerHTML = `
                <div class="p-8 text-center text-gray-500">
                    <p>No resources in this snapshot.</p>
                </div>
            `;
            return;
        }

        let html = `
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
        `;

        data.resources.forEach(r => {
            html += `
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${r.name || 'N/A'}</div>
                        <div class="text-xs text-gray-500 truncate max-w-xs" title="${r.arn}">${r.arn}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            ${r.resource_type}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${r.region}</td>
                </tr>
            `;
        });

        html += `
                </tbody>
            </table>
        `;

        if (data.count > data.resources.length) {
            html += `
                <div class="bg-gray-50 px-4 py-3 text-center border-t border-gray-200">
                    <a href="/resources?snapshot={{ snapshot.name }}" class="text-sm text-blue-600 hover:text-blue-500">
                        View all ${data.count} resources
                    </a>
                </div>
            `;
        }

        target.innerHTML = html;
    }
</script>
{% endblock %}