@props(['diagnostics'])

@php
    $errors = array_filter($diagnostics, fn ($r) => $r->status === 'error');
    $warnings = array_filter($diagnostics, fn ($r) => $r->status === 'warning');
    $ok = array_filter($diagnostics, fn ($r) => $r->status === 'ok');

    $errorCount = count($errors);
    $warningCount = count($warnings);
    $okCount = count($ok);

    $overallStatus = $errorCount > 0 ? 'error' : ($warningCount > 0 ? 'warning' : 'ok');
    $overallColor = match ($overallStatus) {
        'error' => '#ef4444',
        'warning' => '#f59e0b',
        default => '#22c55e',
    };
    $overallLabel = match ($overallStatus) {
        'error' => __('commandocentrum.critical_issues'),
        'warning' => __('commandocentrum.warnings'),
        default => __('commandocentrum.healthy'),
    };
@endphp

<div style="display:flex;flex-direction:column;gap:16px;">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
        <x-filament-components::commandocentrum.summary-card :label="__('commandocentrum.healthy')" :count="$okCount" color="#22c55e" icon="check" />
        <x-filament-components::commandocentrum.summary-card :label="__('commandocentrum.warnings')" :count="$warningCount" color="#f59e0b" icon="warning" />
        <x-filament-components::commandocentrum.summary-card :label="__('commandocentrum.errors')" :count="$errorCount" color="#ef4444" icon="error" />
    </div>

    <div style="background:{{ $overallColor }}15;border:1px solid {{ $overallColor }}30;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;">
        <div style="width:12px;height:12px;border-radius:50%;background:{{ $overallColor }};"></div>
        <span style="font-weight:700;color:{{ $overallColor }};font-size:16px;">{{ __('commandocentrum.system_status') }}: {{ $overallLabel }}</span>
    </div>

    @if ($errorCount > 0 || $warningCount > 0)
        <div style="display:flex;flex-direction:column;gap:8px;">
            @foreach ($diagnostics as $result)
                @if ($result->status === 'ok')
                    @continue
                @endif
                @php
                    $color = $result->status === 'error' ? '#ef4444' : '#f59e0b';
                @endphp
                <div style="background:#fff;border:1px solid {{ $color }}30;border-radius:10px;padding:14px 16px;display:flex;align-items:flex-start;gap:12px;">
                    <div style="flex-shrink:0;margin-top:2px;">
                        @if ($result->status === 'error')
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ $color }}" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                        @else
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ $color }}" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                        @endif
                    </div>
                    <div style="flex:1;">
                        <div style="font-weight:600;color:#1e293b;font-size:14px;">{{ $result->name }}</div>
                        <div style="color:#64748b;font-size:13px;margin-top:2px;">{{ $result->message }}</div>
                        @if ($result->fix)
                            <div style="background:#f8fafc;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:12px;color:#475569;font-family:monospace;">💡 {{ $result->fix }}</div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>