@props([
    'emulatorOnline',
    'jarExists',
    'serviceName',
    'sourceCommit',
    'remoteVersion',
    'canBuild',
    'jarPath',
    'sourcePath',
])

@php
    $sourceCommitShort = substr($sourceCommit, 0, 7);
    $hasUpdate = $sourceCommit !== 'N/A' && $remoteVersion !== 'N/A' && $sourceCommitShort !== $remoteVersion;
    $updateColor = $hasUpdate ? '#f59e0b' : '#22c55e';
    $updateText = $hasUpdate ? '🔄 Update beschikbaar' : '✓ Up-to-date';
    $btnColor = $hasUpdate ? '#f59e0b' : '#3b82f6';
    $btnGradient = $hasUpdate ? 'linear-gradient(135deg,#f59e0b,#d97706)' : 'linear-gradient(135deg,#3b82f6,#2563eb)';
    $btnText = $hasUpdate ? '⚡ Updaten' : '🔄 Herbouwen';

    $jarFileName = '';
    if ($jarExists) {
        $jarSize = shell_exec('ls -lh ' . escapeshellarg($jarPath) . '/*.jar 2>/dev/null | head -1');
        if ($jarSize) {
            preg_match('/(\S+\.jar)/', $jarSize, $matches);
            if (isset($matches[1])) {
                $jarFileName = basename($matches[1]);
            }
        }
    }
@endphp

<div style="display:flex;flex-direction:column;gap:8px;font-size:13px;">
    <div style="display:flex;gap:16px;">
        @if ($emulatorOnline)
            <span style="color:#22c55e;">✓ Online</span>
        @else
            <span style="color:#ef4444;">✗ Offline</span>
        @endif
        @if ($jarExists)
            <span style="color:#22c55e;">✓ JAR OK</span>
        @else
            <span style="color:#ef4444;">✗ JAR ontbreekt</span>
        @endif
        <span style="color:#3b82f6;">Service: {{ e($serviceName) }}</span>
    </div>
    <div style="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>
                <button
                    wire:click="checkEmulatorUpdates"
                    style="background:{{ $btnGradient }};padding:8px 16px;border-radius:6px;color:white;border:none;cursor:pointer;font-weight:600;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:transform 0.2s,box-shadow 0.2s;"
                    onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 4px 12px rgba(0,0,0,0.3)'"
                    onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 8px rgba(0,0,0,0.2)'"
                >
                    {{ $btnText }}
                </button>
            </div>
        </div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Latest:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($remoteVersion) }}</span></div>
        <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Source:</span><span style="color:#22c55e;font-weight:600;">✓ {{ $sourceCommitShort }}</span></div>
        @if ($jarFileName !== '')
            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>JAR:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($jarFileName) }}</span></div>
        @endif
        @if ($canBuild)
            <div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Bouwen:</span><span style="color:#22c55e;font-weight:600;">✓ Maven (pom.xml)</span></div>
        @else
            <div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Bouwen:</span><span style="color:#f59e0b;font-weight:600;">⚠️ Geen pom.xml</span></div>
        @endif
        <div style="margin-top:12px;padding:12px;background:#f8fafc;border-radius:8px;">
            <div style="font-size:11px;color:#64748b;font-weight:600;margin-bottom:8px;">METHODE:</div>
            @if ($jarExists)
                <div style="color:#3b82f6;font-weight:600;">📦 JAR Download & Herstart</div>
            @elseif ($canBuild)
                <div style="color:#3b82f6;font-weight:600;">🔨 Maven Build & Herstart</div>
            @else
                <div style="color:#64748b;">Handmatig: Download JAR van GitHub</div>
            @endif
        </div>
    </div>
</div>