@props([
    'progressPercent' => 0,
    'currentPhase' => '',
    'progressLabel' => '0%',
    'notice' => null,
    'logEntries' => [],
    'logsEmptyMessage' => null,
    'logsHeading' => null,
    'pollForDismissal' => false,
    'pollWhileRunning' => false,
    'pollWhileRunningInterval' => '8s',
    'terminal' => null,
])

@php
    $progressPercent = max(0, min(100, (int) $progressPercent));
@endphp

<div
    id="dberp-update-progress-panel"
    class="dberp-system-update-progress rounded-xl border border-primary-200 bg-primary-50/60 p-5 shadow-sm ring-1 ring-primary-500/10 dark:border-primary-500/30 dark:bg-primary-500/10 dark:ring-primary-400/20"
    @if ($pollForDismissal)
        wire:poll.500ms="pollUpdateProgressPanel"
    @elseif ($pollWhileRunning)
        wire:poll.{{ $pollWhileRunningInterval }}="watchdogBrowserUpdateStep"
    @endif
>
    <div class="flex flex-wrap items-start gap-4">
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-300">
            <x-filament::loading-indicator class="h-7 w-7" />
        </div>

        <div class="min-w-0 flex-1 space-y-4">
            <div class="space-y-1">
                <p class="text-base font-semibold text-gray-950 dark:text-white">
                    {{ $currentPhase }}
                </p>
                @if (filled($notice))
                    <p class="text-sm leading-relaxed text-primary-800 dark:text-primary-200">
                        {{ $notice }}
                    </p>
                @endif
            </div>

            <div class="space-y-2">
                <div class="flex items-center justify-between gap-3 text-sm">
                    <span class="font-medium text-gray-700 dark:text-gray-200">
                        {{ __('dberp.system_update_center.rows.progress') }}
                    </span>
                    <span class="tabular-nums font-semibold text-primary-700 dark:text-primary-300">
                        {{ $progressLabel }}
                    </span>
                </div>

                <div
                    class="h-2.5 w-full overflow-hidden rounded-full bg-primary-100 dark:bg-primary-950/50"
                    role="progressbar"
                    aria-valuenow="{{ $progressPercent }}"
                    aria-valuemin="0"
                    aria-valuemax="100"
                >
                    <div
                        class="h-full rounded-full bg-primary-600 transition-all duration-500 ease-out dark:bg-primary-400"
                        style="width: {{ $progressPercent }}%"
                    ></div>
                </div>
            </div>
        </div>
    </div>

    @if (is_array($terminal) && ($terminal['commands_ready'] ?? false))
        <div class="mt-5 border-t border-primary-200/80 pt-4 dark:border-primary-500/20">
            @if (filled($terminal['heading'] ?? null))
                <h4 class="mb-3 text-sm font-medium text-gray-950 dark:text-white">
                    {{ $terminal['heading'] }}
                </h4>
            @endif
            @include('components.dberp.system-update.partials.terminal-update-commands-compact', [
                'panel' => $terminal,
                'showLearnMore' => false,
            ])
        </div>
    @endif

    @if (filled($logsHeading))
        <div class="mt-5 border-t border-primary-200/80 pt-4 dark:border-primary-500/20">
            <h4 class="mb-3 text-sm font-medium text-gray-950 dark:text-white">
                {{ $logsHeading }}
            </h4>

            @if ($logEntries !== [])
                <ul class="max-h-72 space-y-2 overflow-y-auto rounded-lg border border-gray-200/80 bg-white/90 p-2 dark:border-white/10 dark:bg-gray-950/40">
                    @foreach ($logEntries as $entry)
                        <li class="flex flex-wrap items-start gap-x-3 gap-y-1 rounded-md px-2 py-2 text-sm even:bg-gray-50/80 dark:even:bg-white/5">
                            <time
                                class="shrink-0 font-mono text-xs tabular-nums text-gray-500 dark:text-gray-400"
                                datetime="{{ $entry['time'] }}"
                            >
                                {{ $entry['time'] }}
                            </time>

                            <span class="min-w-0 flex-1 font-medium text-gray-900 dark:text-gray-100">
                                {{ $entry['step_label'] }}
                            </span>

                            <x-filament::badge
                                :color="$entry['status_color'] ?? 'gray'"
                                size="sm"
                            >
                                {{ $entry['status_label'] }}
                            </x-filament::badge>

                            @if (filled($entry['message'] ?? null))
                                <p class="w-full text-sm leading-relaxed text-gray-600 dark:text-gray-400">
                                    {{ $entry['message'] }}
                                </p>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @elseif (filled($logsEmptyMessage))
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {{ $logsEmptyMessage }}
                </p>
            @endif
        </div>
    @endif
</div>
