{% extends "base.html" %}
{% block content %}
<h1 class="text-2xl md:text-3xl font-semibold tracking-tight mb-6 leading-tight" style="color: var(--color-brand);">Installs</h1>

{# Edit modal — opened via HTMX swap into #edit-modal, closed by HX-Trigger:closeEditModal #}
<dialog id="edit-modal"
        class="rounded-xl border p-0 w-full max-w-lg shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm"
        style="background-color: var(--color-bg-elevated); border-color: var(--color-border); color: var(--color-fg);">
</dialog>

<dialog id="share-modal"
        class="rounded-xl border p-0 w-full max-w-xl shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm"
        style="background-color: var(--color-bg-elevated); border-color: var(--color-border); color: var(--color-fg);">
  <header class="flex items-center justify-between gap-3 px-5 py-4 border-b"
          style="border-color: var(--color-border);">
    <div class="min-w-0 flex-1">
      <h2 class="text-sm font-semibold truncate" style="color: var(--color-fg);">Share install</h2>
      <p class="text-xs mt-0.5" style="color: var(--color-fg-faint);">Clipboard access was unavailable, so the share text is shown here.</p>
    </div>
    <button type="button"
            onclick="document.getElementById('share-modal').close()"
            class="btn btn-ghost text-xs shrink-0"
            aria-label="Close">✕</button>
  </header>
  <div class="px-5 py-4 grid gap-3">
    <textarea id="share-modal-text"
              class="input min-h-48 font-mono text-xs"
              readonly
              aria-label="Share markdown"></textarea>
    <div class="flex justify-end gap-2">
      <button type="button" class="btn"
              onclick="document.getElementById('share-modal').close()">Close</button>
      <button type="button" class="btn btn-primary" id="share-modal-copy">Copy</button>
    </div>
  </div>
</dialog>

{# Hidden bulk-action form — populated by row checkboxes via form="bulk-form" #}
<form id="bulk-form" method="post" style="display:none;"
      hx-target="#installs-table" hx-push-url="false">
  <input type="hidden" name="csrf_token" value="{{ request.cookies.get('why_csrf', '') if request else '' }}">
</form>

{% include "components/filter_bar.html" %}
<div id="installs-table">
  {% include "installs_table.html" %}
</div>

{# Sticky bulk-action bar — shown when any checkbox is checked via data-selected-count #}
<div id="bulk-bar"
     class="fixed bottom-0 left-0 right-0 z-30 px-4 md:px-8 py-3 flex items-center gap-4 border-t text-sm"
     style="background-color: var(--color-bg-elevated); border-color: var(--color-border-strong); box-shadow: 0 -2px 8px rgb(0 0 0 / 0.08); display: none !important;"
     data-bulk-bar>
  <span id="bulk-count" class="font-medium tabular-nums" style="color: var(--color-fg);">0 selected</span>
  <div class="flex items-center gap-2 ml-auto">
    <label class="text-xs font-medium" style="color: var(--color-fg-muted);">Set disposition:</label>
    <select id="bulk-disposition" class="select text-xs py-1"
            onchange="
              if (!this.value) return;
              const form = document.getElementById('bulk-form');
              form.action = '/installs/bulk';
              const disp = document.createElement('input');
              disp.type = 'hidden'; disp.name = 'disposition'; disp.value = this.value;
              form.appendChild(disp);
              form.setAttribute('hx-post', '/installs/bulk');
              htmx.process(form);
              form.querySelector('[name=disposition]').remove();
              htmx.trigger(form, 'submit');
              this.value = '';
            ">
      <option value="">— disposition —</option>
      <option value="doc">Doc</option>
      <option value="setup">Setup</option>
      <option value="experimental">Experimental</option>
      <option value="remove">Remove</option>
      <option value="ignore">Ignore</option>
    </select>
    <button type="button" class="btn text-xs"
            style="background-color: var(--color-remove); color: var(--color-remove-fg); border-color: var(--color-remove-border);"
            onclick="
              if (!confirm('Delete selected installs?')) return;
              const form = document.getElementById('bulk-form');
              form.setAttribute('hx-post', '/installs/bulk/delete');
              htmx.process(form);
              htmx.trigger(form, 'submit');
            ">
      Delete
    </button>
    <button type="button" class="btn btn-ghost text-xs"
            onclick="
              document.querySelectorAll('input[name=selected]').forEach(cb => cb.checked = false);
              document.getElementById('master-checkbox') && (document.getElementById('master-checkbox').checked = false);
              window.__updateBulkBar && window.__updateBulkBar();
            ">
      Cancel
    </button>
  </div>
</div>

<div id="share-toast"
     class="fixed top-4 right-4 z-40 max-w-sm rounded-lg border px-4 py-3 text-sm shadow-lg transition-opacity duration-150"
     style="display:none; background-color: var(--color-bg-elevated); border-color: var(--color-border-strong); color: var(--color-fg);">
</div>

<script>
(function () {
  const interactiveSelector = 'a, button, input, select, textarea, label, summary, [role="button"]';
  let lastPointerX = null;
  let lastPointerY = null;

  function eachHoverableRow(fn) {
    document.querySelectorAll('[data-hoverable-row="true"]').forEach(fn);
  }

  function setRowHoverState(row, isActive) {
    if (!row) return;
    row.dataset.rowHoverActive = isActive ? 'true' : 'false';
    row.style.backgroundColor = isActive ? 'var(--color-bg-muted)' : '';
    row.querySelectorAll('[data-row-actions="true"]').forEach(function (actions) {
      actions.style.opacity = isActive ? '1' : '';
    });
  }

  function clearAllRowHoverState() {
    eachHoverableRow(function (row) {
      setRowHoverState(row, false);
    });
  }

  function recomputeRowHoverState() {
    clearAllRowHoverState();
    if (lastPointerX === null || lastPointerY === null) return;
    if (document.getElementById('edit-modal')?.open || document.getElementById('share-modal')?.open) return;
    const el = document.elementFromPoint(lastPointerX, lastPointerY);
    const row = el && el.closest ? el.closest('[data-hoverable-row="true"]') : null;
    if (row) setRowHoverState(row, true);
  }

  // ── Edit modal helpers ───────────────────────────────────────────────────
  // Open the dialog after HTMX swaps content into #edit-modal
  document.addEventListener('htmx:afterSwap', function (e) {
    if (e.detail && e.detail.target && e.detail.target.id === 'edit-modal') {
      var modal = document.getElementById('edit-modal');
      clearAllRowHoverState();
      if (modal && !modal.open) modal.showModal();
    }
  });

  // Close the dialog when the server fires closeEditModal via HX-Trigger
  document.addEventListener('closeEditModal', function () {
    var modal = document.getElementById('edit-modal');
    if (modal && modal.open) modal.close();
    window.requestAnimationFrame(function () {
      document.body.focus && document.body.focus({ preventScroll: true });
      recomputeRowHoverState();
    });
  });

  const editModal = document.getElementById('edit-modal');
  if (editModal) {
    editModal.addEventListener('close', function () {
      window.requestAnimationFrame(function () {
        document.body.focus && document.body.focus({ preventScroll: true });
        recomputeRowHoverState();
      });
    });
  }

  const shareModal = document.getElementById('share-modal');
  if (shareModal) {
    shareModal.addEventListener('close', function () {
      window.requestAnimationFrame(function () {
        document.body.focus && document.body.focus({ preventScroll: true });
        recomputeRowHoverState();
      });
    });
  }

  function showShareToast(message, isError) {
    const toast = document.getElementById('share-toast');
    if (!toast) return;
    toast.textContent = message;
    toast.style.display = 'block';
    toast.style.opacity = '1';
    toast.style.borderColor = isError ? 'var(--color-remove-border)' : 'var(--color-border-strong)';
    toast.style.color = isError ? 'var(--color-remove-fg)' : 'var(--color-fg)';
    toast.style.backgroundColor = isError ? 'var(--color-remove)' : 'var(--color-bg-elevated)';
    window.clearTimeout(window.__shareToastTimer);
    window.__shareToastTimer = window.setTimeout(function () {
      toast.style.opacity = '0';
      window.setTimeout(function () {
        toast.style.display = 'none';
      }, 150);
    }, 2200);
  }

  function openShareModal(text) {
    const modal = document.getElementById('share-modal');
    const area = document.getElementById('share-modal-text');
    if (!modal || !area) return;
    area.value = text;
    modal.showModal();
    area.focus();
    area.select();
  }

  async function copyShareText(text) {
    if (!navigator.clipboard || !navigator.clipboard.writeText) {
      throw new Error('clipboard unavailable');
    }
    await navigator.clipboard.writeText(text);
  }

  document.addEventListener('mousemove', function (e) {
    lastPointerX = e.clientX;
    lastPointerY = e.clientY;
    recomputeRowHoverState();
  });

  document.addEventListener('mouseover', function (e) {
    const row = e.target.closest && e.target.closest('[data-hoverable-row="true"]');
    if (row) setRowHoverState(row, true);
  });

  document.addEventListener('mouseout', function (e) {
    const row = e.target.closest && e.target.closest('[data-hoverable-row="true"]');
    if (!row) return;
    if (row.contains(e.relatedTarget)) return;
    setRowHoverState(row, false);
  });

  document.addEventListener('mouseleave', function (e) {
    if (e.target === document.documentElement) {
      clearAllRowHoverState();
    }
  }, true);

  document.addEventListener('click', function (e) {
    const shareButton = e.target.closest('[data-share-url]');
    if (shareButton) {
      e.preventDefault();
      e.stopPropagation();
      const url = shareButton.getAttribute('data-share-url');
      const csrf = document.querySelector('meta[name="csrf-token"]');
      fetch(url, {
        method: 'POST',
        headers: csrf ? { 'X-CSRF-Token': csrf.getAttribute('content') } : {},
      })
        .then(async function (response) {
          const text = await response.text();
          if (!response.ok) throw new Error(text || 'share failed');
          try {
            await copyShareText(text);
            showShareToast('Share markdown copied to clipboard.', false);
          } catch (_err) {
            openShareModal(text);
            showShareToast('Share markdown ready to copy.', false);
          }
        })
        .catch(function (err) {
          showShareToast(err.message || 'Share failed.', true);
        });
      return;
    }

    const interactive = e.target.closest(interactiveSelector);
    if (interactive) return;
    const row = e.target.closest('[data-edit-url]');
    if (!row) return;
    const url = row.getAttribute('data-edit-url');
    if (!url) return;
    clearAllRowHoverState();
    htmx.ajax('GET', url, {
      target: '#edit-modal',
      swap: 'innerHTML',
    });
  });

  const shareModalCopy = document.getElementById('share-modal-copy');
  if (shareModalCopy) {
    shareModalCopy.addEventListener('click', async function () {
      const area = document.getElementById('share-modal-text');
      if (!area) return;
      try {
        await copyShareText(area.value);
        showShareToast('Share markdown copied to clipboard.', false);
      } catch (_err) {
        area.focus();
        area.select();
        showShareToast('Clipboard blocked. Copy from the modal.', true);
      }
    });
  }

  // ── Bulk bar helpers ─────────────────────────────────────────────────────
  function updateBulkBar() {
    const checked = document.querySelectorAll('input[name="selected"]:checked');
    const bar = document.querySelector('[data-bulk-bar]');
    const countEl = document.getElementById('bulk-count');
    if (!bar) return;
    const n = checked.length;
    if (n > 0) {
      bar.style.removeProperty('display');
    } else {
      bar.style.setProperty('display', 'none', 'important');
    }
    if (countEl) countEl.textContent = n + ' selected';

    // Sync selected IDs into the bulk form
    const form = document.getElementById('bulk-form');
    if (form) {
      form.querySelectorAll('input[name="selected"]').forEach(el => el.remove());
      checked.forEach(cb => {
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'selected';
        hidden.value = cb.value;
        form.appendChild(hidden);
      });
    }

    // Sync master checkbox indeterminate state
    const master = document.getElementById('master-checkbox');
    if (master) {
      const all = document.querySelectorAll('input[name="selected"]');
      master.indeterminate = n > 0 && n < all.length;
      master.checked = all.length > 0 && n === all.length;
    }
  }

  window.__updateBulkBar = updateBulkBar;

  // Delegate checkbox change events (works after HTMX swaps)
  document.addEventListener('change', function (e) {
    if (e.target && (e.target.name === 'selected' || e.target.id === 'master-checkbox')) {
      if (e.target.id === 'master-checkbox') {
        document.querySelectorAll('input[name="selected"]').forEach(cb => {
          cb.checked = e.target.checked;
        });
      }
      updateBulkBar();
    }
  });

  // Re-run after HTMX swaps table fragment
  document.addEventListener('htmx:afterSwap', function (e) {
    if (e.detail && e.detail.target && e.detail.target.id === 'installs-table') {
      // Clear bar after bulk action completes
      document.querySelectorAll('input[name="selected"]').forEach(cb => cb.checked = false);
      updateBulkBar();
    }
  });
})();
</script>
{% endblock %}