@props([
    'id' => null,
    'title' => null,
    'eyebrow' => null,
    'description' => null,
    'columns' => [],
    'rows' => [],
    'paginator' => null,
    'createUrl' => null,
    'createLabel' => 'New record',
    'bulkDeleteUrl' => null,
    'bulkDeleteLabel' => 'Delete selected',
    'bulkDeleteConfirm' => 'Delete selected records?',
    'emptyTitle' => 'No records found',
    'emptyText' => 'Try adjusting filters or create a new record.',
    'selectable' => true,
    'settingsLabel' => 'Table settings',
])

@php
    $tableId = $id ?: 'erp-table-'.str()->random(8);
    $hasRowActions = collect($rows)->contains(fn ($row) => ! empty($row['actions']));
    $previewDrawerId = $tableId.'_preview_drawer';
    $hasPreviewActions = collect($rows)->contains(function ($row) {
        return collect($row['actions'] ?? [])->contains(fn ($action) => ! empty($action['preview']));
    });
    $columnCount = count($columns);
    $totalRows = $paginator ? $paginator->total() : count($rows);
    $defaultFootnote = $paginator && $totalRows > 0
        ? 'Showing '.$paginator->firstItem().' - '.$paginator->lastItem().' of '.$totalRows
        : 'Showing '.count($rows).' of '.$totalRows;
@endphp

