@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 ? '🔄 Update beschikbaar' : '✓ 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;">✓ Client OK</span>
    @else
        <span style="color:#ef4444;">✗ Client ontbreekt</span>
    @endif
    @if ($rendererExists)
        <span style="color:#22c55e;">✓ Renderer OK</span>
    @else
        <span style="color:#ef4444;">✗ Renderer ontbreekt</span>
    @endif
    @if ($webrootExists)
        <span style="color:#22c55e;">✓ Webroot OK</span>
    @else
        <span style="color:#ef4444;">✗ Webroot ontbreekt</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 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)'"
                    >
                        ⚡ Updaten
                    </button>
                @endif
            </div>
        </div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Client 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>Client 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>Renderer 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>Renderer Local:</span><span style="color:{{ $rendererColor }};font-weight:600;">{{ $rendererIcon }} {{ $rendererCommitShort }}</span></div>
    </div>
</div>