<x-admin-layout
    active="sync-log"
    :title="__('sync_log.title')"
    :crumbs="[
        ['label' => __('admin.shell.brand_sub')],
        ['label' => __('sync_log.crumb_parent')],
        ['label' => __('sync_log.title')],
    ]">

    <div class="page-wide">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('sync_log.title') }}</h1>
                <p class="page-sub">{{ __('sync_log.sub') }}</p>
            </div>
        </div>

        {{-- Status tabs — quick filter with live counts. --}}
        <div class="batches-tabs mb-4">
            @php
                $tabs = [
                    ''         => ['label' => __('sync_log.tabs.all'),      'count' => $counts['all']],
                    'success'  => ['label' => __('sync_log.tabs.success'), 'count' => $counts['success']],
                    'failed'   => ['label' => __('sync_log.tabs.failed'),  'count' => $counts['failed']],
                    'conflict' => ['label' => __('sync_log.tabs.conflict'),'count' => $counts['conflict']],
                ];
            @endphp
            @foreach ($tabs as $key => $tab)
                <a href="{{ route('admin.sync-log.index', array_merge(request()->query(), ['result' => $key])) }}"
                   class="batches-tab {{ $filters['result'] === $key ? 'is-active' : '' }}">
                    <span>{{ $tab['label'] }}</span>
                    <span class="batches-tab-count tnum">{{ $tab['count'] }}</span>
                </a>
            @endforeach
        </div>

        <x-admin.summary-cards :cards="$summaryCards" />

        <div class="card card-pad-0"
             x-data="dataTable({ rowsSelector: 'tbody > tr[data-dt-row]' })">
            <div class="dt-toolbar">
                <div class="dt-toolbar-title">{{ __('sync_log.list_title') }} (<span x-text="rowCount">{{ $logs->count() }}</span>)</div>
                <x-admin.dt-toolbar-actions />
            </div>

            <form method="GET" action="{{ route('admin.sync-log.index') }}" class="inv-filter">
                <input type="hidden" name="result" value="{{ $filters['result'] }}">
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('sync_log.filter.from') }}</span>
                    <input type="text" name="from" value="{{ $filters['from'] }}"
                           class="pos-input js-datepicker" data-fp-submit-on-change="1">
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('sync_log.filter.to') }}</span>
                    <input type="text" name="to" value="{{ $filters['to'] }}"
                           class="pos-input js-datepicker" data-fp-submit-on-change="1">
                </label>
                <label class="field inv-filter-search">
                    <span class="field-label">&nbsp;</span>
                    <span class="inv-search">
                        <span class="inv-search-icon"><x-icon name="search" class="w-4 h-4" /></span>
                        <input type="search" name="q" value="{{ $filters['q'] }}" class="pos-input"
                               placeholder="{{ __('sync_log.filter.search') }}">
                    </span>
                </label>
                <x-admin.filter-reset route="admin.sync-log.index" />
            </form>

            @if ($logs->isEmpty())
                <div class="dt-empty">
                    <span class="dt-empty-icon"><x-icon name="refresh" class="w-5 h-5" /></span>
                    <div class="dt-empty-title">{{ __('sync_log.empty.title') }}</div>
                    <div class="dt-empty-sub">{{ __('sync_log.empty.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                <table class="dt-table">
                    <thead>
                        <tr>
                            <th>{{ __('sync_log.columns.synced_at') }}</th>
                            <th>{{ __('sync_log.columns.entity') }}</th>
                            <th>{{ __('sync_log.columns.local_uuid') }}</th>
                            <th>{{ __('sync_log.columns.result') }}</th>
                            <th>{{ __('sync_log.columns.user') }}</th>
                            <th>{{ __('sync_log.columns.message') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $log)
                            <tr class="prod-row" data-dt-row
                                data-dt-name="{{ $log->local_uuid }}"
                                data-dt-id="{{ $log->id }}"
                                @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.sync-log.show', $log)) }}">
                                <td>{{ optional($log->synced_at)->toDateTimeString() ?: '—' }}</td>
                                <td class="mono">{{ $log->entity }}</td>
                                <td class="mono fg-tertiary text-xs">{{ \Illuminate\Support\Str::limit($log->local_uuid, 12) }}</td>
                                <td>
                                    @if ($log->isSuccess())
                                        <span class="prod-badge prod-badge-positive">{{ __('sync_log.status.success') }}</span>
                                    @elseif ($log->isConflict())
                                        <span class="prod-badge prod-badge-warning">{{ __('sync_log.status.conflict') }}</span>
                                    @else
                                        <span class="prod-badge prod-badge-danger">{{ __('sync_log.status.failed') }}</span>
                                    @endif
                                </td>
                                <td>{{ $log->user?->name ?: '—' }}</td>
                                <td class="fg-tertiary">{{ \Illuminate\Support\Str::limit($log->result_message ?: '—', 80) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
                <x-admin.dt-pager />
            @endif
        </div>
    </div>
</x-admin-layout>
