{% extends "pos/base.html" %}
{% block content %}
<div class="container py-4">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold text-danger mb-0">
      👻 Orphan Tenant Data
      <span class="badge bg-danger ms-2">{{ total_orphan_ids }} orphan IDs found</span>
    </h4>
    <a href="{% url 'pos:empty_other_tenants' %}" class="btn btn-sm btn-outline-secondary">
      ← Back
    </a>
  </div>

  <p class="text-muted small mb-4">
    These <code>main_pos_business_id</code> values exist in your tables
    but have <strong>no matching BusinessProfile</strong>. They are safe to delete.
  </p>

  {% for m in messages %}
    <div class="alert alert-{{ m.tags|default:'info' }} alert-dismissible fade show">
      {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}

  {% if not orphan_summary %}
    <div class="alert alert-success">
      ✅ No orphan data found. All tables are clean!
    </div>
  {% else %}
  <form method="post" id="orphan-form">
    {% csrf_token %}

    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-semibold">Select Orphan Tenant IDs to Delete</span>
        <div>
          <button type="button" class="btn btn-sm btn-outline-primary me-1"
                  onclick="toggleAll(true)">Select All</button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  onclick="toggleAll(false)">None</button>
        </div>
      </div>

      <div class="card-body" style="max-height:65vh; overflow-y:auto;">
        {% for orphan_id, tables in orphan_summary %}
        <div class="orphan-row border rounded p-3 mb-2">
          <div class="d-flex align-items-start gap-3">

            {# Checkbox #}
            <input class="form-check-input orphan-chk mt-1 flex-shrink-0"
                   type="checkbox"
                   name="orphan_ids"
                   id="oid_{{ orphan_id }}"
                   value="{{ orphan_id }}">

            <label class="flex-grow-1" for="oid_{{ orphan_id }}" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-danger">ID: {{ orphan_id }}</span>
                <span class="text-muted small">
                  Found in {{ tables|length }} table{{ tables|length|pluralize }}
                </span>
                <span class="badge bg-secondary">
                  {{ tables|length }} tables
                </span>
              </div>

              {# Collapsible table list #}
              <div class="d-flex flex-wrap gap-1">
                {% for t in tables %}
                  <span class="badge bg-light text-dark border">
                    {{ t.table }}
                    <span class="text-danger fw-bold">×{{ t.count }}</span>
                  </span>
                {% endfor %}
              </div>
            </label>

          </div>
        </div>
        {% endfor %}
      </div>

      <div class="card-footer text-end">
        <span id="sel-count" class="text-muted small me-3">0 selected</span>
        <button type="button" class="btn btn-danger" onclick="confirmDelete()">
          🗑️ Delete Selected Orphans
        </button>
      </div>
    </div>
  </form>
  {% endif %}
</div>

<script>
let lastChecked = null;

document.querySelectorAll('.orphan-chk').forEach(function(chk) {
  chk.addEventListener('click', function(e) {
    if (e.shiftKey && lastChecked && lastChecked !== this) {
      const all = Array.from(document.querySelectorAll('.orphan-chk'));
      const from  = all.indexOf(lastChecked);
      const to    = all.indexOf(this);
      const start = Math.min(from, to);
      const end   = Math.max(from, to);
      all.slice(start, end + 1).forEach(c => c.checked = this.checked);
    }
    lastChecked = this;
    updateCount();
  });
});

function toggleAll(state) {
  document.querySelectorAll('.orphan-chk').forEach(c => c.checked = state);
  updateCount();
}

function updateCount() {
  const n = document.querySelectorAll('.orphan-chk:checked').length;
  document.getElementById('sel-count').textContent = `${n} selected`;
}

function confirmDelete() {
  const n = document.querySelectorAll('.orphan-chk:checked').length;
  if (n === 0) { alert('❌ Please select at least one orphan ID.'); return; }
  if (confirm(`⚠️ Delete all data for ${n} orphan tenant ID(s)?\n\nThis cannot be undone.`)) {
    document.getElementById('orphan-form').submit();
  }
}
</script>
{% endblock %}