{% extends "base.html" %}

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

{% block content %}
<div class="row">
  <div class="col-12">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('snapshots') }}">Snapshots</a></li>
        <li class="breadcrumb-item active">Compare</li>
      </ol>
    </nav>

    <h2 class="mb-4">Snapshot Comparison</h2>
    
    <!-- Comparison Header -->
    <div class="row mb-4">
      <div class="col-md-6">
        <div class="card border-primary">
          <div class="card-header bg-primary text-white">
            <h5 class="mb-0">{{ comparison.snapshot1.Name }}</h5>
          </div>
          <div class="card-body">
            <p><strong>Description:</strong> {{ comparison.snapshot1.Description or 'No description' }}</p>
            <p><strong>Created:</strong> {{ comparison.snapshot1.CreatedAt[:19] if comparison.snapshot1.CreatedAt else 'Unknown' }}</p>
            <p><strong>Total Packages:</strong> {{ comparison.stats.total_1 }}</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card border-success">
          <div class="card-header bg-success text-white">
            <h5 class="mb-0">{{ comparison.snapshot2.Name }}</h5>
          </div>
          <div class="card-body">
            <p><strong>Description:</strong> {{ comparison.snapshot2.Description or 'No description' }}</p>
            <p><strong>Created:</strong> {{ comparison.snapshot2.CreatedAt[:19] if comparison.snapshot2.CreatedAt else 'Unknown' }}</p>
            <p><strong>Total Packages:</strong> {{ comparison.stats.total_2 }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Statistics Summary -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="mb-0">Comparison Summary</h5>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-primary">{{ comparison.stats.only_1_count }}</h4>
              <small class="text-muted">Only in<br>{{ comparison.snapshot1.Name }}</small>
            </div>
          </div>
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-success">{{ comparison.stats.only_2_count }}</h4>
              <small class="text-muted">Only in<br>{{ comparison.snapshot2.Name }}</small>
            </div>
          </div>
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-info">{{ comparison.stats.common_count }}</h4>
              <small class="text-muted">Common<br>Packages</small>
            </div>
          </div>
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-warning">{{ comparison.stats.only_1_count + comparison.stats.only_2_count }}</h4>
              <small class="text-muted">Different<br>Packages</small>
            </div>
          </div>
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-secondary">{{ comparison.stats.total_1 + comparison.stats.total_2 - comparison.stats.common_count }}</h4>
              <small class="text-muted">Total if<br>Merged</small>
            </div>
          </div>
          <div class="col-md-2">
            <div class="border rounded p-3">
              <h4 class="text-dark">{{ ((comparison.stats.common_count / comparison.stats.total_1) * 100)|round(1) if comparison.stats.total_1 > 0 else 0 }}%</h4>
              <small class="text-muted">Similarity<br>Score</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison Results -->
    <div class="row">
      <!-- Only in First Snapshot -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header bg-primary text-white">
            <h6 class="mb-0">Only in {{ comparison.snapshot1.Name }} ({{ comparison.stats.only_1_count }})</h6>
          </div>
          <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
            {% if comparison.only_in_1 %}
              <div class="list-group list-group-flush">
                {% for pkg in comparison.only_in_1 %}
                <div class="list-group-item">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <strong>{{ pkg.name }}</strong><br>
                      <small class="text-muted">{{ pkg.version }}</small>
                    </div>
                    <div>
                      {% for arch in pkg.architectures %}
                        <span class="badge bg-light text-dark">{{ arch }}</span>
                      {% endfor %}
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="p-3 text-center text-muted">
                No unique packages
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Only in Second Snapshot -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header bg-success text-white">
            <h6 class="mb-0">Only in {{ comparison.snapshot2.Name }} ({{ comparison.stats.only_2_count }})</h6>
          </div>
          <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
            {% if comparison.only_in_2 %}
              <div class="list-group list-group-flush">
                {% for pkg in comparison.only_in_2 %}
                <div class="list-group-item">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <strong>{{ pkg.name }}</strong><br>
                      <small class="text-muted">{{ pkg.version }}</small>
                    </div>
                    <div>
                      {% for arch in pkg.architectures %}
                        <span class="badge bg-light text-dark">{{ arch }}</span>
                      {% endfor %}
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="p-3 text-center text-muted">
                No unique packages
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Common Packages -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header bg-info text-white">
            <h6 class="mb-0">Common Packages ({{ comparison.stats.common_count }})</h6>
          </div>
          <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
            {% if comparison.common %}
              <div class="list-group list-group-flush">
                {% for pkg in comparison.common %}
                <div class="list-group-item">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <strong>{{ pkg.name }}</strong><br>
                      <small class="text-muted">{{ pkg.version }}</small>
                    </div>
                    <div>
                      {% for arch in pkg.architectures %}
                        <span class="badge bg-light text-dark">{{ arch }}</span>
                      {% endfor %}
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="p-3 text-center text-muted">
                No common packages
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="text-center mt-4">
      <a href="{{ url_for('snapshots') }}" class="btn btn-secondary">Back to Snapshots</a>
      <button class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#compareModal">
        Compare Different Snapshots
      </button>
    </div>

    <!-- Compare Modal (for new comparison) -->
    <div class="modal fade" id="compareModal" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Compare Different Snapshots</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <form method="GET" action="{{ url_for('compare_snapshots') }}" id="compareForm">
              <div class="mb-3">
                <label class="form-label">Repository:</label>
                <select id="repoSelect" class="form-select" required>
                  <option value="">Select repository...</option>
                  {% for repo_name in repo_snapshots.keys() %}
                    <option value="{{ repo_name }}" {% if repo_name == comparison.snapshot1.SourceIDs[0] %}selected{% endif %}>{{ repo_name }}</option>
                  {% endfor %}
                </select>
              </div>
              
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">First Snapshot:</label>
                    <input type="text" name="snapshot1" id="snapshot1" class="form-control" placeholder="Type to search..." value="{{ comparison.snapshot1.Name }}" required autocomplete="off">
                    <div id="snapshot1Results" class="dropdown-menu w-100" style="max-height: 200px; overflow-y: auto;"></div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">Second Snapshot:</label>
                    <input type="text" name="snapshot2" id="snapshot2" class="form-control" placeholder="Type to search..." value="{{ comparison.snapshot2.Name }}" required autocomplete="off">
                    <div id="snapshot2Results" class="dropdown-menu w-100" style="max-height: 200px; overflow-y: auto;"></div>
                  </div>
                </div>
              </div>
              
              <div class="d-grid">
                <button type="submit" class="btn btn-primary">Compare Snapshots</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const repoSelect = document.getElementById('repoSelect');
        const snapshot1Input = document.getElementById('snapshot1');
        const snapshot2Input = document.getElementById('snapshot2');
        const snapshot1Results = document.getElementById('snapshot1Results');
        const snapshot2Results = document.getElementById('snapshot2Results');
        
        let currentRepo = repoSelect.value;
        
        repoSelect.addEventListener('change', function() {
            currentRepo = this.value;
            snapshot1Input.value = '';
            snapshot2Input.value = '';
            snapshot1Results.innerHTML = '';
            snapshot2Results.innerHTML = '';
        });
        
        function setupSnapshotSearch(input, resultsDiv) {
            let debounceTimer;
            
            input.addEventListener('input', function() {
                clearTimeout(debounceTimer);
                const query = this.value.trim();
                
                if (!currentRepo) {
                    resultsDiv.innerHTML = '<div class="dropdown-item text-muted">Please select a repository first</div>';
                    resultsDiv.style.display = 'block';
                    return;
                }
                
                if (query.length < 1) {
                    resultsDiv.style.display = 'none';
                    return;
                }
                
                debounceTimer = setTimeout(() => {
                    fetch(`/api/snapshots/search?q=${encodeURIComponent(query)}&repo=${encodeURIComponent(currentRepo)}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                resultsDiv.innerHTML = '<div class="dropdown-item text-danger">Error loading snapshots</div>';
                            } else if (data.snapshots.length === 0) {
                                resultsDiv.innerHTML = '<div class="dropdown-item text-muted">No snapshots found</div>';
                            } else {
                                resultsDiv.innerHTML = data.snapshots.map(snapshot => 
                                    `<div class="dropdown-item" data-value="${snapshot.name}">
                                        <strong>${snapshot.name}</strong><br>
                                        <small class="text-muted">${snapshot.created}</small>
                                    </div>`
                                ).join('');
                            }
                            resultsDiv.style.display = 'block';
                        })
                        .catch(() => {
                            resultsDiv.innerHTML = '<div class="dropdown-item text-danger">Error loading snapshots</div>';
                            resultsDiv.style.display = 'block';
                        });
                }, 300);
            });
            
            resultsDiv.addEventListener('click', function(e) {
                if (e.target.closest('.dropdown-item[data-value]')) {
                    const item = e.target.closest('.dropdown-item[data-value]');
                    input.value = item.dataset.value;
                    resultsDiv.style.display = 'none';
                }
            });
            
            input.addEventListener('blur', function() {
                setTimeout(() => resultsDiv.style.display = 'none', 200);
            });
        }
        
        setupSnapshotSearch(snapshot1Input, snapshot1Results);
        setupSnapshotSearch(snapshot2Input, snapshot2Results);
    });
    </script>
  </div>
</div>
{% endblock %}