@if($deployData)
<div class="bg-background-secondary dark:bg-background-secondary/80 rounded-lg p-6 mb-6 border border-neutral">
    <h3 class="text-xl font-semibold text-text-primary mb-4">Server Status</h3>
    <p class="text-text-secondary text-sm mb-6">
        Track your server setup progress and view server credentials once setup is complete.
    </p>

    @if(!empty($deployData['feedback']))
        <div class="mb-6 p-4 rounded-lg bg-blue-500/10 border border-blue-500/30">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-blue-500 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                    <p class="text-text-primary font-semibold text-sm mb-1">Message from Support</p>
                    <p class="text-text-secondary text-sm whitespace-pre-wrap">{{ $deployData['feedback'] }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(!empty($deployData['instructions']))
        <div class="mb-6 p-4 rounded-lg bg-background-primary border border-neutral">
            <p class="text-text-primary font-semibold text-sm mb-2">Server Setup Instructions</p>
            <p class="text-text-secondary text-sm whitespace-pre-wrap">{{ $deployData['instructions'] }}</p>
        </div>
    @endif

    <div class="mb-6">
        <label class="block text-sm font-medium text-text-primary mb-3">Server Setup Progress</label>
        <div class="space-y-4">
            @foreach($deployData['processes'] as $index => $process)
                @php
                    $isCompleted = $process['completed'] ?? false;
                @endphp
                <div class="flex items-start gap-4 p-4 rounded-lg border border-neutral {{ $isCompleted ? 'bg-green-500/10' : 'bg-background-primary' }}">
                <div class="flex items-center justify-center w-8 h-8 rounded-full {{ $isCompleted ? 'bg-green-200 text-green-900 dark:bg-green-600 dark:text-white' : 'bg-gray-300 text-gray-900 dark:bg-gray-600 dark:text-white' }} flex-shrink-0">
                    {{ $isCompleted ? '✓' : $index + 1 }}
                </div>
                <div class="flex-1">
                    <p class="text-text-primary {{ $isCompleted ? 'font-semibold' : 'font-normal' }} text-sm mb-1">
                        {{ $process['name'] }}
                    </p>
                    @if($isCompleted && isset($process['completed_at']))
                        <p class="text-text-secondary text-xs">
                            Completed {{ \Carbon\Carbon::parse($process['completed_at'])->format('M d, Y \a\t H:i') }}
                        </p>
                    @elseif(!$isCompleted)
                        <p class="text-text-secondary text-xs">Waiting...</p>
                    @endif
                </div>
                </div>
            @endforeach
        </div>
    </div>

    @if($deployData['status'] === 'pending')
        <div class="rounded-lg border border-neutral bg-background-primary p-4">
            <p class="text-text-primary font-semibold mb-1">Server Setup In Progress</p>
            <p class="text-text-secondary text-sm">Our team is working on setting up your server. You'll receive a notification once your server is ready.</p>
        </div>
    @elseif($deployData['status'] === 'deployed')
        @if(!empty($deployData['credentials']))
            <div class="mb-6">
                <div class="space-y-3">
                    @foreach($deployData['credentials'] as $key => $value)
                        @php
                            $fieldConfig = collect($deployData['credential_fields'])->where('name', $key)->first();
                            $label = $fieldConfig['label'] ?? ucfirst(str_replace('_', ' ', $key));
                            $isPassword = ($fieldConfig['type'] ?? 'text') === 'password';
                        @endphp
                        <div>
                            <label class="block text-sm font-medium text-text-primary mb-2">{{ $label }}</label>
                            <div class="relative">
                                @if($isPassword)
                                    <input type="password" 
                                        id="credential-{{ $key }}" 
                                        value="{{ $value }}" 
                                        readonly 
                                        class="w-full px-4 py-3 pr-12 rounded-md border border-neutral bg-background-primary text-text-primary font-mono text-sm cursor-not-allowed">
                                    <button type="button" 
                                        onclick="togglePasswordVisibility('credential-{{ $key }}', this)" 
                                        aria-label="Toggle password visibility"
                                        class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 rounded-md text-text-secondary hover:text-text-primary hover:bg-background-secondary transition-colors">
                                        <svg class="icon-eye w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        <svg class="icon-eye-off w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.956 9.956 0 012.223-3.592m3.1-2.37A9.96 9.96 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.96 9.96 0 01-4.043 5.16M15 12a3 3 0 00-3-3m0 0a3 3 0 00-2.12.88M12 9l-8 8"/>
                                        </svg>
                                    </button>
                                @else
                                    <input type="text" 
                                        value="{{ $value ?: 'N/A' }}" 
                                        readonly 
                                        class="w-full px-4 py-3 pr-12 rounded-md border border-neutral bg-background-primary text-text-primary font-mono text-sm cursor-not-allowed">
                                    <button type="button" 
                                        onclick="copyToClipboard('{{ addslashes($value) }}', this)" 
                                        aria-label="Copy to clipboard"
                                        class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 rounded-md text-text-secondary hover:text-text-primary hover:bg-background-secondary transition-colors">
                                        <svg class="icon-copy w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2"/>
                                            <rect x="8" y="8" width="12" height="12" rx="2" ry="2" stroke-width="2"/>
                                        </svg>
                                        <svg class="icon-check w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        <div class="rounded-lg border border-neutral bg-background-primary p-4">
            <p class="text-text-primary font-semibold mb-1">Server Ready</p>
            <p class="text-text-secondary text-sm">Your server has been set up and is ready to use. Your server credentials are displayed above.</p>
            @if($deployData['deployed_at'])
                <p class="text-text-secondary text-xs mt-2">
                    Server deployed on {{ \Carbon\Carbon::parse($deployData['deployed_at'])->format('F d, Y \a\t H:i') }}
                </p>
            @endif
        </div>
    @elseif($deployData['status'] === 'suspended')
        <div class="rounded-lg border border-neutral bg-background-primary p-4">
            <p class="text-text-primary font-semibold mb-1">Server Suspended</p>
            <p class="text-text-secondary text-sm">Your server is currently suspended. Please contact support for assistance.</p>
        </div>
    @elseif($deployData['status'] === 'terminated')
        <div class="rounded-lg border border-neutral bg-background-primary p-4">
            <p class="text-text-primary font-semibold mb-1">Server Terminated</p>
            <p class="text-text-secondary text-sm">Your server has been terminated and is no longer available.</p>
        </div>
    @endif
</div>
<script>
function togglePasswordVisibility(fieldId, button) {
    const field = document.getElementById(fieldId);
    if (!field) return;
    
    const eye = button.querySelector('.icon-eye');
    const eyeOff = button.querySelector('.icon-eye-off');
    
    if (field.type === 'password') {
        field.type = 'text';
        eye?.classList.add('hidden');
        eyeOff?.classList.remove('hidden');
    } else {
        field.type = 'password';
        eyeOff?.classList.add('hidden');
        eye?.classList.remove('hidden');
    }
}

function copyToClipboard(text, button) {
    navigator.clipboard.writeText(text).then(() => {
        const copyIcon = button.querySelector('.icon-copy');
        const checkIcon = button.querySelector('.icon-check');
        
        copyIcon?.classList.add('hidden');
        checkIcon?.classList.remove('hidden');
        
        setTimeout(() => {
            checkIcon?.classList.add('hidden');
            copyIcon?.classList.remove('hidden');
        }, 1200);
    }).catch(err => {
        console.error('Failed to copy:', err);
    });
}
</script>
@endif