<x-filament-panels::page>
    <x-filament::section>
        <x-slot name="heading">
            {{ __('Jabali Panel Update') }}
        </x-slot>
        <x-slot name="description">
            {{ __('Update the panel codebase and assets.') }}
        </x-slot>

        <div class="grid gap-4 md:grid-cols-3">
            <div class="rounded-lg border border-gray-200 bg-white p-4 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <div class="text-xs uppercase text-gray-500 dark:text-gray-400">{{ __('Current Version') }}</div>
                <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $currentVersion ?? 'unknown' }}</div>
            </div>
            <div class="rounded-lg border border-gray-200 bg-white p-4 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <div class="text-xs uppercase text-gray-500 dark:text-gray-400">{{ __('Status') }}</div>
                <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $this->updateStatusLabel }}</div>
            </div>
            <div class="rounded-lg border border-gray-200 bg-white p-4 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <div class="text-xs uppercase text-gray-500 dark:text-gray-400">{{ __('Last Checked') }}</div>
                <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $lastCheckedAt ?? __('Not checked') }}</div>
            </div>
        </div>

        @if (! empty($recentChanges))
            <div class="mt-4 rounded-lg border border-gray-200 bg-white p-4 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{ __('Recent Changes') }}</div>
                <ul class="mt-2 list-inside list-disc space-y-1 text-gray-700 dark:text-gray-200">
                    @foreach ($recentChanges as $change)
                        <li>{{ $change }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="mt-4 flex flex-wrap items-center gap-2">
            <x-filament::button
                icon="heroicon-o-magnifying-glass"
                color="gray"
                wire:click="checkForUpdates"
                wire:loading.attr="disabled"
                wire:target="checkForUpdates"
            >
                {{ __('Check for updates') }}
            </x-filament::button>

            <x-filament::button
                icon="heroicon-o-arrow-path-rounded-square"
                color="primary"
                wire:click="performUpgrade"
                wire:loading.attr="disabled"
                wire:target="performUpgrade"
            >
                {{ __('Upgrade now') }}
            </x-filament::button>
        </div>

        @if ($jabaliOutput !== null)
            <details class="mt-4 rounded border border-gray-200 bg-white p-4 shadow-sm open:shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <summary class="cursor-pointer list-none text-sm font-semibold text-gray-900 dark:text-gray-100">
                    {{ $jabaliOutputTitle ?? __('Jabali Update Output') }}
                    @if ($jabaliOutputAt)
                        <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                            {{ __('Last run at :time', ['time' => $jabaliOutputAt]) }}
                        </span>
                    @endif
                </summary>
                <div class="mt-3 text-sm text-gray-700 dark:text-gray-200">
                    <pre class="whitespace-pre-wrap break-words rounded bg-gray-50 p-4 text-xs text-gray-800 dark:bg-gray-900/50 dark:text-gray-200">{{ $jabaliOutput }}</pre>
                </div>
            </details>
        @endif
    </x-filament::section>

    {{ $this->table }}

    @if ($refreshOutputAt)
        <details class="mt-4 rounded border border-gray-200 bg-white p-4 shadow-sm open:shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <summary class="cursor-pointer list-none text-sm font-semibold text-gray-900 dark:text-gray-100">
                {{ $refreshOutputTitle ?? __('System Update Output') }}
                <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                    {{ __('Last run at :time', ['time' => $refreshOutputAt]) }}
                </span>
            </summary>
            <div class="mt-3 text-sm text-gray-700 dark:text-gray-200">
                @php
                    $outputLines = is_array($refreshOutput) ? $refreshOutput : [$refreshOutput];
                @endphp
                <pre class="whitespace-pre-wrap break-words rounded bg-gray-50 p-4 text-xs text-gray-800 dark:bg-gray-900/50 dark:text-gray-200">{{ implode("\n", $outputLines) }}</pre>
            </div>
        </details>
    @endif

    <x-filament-actions::modals />
</x-filament-panels::page>
