{% extends "pos/base.html" %}
{% block content %}

<div class="container-fluid py-4">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold text-danger mb-0">🗑️ Clean Tenant Data</h4>
    <a href="?reset_session=1"
       class="btn btn-sm btn-outline-secondary"
       onclick="return confirm('Reset all highlights?')">
      🔄 Reset Highlights
    </a>
  </div>

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

  <form method="post" id="main-form">
    {% csrf_token %}

    <div class="row g-4">

      <div class="col-lg-5">
        <div class="card shadow-sm h-100">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span class="fw-semibold">Step 1 — Select Tenants</span>
            <div>
              <button type="button" class="btn btn-sm btn-outline-primary me-1"
                      onclick="toggleTenants(true)">All</button>
              <button type="button" class="btn btn-sm btn-outline-secondary"
                      onclick="toggleTenants(false)">None</button>
            </div>
          </div>

          <div class="card-body overflow-auto" style="max-height:70vh;">
            <div class="row g-2" id="tenant-grid">
              {% for tenant in all_tenants %}
                {% if tenant.id in cleaned_tenant_ids %}
                  {# CLEANED tenant #}
                  <div class="col-12 tenant-col" 
                    data-name="{{ tenant.business_name|lower|default:'' }} {{ tenant.branch_name|lower|default:'' }}">
                    <label class="tenant-card cleaned w-100"
                           for="tid_{{ tenant.id }}">
                      <div class="d-flex align-items-center gap-3">
                        <input class="form-check-input tenant-chk flex-shrink-0"
                               type="checkbox"
                               name="tenant_ids"
                               id="tid_{{ tenant.id }}"
                               value="{{ tenant.id }}">
                        <div class="flex-grow-1">
                          <div class="fw-semibold">
                            {{ tenant.business_name|default:tenant.branch_name|default:tenant.company_name|default:"—" }}
                          </div>
                          <small class="text-muted">
                            ID: {{ tenant.id }}
                            {% if tenant.branch_name %} · {{ tenant.branch_name }}{% endif %}
                          </small>
                        </div>
                        <span class="badge bg-success">✓ Cleaned</span>
                      </div>
                    </label>
                  </div>
                {% else %}
                  {# PENDING tenant #}
                    <div class="col-12 tenant-col" 
                    data-name="{{ tenant.business_name|lower|default:'' }} {{ tenant.branch_name|lower|default:'' }}">
                    <label class="tenant-card w-100"
                           for="tid_{{ tenant.id }}">
                      <div class="d-flex align-items-center gap-3">
                        <input class="form-check-input tenant-chk flex-shrink-0"
                               type="checkbox"
                               name="tenant_ids"
                               id="tid_{{ tenant.id }}"
                               value="{{ tenant.id }}">
                        <div class="flex-grow-1">
                          <div class="fw-semibold">
                            {{ tenant.business_name|default:tenant.branch_name|default:tenant.company_name|default:"—" }}
                          </div>
                          <small class="text-muted">
                            ID: {{ tenant.id }}
                            {% if tenant.branch_name %} · {{ tenant.branch_name }}{% endif %}
                          </small>
                        </div>
                        <span class="badge bg-warning text-dark">Pending</span>
                      </div>
                    </label>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>

          {# Tenant search #}
          <div class="card-footer">
            <input type="text" id="tenant-search" class="form-control form-control-sm"
                   placeholder="🔍 Search tenants...">
          </div>
        </div>
      </div>

      <div class="col-lg-7">
        <div class="card shadow-sm h-100">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span class="fw-semibold">Step 2 — Select Tables to Clean</span>
            <div>
              <button type="button" class="btn btn-sm btn-outline-primary me-1"
                      onclick="toggleTables(true)">All</button>
              <button type="button" class="btn btn-sm btn-outline-secondary"
                      onclick="toggleTables(false)">None</button>
            </div>
          </div>

          <div class="card-body overflow-auto" style="max-height:70vh;">
            <div class="input-group mb-3">
              <input type="text" id="table-search" class="form-control form-control-sm"
                     placeholder="🔍 Search tables...">
            </div>
            <div class="row row-cols-1 row-cols-md-2 g-2">
              {% for model in models %}
                <div class="col table-col">
                  <div class="form-check p-2 border rounded">
                    <input class="form-check-input table-chk" type="checkbox"
                           name="models"
                           id="chk_{{ model.name }}"
                           value="{{ model.name }}">
                    <label class="form-check-label small fw-semibold"
                           for="chk_{{ model.name }}">
                      {{ model.label }}
                    </label>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>

          <div class="card-footer text-end">
            <span id="selection-summary" class="text-muted small me-3">
              0 tenants · 0 tables selected
            </span>
            <button type="button" class="btn btn-danger" onclick="confirmAndSubmit()">
              🗑️ Clean Selected Tenants
            </button>
          </div>
        </div>
      </div>

    </div>{# /row #}
  </form>
</div>

{# ── Progress counter bar at bottom ── #}
<div class="fixed-bottom bg-dark text-white py-2 px-4 d-flex justify-content-between align-items-center"
     style="font-size:0.85rem; opacity:0.92;">
  <span>
    ✅ Cleaned:
    <strong class="text-success">{{ cleaned_tenant_ids|length }}</strong>
    /
    <strong>{{ all_tenants|length }}</strong>
    tenants
  </span>
  <span>
    Remaining:
    <strong class="text-warning">
      {{ all_tenants|length|add:"-"|add:cleaned_tenant_ids|length }}
    </strong>
  </span>
</div>

<style>
.tenant-card {
  cursor: pointer;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.2s;
  background: #fff;
}
.tenant-card:hover {
  border-color: #0d6efd;
  background: #f0f5ff;
}
.tenant-card.cleaned {
  border-color: #198754;
  background: #d1e7dd;
}
.tenant-card:has(.tenant-chk:checked) {
  border-color: #dc3545;
  background: #fff0f0;
  box-shadow: 0 0 0 2px rgba(220,53,69,0.25);
}
</style>

<script>
(function () {
  let lastChecked = null;

  // ── Shift+click range selection on tenant checkboxes ──────────────────
  document.querySelectorAll('.tenant-chk').forEach(function(chk) {
    chk.addEventListener('click', function(e) {
      if (e.shiftKey && lastChecked && lastChecked !== this) {
        // Find all visible checkboxes
        const allChks = Array.from(
          document.querySelectorAll('.tenant-col:not([style*="display: none"]) .tenant-chk')
        );
        const from = allChks.indexOf(lastChecked);
        const to   = allChks.indexOf(this);
        const start = Math.min(from, to);
        const end   = Math.max(from, to);

        // Set all between to same state as the shift-clicked one
        allChks.slice(start, end + 1).forEach(c => c.checked = this.checked);
      }

      lastChecked = this;
      updateSummary();
    });
  });

  // ── Toggle All ─────────────────────────────────────────────────────────
  function toggleTenants(state) {
    document.querySelectorAll('.tenant-chk').forEach(c => c.checked = state);
    updateSummary();
  }
  function toggleTables(state) {
    document.querySelectorAll('.table-chk').forEach(c => c.checked = state);
    updateSummary();
  }
  window.toggleTenants = toggleTenants;
  window.toggleTables  = toggleTables;

  // ── Live summary badge ─────────────────────────────────────────────────
  function updateSummary() {
    const t = document.querySelectorAll('.tenant-chk:checked').length;
    const m = document.querySelectorAll('.table-chk:checked').length;
    document.getElementById('selection-summary').textContent =
      `${t} tenant${t !== 1 ? 's' : ''} · ${m} table${m !== 1 ? 's' : ''} selected`;
  }
  document.querySelectorAll('.table-chk')
    .forEach(c => c.addEventListener('change', updateSummary));

  // ── Search: tenants ────────────────────────────────────────────────────
  document.getElementById('tenant-search').addEventListener('input', function () {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.tenant-col').forEach(col => {
      col.style.display = col.dataset.name.includes(term) ? '' : 'none';
    });
  });

  // ── Search: tables ─────────────────────────────────────────────────────
  document.getElementById('table-search').addEventListener('input', function () {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.table-col').forEach(col => {
      const lbl = col.querySelector('label').textContent.toLowerCase();
      col.style.display = lbl.includes(term) ? '' : 'none';
    });
  });

})();

// ── Confirm & Submit ───────────────────────────────────────────────────────
function confirmAndSubmit() {
  const tenants = document.querySelectorAll('.tenant-chk:checked');
  const tables  = document.querySelectorAll('.table-chk:checked');

  if (tenants.length === 0) {
    alert('❌ Please select at least one tenant.');
    return;
  }
  if (tables.length === 0) {
    alert('❌ Please select at least one table.');
    return;
  }

  const tenantNames = [...tenants].map(c =>
    c.closest('.tenant-col').querySelector('.fw-semibold').textContent.trim()
  ).join(', ');

  const msg = `⚠️ WARNING!\n\nDeleting data for:\n${tenantNames}\n\nFrom ${tables.length} table(s).\n\nThis cannot be undone. Continue?`;
  if (confirm(msg)) {
    document.getElementById('main-form').submit();
  }
}
</script>
{% endblock %}