@props([
    'clientExists',
    'rendererExists',
    'webrootExists',
    'clientCommit',
    'rendererCommit',
    'clientRemote',
    'rendererRemote',
])

@php
    $clientCommitShort = substr($clientCommit, 0, 7);
    $rendererCommitShort = substr($rendererCommit, 0, 7);
    $hasClientUpdate = $clientCommitShort !== 'N/A' && $clientRemote !== 'N/A' && $clientCommitShort !== $clientRemote;
    $hasRendererUpdate = $rendererCommitShort !== 'N/A' && $rendererRemote !== 'N/A' && $rendererCommitShort !== $rendererRemote;
    $hasUpdate = $hasClientUpdate || $hasRendererUpdate;
    $updateColor = $hasUpdate ? '#f59e0b' : '#22c55e';
    $updateText = $hasUpdate ? '🔄 ' . __('commandocentrum.update_available') : '✓ ' . __('commandocentrum.up_to_date');
    $clientColor = $hasClientUpdate ? '#f59e0b' : '#22c55e';
    $clientIcon = $hasClientUpdate ? '🔄' : '✓';
    $rendererColor = $hasRendererUpdate ? '#f59e0b' : '#22c55e';
    $rendererIcon = $hasRendererUpdate ? '🔄' : '✓';
@endphp

<div style="display:flex;flex-direction:column;gap:4px;font-size:13px;">
    @if ($clientExists)
        <span style="color:#22c55e;">✓ {{ __('commandocentrum.client') }} {{ __('commandocentrum.ok') }}</span>
    @else
        <span style="color:#ef4444;">✗ {{ __('commandocentrum.client') }} {{ __('commandocentrum.missing') }}</span>
    @endif
    @if ($rendererExists)
        <span style="color:#22c55e;">✓ {{ __('commandocentrum.renderer') }} {{ __('commandocentrum.ok') }}</span>
    @else
        <span style="color:#ef4444;">✗ {{ __('commandocentrum.renderer') }} {{ __('commandocentrum.missing') }}</span>
    @endif
    @if ($webrootExists)
        <span style="color:#22c55e;">✓ {{ __('commandocentrum.webroot_status') }} {{ __('commandocentrum.ok') }}</span>
    @else
        <span style="color:#ef4444;">✗ {{ __('commandocentrum.webroot_status') }} {{ __('commandocentrum.missing') }}</span>
    @endif
    <div style="margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0;">
        <div style="font-weight:600;color:#475569;margin-bottom:8px;">GitHub {{ __('commandocentrum.status') }}:</div>
        <div style="background:{{ $hasUpdate ? '#fef3c7' : '#dcfce7' }};padding:12px;border-radius:8px;margin-bottom:12px;">
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <div style="display:flex;align-items:center;gap:8px;font-weight:600;color:{{ $updateColor }};">
                    {{ $updateText }}
                </div>
                @if ($hasUpdate)
                    <button
                        wire:click="checkNitroUpdates"
                        style="background:linear-gradient(135deg,#ec4899,#db2777);padding:8px 16px;border-radius:6px;color:white;border:none;cursor:pointer;font-weight:600;font-size:12px;box-shadow:0 2px 8px rgba(236,72,153,0.4);transition:transform 0.2s,box-shadow 0.2s;"
                        onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 4px 12px rgba(236,72,153,0.5)'"
                        onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 8px rgba(236,72,153,0.4)'"
                    >
                        ⚡ {{ __('commandocentrum.update') }}
                    </button>
                @endif
            </div>
        </div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>{{ __('commandocentrum.client') }} {{ __('commandocentrum.remote') }}:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($clientRemote) }}</span></div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>{{ __('commandocentrum.client') }} {{ __('commandocentrum.local') }}:</span><span style="color:{{ $clientColor }};font-weight:600;">{{ $clientIcon }} {{ $clientCommitShort }}</span></div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>{{ __('commandocentrum.renderer') }} {{ __('commandocentrum.remote') }}:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($rendererRemote) }}</span></div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;"><span>{{ __('commandocentrum.renderer') }} {{ __('commandocentrum.local') }}:</span><span style="color:{{ $rendererColor }};font-weight:600;">{{ $rendererIcon }} {{ $rendererCommitShort }}</span></div>
    </div>
</div>