{{--
  Enterprise Data Table — reusable across Products, Inventory, Customers, Sales, etc.

  <x-data-table id="stock-table" title="Stock List">
    <x-slot:head>
      <x-data-table-th label="SKU" col="sku" :filterable="true" />
    </x-slot:head>
    <x-slot:body>
      <tr data-id="1">
        <td data-col="sku">...</td>
        <td data-edt-actions><x-action-dropdown id="1" /></td>
      </tr>
    </x-slot:body>
  </x-data-table>
--}}
@props([
  'id' => 'data-table-' . uniqid(),
  'title' => '',
  'subtitle' => '',
  'selectable' => false,
  'searchable' => true,
  'searchPlaceholder' => 'Search all columns…',
  'exportable' => true,
  'pageSize' => 10,
  'pageSizes' => [10, 25, 50, 100],
  'emptyTitle' => 'No records found',
  'emptyMessage' => 'Try adjusting search or filters.',
  'loading' => false,
])

@php
  $sizes = is_array($pageSizes) ? $pageSizes : array_map('intval', explode(',', (string) $pageSizes));
  $hasToolbarPanel = $title !== '' || isset($toolbarActions) || $searchable || isset($filters) || $exportable;
@endphp

<div
  {{ $attributes->class(['edt']) }}
  id="{{ $id }}-wrap"
  data-edt
  data-edt-id="{{ $id }}"
  data-page-size="{{ (int) $pageSize }}"
  data-selectable="{{ $selectable ? '1' : '0' }}"
>
  @if ($hasToolbarPanel)
    <div class="edt__toolbar-panel">
      @if ($title !== '' || isset($toolbarActions))
        <div class="edt__header">
          <div>
            @if ($title !== '')
              <h2 class="edt__title">{{ $title }}</h2>
            @endif
            @if ($subtitle !== '')
              <p class="edt__subtitle">{{ $subtitle }}</p>
            @endif
          </div>
          @isset($toolbarActions)
            <div class="edt__header-actions">{{ $toolbarActions }}</div>
          @endisset
        </div>
      @endif

      <div class="edt__toolbar">
        <div class="edt__toolbar-left">
          @if ($searchable)
            <div class="edt__search">
              <i class="bi bi-search" aria-hidden="true"></i>
              <input type="search" class="form-control form-control-sm" data-edt-search placeholder="{{ $searchPlaceholder }}" aria-label="Global search" autocomplete="off">
            </div>
          @endif
          @isset($filters)
            <div class="edt__filters">{{ $filters }}</div>
          @endisset
        </div>

        <div class="edt__toolbar-right">
          @if ($exportable)
            <div class="edt__export d-flex align-items-center gap-2">
              <div class="dropdown">
                <button
                  type="button"
                  class="btn btn-outline-secondary btn-sm dropdown-toggle"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="Export"
                >
                  <i class="bi bi-download" aria-hidden="true"></i>
                  <span>Export</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button type="button" class="dropdown-item" data-edt-export="excel">
                      <i class="bi bi-file-earmark-excel" aria-hidden="true"></i> Excel
                    </button>
                  </li>
                  <li>
                    <button type="button" class="dropdown-item" data-edt-export="pdf">
                      <i class="bi bi-file-earmark-pdf" aria-hidden="true"></i> PDF
                    </button>
                  </li>
                  <li>
                    <button type="button" class="dropdown-item" data-edt-export="csv">
                      <i class="bi bi-filetype-csv" aria-hidden="true"></i> CSV
                    </button>
                  </li>
                </ul>
              </div>
              <button type="button" class="btn btn-outline-secondary btn-sm" data-edt-export="print" title="Print">
                <i class="bi bi-printer" aria-hidden="true"></i>
                <span class="d-none d-sm-inline"> Print</span>
              </button>
            </div>
          @endif
          <div class="edt__page-size">
            <label class="edt__page-size-label" for="{{ $id }}-page-size">Show</label>
            <select id="{{ $id }}-page-size" class="form-select form-select-sm" data-edt-page-size aria-label="Page size">
              @foreach ($sizes as $size)
                <option value="{{ $size }}" @selected((int) $size === (int) $pageSize)>{{ $size }}</option>
              @endforeach
            </select>
          </div>
        </div>
      </div>
    </div>
  @endif

  @isset($afterToolbar)
    <div class="edt__after-toolbar">{{ $afterToolbar }}</div>
  @endisset

  <div class="edt__card">
    @if ($selectable)
      <div class="edt__bulk" data-edt-bulk hidden>
        <div class="edt__bulk-info"><strong data-edt-selected-count>0</strong> selected</div>
        <div class="edt__bulk-actions">
          @isset($bulkActions)
            {{ $bulkActions }}
          @else
            <button type="button" class="btn btn-soft-primary btn-sm" data-edt-bulk-action="export">Export selected</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-edt-bulk-action="deactivate">Deactivate</button>
            <button type="button" class="btn btn-outline-danger btn-sm" data-edt-bulk-action="delete">Delete</button>
          @endisset
          <button type="button" class="btn btn-ghost btn-sm" data-edt-clear-selection>Clear</button>
        </div>
      </div>
    @endif

    <div class="edt__table-wrap" data-edt-scroll>
      <div class="edt__loading {{ $loading ? 'is-visible' : '' }}" data-edt-loading @if (! $loading) hidden @endif>
        <div class="edt__spinner" role="status" aria-live="polite">
          <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Loading…
        </div>
      </div>

      <table class="edt__table" id="{{ $id }}" data-edt-table>
        <thead class="edt__thead">
          <tr data-edt-head-row>
            @if ($selectable)
              <th class="edt__th edt__th--check" scope="col">
                <input type="checkbox" class="form-check-input" data-edt-check-all aria-label="Select all rows">
              </th>
            @endif
            <th class="edt__th edt__th--no" scope="col">No.</th>
            {{ $head }}
            <th class="edt__th edt__th--actions" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody data-edt-body>{{ $body }}</tbody>
      </table>

      <div class="edt__empty" data-edt-empty hidden>
        <div class="ui-empty">
          <i class="bi bi-inbox" aria-hidden="true"></i>
          <p class="fw-semibold mb-1">{{ $emptyTitle }}</p>
          <p class="mb-0 text-muted fs-sm">{{ $emptyMessage }}</p>
        </div>
      </div>
    </div>

    <div class="edt__footer">
      <p class="edt__info" data-edt-info>Showing 0–0 of 0</p>
      <nav class="edt__pagination" data-edt-pagination aria-label="Table pagination"></nav>
    </div>
  </div>
</div>