@props([
    'panel' => [],
    'terminal' => null,
])

<div
    @class([
        'rounded-lg border px-4 py-3',
        'border-success-300/80 bg-success-50/80 dark:border-success-500/30 dark:bg-success-500/10' => ($panel['badge_color'] ?? '') === 'success',
        'border-warning-300/80 bg-warning-50/80 dark:border-warning-500/30 dark:bg-warning-500/10' => ($panel['badge_color'] ?? '') === 'warning',
        'border-danger-300/80 bg-danger-50/80 dark:border-danger-500/30 dark:bg-danger-500/10' => ($panel['badge_color'] ?? '') === 'danger',
    ])
>
    <div class="flex flex-wrap items-center gap-2">
        <span
            @class([
                'inline-flex rounded-md px-2 py-0.5 text-xs font-semibold',
                'bg-success-100 text-success-800 dark:bg-success-500/25 dark:text-success-100' => ($panel['badge_color'] ?? '') === 'success',
                'bg-warning-100 text-warning-900 dark:bg-warning-500/25 dark:text-warning-100' => ($panel['badge_color'] ?? '') === 'warning',
                'bg-danger-100 text-danger-800 dark:bg-danger-500/25 dark:text-danger-100' => ($panel['badge_color'] ?? '') === 'danger',
            ])
        >
            {{ $panel['method_label'] }}
        </span>
        @if (($panel['blocking_count'] ?? 0) > 0 || ($panel['warning_count'] ?? 0) > 0)
            <span class="text-xs text-gray-600 dark:text-gray-300">
                {{ $panel['blocking_count_label'] }} {{ $panel['blocking_count'] }}
                ·
                {{ $panel['warning_count_label'] }} {{ $panel['warning_count'] }}
            </span>
        @endif
    </div>
    <p class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
        {{ $panel['headline'] }}
    </p>
</div>

@if (filled($panel['browser_ok_hint'] ?? null))
    <p class="text-sm text-gray-600 dark:text-gray-300">
        {{ $panel['browser_ok_hint'] }}
    </p>
@endif

@if (filled($panel['browser_risky_hint'] ?? null))
    <p class="text-sm text-gray-600 dark:text-gray-300">
        {{ $panel['browser_risky_hint'] }}
    </p>
@endif

@if (($panel['show_terminal_primary'] ?? false) && is_array($terminal))
    <div class="space-y-3 rounded-xl border border-primary-200 bg-primary-50/40 p-4 dark:border-primary-500/30 dark:bg-primary-500/10">
        @include('components.dberp.system-update.partials.terminal-update-commands-compact', [
            'panel' => $terminal,
            'showLearnMore' => ($panel['method'] ?? '') === 'browser_blocked_use_terminal',
            'learnMoreLabel' => $panel['terminal_learn_more_label'] ?? '',
        ])
    </div>

@endif

@if (! ($panel['show_terminal_primary'] ?? false) && is_array($terminal))
    <details
        class="rounded-lg border border-gray-200 bg-gray-50/80 dark:border-gray-700 dark:bg-gray-900/40"
        @if ($panel['terminal_details_open'] ?? false) open @endif
    >
        <summary class="cursor-pointer px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-100">
            {{ $terminal['optional_heading'] ?? __('dberp.system_update_center.terminal.optional_heading') }}
        </summary>
        <div class="space-y-3 border-t border-gray-200 px-4 py-4 dark:border-gray-700">
            @include('components.dberp.system-update.partials.terminal-update-commands-compact', [
                'panel' => $terminal,
                'showLearnMore' => true,
                'learnMoreLabel' => $panel['terminal_learn_more_label'] ?? '',
            ])
        </div>
    </details>
@endif

@php
    $hasActionable = count($panel['actionable_items'] ?? []) > 0;
    $diagnosticsOpen = (bool) ($panel['diagnostics_open_default'] ?? false);
@endphp

<details
    class="rounded-lg border border-gray-200 dark:border-gray-700"
    @if ($diagnosticsOpen) open @endif
>
    <summary class="cursor-pointer px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-100">
        {{ $panel['diagnostics_toggle_label'] }}
        @if (filled($panel['pass_summary'] ?? null) && ! $hasActionable)
            <span class="ml-1 font-normal text-gray-500 dark:text-gray-400">（{{ $panel['pass_summary'] }}）</span>
        @endif
    </summary>
    <div class="space-y-3 border-t border-gray-200 px-4 py-4 dark:border-gray-700">
        @if ($hasActionable)
            <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ $panel['diagnostics_intro'] }}
            </p>
            @include('components.dberp.system-update.partials.environment-diagnostics-items', [
                'items' => $panel['actionable_items'],
                'suggestionLabel' => $panel['diagnostics_suggestion_label'],
            ])
            @if (filled($panel['pass_summary'] ?? null))
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $panel['pass_summary'] }}
                </p>
            @endif
        @elseif (filled($panel['all_passed_summary'] ?? null))
            <p class="text-sm text-gray-600 dark:text-gray-300">
                {{ $panel['all_passed_summary'] }}
            </p>
        @endif
    </div>
</details>
