@props([])

@php
    $g = $grid ?? [];
    $filters = $g['filters'] ?? [];
    $exports = $g['exports'] ?? [];
    $bulkActions = $g['bulk_actions'] ?? [];
    $empty = $g['empty'] ?? [];
    $hasRows = $g['has_rows'];
    $showEmpty = $hasRows === false;
@endphp

<div
    class="dg"
    data-dg-root
    data-dg-key="{{ $g['key'] ?? '' }}"
    x-data="loanDataGrid(@js([
        'storageKey' => $g['storage_key'] ?? '',
        'selectable' => $g['selectable'] ?? false,
        'savedViews' => $g['saved_views'] ?? false,
        'bulkActions' => $bulkActions,
        'exports' => $exports,
        'query' => $g['query'] ?? [],
        'total' => $g['total'] ?? null,
    ]))"
    x-init="init()"
    @dg-loading.window="setLoading($event.detail)"
>
    @if (! $showEmpty)
        @include('components.loan.data-grid.partials.filter-bar', ['g' => $g, 'filters' => $filters])

        @include('components.loan.data-grid.partials.toolbar', ['g' => $g, 'exports' => $exports])

        @if (($g['selectable'] ?? false) && count($bulkActions) > 0)
            @include('components.loan.data-grid.partials.bulk-bar', ['g' => $g, 'bulkActions' => $bulkActions])
        @endif

        @if (! empty($g['row_hint']))
            <p class="dg-hint text-xs text-slate-500 px-1">{{ $g['row_hint'] }}</p>
        @endif
    @endif

    <div class="dg-card ws-card overflow-hidden relative" :class="{ 'dg-card--loading': loading }">
        @include('components.loan.data-grid.partials.loading-overlay')

        @if (! $showEmpty && (isset($header) || ! empty($g['table_title'])))
            <div class="ws-card__header flex flex-wrap items-center justify-between gap-2 border-b border-slate-100">
                @if (! empty($g['table_title']))
                    <h3 class="ws-card__title">{{ $g['table_title'] }}</h3>
                @endif
                @isset($header)
                    <div class="min-w-0 flex-1">{{ $header }}</div>
                @endisset
                @if (isset($g['total']))
                    <p class="text-xs text-slate-500 tabular-nums">{{ number_format((int) $g['total']) }} record(s)</p>
                @endif
            </div>
        @endif

        @if (! $showEmpty)
            @isset($toolbar)
                <div class="border-b border-slate-100 bg-slate-50/80 px-3 py-2">{{ $toolbar }}</div>
            @endisset

            @php
                $columnStorageKey = (string) ($g['storage_key'] ?? $g['key'] ?? 'data-grid');
                $stickyColumn = (string) ($g['sticky_column'] ?? 'first');
                $tableStickyClass = match ($stickyColumn) {
                    'name' => 'ws-table--sticky-name',
                    'none' => '',
                    default => 'ws-table--sticky-first',
                };
            @endphp
            <div x-data="loanTableColumns(@js($columnStorageKey))" x-init="init()">
                <x-loan.table-column-bar
                    :meta="isset($g['total']) ? number_format((int) $g['total']).' record(s)' : null"
                />

                <div
                    class="dg-table-wrap dg-table-wrap--register mobile-table-scroll overflow-x-auto"
                    data-dg-table-wrap
                    x-ref="tableWrap"
                >
                    <table @class([
                        'dg-table ws-table ws-table--register min-w-full ws-table--sticky ws-table--sticky-actions',
                        $tableStickyClass => $tableStickyClass !== '',
                    ])>
                        @isset($head)
                            <thead>{{ $head }}</thead>
                        @endisset
                        <tbody>{{ $slot }}</tbody>
                    </table>
                </div>

                @isset($mobile)
                    <div class="dg-mobile divide-y divide-slate-100" data-dg-mobile>
                        {{ $mobile }}
                    </div>
                @endisset
            </div>
        @endif

        @if ($showEmpty)
            <div class="flex min-h-[18rem] items-center justify-center px-6 py-10">
                <x-loan.workspace.empty-state
                    :title="$empty['title'] ?? 'No records'"
                    :description="$empty['description'] ?? null"
                    :icon="$empty['icon'] ?? 'inbox'"
                    :actions="$empty['actions'] ?? []"
                    :checklist="$empty['checklist'] ?? []"
                />
            </div>
        @endif

        @if (($g['show_pagination'] ?? false) && ! empty($g['pagination_html']))
            @include('components.loan.data-grid.partials.pagination', ['html' => $g['pagination_html']])
        @elseif (isset($footer))
            <div class="border-t border-slate-100 px-3 py-2">{{ $footer }}</div>
        @endif
    </div>
</div>