{{--
    Shared sync panel for Shopify integrations. Rendered by both
    Integrations\Index (per row) and Integrations\Edit (full page).

    Required variables in scope:
      - $integration             (App\Models\Integration)
      - $snapshots               (array{customers: ?array, orders: ?array})
      - $canManage               (bool)
      - $resetConfirm            (?string)  staged "{integrationId}:{type}"
      - $isLocal                 (bool)
      - $queueDriver             (string)
      - $shopifyQueueName        (string)  e.g. "shopify-sync"
      - $pendingShopifyJobsCount (?int)
      - $nextShopifyJobAt        (?\Illuminate\Support\Carbon)
      - $autoProcess             (bool)
      - $lastAutoProcessAt       (?string)  ISO8601
      - $lastAutoProcessResult   (string)
      - $autoProcessPollSeconds  (int)

    Methods on the parent Livewire component:
      - startSync(int, string), cancelSync(int, string), resumeSync(int, string),
        confirmResetProgress(int, string), cancelResetConfirmation(),
        resetProgress(int, string), processQueueNow(),
        toggleAutoProcess(), autoProcessTick()
--}}

@php
    $stateLabel = function (?string $state): string {
        return match ($state) {
            'idle'      => __('Synced'),
            'syncing'   => __('Syncing…'),
            'queued'    => __('Queued'),
            'failed'    => __('Failed'),
            'cancelled' => __('Cancelled'),
            null        => __('Not started'),
            default     => (string) $state,
        };
    };
    $stateColor = function (?string $state): string {
        return match ($state) {
            'idle'      => 'lime',
            'syncing'   => 'sky',
            'queued'    => 'zinc',
            'failed'    => 'red',
            'cancelled' => 'zinc',
            default     => 'zinc',
        };
    };
    $relativeTime = function (?string $iso): ?string {
        if (! is_string($iso) || $iso === '') {
            return null;
        }
        try {
            return \Illuminate\Support\Carbon::parse($iso)->diffForHumans();
        } catch (\Throwable) {
            return null;
        }
    };

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

<div
    class="rounded-lg border border-zinc-200 bg-zinc-50/60 p-4 dark:border-zinc-800 dark:bg-zinc-900/40"
    data-test="sync-panel"
    data-integration-id="{{ $integration->id }}"
