{{--
    Ongoing incremental sync panel. Rendered ONLY for Shopify
    integrations that are enabled + Configured. Distinct from the
    historical sync panel (`_sync-panel.blade.php`) — different
    controls, different state subtree, different mental model.

    Required variables in scope:
      - $integration             (App\Models\Integration)
      - $incrementalSnapshots    (array{customers: array, orders: array})
      - $canManage               (bool)
      - $isLocal                 (bool)

    Methods on parent Livewire component:
      - enableIncremental(int, string)
      - disableIncremental(int, string)
      - runIncrementalNow(int, string)
      - clearIncrementalError(int, string)
      - runIncrementalSchedulerNow()
--}}

@php
    $incrementalStateLabel = function (?string $state): string {
        return match ($state) {
            'idle'    => __('Idle'),
            'queued'  => __('Queued'),
            'syncing' => __('Running…'),
            'failed'  => __('Failed'),
            default   => __('Idle'),
        };
    };
    $incrementalStateColor = function (?string $state): string {
        return match ($state) {
            'idle'    => 'zinc',
            'queued'  => 'zinc',
            'syncing' => 'sky',
            'failed'  => 'red',
            default   => 'zinc',
        };
    };
    $iso = fn ($v) => is_string($v) && $v !== ''
        ? \Illuminate\Support\Carbon::parse($v)->diffForHumans()
        : null;

    $resources = [
        ['key' => 'customers', 'label' => __('Customers'), 'snap' => $incrementalSnapshots['customers'] ?? []],
        ['key' => 'orders',    'label' => __('Orders'),    'snap' => $incrementalSnapshots['orders']    ?? []],
    ];
@endphp

<div
    class="mt-4 rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"
    data-test="incremental-panel"
    data-integration-id="{{ $integration->id }}"
>
    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
        <div>
            <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                {{ __('Ongoing incremental sync') }}
            </div>
            <div class="text-xs text-zinc-500 dark:text-zinc-400">
                {{ __('Lightweight 5-minute check for new and updated records. Runs only after the historical sync is complete.') }}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
        @foreach ($resources as $resource)
            @php
                $key = $resource['key'];
                $snap = $resource['snap'];
                $enabled = (bool) ($snap['enabled'] ?? false);
                $state = $snap['state'] ?? 'idle';
                $blocked = (bool) ($snap['blocked_by_historical'] ?? false);
                $isRunning = in_array($state, ['queued', 'syncing'], true);
            @endphp

            <div
                class="rounded-md border border-zinc-200 bg-zinc-50/60 p-3 dark:border-zinc-800 dark:bg-zinc-950/40"
                data-test="incremental-resource"
                data-resource="{{ $key }}"
                data-enabled="{{ $enabled ? '1' : '0' }}"
                data-state="{{ $state }}"
            >
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                            {{ $resource['label'] }}
                        </span>
                        <flux:badge
                            size="sm"
                            :color="$enabled ? 'lime' : 'zinc'"
                            data-test="incremental-enabled-badge"
                        >
                            {{ $enabled ? __('Enabled') : __('Disabled') }}
                        </flux:badge>
                        <flux:badge
                            size="sm"
                            :color="$incrementalStateColor($state)"
                            data-test="incremental-state-badge"
                            data-state="{{ $state }}"
                        >
                            {{ $incrementalStateLabel($state) }}
                        </flux:badge>
                    </div>
                </div>

                @if ($blocked)
                    <div class="mt-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-1.5 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200" data-test="incremental-blocked-by-historical">
                        {{ __('Incremental sync will begin after the initial sync is complete.') }}
                    </div>
                @endif

                <dl class="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-xs text-zinc-600 dark:text-zinc-400">
                    <dt>{{ __('Last checked') }}</dt>
                    <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="incremental-last-checked">
                        {{ $iso($snap['last_checked_at'] ?? null) ?? '—' }}
                    </dd>

                    <dt>{{ __('Last successful sync') }}</dt>
                    <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="incremental-last-success">
                        {{ $iso($snap['last_success_at'] ?? null) ?? '—' }}
                    </dd>

                    <dt>{{ __('Records imported (last run)') }}</dt>
                    <dd class="text-right font-medium text-zinc-900 dark:text-zinc-100" data-test="incremental-records-last-run">
                        {{ number_format((int) ($snap['records_imported_last_run'] ?? 0)) }}
                    </dd>

                    <dt>{{ __('Records imported (total)') }}</dt>
                    <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="incremental-records-total">
                        {{ number_format((int) ($snap['records_imported_total'] ?? 0)) }}
                    </dd>
                </dl>

                @if ($state === 'failed' && ! empty($snap['last_error']))
                    <div class="mt-2 text-xs text-red-700 dark:text-red-400" data-test="incremental-last-error">
                        {{ $snap['last_error'] }}
                    </div>
                @endif

                @if ($canManage)
                    <div class="mt-3 flex flex-wrap items-center gap-2">
                        @if (! $enabled)
                            <flux:button
                                variant="primary"
                                size="xs"
                                wire:click="enableIncremental({{ $integration->id }}, '{{ $key }}')"
                                data-test="incremental-enable"
                                data-resource="{{ $key }}"
                            >
                                {{ __('Enable incremental sync') }}
                            </flux:button>
                        @else
                            <flux:button
                                variant="ghost"
                                size="xs"
                                wire:click="disableIncremental({{ $integration->id }}, '{{ $key }}')"
                                data-test="incremental-disable"
                                data-resource="{{ $key }}"
                            >
                                {{ __('Disable incremental sync') }}
                            </flux:button>

                            @if (! $blocked && ! $isRunning)
                                <flux:button
                                    variant="ghost"
                                    size="xs"
                                    wire:click="runIncrementalNow({{ $integration->id }}, '{{ $key }}')"
                                    data-test="incremental-run-now"
                                    data-resource="{{ $key }}"
                                >
                                    {{ __('Run check now') }}
                                </flux:button>
                            @endif

                            @if ($state === 'failed')
                                <flux:button
                                    variant="ghost"
                                    size="xs"
                                    wire:click="clearIncrementalError({{ $integration->id }}, '{{ $key }}')"
                                    data-test="incremental-clear-error"
                                    data-resource="{{ $key }}"
                                >
                                    {{ __('Clear error') }}
                                </flux:button>
                            @endif
                        @endif
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    @if ($isLocal && $canManage)
        <div
            class="mt-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] leading-snug text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
            data-test="incremental-dev-tools"
        >
            <div class="flex flex-wrap items-center gap-2">
                <strong>{{ __('Incremental dev tools') }}:</strong>
                <flux:button
                    variant="ghost"
                    size="xs"
                    wire:click="runIncrementalSchedulerNow"
                    data-test="incremental-run-scheduler-now"
                >
                    {{ __('Run scheduler now') }}
                </flux:button>
            </div>
            <p class="mt-1 leading-snug">
                {{ __('Local development only. In production the scheduler runs automatically every 5 minutes via:') }}
                <code>php artisan schedule:run</code>
                {{ __('(driven by cron).') }}
            </p>
        </div>
    @endif
</div>