{% extends "base.html" %}

{% block title %}Compare Snapshots{% endblock %}

{% block content %}
<div class="container-fluid">
  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div class="container-fluid">
      <span class="navbar-brand">Snapshot Comparison Tool</span>
      <div class="navbar-nav">
        <select id="repoSelect" class="form-select me-3" style="width: 200px;">
          <option value="">Select Repository...</option>
          {% for repo_name in repo_snapshots.keys() %}
            <option value="{{ repo_name }}">{{ repo_name }}</option>
          {% endfor %}
        </select>
        <button id="clearSelection" class="btn btn-outline-secondary">Clear</button>
      </div>
    </div>
  </nav>

  <div class="row" style="height: calc(100vh - 200px); min-height: 600px;">
    <!-- Column 1: Available Snapshots -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header bg-primary text-white">
          <h6 class="mb-0">Available Snapshots</h6>
          <small>Select first snapshot</small>
        </div>
        <div class="card-body p-0">
          <div class="p-2 border-bottom">
            <input type="text" id="searchFirst" class="form-control form-control-sm" placeholder="Search snapshots...">
          </div>
          <div id="snapshotsList" class="list-group list-group-flush" style="height: calc(100vh - 350px); min-height: 400px; overflow-y: auto;">
            <div class="p-3 text-center text-muted">
              Please select a repository first
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 2: Second Snapshot Selection -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header bg-success text-white">
          <h6 class="mb-0">Compare With</h6>
          <small>Select second snapshot</small>
        </div>
        <div class="card-body p-0">
          <div class="p-2 border-bottom">
            <input type="text" id="searchSecond" class="form-control form-control-sm" placeholder="Search snapshots...">
          </div>
          <div id="compareList" class="list-group list-group-flush" style="height: calc(100vh - 410px); min-height: 340px; overflow-y: auto;">
            <div class="p-3 text-center text-muted">
              Select first snapshot to continue
            </div>
          </div>
          <div class="p-3 border-top">
            <button id="compareBtn" class="btn btn-primary w-100" disabled>Compare Snapshots</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 3: Comparison Results -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header bg-info text-white d-flex justify-content-between">
          <div>
            <h6 class="mb-0">Comparison Results</h6>
            <small id="comparisonTitle">Select snapshots to compare</small>
          </div>
          <button id="downloadReport" class="btn btn-sm btn-outline-light" disabled>Download Report</button>
        </div>
        <div class="card-body p-0">
          <div id="resultsContainer" style="height: calc(100vh - 350px); min-height: 400px; overflow-y: auto;">
            <div class="p-3 text-center text-muted">
              Comparison results will appear here
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const repoSelect = document.getElementById('repoSelect');
    const snapshotsList = document.getElementById('snapshotsList');
    const compareList = document.getElementById('compareList');
    const resultsContainer = document.getElementById('resultsContainer');
    const compareBtn = document.getElementById('compareBtn');
    const downloadReport = document.getElementById('downloadReport');
    const comparisonTitle = document.getElementById('comparisonTitle');
    const clearSelection = document.getElementById('clearSelection');
    const searchFirst = document.getElementById('searchFirst');
    const searchSecond = document.getElementById('searchSecond');
    
    let selectedRepo = '';
    let firstSnapshot = null;
    let secondSnapshot = null;
    let comparisonData = null;

    repoSelect.addEventListener('change', function() {
        selectedRepo = this.value;
        firstSnapshot = null;
        secondSnapshot = null;
        loadSnapshots();
        updateCompareList();
        updateResults();
    });

    clearSelection.addEventListener('click', function() {
        repoSelect.value = '';
        selectedRepo = '';
        firstSnapshot = null;
        secondSnapshot = null;
        searchFirst.value = '';
        searchSecond.value = '';
        snapshotsList.innerHTML = '<div class="p-3 text-center text-muted">Please select a repository first</div>';
        updateCompareList();
        updateResults();
    });

    searchFirst.addEventListener('input', function() {
        filterSnapshots(this.value, 'first');
    });

    searchSecond.addEventListener('input', function() {
        filterSnapshots(this.value, 'second');
    });

    compareBtn.addEventListener('click', function() {
        if (firstSnapshot && secondSnapshot) {
            performComparison();
        }
    });

    downloadReport.addEventListener('click', function() {
        if (comparisonData) {
            generateHtmlReport();
        }
    });

    function loadSnapshots() {
        if (!selectedRepo) {
            snapshotsList.innerHTML = '<div class="p-3 text-center text-muted">Please select a repository first</div>';
            return;
        }

        snapshotsList.innerHTML = '<div class="p-3 text-center"><div class="spinner-border spinner-border-sm"></div> Loading...</div>';

        fetch(`/api/snapshots/search?repo=${encodeURIComponent(selectedRepo)}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    snapshotsList.innerHTML = '<div class="p-3 text-center text-danger">Error loading snapshots</div>';
                } else if (data.snapshots.length === 0) {
                    snapshotsList.innerHTML = '<div class="p-3 text-center text-muted">No snapshots found</div>';
                } else {
                    snapshotsList.innerHTML = data.snapshots.map(snapshot => 
                        `<div class="list-group-item list-group-item-action snapshot-item" data-snapshot='${JSON.stringify(snapshot)}'>
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong>${snapshot.name}</strong><br>
                                    <small class="text-muted">${snapshot.created}</small>
                                </div>
                                <span class="badge bg-primary">Select</span>
                            </div>
                        </div>`
                    ).join('');

                    // Add click handlers
                    snapshotsList.querySelectorAll('.snapshot-item').forEach(item => {
                        item.addEventListener('click', function() {
                            firstSnapshot = JSON.parse(this.dataset.snapshot);
                            updateSnapshotSelection();
                            updateCompareList();
                        });
                    });
                }
            })
            .catch(() => {
                snapshotsList.innerHTML = '<div class="p-3 text-center text-danger">Error loading snapshots</div>';
            });
    }

    function updateSnapshotSelection() {
        snapshotsList.querySelectorAll('.snapshot-item').forEach(item => {
            const snapshot = JSON.parse(item.dataset.snapshot);
            const badge = item.querySelector('.badge');
            if (firstSnapshot && snapshot.name === firstSnapshot.name) {
                item.classList.add('active');
                badge.textContent = 'Selected';
                badge.className = 'badge bg-success';
            } else {
                item.classList.remove('active');
                badge.textContent = 'Select';
                badge.className = 'badge bg-primary';
            }
        });
    }

    function updateCompareList() {
        if (!firstSnapshot) {
            compareList.innerHTML = '<div class="p-3 text-center text-muted">Select first snapshot to continue</div>';
            compareBtn.disabled = true;
            return;
        }

        fetch(`/api/snapshots/search?repo=${encodeURIComponent(selectedRepo)}`)
            .then(response => response.json())
            .then(data => {
                const otherSnapshots = data.snapshots.filter(s => s.name !== firstSnapshot.name);
                
                if (otherSnapshots.length === 0) {
                    compareList.innerHTML = '<div class="p-3 text-center text-muted">No other snapshots available</div>';
                } else {
                    compareList.innerHTML = otherSnapshots.map(snapshot => 
                        `<div class="list-group-item list-group-item-action compare-item" data-snapshot='${JSON.stringify(snapshot)}'>
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong>${snapshot.name}</strong><br>
                                    <small class="text-muted">${snapshot.created}</small>
                                </div>
                                <span class="badge bg-success">Compare</span>
                            </div>
                        </div>`
                    ).join('');

                    compareList.querySelectorAll('.compare-item').forEach(item => {
                        item.addEventListener('click', function() {
                            secondSnapshot = JSON.parse(this.dataset.snapshot);
                            updateCompareSelection();
                            compareBtn.disabled = false;
                        });
                    });
                }
            });
    }

    function updateCompareSelection() {
        compareList.querySelectorAll('.compare-item').forEach(item => {
            const snapshot = JSON.parse(item.dataset.snapshot);
            const badge = item.querySelector('.badge');
            if (secondSnapshot && snapshot.name === secondSnapshot.name) {
                item.classList.add('active');
                badge.textContent = 'Selected';
                badge.className = 'badge bg-warning';
            } else {
                item.classList.remove('active');
                badge.textContent = 'Compare';
                badge.className = 'badge bg-success';
            }
        });
    }

    function performComparison() {
        resultsContainer.innerHTML = '<div class="p-3 text-center"><div class="spinner-border"></div><br>Comparing snapshots...</div>';
        comparisonTitle.textContent = `${firstSnapshot.name} vs ${secondSnapshot.name}`;

        fetch(`/compare-snapshots?snapshot1=${encodeURIComponent(firstSnapshot.name)}&snapshot2=${encodeURIComponent(secondSnapshot.name)}`)
            .then(response => response.text())
            .then(html => {
                // Extract comparison data from the response
                fetch(`/api/compare-json?snapshot1=${encodeURIComponent(firstSnapshot.name)}&snapshot2=${encodeURIComponent(secondSnapshot.name)}`)
                    .then(response => response.json())
                    .then(data => {
                        comparisonData = data;
                        displayResults(data);
                        downloadReport.disabled = false;
                    });
            })
            .catch(() => {
                resultsContainer.innerHTML = '<div class="p-3 text-center text-danger">Error performing comparison</div>';
            });
    }

    function displayResults(data) {
        const html = `
            <div class="p-3">
                <div class="row text-center mb-3">
                    <div class="col-4">
                        <div class="border rounded p-2">
                            <h6 class="text-primary">${data.stats.only_1_count}</h6>
                            <small>Only in First</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="border rounded p-2">
                            <h6 class="text-success">${data.stats.only_2_count}</h6>
                            <small>Only in Second</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="border rounded p-2">
                            <h6 class="text-info">${data.stats.common_count}</h6>
                            <small>Common</small>
                        </div>
                    </div>
                </div>
                
                <div class="accordion" id="resultsAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#onlyFirst">
                                Only in ${firstSnapshot.name} (${data.stats.only_1_count})
                            </button>
                        </h2>
                        <div id="onlyFirst" class="accordion-collapse collapse show">
                            <div class="accordion-body p-0">
                                <div style="max-height: 200px; overflow-y: auto;">
                                    ${data.only_in_1.map(pkg => `<div class="p-2 border-bottom"><strong>${pkg.name}</strong><br><small>${pkg.version}</small></div>`).join('')}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#onlySecond">
                                Only in ${secondSnapshot.name} (${data.stats.only_2_count})
                            </button>
                        </h2>
                        <div id="onlySecond" class="accordion-collapse collapse">
                            <div class="accordion-body p-0">
                                <div style="max-height: 200px; overflow-y: auto;">
                                    ${data.only_in_2.map(pkg => `<div class="p-2 border-bottom"><strong>${pkg.name}</strong><br><small>${pkg.version}</small></div>`).join('')}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        resultsContainer.innerHTML = html;
    }

    function updateResults() {
        resultsContainer.innerHTML = '<div class="p-3 text-center text-muted">Comparison results will appear here</div>';
        comparisonTitle.textContent = 'Select snapshots to compare';
        downloadReport.disabled = true;
        compareBtn.disabled = true;
        comparisonData = null;
    }
    
    function filterSnapshots(query, column) {
        const container = column === 'first' ? snapshotsList : compareList;
        const items = container.querySelectorAll('.list-group-item');
        
        items.forEach(item => {
            if (item.dataset.snapshot) {
                const snapshot = JSON.parse(item.dataset.snapshot);
                const matches = snapshot.name.toLowerCase().includes(query.toLowerCase());
                item.style.display = matches ? 'block' : 'none';
            }
        });
    }
    
    function generateHtmlReport() {
        const html = `
<!DOCTYPE html>
<html>
<head>
    <title>Snapshot Comparison Report</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .header { background: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
        .stats { display: flex; gap: 20px; margin: 20px 0; }
        .stat-box { border: 1px solid #ddd; padding: 15px; border-radius: 5px; text-align: center; flex: 1; }
        .section { margin: 20px 0; }
        .package-list { max-height: 300px; overflow-y: auto; border: 1px solid #ddd; }
        .package-item { padding: 10px; border-bottom: 1px solid #eee; }
        .package-name { font-weight: bold; }
        .package-version { color: #666; font-size: 0.9em; }
        h1, h2 { color: #333; }
        .only-first { background-color: #e3f2fd; }
        .only-second { background-color: #e8f5e8; }
        .common { background-color: #fff3e0; }
    </style>
</head>
<body>
    <div class="header">
        <h1>Snapshot Comparison Report</h1>
        <p><strong>First Snapshot:</strong> ${firstSnapshot.name}</p>
        <p><strong>Second Snapshot:</strong> ${secondSnapshot.name}</p>
        <p><strong>Generated:</strong> ${new Date().toLocaleString()}</p>
    </div>
    
    <div class="stats">
        <div class="stat-box only-first">
            <h3>${comparisonData.stats.only_1_count}</h3>
            <p>Only in ${firstSnapshot.name}</p>
        </div>
        <div class="stat-box only-second">
            <h3>${comparisonData.stats.only_2_count}</h3>
            <p>Only in ${secondSnapshot.name}</p>
        </div>
        <div class="stat-box common">
            <h3>${comparisonData.stats.common_count}</h3>
            <p>Common Packages</p>
        </div>
    </div>
    
    <div class="section">
        <h2>Packages Only in ${firstSnapshot.name}</h2>
        <div class="package-list only-first">
            ${comparisonData.only_in_1.map(pkg => 
                `<div class="package-item">
                    <div class="package-name">${pkg.name}</div>
                    <div class="package-version">${pkg.version}</div>
                </div>`
            ).join('')}
        </div>
    </div>
    
    <div class="section">
        <h2>Packages Only in ${secondSnapshot.name}</h2>
        <div class="package-list only-second">
            ${comparisonData.only_in_2.map(pkg => 
                `<div class="package-item">
                    <div class="package-name">${pkg.name}</div>
                    <div class="package-version">${pkg.version}</div>
                </div>`
            ).join('')}
        </div>
    </div>
    
    <div class="section">
        <h2>Common Packages</h2>
        <div class="package-list common">
            ${comparisonData.common.map(pkg => 
                `<div class="package-item">
                    <div class="package-name">${pkg.name}</div>
                    <div class="package-version">${pkg.version}</div>
                </div>`
            ).join('')}
        </div>
    </div>
</body>
</html>`;
        
        const blob = new Blob([html], {type: 'text/html'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `snapshot_comparison_${firstSnapshot.name}_vs_${secondSnapshot.name}.html`;
        a.click();
        URL.revokeObjectURL(url);
    }
});
</script>
{% endblock %}