>
    <div class="mb-3 flex items-center justify-between gap-3">
        <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
            {{ __('Shopify sync') }}
        </div>
        <div class="text-xs text-zinc-500 dark:text-zinc-400">
            {{ __('Customers and Orders sync independently.') }}
        </div>
    </div>

    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
        @foreach ($resources as $resource)
            @php
                $key = $resource['key'];
                $snap = $resource['snapshot'];
                $state = $snap['state'] ?? null;
                $isRunning = in_array($state, ['queued', 'syncing'], true);
                $isResting = ! $isRunning;
                $confirmKey = $integration->id.':'.$key;
                $isConfirmingReset = ($resetConfirm ?? null) === $confirmKey;
            @endphp

            <div
                class="rounded-md border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900"
                data-test="sync-resource"
                data-resource="{{ $key }}"
                data-state="{{ $state ?? '' }}"
            >
                <div class="flex 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="$stateColor($state)"
                            data-test="sync-state-badge"
                            data-state="{{ $state ?? '' }}"
                        >
                            {{ $stateLabel($state) }}
                        </flux:badge>
                    </div>
                </div>

                @if ($snap !== null)
                    <dl class="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-xs text-zinc-600 dark:text-zinc-400">
                        <dt>{{ __('Records imported') }}</dt>
                        <dd class="text-right font-medium text-zinc-900 dark:text-zinc-100" data-test="sync-records">
                            {{ number_format($snap['records_imported']) }}
                        </dd>

                        <dt>{{ __('Pages processed') }}</dt>
                        <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="sync-pages">
                            {{ number_format($snap['page_count']) }}
                        </dd>

                        @if ($snap['started_at'])
                            <dt>{{ __('Started') }}</dt>
                            <dd class="text-right text-zinc-700 dark:text-zinc-300">
                                {{ $relativeTime($snap['started_at']) ?? '—' }}
                            </dd>
                        @endif

                        @if ($snap['last_synced_at'])
                            <dt>{{ __('Last synced') }}</dt>
                            <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="sync-last-synced">
                                {{ $relativeTime($snap['last_synced_at']) ?? '—' }}
                            </dd>
                        @endif

                        @if ($snap['completed_at'])
                            <dt>{{ __('Completed') }}</dt>
                            <dd class="text-right text-zinc-700 dark:text-zinc-300">
                                {{ $relativeTime($snap['completed_at']) ?? '—' }}
                            </dd>
                        @endif

                        @if ($snap['cancelled_at'])
                            <dt>{{ __('Cancelled') }}</dt>
                            <dd class="text-right text-zinc-700 dark:text-zinc-300">
                                {{ $relativeTime($snap['cancelled_at']) ?? '—' }}
                            </dd>
                        @endif

                        <dt>{{ __('Resume cursor saved') }}</dt>
                        <dd class="text-right text-zinc-700 dark:text-zinc-300" data-test="sync-resume-cursor">
                            {{ $snap['has_resume_cursor'] ? __('Yes') : __('No') }}
                        </dd>
                    </dl>

                    @if ($state === 'failed' && ! empty($snap['last_error']))
                        <div class="mt-2 text-xs text-red-700 dark:text-red-400" data-test="sync-last-error">
                            {{ $snap['last_error'] }}
                        </div>
                    @endif
                @else
                    <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                        {{ __('Not started yet.') }}
                    </p>
                @endif

                @php
                    // Stale = running state with a saved cursor but
                    // no continuation job on the queue. Computed by
                    // the parent Livewire component and folded into
                    // the snapshot so the view can present a clear
                    // recovery affordance.
                    $isStale = (bool) ($snap['is_stale'] ?? false);
                @endphp

                @if ($isStale)
                    <div
                        class="mt-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                        data-test="sync-stale-warning"
                        data-resource="{{ $key }}"
                    >
                        <strong>{{ __('Sync is paused:') }}</strong>
                        {{ __('resume cursor exists but no queued job was found.') }}
                        {{ __('Click "Resume sync" to dispatch a continuation from the saved cursor.') }}
                    </div>
                @endif

                @if ($canManage)
                    <div class="mt-3 flex flex-wrap items-center gap-2">
                        @if ($isStale)
                            <flux:button
                                variant="primary"
                                size="xs"
                                wire:click="resumeSync({{ $integration->id }}, '{{ $key }}')"
                                data-test="sync-resume"
                                data-resource="{{ $key }}"
                            >
                                {{ __('Resume sync') }}
                            </flux:button>
                        @endif

                        @if ($isResting)
                            <flux:button
                                variant="primary"
                                size="xs"
                                wire:click="startSync({{ $integration->id }}, '{{ $key }}')"
                                data-test="sync-start"
                                data-resource="{{ $key }}"
                            >
                                {{ __('Start sync') }}
                            </flux:button>
                        @endif

                        @if ($isRunning)
                            <flux:button
                                variant="ghost"
                                size="xs"
                                wire:click="cancelSync({{ $integration->id }}, '{{ $key }}')"
                                data-test="sync-cancel"
                                data-resource="{{ $key }}"
                            >
                                {{ __('Cancel sync') }}
                            </flux:button>
                        @endif

                        @if ($isResting && $snap !== null)
                            @if ($isConfirmingReset)
                                <flux:button
                                    variant="danger"
                                    size="xs"
                                    wire:click="resetProgress({{ $integration->id }}, '{{ $key }}')"
                                    data-test="sync-reset-confirm"
                                    data-resource="{{ $key }}"
                                >
                                    {{ __('Confirm reset progress') }}
                                </flux:button>
                                <flux:button
                                    variant="ghost"
                                    size="xs"
                                    wire:click="cancelResetConfirmation"
                                    data-test="sync-reset-cancel"
                                >
                                    {{ __('Keep progress') }}
                                </flux:button>
                            @else
                                <flux:button
                                    variant="ghost"
                                    size="xs"
                                    wire:click="confirmResetProgress({{ $integration->id }}, '{{ $key }}')"
                                    data-test="sync-reset"
                                    data-resource="{{ $key }}"
                                >
                                    {{ __('Reset progress') }}
                                </flux:button>
                            @endif
                        @endif
                    </div>

                    <p class="mt-2 text-[11px] leading-snug text-zinc-500 dark:text-zinc-400">
                        @if ($isRunning)
                            {{ __('Cancel stops future continuation jobs but does not delete imported data.') }}
                        @elseif ($isConfirmingReset)
                            {{ __('Reset clears sync progress and cursor but does not delete imported data.') }}
                        @else
                            {{ __('Start sync resumes from saved cursor where one exists, otherwise starts fresh.') }}
                        @endif
                    </p>
                @endif
            </div>
        @endforeach
    </div>

    @if ($isLocal)
        <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="sync-queue-diagnostic"
        >
            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                <strong>{{ __('Queue diagnostic') }}:</strong>
                <span>{{ __('Connection') }}: <code>{{ $queueDriver }}</code></span>
                <span>·</span>
                <span>
                    {{ __('Queue') }}:
                    <code data-test="sync-queue-name">{{ $shopifyQueueName }}</code>
                </span>
                @if ($pendingShopifyJobsCount !== null)
                    <span>·</span>
                    <span>
                        {{ __('Pending') }}:
                        <code data-test="sync-queue-pending">{{ $pendingShopifyJobsCount }}</code>
                    </span>
                @endif
                @if ($nextShopifyJobAt !== null)
                    <span>·</span>
                    <span data-test="sync-queue-next-at">
                        @if ($nextShopifyJobAt->isPast())
                            {{ __('Next job ready now') }}
                        @else
                            {{ __('Next job ready in') }} {{ $nextShopifyJobAt->diffForHumans(null, true) }}
                        @endif
                    </span>
                @endif
            </div>

            <p class="mt-1.5 leading-snug">
                {{ __('Queued jobs require a queue worker to be running.') }}
                {{ __('In production this should be run by Supervisor / Forge.') }}
                {{ __('In local development you can use the "Process queue now" button below, or run:') }}
                <code>php artisan shopify-sync:work --limit=20 --timeout=60</code>
            </p>

            @if ($canManage)
                <div class="mt-2 flex flex-wrap items-center gap-2">
                    <flux:button
                        variant="primary"
                        size="xs"
                        wire:click="processQueueNow"
                        wire:loading.attr="disabled"
                        wire:target="processQueueNow"
                        data-test="sync-queue-process-now"
                    >
                        <span wire:loading.remove wire:target="processQueueNow">
                            {{ __('Process queue now') }}
                        </span>
                        <span wire:loading wire:target="processQueueNow">
                            {{ __('Processing…') }}
                        </span>
                    </flux:button>
                    <span class="text-[10px] text-amber-700 dark:text-amber-300">
                        {{ __('Drains up to 5 jobs or 10 seconds, whichever first (kept under Herd\'s PHP 30s limit). Local dev only.') }}
                    </span>
                </div>

                {{-- Auto-process toggle. Local/dev + owner/admin only.
                     When ON the wrapper carries wire:poll so the
                     browser fires a bounded `autoProcessTick` every
                     AUTO_PROCESS_POLL_SECONDS. The poll directive is
                     not attached when the toggle is OFF, so no
                     background traffic happens by default. --}}
                <div
                    class="mt-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 dark:border-amber-900/40 dark:bg-zinc-900"
                    data-test="sync-auto-process"
                    @if ($autoProcess) wire:poll.{{ $autoProcessPollSeconds }}s="autoProcessTick" @endif
                >
                    <div class="flex flex-wrap items-center gap-2">
                        <flux:button
                            variant="ghost"
                            size="xs"
                            wire:click="toggleAutoProcess"
                            data-test="sync-auto-process-toggle"
                            data-state="{{ $autoProcess ? 'on' : 'off' }}"
                        >
                            @if ($autoProcess)
                                {{ __('Stop auto-process') }}
                            @else
                                {{ __('Start auto-process') }}
                            @endif
                        </flux:button>

                        @if ($autoProcess)
                            <span class="text-[11px] font-medium text-amber-800 dark:text-amber-200" data-test="sync-auto-process-status">
                                {{ __('Auto-processing every :sec seconds', ['sec' => $autoProcessPollSeconds]) }}
                            </span>
                        @else
                            <span class="text-[11px] text-amber-700 dark:text-amber-300">
                                {{ __('Off. Browser will tick the bounded drain when enabled.') }}
                            </span>
                        @endif
                    </div>

                    @if ($autoProcess && $lastAutoProcessAt)
                        <div class="mt-1 text-[11px] text-amber-700 dark:text-amber-300" data-test="sync-auto-process-last">
                            {{ __('Last tick') }}:
                            {{ \Illuminate\Support\Carbon::parse($lastAutoProcessAt)->diffForHumans() }}
                            @if ($lastAutoProcessResult)
                                — <span data-test="sync-auto-process-result">{{ $lastAutoProcessResult }}</span>
                            @endif
                        </div>
                    @endif

                    <p class="mt-1 text-[10px] leading-snug text-amber-700 dark:text-amber-300">
                        {{ __('Local development only. In production a persistent Supervisor / Forge worker must run:') }}
                        <code>php artisan queue:work database --queue={{ $shopifyQueueName }}</code>
                    </p>
                </div>
            @endif
        </div>
    @endif
</div>