<section class="erp-table-card" data-erp-table data-erp-table-id="{{ $tableId }}">
    <div class="erp-table-shell">
        <div class="erp-table-header">
            <div class="erp-table-title-block">
                @if ($eyebrow)
                    <p class="erp-table-eyebrow">{{ $eyebrow }}</p>
                @endif
                @if ($title)
                    <h3>{{ $title }}</h3>
                @endif
                @if ($description)
                    <p>{{ $description }}</p>
                @endif
            </div>

            <div class="erp-table-header-actions"></div>
        </div>

        @isset($filters)
            <div class="erp-table-server-filters">
                {{ $filters }}
            </div>
        @endisset

        <div class="erp-table-toolbar">
            <label class="erp-table-search">
                <x-ui.icon name="search" size="16" />
                <input type="search" data-erp-table-search placeholder="Search this table" aria-label="Search this table">
            </label>

            <div class="erp-table-toolbar-actions">
                <span class="erp-selection-count" data-erp-selection-count hidden>0 selected</span>
                @if ($bulkDeleteUrl && $selectable)
                    <form
                        id="{{ $tableId }}_bulk_delete"
                        method="POST"
                        action="{{ $bulkDeleteUrl }}"
                        class="erp-bulk-delete-form"
                        data-erp-bulk-delete-form
                        hidden
                        onsubmit="return confirm('{{ $bulkDeleteConfirm }}');"
                    >
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-danger erp-bulk-delete-trigger" data-erp-bulk-delete-trigger disabled>
                            <x-ui.icon name="trash" size="15" />
                            {{ $bulkDeleteLabel }}
                        </button>
                    </form>
                @endif
                @if ($createUrl)
                    <a href="{{ $createUrl }}" class="btn-primary inline erp-table-create">
                        <x-ui.icon name="plus" size="15" />
                        {{ $createLabel }}
                    </a>
                @endif
                <div class="erp-table-settings">
                    <button type="button" class="btn-secondary erp-table-settings-trigger" data-erp-settings-trigger aria-expanded="false" aria-controls="{{ $tableId }}_settings">
                        <x-ui.icon name="settings" size="15" />
                        {{ $settingsLabel }}
                    </button>
                    <div id="{{ $tableId }}_settings" class="erp-table-settings-panel" data-erp-settings-panel hidden>
                        <div class="erp-table-settings-head">
                            <strong>Columns</strong>
                            <button type="button" class="erp-link-button" data-erp-reset-table>Reset</button>
                        </div>
                        <div class="erp-column-manager" data-erp-column-manager>
                            @foreach ($columns as $column)
                                <label class="erp-column-manager-item" draggable="true" data-erp-column-item="{{ $column['key'] }}">
                                    <span class="erp-drag-handle"><x-ui.icon name="grip-vertical" size="15" /></span>
                                    <input type="checkbox" data-erp-column-toggle="{{ $column['key'] }}" @checked(($column['hidden'] ?? false) === false) @disabled(($column['hideable'] ?? true) === false)>
                                    <span>{{ $column['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="erp-table-scroll" data-erp-table-scroll>
            <div class="erp-table-stage @if ($selectable) erp-table-stage--with-selection @endif @if ($hasRowActions) erp-table-stage--with-actions @endif">
                @if ($selectable)
                    <div class="erp-table-selection-rail" data-erp-selection-rail aria-label="Row selection">
                        <div class="erp-table-selection-rail-head" data-erp-selection-rail-head>
                            <input type="checkbox" data-erp-select-all aria-label="Select all visible rows">
                        </div>
                        <div class="erp-table-selection-rail-body" data-erp-selection-rail-body>
                            @foreach ($rows as $row)
                                <div class="erp-table-selection-rail-row" data-erp-select-row data-erp-row-key="{{ $loop->index }}">
                                    <input
                                        type="checkbox"
                                        data-erp-row-select
                                        aria-label="Select row"
                                        @if ($bulkDeleteUrl && ! empty($row['id'])) name="ids[]" value="{{ $row['id'] }}" form="{{ $tableId }}_bulk_delete" @endif
                                    >
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="erp-table-main-scroll" data-erp-table-main-scroll>
                    <table class="erp-table">
                        <thead>
                            <tr data-erp-header-row>
                                @foreach ($columns as $column)
                                    @php
                                        $key = $column['key'];
                                    @endphp
                                    <th
                                        data-erp-column="{{ $key }}"
                                        data-erp-column-label="{{ $column['label'] }}"
                                        style="width: {{ $column['width'] ?? '160px' }}; min-width: {{ $column['minWidth'] ?? '120px' }};"
                                        @if(($column['sortable'] ?? true) === true) aria-sort="none" @endif
                                    >
                                        <div class="erp-table-heading">
                                            <div class="erp-table-heading-main">
                                                @if (($column['sortable'] ?? true) === true)
                                                    <button type="button" class="erp-table-sort" data-erp-sort="{{ $key }}">
                                                        <span>{{ $column['label'] }}</span>
                                                        <span class="erp-sort-icon" data-erp-sort-icon data-sort-direction="none">
                                                            <x-ui.icon name="sort" size="13" />
                                                        </span>
                                                    </button>
                                                @else
                                                    <span>{{ $column['label'] }}</span>
                                                @endif
                                            </div>

                                            <div class="erp-table-heading-controls">
                                                @if (($column['filterable'] ?? true) !== false)
                                                    <button
                                                        type="button"
                                                        class="erp-column-filter-trigger"
                                                        data-erp-filter-trigger="{{ $key }}"
                                                        aria-expanded="false"
                                                        aria-controls="{{ $tableId }}_filter_{{ $key }}"
                                                        title="Filter {{ $column['label'] }}"
                                                        aria-label="Filter {{ $column['label'] }}"
                                                    >
                                                        <x-ui.icon name="filter" size="14" />
                                                    </button>
                                                @endif

                                                @if (($column['resizable'] ?? true) === true)
                                                    <span class="erp-column-resize" data-erp-resize="{{ $key }}" aria-hidden="true"></span>
                                                @endif
                                            </div>
                                        </div>

                                        <x-erp.column-filter :column="$column" :table-id="$tableId" />
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody data-erp-table-body>
                            @forelse ($rows as $row)
                                <tr
                                    data-erp-row
                                    data-erp-row-key="{{ $loop->index }}"
                                    data-erp-index="{{ $loop->index }}"
                                    data-erp-href="{{ $row['href'] ?? '' }}"
                                    data-erp-search="{{ $row['search'] ?? '' }}"
                                >
                                    @foreach ($columns as $column)
                                        @php
                                            $key = $column['key'];
                                            $cell = $row['cells'][$key] ?? null;
                                            $cellArray = is_array($cell) ? $cell : ['value' => $cell];
                                            $sortValue = $cellArray['sort'] ?? $cellArray['value'] ?? '';
                                            $filterValue = $cellArray['filter'] ?? $cellArray['label'] ?? $cellArray['value'] ?? '';
                                        @endphp
                                        <td
                                            data-erp-column="{{ $key }}"
                                            data-sort-value="{{ is_scalar($sortValue) ? $sortValue : '' }}"
                                            data-filter-value="{{ is_scalar($filterValue) ? $filterValue : '' }}"
                                            style="width: {{ $column['width'] ?? '160px' }}; min-width: {{ $column['minWidth'] ?? '120px' }};"
                                        >
                                            <x-erp.table-cell :column="$column" :cell="$cell" />
                                        </td>
                                    @endforeach
                                </tr>
                            @empty
                                <tr class="erp-table-empty-row" data-erp-empty-row>
                                    <td colspan="{{ $columnCount }}">
                                        <div class="erp-empty-state">
                                            <x-ui.icon name="grid" size="18" />
                                            <strong>{{ $emptyTitle }}</strong>
                                            <span>{{ $emptyText }}</span>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse

                            <tr class="erp-table-empty-row" data-erp-no-results-row hidden>
                                <td colspan="{{ $columnCount }}">
                                    <div class="erp-empty-state">
                                        <x-ui.icon name="search" size="18" />
                                        <strong>No matching rows</strong>
                                        <span>Try another search or adjust the filters.</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                @if ($hasRowActions)
                    <div class="erp-table-actions-rail" data-erp-actions-rail aria-label="Row actions">
                        <div class="erp-table-actions-rail-head" data-erp-actions-rail-head>
                            <span class="sr-only">Row actions</span>
                        </div>
                        <div class="erp-table-actions-rail-body" data-erp-actions-rail-body>
                            @foreach ($rows as $row)
                                <div class="erp-table-actions-rail-row" data-erp-action-row data-erp-row-key="{{ $loop->index }}">
                                    <x-erp.row-actions :actions="$row['actions'] ?? []" :preview-target="$previewDrawerId" />
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="erp-table-footer">
            <div
                class="erp-table-footnote"
                data-erp-footnote
                data-erp-footnote-default="{{ $defaultFootnote }}"
                data-erp-loaded-count="{{ count($rows) }}"
            >
                {{ $defaultFootnote }}
            </div>

            @if ($paginator)
                <form method="GET" action="{{ url()->current() }}" class="erp-page-size-form">
                    @foreach (request()->except(['items_per_page', 'page']) as $name => $value)
                        @if (is_array($value))
                            @foreach ($value as $item)
                                <input type="hidden" name="{{ $name }}[]" value="{{ $item }}">
                            @endforeach
                        @else
                            <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                        @endif
                    @endforeach
                    <label for="{{ $tableId }}_items_per_page">Rows per page</label>
                    <select id="{{ $tableId }}_items_per_page" name="items_per_page" onchange="this.form.submit()">
                        @foreach (\App\Models\UserConfig::itemsPerPageOptions() as $option)
                            <option value="{{ $option }}" @selected($paginator->perPage() === $option)>{{ $option }}</option>
                        @endforeach
                    </select>
                </form>

                <div class="erp-table-pagination">
                    {{ $paginator->links() }}
                </div>
            @endif
        </div>
    </div>
</section>

@if ($hasPreviewActions)
    <x-erp.preview-drawer :id="$previewDrawerId" />
@endif