{% extends "base.html" %}

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

{% block content %}
<div class="container-fluid">
  <!-- Page Title -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Snapshot Comparison Tool</h2>
    <button id="clearSelection" class="btn btn-outline-secondary">Clear All</button>
  </div>

  <!-- Filter Panel -->
  <div id="filterPanel" class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Filters & Search</h6>
      <span id="filterStatus" class="badge bg-secondary">No filters active</span>
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-2">
          <label class="form-label">Repository:</label>
          <select id="repoSelect" class="form-select">
            <option value="">All Repositories</option>
            <!-- Options loaded dynamically -->
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Distribution:</label>
          <select id="distributionSelect" class="form-select">
            <option value="">All Distributions</option>
            <!-- Options loaded dynamically -->
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Date From:</label>
          <input type="date" id="dateFrom" class="form-control">
        </div>
        <div class="col-md-2">
          <label class="form-label">Date To:</label>
          <input type="date" id="dateTo" class="form-control">
        </div>
        <div class="col-md-1">
          <label class="form-label">Limit:</label>
          <select id="limitResults" class="form-select">
            <option value="50">50</option>
            <option value="100" selected>100</option>
            <option value="200">200</option>
            <option value="500">500</option>
          </select>
        </div>
        <div class="col-md-1">
          <button id="applyFilters" class="btn btn-primary w-100">Apply</button>
        </div>
        <div class="col-md-2">
            <button id="compareBtn" class="btn btn-warning w-100" disabled>Compare Snapshots</button>
         </div>
      </div>
    </div>
  </div>

  <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">
              <i class="fas fa-search mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>
              Use filters above to load snapshots
            </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">
              <i class="fas fa-arrow-left mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>
              Select first snapshot to continue
            </div>
          </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">
              <i class="fas fa-chart-bar mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>
              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');

    const dateFrom = document.getElementById('dateFrom');
    const dateTo = document.getElementById('dateTo');
    const limitResults = document.getElementById('limitResults');
    const applyFilters = document.getElementById('applyFilters');
    const filterStatus = document.getElementById('filterStatus');
    const distributionSelect = document.getElementById('distributionSelect');
    
    let selectedRepo = '';
    let firstSnapshot = null;
    let secondSnapshot = null;
    let comparisonData = null;
    let currentFilters = {
        dateFrom: '',
        dateTo: '',
        limit: 100,
        distribution: ''
    };
    
    // Initialize with blank state
    snapshotsList.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-search mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Use filters above to load snapshots</div>';
    compareList.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-arrow-left mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Select first snapshot to continue</div>';
    resultsContainer.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-chart-bar mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Comparison results will appear here</div>';
    
    // Load filter data
    loadDistributions();
    loadRepos();

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

    clearSelection.addEventListener('click', function() {
        repoSelect.value = '';
        selectedRepo = '';
        firstSnapshot = null;
        secondSnapshot = null;
        searchFirst.value = '';
        searchSecond.value = '';
        
        // Reset filters to default
        dateFrom.value = '';
        dateTo.value = '';
        limitResults.value = '100';
        distributionSelect.value = '';
        dateFrom.classList.remove('is-invalid');
        dateTo.classList.remove('is-invalid');
        currentFilters = {
            dateFrom: '',
            dateTo: '',
            limit: 100,
            distribution: ''
        };
        
        snapshotsList.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-search mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Use filters above to load snapshots</div>';
        updateCompareList();
        updateResults();
    });

    searchFirst.addEventListener('input', function() {
        // Debounce the search
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(() => {
            loadSnapshots();
        }, 300);
    });

    searchSecond.addEventListener('input', function() {
        if (firstSnapshot) {
            // Debounce the search
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                updateCompareList();
            }, 300);
        }
    });

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

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

    function updateFilterStatus() {
        const activeFilters = [];
        if (selectedRepo) activeFilters.push(`Repo: ${selectedRepo}`);
        if (currentFilters.distribution) activeFilters.push(`Dist: ${currentFilters.distribution}`);
        if (currentFilters.dateFrom) activeFilters.push('Date From');
        if (currentFilters.dateTo) activeFilters.push('Date To');
        if (currentFilters.limit !== 100) activeFilters.push(`Limit: ${currentFilters.limit}`);
        
        if (activeFilters.length > 0) {
            filterStatus.textContent = `Active: ${activeFilters.join(', ')}`;
            filterStatus.className = 'badge bg-success';
        } else {
            filterStatus.textContent = 'No filters active';
            filterStatus.className = 'badge bg-secondary';
        }
    }
    
    function applyCurrentFilters() {
        // Update current filters from form values
        currentFilters.dateFrom = dateFrom.value;
        currentFilters.dateTo = dateTo.value;
        currentFilters.limit = parseInt(limitResults.value);
        currentFilters.distribution = distributionSelect.value;
        
        // Clear all selections for fresh start
        firstSnapshot = null;
        secondSnapshot = null;
        comparisonData = null;
        searchFirst.value = '';
        searchSecond.value = '';
        
        // Clear all columns
        compareList.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-arrow-left mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Select first snapshot to continue</div>';
        resultsContainer.innerHTML = '<div class="p-3 text-center text-muted"><i class="fas fa-chart-bar mb-2" style="font-size: 2rem; opacity: 0.3;"></i><br>Comparison results will appear here</div>';
        comparisonTitle.textContent = 'Select snapshots to compare';
        compareBtn.disabled = true;
        downloadReport.disabled = true;
        
        updateFilterStatus();
        loadSnapshots();
    }
    
    applyFilters.addEventListener('click', function() {
        // Validate date range
        if (!validateDateRange()) {
            alert('"Date From" cannot be later than "Date To"');
            return;
        }
        
        applyCurrentFilters();
    });

    // Real-time date validation
    function validateDateRange() {
        const fromDate = dateFrom.value;
        const toDate = dateTo.value;
        
        // Clear previous validation
        dateFrom.classList.remove('is-invalid');
        dateTo.classList.remove('is-invalid');
        
        if (fromDate && toDate && fromDate > toDate) {
            dateFrom.classList.add('is-invalid');
            dateTo.classList.add('is-invalid');
            return false;
        }
        return true;
    }
    
    dateFrom.addEventListener('change', validateDateRange);
    dateTo.addEventListener('change', validateDateRange);
    
    // Update filter status when any filter changes
    distributionSelect.addEventListener('change', updateFilterStatus);
    limitResults.addEventListener('change', updateFilterStatus);
    
    function loadDistributions() {
        fetch('/api/distributions')
            .then(response => response.json())
            .then(data => {
                if (data.distributions) {
                    distributionSelect.innerHTML = '<option value="">All Distributions</option>';
                    data.distributions.forEach(dist => {
                        const option = document.createElement('option');
                        option.value = dist.toLowerCase();
                        option.textContent = dist;
                        distributionSelect.appendChild(option);
                    });
                }
            })
            .catch(error => {
                console.log('Failed to load distributions:', error);
                distributionSelect.innerHTML = '<option value="">All Distributions</option>';
            });
    }
    
    function loadRepos() {
        fetch('/api/repos')
            .then(response => response.json())
            .then(data => {
                if (data.repos) {
                    repoSelect.innerHTML = '<option value="">All Repositories</option>';
                    data.repos.forEach(repo => {
                        const option = document.createElement('option');
                        option.value = repo;
                        option.textContent = repo;
                        repoSelect.appendChild(option);
                    });
                }
            })
            .catch(error => {
                console.log('Failed to load repositories:', error);
            });
    }

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

        // Build query parameters - all filters are now optional
        let queryParams = `limit=${currentFilters.limit}`;
        if (selectedRepo) queryParams += `&repo=${encodeURIComponent(selectedRepo)}`;
        if (currentFilters.dateFrom) queryParams += `&date_from=${currentFilters.dateFrom}`;
        if (currentFilters.dateTo) queryParams += `&date_to=${currentFilters.dateTo}`;
        if (currentFilters.distribution) queryParams += `&distribution=${encodeURIComponent(currentFilters.distribution)}`;
        if (searchFirst.value) queryParams += `&q=${encodeURIComponent(searchFirst.value)}`;

        fetch(`/api/snapshots/search?${queryParams}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    snapshotsList.innerHTML = '<div class="p-3 text-center text-danger">Error loading snapshots</div>';
                    alert(data.error);
                } else if (data.snapshots.length === 0) {
                    snapshotsList.innerHTML = '<div class="p-3 text-center text-muted">No snapshots found</div>';
                } else {
                    let limitWarning = data.limited ? '<div class="alert alert-warning alert-sm p-2 mb-2">Results limited. Use filters to narrow search.</div>' : '';
                    
                    snapshotsList.innerHTML = limitWarning + 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;
        }

        // Build query parameters for second snapshot list
        let queryParams = `limit=${currentFilters.limit}`;
        if (selectedRepo) queryParams += `&repo=${encodeURIComponent(selectedRepo)}`;
        if (currentFilters.dateFrom) queryParams += `&date_from=${currentFilters.dateFrom}`;
        if (currentFilters.dateTo) queryParams += `&date_to=${currentFilters.dateTo}`;
        if (currentFilters.distribution) queryParams += `&distribution=${encodeURIComponent(currentFilters.distribution)}`;
        if (searchSecond.value) queryParams += `&q=${encodeURIComponent(searchSecond.value)}`;

        fetch(`/api/snapshots/search?${queryParams}`)
            .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 %}