{# admin/base_list.html — block-based base for model list views.
   Extend this to customize individual sections of the list view.

   Available blocks:
     list_breadcrumb     — breadcrumb navigation
     list_header         — page header (title + export/import/create actions)
     list_filters        — filter bar (search input + filter chips)
     list_bulk_actions   — bulk actions toolbar
     list_table          — data table fragment
     list_scripts        — page-level JS (filterBar, bulk actions)

   Context: registered, items, display_columns, permissions, filter_fields,
            active_filters, ordering, search_query, pagination, view, etc.
#}
{% extends "base.html" %}

{% block title %}{{ registered.verbose_name_plural }} — {{ title | default("Admin") }}{% endblock %}

{% block content %}
<div class="space-y-6">
  {% block list_breadcrumb %}
  <nav class="breadcrumb">
    <a href="{{ admin_path | default('/admin') }}/" class="breadcrumb-segment">
      {{ icon("home", size="16px") }}
      Dashboard
    </a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{{ registered.verbose_name_plural }}</span>
  </nav>
  {% endblock %}

  {% block list_header %}
  <div class="page-header">
    <div class="page-header-left">
      <h1 class="page-header-title">{{ registered.verbose_name_plural }}</h1>
      <p class="page-header-subtitle">Manage your {{ registered.verbose_name_plural | lower }} and inventory</p>
    </div>
    <div class="page-header-right" style="display: flex; gap: 0.5rem; align-items: center;">
      {% if permissions.can_export %}
      <div x-data="{ exportOpen: false }" class="relative">
        <button type="button" class="btn btn-secondary btn-sm" @click="exportOpen = !exportOpen">
          {{ icon("arrow-down-tray", size="16px") }} Export
        </button>
        <div x-show="exportOpen" @click.outside="exportOpen = false" x-transition
             class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
          {% set export_formats = registered.admin.get_export_formats() %}
          {% for fmt in export_formats %}
          <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/export/?format={{ fmt }}"
             class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
             @click="exportOpen = false">
            {{ fmt | upper }}
          </a>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if permissions.can_import %}
      <div x-data="{ importOpen: false, importFormat: 'csv' }" class="relative">
        <button type="button" class="btn btn-secondary btn-sm" @click="importOpen = !importOpen">
          {{ icon("arrow-up-tray", size="16px") }} Import
        </button>
        <div x-show="importOpen" @click.outside="importOpen = false" x-transition x-cloak
             class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 p-4"
             x-data="{ dragOver: false, fileName: '' }">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Import Data</h3>
            <button type="button" @click="importOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
              {{ icon("x-mark", size="16px") }}
            </button>
          </div>
          {% set import_formats = registered.admin.get_import_formats() %}
          <div class="mb-3">
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Format</label>
            <div class="flex gap-2">
              {% for fmt in import_formats %}
              <button type="button"
                      class="px-3 py-1 text-xs rounded-md border transition-colors"
                      :class="importFormat === '{{ fmt }}' ? 'bg-primary-500 text-white border-primary-500' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-primary-400'"
                      @click="importFormat = '{{ fmt }}'">
                {{ fmt | upper }}
              </button>
              {% endfor %}
            </div>
          </div>
          <form id="import-form" enctype="multipart/form-data"
                :hx-post="window.__ADMIN_PATH__ + '/{{ registered.table_name }}/import/?format=' + importFormat"
                hx-encoding="multipart/form-data"
                hx-target="#table-wrapper"
                hx-swap="outerHTML"
                hx-on::before-request="document.getElementById('import-progress').style.display='flex';"
                hx-on::after-request="document.getElementById('import-progress').style.display='none'; importOpen = false;">
            <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
            <label for="import-file-input"
                   class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer transition-colors"
                   :class="dragOver ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 hover:border-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10'"
                   @dragover.prevent="dragOver = true"
                   @dragleave.prevent="dragOver = false"
                   @drop.prevent="dragOver = false; $refs.fileInput.click();">
              <div class="flex flex-col items-center justify-center pt-3 pb-2">
                {{ icon("arrow-up-tray", size="24px", css_class="mb-2 text-gray-400 dark:text-gray-500") }}
                <p class="text-sm text-gray-600 dark:text-gray-400" x-text="fileName || 'Drop file here or click to browse'"></p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">CSV or Excel files</p>
              </div>
              <input id="import-file-input" type="file" name="file" accept=".csv,.xlsx,.xls" required x-ref="fileInput"
                     class="hidden"
                     @change="fileName = $event.target.files[0]?.name || ''">
            </label>
            <div id="import-progress" style="display:none;" class="flex items-center justify-center gap-2 mt-3 text-sm text-primary-600 dark:text-primary-400">
              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              Importing...
            </div>
            <button type="submit" class="mt-3 w-full btn btn-primary btn-sm">
              {{ icon("arrow-up-tray", size="16px") }} Upload & Import
            </button>
          </form>
        </div>
      </div>
      {% endif %}
      {% if permissions.can_create %}
      <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/create" class="btn btn-primary">
        + New {{ registered.verbose_name }}
      </a>
      {% endif %}
    </div>
  </div>
  {% endblock %}

  {% block list_filters %}
  <div class="filter-bar" x-data="filterBar()">
    <div class="filter-bar-search">
      {{ icon("magnifying-glass", class="filter-bar-search-icon", size="20px") }}
      <input type="text" name="q" value="{{ search_query | default('') }}"
             placeholder="Search {{ registered.verbose_name_plural | lower }}..."
             hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
             hx-trigger="keyup changed delay:300ms"
             hx-target="#table-wrapper"
             hx-swap="outerHTML"
             hx-include="[name='q']"
             class="filter-bar-search-input"
             x-ref="searchInput"
             @input="hasSearch = $refs.searchInput.value.length > 0">
      <button type="button" class="filter-bar-clear"
              x-show="hasSearch" x-transition
              @click="$refs.searchInput.value = ''; hasSearch = false; $refs.searchInput.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true}))">
        {{ icon("x-mark", size="16px") }}
      </button>
    </div>

    {% if filter_fields %}
    <div class="filter-bar-chips">
      {% for field_name, field_info in filter_fields.items() %}
      <div class="relative" x-data="{ open: false }">

        {% if field_info.field_type == "date" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="date" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-swap="outerHTML"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-date">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                  hx-swap="outerHTML"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% elif field_info.field_type == "datetime" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="datetime-local" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-swap="outerHTML"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-datetime">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                  hx-swap="outerHTML"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% elif field_info.field_type == "time" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="time" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-swap="outerHTML"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-time">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                  hx-swap="outerHTML"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% else %}
        {# boolean, enum, relation, text — render as dropdown #}
        <button type="button" class="filter-chip"
                :class="{ 'active': activeFilters['{{ field_name }}'] }"
                @click="open = !open">
          {{ field_name | replace('_', ' ') | title }}
          <template x-if="activeFilters['{{ field_name }}']">
            <span class="filter-chip-count" x-text="activeFilters['{{ field_name }}']"></span>
          </template>
          {{ icon("chevron-right", size="16px") }}
        </button>
        <div class="filter-dropdown" x-show="open" @click.outside="open = false" x-transition>
          <div class="filter-dropdown-header">
            <span>{{ field_name | replace('_', ' ') | title }}</span>
            <button type="button" class="filter-dropdown-clear"
                    @click="clearFilter('{{ field_name }}'); open = false">Clear</button>
          </div>
          {% for value, label in field_info.choices %}
          <div class="filter-dropdown-item">
            <input type="radio" name="filter_{{ field_name }}" value="{{ value }}"
                   :checked="activeFilters['{{ field_name }}'] === '{{ value }}'"
                   @change="setFilter('{{ field_name }}', '{{ value }}'); open = false"
                   id="filter_{{ field_name }}_{{ value }}">
            <label for="filter_{{ field_name }}_{{ value }}">{{ label }}</label>
          </div>
          {% endfor %}
        </div>
        {% endif %}

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

    <div class="filter-bar-right">
      {% if filter_fields %}
      <button type="button" class="filter-bar-clear-all"
              x-show="Object.keys(activeFilters).length > 0"
              x-transition
              @click="clearAllFilters()">
        Clear all filters
      </button>
      <div class="filter-bar-divider" x-show="Object.keys(activeFilters).length > 0"></div>
      {% endif %}

      <button type="button" class="filter-bar-action" title="Toggle column visibility"
              @click="showColumnPicker = !showColumnPicker">
        {{ icon("eye", size="20px") }}
      </button>
    </div>
  </div>
  {% endblock %}

  {% block list_bulk_actions %}
  {# Bulk Actions Bar — Django-style: always visible above table #}
  {% if permissions.can_delete or list_actions %}
  <div class="bulk-bar">
    <div class="bulk-bar-left">
      <label class="bulk-bar-label" for="bulk-action-select">Action:</label>
      <select id="bulk-action-select" name="bulk_action" class="bulk-bar-select">
        <option value="">---------</option>
        {% if list_actions %}
        {% for action in list_actions %}
        <option value="{{ action.name }}">{{ action.label | default(action.name) }}</option>
        {% endfor %}
        {% endif %}
        {% if permissions.can_delete %}
        <option value="delete_selected">Delete selected</option>
        {% endif %}
      </select>
    </div>
    <div class="bulk-bar-right">
      <button type="button" class="btn btn-primary btn-sm" onclick="executeBulkAction()">Go</button>
    </div>
  </div>
  {% endif %}
  {% endblock %}

  {% block list_table %}
  {% include "partials/list_table.html" %}
  {% endblock %}
</div>

{% block list_scripts %}
<script>
function filterBar() {
  return {
    hasSearch: false,
    activeFilters: {{ active_filters | tojson }},
    showColumnPicker: false,
    init() {
    },
    setFilter(field, value) {
      if (value) {
        this.activeFilters[field] = value;
      } else {
        delete this.activeFilters[field];
      }
      this.applyFilters();
    },
    clearFilter(field) {
      delete this.activeFilters[field];
      this.applyFilters();
    },
    clearAllFilters() {
      this.activeFilters = {};
      this.applyFilters();
    },
    applyFilters() {
      const params = new URLSearchParams(window.location.search);
      Object.entries(this.activeFilters).forEach(([key, val]) => {
        if (val) params.set('filter_' + key, val);
        else params.delete('filter_' + key);
      });
      const search = this.$refs.searchInput?.value;
      if (search) params.set('q', search);
      else params.delete('q');
      const url = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
      htmx.ajax('GET', url, { target: '#table-wrapper', swap: 'outerHTML' });
    }
  };
}

function _sendBulkAction(actionValue, selectedIds) {
  var params = new URLSearchParams();
  params.append('action', actionValue);
  params.append('csrf_token', document.querySelector('meta[name="csrf-token"]').content);
  selectedIds.forEach(function(id) {
    params.append('ids[]', id);
  });

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '{{ admin_path | default("/admin") }}/{{ registered.table_name }}/bulk', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.setRequestHeader('HX-Request', 'true');
  xhr.onload = function() { window.location.reload(); };
  xhr.onerror = function() { window.location.reload(); };
  xhr.send(params.toString());
}

function executeBulkAction() {
  var actionSelect = document.getElementById('bulk-action-select');
  var selected = document.querySelectorAll('input[name="ids[]"]:checked');

  if (selected.length === 0) {
    alert('Please select at least one item.');
    return;
  }
  if (!actionSelect.value) {
    alert('Please select an action.');
    return;
  }

  var selectedIds = Array.from(selected).map(function(cb) { return cb.value; });

  if (actionSelect.value === 'delete_selected') {
    confirmAction('Delete selected', 'Are you sure you want to delete the selected items?', function() {
      _sendBulkAction(actionSelect.value, selectedIds);
    });
    return;
  }

  _sendBulkAction(actionSelect.value, selectedIds);
}
</script>
{% endblock %}
{% endblock %}