@extends('layouts.app')

@section('title', 'Toplu WordPress Kurulumu')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div>
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Toplu WordPress Kurulumu</h1>

        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-700 text-green-700 dark:text-green-300 rounded-lg">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 rounded-lg">
                {{ session('error') }}
            </div>
        @endif

        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700/50 border border-gray-200 dark:border-gray-700 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="mb-6 flex items-center justify-between">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        <i class="fas fa-info-circle mr-2"></i>
                        Aşağıdaki siteler için WordPress kurulumu yapılacak. Kurulumlar sırayla tamamlanacaktır. Kurulum tamamlandıktan sonra Application Password girebileceksiniz.
                    </p>
                    @if($sites->where('setup_completed_at', null)->count() > 1)
                    <button type="button" 
                        id="install-all-btn"
                        onclick="startBulkInstallation()"
                        class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                        <i class="fas fa-download"></i>
                        Tümünü Kur
                    </button>
                    @endif
                </div>
                
                <!-- Global Queue Progress -->
                <div id="global-queue-progress" class="hidden mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-blue-900 dark:text-blue-100">
                            <i class="fas fa-tasks mr-2"></i>
                            Toplu Kurulum İlerlemesi
                        </span>
                        <span id="global-progress-text" class="text-sm text-blue-700 dark:text-blue-300">0/0</span>
                    </div>
                    <div class="w-full bg-blue-200 dark:bg-blue-800 rounded-full h-3">
                        <div id="global-progress-bar" 
                            class="bg-blue-600 dark:bg-blue-500 h-3 rounded-full transition-all duration-300" 
                            style="width: 0%"></div>
                    </div>
                    <div id="global-progress-message" class="mt-2 text-xs text-blue-700 dark:text-blue-300"></div>
                </div>

                <div class="space-y-6">
                    @foreach($sites as $index => $site)
                    @php
                        $wpInstalled = !empty($site->setup_completed_at);
                        $hasAppPassword = !empty($site->wp_application_password);
                        $wpAdminUrl = rtrim($site->url, '/') . '/wp-admin';
                    @endphp
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-700/50" data-site-id="{{ $site->id }}">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $site->name }}
                                </h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    <i class="fas fa-link mr-1"></i>{{ $site->url }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                                    <i class="fas fa-server mr-1"></i>{{ $site->ssh_host ?? 'N/A' }} - {{ $site->ssh_path ?? 'N/A' }}
                                </p>
                            </div>
                            <div class="flex items-center gap-2">
                                <span id="status-{{ $site->id }}" class="px-3 py-1 text-xs font-semibold rounded-full 
                                    @if($wpInstalled && $hasAppPassword) bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200
                                    @elseif($wpInstalled) bg-blue-200 dark:bg-blue-600 text-blue-800 dark:text-blue-200
                                    @else bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300
                                    @endif">
                                    @if($wpInstalled && $hasAppPassword) Tamamlandı
                                    @elseif($wpInstalled) WordPress Kuruldu
                                    @else Bekliyor
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- WordPress Kur Butonu -->
                        <div id="install-button-container-{{ $site->id }}" class="mb-4 {{ $wpInstalled ? 'hidden' : '' }}">
                            <button type="button" 
                                onclick="startWordPressInstallation({{ $site->id }}, '{{ addslashes($site->name) }}', '{{ $site->url }}', false)"
                                id="install-btn-{{ $site->id }}"
                                class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                                <i class="fas fa-download"></i>
                                WordPress'i Kur
                            </button>
                        </div>

                        <!-- Progress Bar -->
                        <div id="progress-{{ $site->id }}" class="hidden mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Kurulum İlerlemesi</span>
                                <span id="progress-text-{{ $site->id }}" class="text-xs text-gray-600 dark:text-gray-400">0%</span>
                            </div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div id="progress-bar-{{ $site->id }}" 
                                    class="bg-blue-600 dark:bg-blue-500 h-2 rounded-full transition-all duration-300" 
                                    style="width: 0%"></div>
                            </div>
                            <div id="progress-message-{{ $site->id }}" class="mt-2 text-xs text-gray-600 dark:text-gray-400"></div>
                        </div>

                        <!-- Logs -->
                        <div id="logs-{{ $site->id }}" class="hidden mt-4 p-3 bg-gray-900 dark:bg-black rounded-lg max-h-40 overflow-y-auto">
                            <div class="text-xs font-mono text-green-400" id="log-content-{{ $site->id }}"></div>
                        </div>

                        <!-- WordPress Kurulum Tamamlandı Mesajı -->
                        @if($wpInstalled)
                        <div class="mb-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                            <div class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5"></i>
                                <div class="flex-1">
                                    <p class="text-sm font-semibold text-green-800 dark:text-green-200 mb-1">
                                        WordPress kurulumu tamamlandı!
                                    </p>
                                    <p class="text-xs text-green-700 dark:text-green-300">
                                        Kurulum tarihi: {{ $site->setup_completed_at->format('d.m.Y H:i') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Application Password Input -->
                        <div id="app-password-container-{{ $site->id }}" class="{{ $wpInstalled ? '' : 'hidden' }} mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
                            @if($wpInstalled)
                            <!-- WordPress Admin Bilgileri -->
                            <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                                <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">
                                    <i class="fas fa-info-circle mr-1"></i> WordPress Admin Bilgileri
                                </h4>
                                <div class="space-y-1 text-xs text-blue-800 dark:text-blue-200">
                                    <p><strong>WP-Admin URL:</strong> <a href="{{ $wpAdminUrl }}" target="_blank" class="underline hover:no-underline">{{ $wpAdminUrl }}</a></p>
                                    <p><strong>Kullanıcı Adı:</strong> {{ $site->wp_admin_login ?? 'admin' }}</p>
                                    <p><strong>Şifre:</strong> {{ $site->wp_admin_password ? '••••••••' : 'Kurulum sırasında belirlenen şifre' }}</p>
                                </div>
                                <div class="mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded text-xs text-yellow-800 dark:text-yellow-200">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>
                                    <strong>Önemli:</strong> WordPress admin panelinde <strong>Ayarlar > Kalıcı Bağlantılar</strong> bölümünden <strong>"Gönderi adı" (Post name)</strong> seçeneğini seçip kaydedin.
                                </div>
                            </div>
                            @endif

                            @if($hasAppPassword)
                            <!-- Application Password Zaten Kaydedilmiş -->
                            <div class="mb-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-check-circle text-green-600 dark:text-green-400"></i>
                                    <p class="text-sm font-semibold text-green-800 dark:text-green-200">
                                        Application Password kaydedildi
                                    </p>
                                </div>
                            </div>
                            @else
                            <!-- Application Password Input -->
                            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                <i class="fas fa-lock mr-1"></i> WordPress Application Password <span class="text-red-500">*</span>
                            </label>
                            <div class="flex gap-2">
                                <input type="text" 
                                    id="wp_app_password_{{ $site->id }}"
                                    required
                                    class="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 transition-all duration-200"
                                    placeholder="WordPress Application Password girin">
                                <button type="button"
                                    onclick="saveApplicationPassword({{ $site->id }})"
                                    id="save-password-btn-{{ $site->id }}"
                                    class="inline-flex items-center gap-2 rounded-md bg-green-600 dark:bg-green-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 dark:hover:bg-green-400 transition">
                                    <i class="fas fa-save"></i>
                                    Kaydet
                                </button>
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                WordPress admin panelinden oluşturduğunuz Application Password'i girin.
                            </p>
                            <div id="password-status-{{ $site->id }}" class="mt-2 text-xs"></div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <a href="{{ route('sites.index') }}" class="inline-flex items-center gap-2 rounded-md bg-gray-200 dark:bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                        İptal
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const sites = @json($sitesForJs ?? []);
const csrfToken = '{{ csrf_token() }}';

// Queue sistemi
let installationQueue = [];
let isQueueRunning = false;
let currentInstallation = null;

// Sayfa yüklendiğinde durumları kontrol et
document.addEventListener('DOMContentLoaded', function() {
    sites.forEach(site => {
        if (site.wp_installed) {
            // WordPress kurulumu tamamlanmış
            updateStatus(site.id, 'WordPress Kuruldu', 'bg-blue-200 dark:bg-blue-600 text-blue-800 dark:text-blue-200');
            
            // Kurulum butonunu gizle
            const installBtnContainer = document.getElementById(`install-button-container-${site.id}`);
            if (installBtnContainer) {
                installBtnContainer.classList.add('hidden');
            }
            
            // Application password input'unu göster
            showApplicationPasswordInput(site.id);
            
            if (site.has_app_password) {
                // Application password zaten kaydedilmiş
                updateStatus(site.id, 'Tamamlandı', 'bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200');
            }
        }
    });
    
    // Queue durumunu kontrol et
    updateQueueUI();
});

// Tümünü kur butonu - Queue'ya ekle
function startBulkInstallation() {
    const pendingSites = sites.filter(site => !site.wp_installed);
    
    if (pendingSites.length === 0) {
        alert('Kurulacak site bulunamadı.');
        return;
    }
    
    // Tüm bekleyen siteleri queue'ya ekle
    pendingSites.forEach(site => {
        addToQueue(site.id, site.name, site.url);
    });
    
    // Queue'yu başlat
    processQueue();
}

// Queue'ya site ekle
function addToQueue(siteId, siteName, siteUrl) {
    // Zaten queue'da mı kontrol et
    if (installationQueue.some(item => item.siteId === siteId)) {
        return;
    }
    
    // Zaten kurulmuş mu kontrol et
    const site = sites.find(s => s.id === siteId);
    if (site && site.wp_installed) {
        return;
    }
    
    installationQueue.push({
        siteId: siteId,
        siteName: siteName,
        siteUrl: siteUrl
    });
    
    updateQueueUI();
}

// Queue'yu işle
async function processQueue() {
    if (isQueueRunning) {
        return;
    }
    
    if (installationQueue.length === 0) {
        isQueueRunning = false;
        hideGlobalProgress();
        return;
    }
    
    isQueueRunning = true;
    showGlobalProgress();
    
    // İlk siteyi al ve queue'dan çıkar
    const nextSite = installationQueue.shift();
    currentInstallation = nextSite;
    
    updateQueueUI();
    
    // Kurulumu başlat
    await startWordPressInstallation(nextSite.siteId, nextSite.siteName, nextSite.siteUrl, true);
    
    // Bir sonraki siteyi işle
    setTimeout(() => {
        processQueue();
    }, 1000);
}

// Tek bir site için WordPress kurulumunu başlat
async function startWordPressInstallation(siteId, siteName, siteUrl, fromQueue = false) {
    const installBtn = document.getElementById(`install-btn-${siteId}`);
    
    // Eğer queue'dan geliyorsa, butonu devre dışı bırak
    if (fromQueue && installBtn) {
        installBtn.disabled = true;
        installBtn.innerHTML = '<i class="fas fa-clock"></i> Sırada...';
    } else if (installBtn && !fromQueue) {
        // Manuel tıklama - queue'ya ekle
        addToQueue(siteId, siteName, siteUrl);
        if (!isQueueRunning) {
            processQueue();
        }
        return;
    }
    
    updateStatus(siteId, 'Kuruluyor', 'bg-blue-200 dark:bg-blue-600 text-blue-800 dark:text-blue-200');
    showProgress(siteId);
    updateProgress(siteId, 0, 'WordPress kurulumu başlatılıyor...');
    addLog(siteId, 'WordPress kurulumu başlatılıyor...');
    
    if (fromQueue) {
        updateGlobalProgress();
    }
    
    try {
        const response = await fetch(`/sites/${siteId}/setup/start-wordpress`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.message || 'Kurulum başlatılamadı.');
        }
        
        addLog(siteId, 'Kurulum başlatıldı, adımlar çalıştırılıyor...');
        
        // Durum kontrolünü başlat (queue callback ile)
        await checkInstallationStatus(siteId, data.token, data.total_steps, fromQueue);
    } catch (error) {
        console.error(`Site ${siteId} kurulum hatası:`, error);
        updateStatus(siteId, 'Hata', 'bg-red-200 dark:bg-red-600 text-red-800 dark:text-red-200');
        updateProgress(siteId, 0, 'Hata: ' + error.message, true);
        addLog(siteId, '✗ Hata: ' + error.message);
        
        if (installBtn) {
            installBtn.disabled = false;
            installBtn.innerHTML = '<i class="fas fa-download"></i> WordPress\'i Kur';
        }
        
        // Queue'dan devam et
        if (fromQueue) {
            currentInstallation = null;
            isQueueRunning = false;
            processQueue();
        }
    }
}

// Kurulum durumunu kontrol et
async function checkInstallationStatus(siteId, token, totalSteps, fromQueue = false) {
    let completedSteps = 0;
    let checkCount = 0;
    const maxChecks = 600; // 10 dakika timeout (1 saniye * 600)
    
    const checkInterval = setInterval(async () => {
        checkCount++;
        
        try {
            const response = await fetch(`/sites/${siteId}/setup/status?token=${token}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                },
            });
            
            const data = await response.json();
            
            if (data.status === 'completed') {
                clearInterval(checkInterval);
                updateStatus(siteId, 'WordPress Kuruldu', 'bg-blue-200 dark:bg-blue-600 text-blue-800 dark:text-blue-200');
                updateProgress(siteId, 100, 'WordPress kurulumu başarıyla tamamlandı!');
                addLog(siteId, '✓ WordPress kurulumu tamamlandı!');
                
                // Kurulum butonunu gizle
                const installBtnContainer = document.getElementById(`install-button-container-${siteId}`);
                if (installBtnContainer) {
                    installBtnContainer.classList.add('hidden');
                }
                
                // Application password input'unu göster
                showApplicationPasswordInput(siteId);
                
                // Site durumunu güncelle (sayfa yenilemeden)
                const site = sites.find(s => s.id === siteId);
                if (site) {
                    site.wp_installed = true;
                }
                
                // Queue'dan geliyorsa, bir sonraki siteye geç
                if (fromQueue) {
                    currentInstallation = null;
                    updateGlobalProgress();
                    // Queue devam edecek
                    setTimeout(() => {
                        isQueueRunning = false;
                        processQueue();
                    }, 1000);
                } else {
                    // Manuel kurulum - sayfayı yenile
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                }
            } else if (data.status === 'failed') {
                clearInterval(checkInterval);
                updateStatus(siteId, 'Başarısız', 'bg-red-200 dark:bg-red-600 text-red-800 dark:text-red-200');
                updateProgress(siteId, 0, 'Kurulum başarısız: ' + (data.message || 'Bilinmeyen hata'), true);
                addLog(siteId, '✗ Kurulum başarısız: ' + (data.message || 'Bilinmeyen hata'));
                
                // Butonu tekrar aktif et
                const installBtn = document.getElementById(`install-btn-${siteId}`);
                if (installBtn) {
                    installBtn.disabled = false;
                    installBtn.innerHTML = '<i class="fas fa-redo"></i> Tekrar Dene';
                }
                
                // Queue'dan geliyorsa, bir sonraki siteye geç
                if (fromQueue) {
                    currentInstallation = null;
                    isQueueRunning = false;
                    processQueue();
                }
            } else if (data.status === 'running') {
                completedSteps = data.completed_steps || 0;
                const progress = (completedSteps / totalSteps) * 100;
                updateProgress(siteId, progress, `Adım ${completedSteps}/${totalSteps} tamamlandı...`);
                
                if (data.current_step_message) {
                    addLog(siteId, data.current_step_message);
                }
                
                // Global progress güncelle
                if (fromQueue) {
                    updateGlobalProgress();
                }
            }
            
            if (checkCount >= maxChecks) {
                clearInterval(checkInterval);
                updateStatus(siteId, 'Timeout', 'bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200');
                updateProgress(siteId, 0, 'Kurulum zaman aşımına uğradı.', true);
                addLog(siteId, '✗ Kurulum zaman aşımına uğradı.');
                
                // Butonu tekrar aktif et
                const installBtn = document.getElementById(`install-btn-${siteId}`);
                if (installBtn) {
                    installBtn.disabled = false;
                    installBtn.innerHTML = '<i class="fas fa-redo"></i> Tekrar Dene';
                }
                
                // Queue'dan geliyorsa, bir sonraki siteye geç
                if (fromQueue) {
                    currentInstallation = null;
                    isQueueRunning = false;
                    processQueue();
                }
            }
        } catch (error) {
            console.error(`Site ${siteId} durum kontrolü hatası:`, error);
            if (checkCount >= maxChecks) {
                clearInterval(checkInterval);
                if (fromQueue) {
                    currentInstallation = null;
                    isQueueRunning = false;
                    processQueue();
                }
            }
        }
    }, 1000); // Her saniye kontrol et
}

// Application password input'unu göster
function showApplicationPasswordInput(siteId) {
    const container = document.getElementById(`app-password-container-${siteId}`);
    if (container) {
        container.classList.remove('hidden');
        container.classList.add('block');
        
        // Smooth scroll to input
        setTimeout(() => {
            container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }, 300);
    }
}

// Application password'i kaydet
async function saveApplicationPassword(siteId) {
    const passwordInput = document.getElementById(`wp_app_password_${siteId}`);
    const saveBtn = document.getElementById(`save-password-btn-${siteId}`);
    const statusDiv = document.getElementById(`password-status-${siteId}`);
    
    if (!passwordInput || !passwordInput.value || passwordInput.value.trim() === '') {
        if (statusDiv) {
            statusDiv.innerHTML = '<span class="text-red-600 dark:text-red-400">Lütfen Application Password girin.</span>';
        }
        return;
    }
    
    if (saveBtn) {
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kaydediliyor...';
    }
    
    try {
        const response = await fetch(`/sites/${siteId}/save-application-password`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({
                wp_application_password: passwordInput.value.trim(),
            }),
        });
        
        const data = await response.json();
        
        if (!response.ok || !data.success) {
            throw new Error(data.message || 'Application Password kaydedilemedi.');
        }
        
        if (statusDiv) {
            statusDiv.innerHTML = '<span class="text-green-600 dark:text-green-400"><i class="fas fa-check-circle"></i> Application Password başarıyla kaydedildi!</span>';
        }
        
        if (saveBtn) {
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fas fa-check"></i> Kaydedildi';
            saveBtn.classList.remove('bg-green-600', 'dark:bg-green-500', 'hover:bg-green-500', 'dark:hover:bg-green-400');
            saveBtn.classList.add('bg-gray-400', 'dark:bg-gray-600', 'cursor-not-allowed');
        }
        
        passwordInput.disabled = true;
        passwordInput.classList.add('bg-gray-100', 'dark:bg-gray-600');
        
        // Durumu güncelle
        updateStatus(siteId, 'Tamamlandı', 'bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200');
        
        // Sayfayı yenile (durumları güncellemek için)
        setTimeout(() => {
            window.location.reload();
        }, 1500);
    } catch (error) {
        console.error(`Site ${siteId} password kaydetme hatası:`, error);
        if (statusDiv) {
            statusDiv.innerHTML = '<span class="text-red-600 dark:text-red-400">Hata: ' + error.message + '</span>';
        }
        if (saveBtn) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = '<i class="fas fa-save"></i> Kaydet';
        }
    }
}

function updateStatus(siteId, text, className) {
    const statusEl = document.getElementById(`status-${siteId}`);
    if (statusEl) {
        statusEl.textContent = text;
        statusEl.className = `px-3 py-1 text-xs font-semibold rounded-full ${className}`;
    }
}

function showProgress(siteId) {
    const progressEl = document.getElementById(`progress-${siteId}`);
    const logsEl = document.getElementById(`logs-${siteId}`);
    if (progressEl) progressEl.classList.remove('hidden');
    if (logsEl) logsEl.classList.remove('hidden');
}

function updateProgress(siteId, percentage, message, isError = false) {
    const progressBar = document.getElementById(`progress-bar-${siteId}`);
    const progressText = document.getElementById(`progress-text-${siteId}`);
    const progressMessage = document.getElementById(`progress-message-${siteId}`);
    
    if (progressBar) {
        progressBar.style.width = percentage + '%';
        if (isError) {
            progressBar.classList.remove('bg-blue-600', 'dark:bg-blue-500');
            progressBar.classList.add('bg-red-600', 'dark:bg-red-500');
        } else {
            progressBar.classList.remove('bg-red-600', 'dark:bg-red-500');
            progressBar.classList.add('bg-blue-600', 'dark:bg-blue-500');
        }
    }
    if (progressText) progressText.textContent = Math.round(percentage) + '%';
    if (progressMessage) {
        progressMessage.textContent = message;
        progressMessage.className = isError 
            ? 'mt-2 text-xs text-red-600 dark:text-red-400' 
            : 'mt-2 text-xs text-gray-600 dark:text-gray-400';
    }
}

function addLog(siteId, message) {
    const logContent = document.getElementById(`log-content-${siteId}`);
    if (logContent) {
        const timestamp = new Date().toLocaleTimeString();
        logContent.innerHTML += `<div>[${timestamp}] ${message}</div>`;
        logContent.scrollTop = logContent.scrollHeight;
    }
}

// Queue UI fonksiyonları
function updateQueueUI() {
    const totalPending = sites.filter(s => !s.wp_installed).length;
    const totalCompleted = sites.filter(s => s.wp_installed).length;
    const queueLength = installationQueue.length;
    const currentlyInstalling = currentInstallation ? 1 : 0;
    
    // "Tümünü Kur" butonunu güncelle
    const installAllBtn = document.getElementById('install-all-btn');
    if (installAllBtn) {
        if (isQueueRunning || queueLength > 0 || currentlyInstalling > 0) {
            installAllBtn.disabled = true;
            installAllBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kurulum Devam Ediyor...';
        } else if (totalPending === 0) {
            installAllBtn.classList.add('hidden');
        } else {
            installAllBtn.disabled = false;
            installAllBtn.innerHTML = `<i class="fas fa-download"></i> Tümünü Kur (${totalPending})`;
        }
    }
}

function showGlobalProgress() {
    const globalProgress = document.getElementById('global-queue-progress');
    if (globalProgress) {
        globalProgress.classList.remove('hidden');
    }
    updateGlobalProgress();
}

function hideGlobalProgress() {
    const globalProgress = document.getElementById('global-queue-progress');
    if (globalProgress) {
        globalProgress.classList.add('hidden');
    }
}

function updateGlobalProgress() {
    const totalPending = sites.filter(s => !s.wp_installed).length;
    const totalCompleted = sites.filter(s => s.wp_installed).length;
    const total = sites.length;
    const completed = totalCompleted + (currentInstallation ? 1 : 0);
    
    const progressBar = document.getElementById('global-progress-bar');
    const progressText = document.getElementById('global-progress-text');
    const progressMessage = document.getElementById('global-progress-message');
    
    const percentage = total > 0 ? (completed / total) * 100 : 0;
    
    if (progressBar) {
        progressBar.style.width = percentage + '%';
    }
    
    if (progressText) {
        progressText.textContent = `${completed}/${total}`;
    }
    
    if (progressMessage) {
        if (currentInstallation) {
            progressMessage.textContent = `Şu anda kuruluyor: ${currentInstallation.siteName} (${installationQueue.length} site sırada)`;
        } else if (installationQueue.length > 0) {
            progressMessage.textContent = `${installationQueue.length} site kurulum için bekliyor...`;
        } else if (completed === total) {
            progressMessage.textContent = 'Tüm kurulumlar tamamlandı!';
        } else {
            progressMessage.textContent = 'Kurulum bekleniyor...';
        }
    }
}
</script>
@endsection