@props([
    'tableId',
    'columns' => [],
    'rows' => [],
    'types',
    'selectable' => true,
    'bulkDeleteUrl' => null,
    'hasRowActions' => false,
    'previewDrawerId',
    'emptyTitle' => null,
    'emptyText' => null,
    'createUrl' => null,
    'createLabel' => null,
])

@php
    $emptyTitle = $emptyTitle ?: __('kview-ui-data::table.empty_title');
    $emptyText = $emptyText ?: __('kview-ui-data::table.empty_text');
    $createLabel = $createLabel ?: __('kview-ui-data::table.new_record');
    $hasRows = count($rows) > 0;
    $hasSelectionRail = $selectable && $hasRows;
@endphp

<div class="erp-table-scroll" data-erp-table-scroll>
    <div class="erp-table-stage @if ($hasSelectionRail) erp-table-stage--with-selection @endif @if ($hasRowActions) erp-table-stage--with-actions @endif">
        @if ($hasSelectionRail)
            <div class="erp-table-selection-rail" data-erp-selection-rail aria-label="{{ __('kview-ui-data::table.row_selection') }}">
                <div class="erp-table-selection-rail-head" data-erp-selection-rail-head>
                    <input type="checkbox" data-erp-select-all aria-label="{{ __('kview-ui-data::table.select_all') }}">
                </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="{{ __('kview-ui-data::table.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'] }}"
                                data-erp-column-type="{{ $column['type'] }}"
                                data-erp-column-alignment="{{ $column['alignment'] }}"
                                data-erp-column-hidden="{{ $column['hidden'] ? 'true' : 'false' }}"
                                @class([
                                    'is-numeric' => $column['numeric'],
                                    'is-nowrap' => $column['nowrap'],
                                    'is-align-'.$column['alignment'],
                                ])
                                @if (! empty($column['title'])) title="{{ $column['title'] }}" @endif
                                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
                                                id="{{ $tableId }}_filter_{{ $key }}_trigger"
                                                type="button"
                                                class="erp-column-filter-trigger"
                                                data-erp-filter-trigger="{{ $key }}"
                                                aria-haspopup="dialog"
                                                aria-expanded="false"
                                                aria-controls="{{ $tableId }}_filter_{{ $key }}"
                                                aria-label="{{ __('kview-ui-data::table.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>
                    @foreach ($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['value'] ?? $cellArray['label'] ?? '';
                                    $cellType = $types->normalize($cellArray['type'] ?? $column['type']);
                                    $cellTypeDefinition = $types->definition($cellType);
                                    $cellAlignment = $cellArray['alignment'] ?? $cellArray['align'] ?? $column['alignment'] ?? $cellTypeDefinition['alignment'];
                                @endphp
                                <td
                                    data-erp-column="{{ $key }}"
                                    data-erp-column-type="{{ $cellType }}"
                                    data-erp-column-alignment="{{ $cellAlignment }}"
                                    data-sort-value="{{ is_scalar($sortValue) ? $sortValue : '' }}"
                                    data-filter-value="{{ is_scalar($filterValue) ? $filterValue : '' }}"
                                    @class([
                                        'is-numeric' => $cellTypeDefinition['numeric'],
                                        'is-nowrap' => $column['nowrap'] || $cellTypeDefinition['nowrap'],
                                        'is-align-'.$cellAlignment,
                                    ])
                                    style="width: {{ $column['width'] ?? '160px' }}; min-width: {{ $column['minWidth'] ?? '120px' }};"
                                >
                                    <x-erp.table-cell :column="$column" :cell="$cell" />
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @unless ($hasRows)
                <div class="erp-table-empty-state" data-erp-empty-row>
                    <x-ui.empty-state
                        size="sm"
                        icon="grid"
                        :title="$emptyTitle"
                        :text="$emptyText"
                        :action-url="$createUrl"
                        :action-label="$createUrl ? $createLabel : null"
                        action-icon="plus"
                    />
                </div>
            @endunless

            <div class="erp-table-empty-state" data-erp-no-results-row hidden>
                <x-ui.empty-state
                    variant="search"
                    size="sm"
                    :title="__('kview-ui-data::table.no_matching_title')"
                    :text="__('kview-ui-data::table.no_matching_text')"
                />
            </div>
        </div>

        @if ($hasRowActions)
            <div class="erp-table-actions-rail" data-erp-actions-rail aria-label="{{ __('kview-ui-data::table.row_actions') }}">
                <div class="erp-table-actions-rail-head" data-erp-actions-rail-head>
                    <span class="sr-only">{{ __('kview-ui-data::table.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>