@extends('layouts.app')

@section('title', 'Site Kurulumu - ' . $site->name)

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-6">
            <h1 class="text-3xl font-semibold text-gray-900 mb-2">Site Kurulumu</h1>
            <p class="text-sm text-gray-600">{{ $site->name }} için kurulum adımlarını tamamlayın</p>
        </div>

        @if(session('success'))
        <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800 flex items-center">
                <i class="fas fa-info-circle mr-2"></i>{{ $site->name }} adlı site oluşturuldu. WordPress kurulumu başlatılıyor...
            </p>
        </div>
        @endif

        @if($errors->any())
        <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <p class="text-sm text-red-800 font-semibold mb-2">Hatalar:</p>
            <ul class="list-disc list-inside text-sm text-red-700">
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('sites.setup.store', $site) }}" method="POST" id="setupForm">
            @csrf

            <!-- Tab Navigation -->
            <div class="mb-6 border-b border-gray-200">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <button type="button" 
                            data-tab="1"
                            class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active">
                        <span class="flex items-center">
                            <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2 text-xs font-semibold">1</span>
                            Hoş Geldiniz
                        </span>
                    </button>
                    <button type="button" 
                            data-tab="2"
                            class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        <span class="flex items-center">
                            <span class="w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center mr-2 text-xs font-semibold">2</span>
                            WordPress Yetkilendirme
                        </span>
                    </button>
                    <button type="button" 
                            data-tab="3"
                            id="tab-3-button"
                            class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm opacity-50 cursor-not-allowed"
                            disabled>
                        <span class="flex items-center">
                            <span class="w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center mr-2 text-xs font-semibold">3</span>
                            Eklenti Seçimi
                            <i class="fas fa-lock ml-2 text-xs"></i>
                        </span>
                    </button>
                </nav>
            </div>

            <!-- Tab 1: Hoş Geldiniz -->
            <div id="tab-1" class="tab-content">
                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl p-8">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 mb-4" id="wp-install-icon">
                            <i class="fas fa-spinner fa-spin text-blue-600 text-3xl"></i>
                        </div>
                        <h2 class="text-2xl font-semibold text-gray-900 mb-2" id="wp-install-title">WordPress Kuruluyor...</h2>
                        <p class="text-gray-600 mb-6" id="wp-install-message">
                            <strong>{{ $site->name }}</strong> adlı site oluşturuldu. WordPress kurulumu başlatılıyor. Lütfen bekleyin...
                        </p>
                        
                        <!-- Progress Bar -->
                        <div class="max-w-md mx-auto mb-6">
                            <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
                                <div id="wp-progress-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-500 ease-out" style="width: 0%"></div>
                            </div>
                            <div class="flex justify-between items-center text-sm text-gray-600">
                                <span id="wp-progress-text">Başlatılıyor...</span>
                                <span id="wp-progress-percent">0%</span>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 mb-6 text-left">
                            <h3 class="font-semibold text-gray-900 mb-3">Site Bilgileri:</h3>
                            <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Site Adı</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $site->name }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">URL</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        <a href="{{ $site->url }}" target="_blank" class="text-blue-600 hover:text-blue-800">{{ $site->url }}</a>
                                    </dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Dil</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ strtoupper($site->language) }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Sektör</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ ucfirst($site->sector) }}</dd>
                                </div>
                            </dl>
                        </div>
                        <div id="wp-install-button" class="hidden">
                            <button type="button" onclick="switchTab(2)" class="inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
                                <i class="fas fa-check mr-2"></i>
                                Kurulum Tamamlandı - Devam Et
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                        <div id="wp-retry-button" class="hidden mt-4">
                            <button type="button" onclick="retryWordPressInstallation()" class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
                                <i class="fas fa-redo mr-2"></i>
                                Tekrar Dene
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 2: WordPress Application Password -->
            <div id="tab-2" class="tab-content hidden">
                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl p-8">
                    <div class="max-w-md mx-auto">
                        <div class="text-center mb-6">
                            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 mb-4">
                                <i class="fas fa-lock text-blue-600 text-3xl"></i>
                            </div>
                            <h2 class="text-2xl font-semibold text-gray-900 mb-2">WordPress Application Password</h2>
                            <p class="text-gray-600 text-sm mb-4">
                                WordPress REST API erişimi için Application Password gereklidir. WordPress admin paneline giriş yaparak Application Password oluşturun.
                            </p>
                        </div>

                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-yellow-600"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-yellow-800">Nasıl Oluşturulur?</h3>
                                    <div class="mt-2 text-sm text-yellow-700">
                                        <ol class="list-decimal list-inside space-y-1">
                                            <li>WordPress admin paneline giriş yapın</li>
                                            <li>Kullanıcılar > Profil menüsüne gidin</li>
                                            <li>"Application Passwords" bölümüne inin</li>
                                            <li>Yeni bir Application Password oluşturun</li>
                                            <li>Oluşturulan şifreyi aşağıya girin</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="wp_application_password" class="block text-sm font-semibold text-gray-900 mb-2">
                                Application Password <span class="text-red-500">*</span>
                            </label>
                            <input type="password" 
                                   name="wp_application_password" 
                                   id="wp_application_password" 
                                   required
                                   value="{{ old('wp_application_password') }}"
                                   class="block w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                   placeholder="xxxx xxxx xxxx xxxx xxxx xxxx">
                            <p class="mt-2 text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                Application Password genellikle boşluklarla ayrılmış 24 karakterlik bir dizidir.
                            </p>
                            @error('wp_application_password')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                            @enderror
                        </div>

                        <div class="flex justify-between">
                            <button type="button" onclick="switchTab(1)" class="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Geri
                            </button>
                            <button type="button" id="continue-to-plugins-btn" onclick="enablePluginTabAndSwitch()" class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
                                Devam Et
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 3: Eklenti Seçimi -->
            <div id="tab-3" class="tab-content hidden">
                <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 sm:rounded-xl p-8">
                    <div class="mb-6">
                        <div class="text-center mb-6">
                            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 dark:bg-purple-900/30 mb-4">
                                <i class="fas fa-plug text-purple-600 dark:text-purple-400 text-3xl"></i>
                            </div>
                            <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Eklenti Seçimi</h2>
                            <p class="text-gray-600 dark:text-gray-400 text-sm">
                                Yüklemek istediğiniz eklentileri seçin. GSP Connector zorunludur ve otomatik olarak seçilidir.
                            </p>
                        </div>

                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">GSP Connector</h3>
                                    <p class="mt-1 text-sm text-blue-700 dark:text-blue-400">
                                        GSP Connector eklentisi GitHub'dan yüklenecektir ve zorunludur. Bu eklenti site yönetimi için gereklidir.
                                    </p>
                                </div>
                            </div>
                        </div>

                        {{-- Sadece WooCommerce ve GSP Connector göster --}}
                        <div class="space-y-3">
                            {{-- GSP Connector (Zorunlu) --}}
                            <label class="flex items-start p-4 border-2 border-purple-200 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 rounded-lg cursor-not-allowed">
                                <input type="checkbox" 
                                       name="selected_plugins[]" 
                                       value="gsp-connector" 
                                       checked 
                                       readonly
                                       class="mt-1 h-4 w-4 text-purple-600 dark:text-purple-400 focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded cursor-not-allowed">
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center">
                                        <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">GSP Connector</span>
                                        <span class="ml-2 inline-flex items-center rounded-full bg-purple-100 dark:bg-purple-900/30 px-2.5 py-0.5 text-xs font-medium text-purple-800 dark:text-purple-300">Zorunlu</span>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">GitHub'dan yüklenecek. Site yönetimi için gerekli eklenti.</p>
                                </div>
                            </label>

                            {{-- WooCommerce (Zorunlu) --}}
                            @php
                                $oldSelectedPlugins = old('selected_plugins', []);
                                // WooCommerce'i otomatik seçili hale getir
                                if (!in_array('woocommerce', $oldSelectedPlugins)) {
                                    $oldSelectedPlugins[] = 'woocommerce';
                                }
                            @endphp
                            <label class="flex items-start p-4 border border-purple-300 dark:border-purple-600 bg-purple-50 dark:bg-purple-900/20 rounded-lg cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/30 transition">
                                <input type="checkbox" 
                                       name="selected_plugins[]" 
                                       value="woocommerce" 
                                       {{ in_array('woocommerce', $oldSelectedPlugins) ? 'checked' : '' }}
                                       class="mt-1 h-4 w-4 text-purple-600 dark:text-purple-400 focus:ring-purple-500 dark:focus:ring-purple-400 border-gray-300 dark:border-gray-600 rounded">
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100">WooCommerce</span>
                                        <span class="inline-flex items-center rounded-full bg-purple-100 dark:bg-purple-900/30 px-2.5 py-0.5 text-xs font-medium text-purple-800 dark:text-purple-300">
                                            GSP Connector için gerekli
                                        </span>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">WordPress.org repository'sinden yüklenecek.</p>
                                </div>
                            </label>
                        </div>

                        @error('selected_plugins')
                        <p class="mt-4 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="flex justify-between border-t border-gray-200 pt-6 mt-6">
                        <button type="button" onclick="switchTab(2)" class="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Geri
                        </button>
                        <button type="submit" class="inline-flex items-center rounded-md bg-green-600 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
                            <i class="fas fa-check mr-2"></i>
                            Kurulumu Tamamla
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
let currentTab = 1;
const totalTabs = 3;

function switchTab(tabNumber) {
    // Tab içeriğini gizle/göster
    document.querySelectorAll('.tab-content').forEach((content, index) => {
        if (index + 1 === tabNumber) {
            content.classList.remove('hidden');
        } else {
            content.classList.add('hidden');
        }
    });

    // Tab butonlarını güncelle
    document.querySelectorAll('.tab-button').forEach((button, index) => {
        const tabNum = index + 1;
        const numberSpan = button.querySelector('span span');
        
        if (tabNum === tabNumber) {
            button.classList.remove('border-transparent', 'text-gray-500');
            button.classList.add('border-blue-500', 'text-blue-600');
            numberSpan.classList.remove('bg-gray-100', 'text-gray-600');
            numberSpan.classList.add('bg-blue-100', 'text-blue-600');
        } else if (tabNum < tabNumber) {
            button.classList.remove('border-transparent', 'text-gray-500');
            button.classList.add('border-green-500', 'text-green-600');
            numberSpan.classList.remove('bg-gray-100', 'text-gray-600');
            numberSpan.classList.add('bg-green-100', 'text-green-600');
        } else {
            button.classList.remove('border-blue-500', 'text-blue-600', 'border-green-500', 'text-green-600');
            button.classList.add('border-transparent', 'text-gray-500');
            numberSpan.classList.remove('bg-blue-100', 'text-blue-600', 'bg-green-100', 'text-green-600');
            numberSpan.classList.add('bg-gray-100', 'text-gray-600');
        }
    });

    currentTab = tabNumber;
}

// Tab 3'ü aktif et ve geçiş yap
function enablePluginTabAndSwitch() {
    const appPassword = document.getElementById('wp_application_password').value;
    if (!appPassword || appPassword.trim() === '') {
        alert('Lütfen önce WordPress Application Password girin.');
        return;
    }
    
    // Tab 3 butonunu aktif et
    const tab3Button = document.getElementById('tab-3-button');
    if (tab3Button) {
        tab3Button.disabled = false;
        tab3Button.classList.remove('opacity-50', 'cursor-not-allowed');
        tab3Button.querySelector('i.fa-lock')?.remove();
    }
    
    // Tab 3'e geç
    switchTab(3);
}

// Tab butonlarına tıklama olayı ekle
document.querySelectorAll('.tab-button').forEach((button, index) => {
    button.addEventListener('click', () => {
        const tabNum = index + 1;
        
        // Tab 3 için özel kontrol
        if (tabNum === 3) {
            const appPassword = document.getElementById('wp_application_password').value;
            if (!appPassword || appPassword.trim() === '') {
                alert('Lütfen önce WordPress Application Password girin.');
                return;
            }
            
            // Tab 3 butonunu aktif et
            const tab3Button = document.getElementById('tab-3-button');
            if (tab3Button && tab3Button.disabled) {
                tab3Button.disabled = false;
                tab3Button.classList.remove('opacity-50', 'cursor-not-allowed');
                tab3Button.querySelector('i.fa-lock')?.remove();
            }
        }
        
        // Sadece önceki tab'ları tamamlanmışsa geçiş yap
        if (tabNum <= currentTab || tabNum === currentTab + 1) {
            switchTab(tabNum);
        }
    });
});

// WordPress kurulumunu başlat
let wpInstallationState = {
    progressBar: null,
    progressText: null,
    progressPercent: null,
    installIcon: null,
    installTitle: null,
    installMessage: null,
    installButton: null,
    retryButton: null,
    csrfToken: '',
    siteId: {{ $site->id }},
    setupToken: null,
    statusCheckInterval: null
};

(function() {
    wpInstallationState.progressBar = document.getElementById('wp-progress-bar');
    wpInstallationState.progressText = document.getElementById('wp-progress-text');
    wpInstallationState.progressPercent = document.getElementById('wp-progress-percent');
    wpInstallationState.installIcon = document.getElementById('wp-install-icon');
    wpInstallationState.installTitle = document.getElementById('wp-install-title');
    wpInstallationState.installMessage = document.getElementById('wp-install-message');
    wpInstallationState.installButton = document.getElementById('wp-install-button');
    wpInstallationState.retryButton = document.getElementById('wp-retry-button');
    wpInstallationState.csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

    // Kurulumu başlat
    async function startWordPressInstallation() {
        try {
            updateProgress(0, 'WordPress kurulumu başlatılıyor...');
            
            const response = await fetch(`/sites/${wpInstallationState.siteId}/setup/start-wordpress`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': wpInstallationState.csrfToken,
                },
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.message || 'Kurulum başlatılamadı.');
            }

            wpInstallationState.setupToken = data.token;
            updateProgress(data.completed_steps / data.total_steps * 100, `Adım ${data.current_step}/${data.total_steps} tamamlandı...`);
            
            // Durum kontrolünü başlat
            startStatusCheck();
        } catch (error) {
            console.error('Kurulum hatası:', error);
            updateProgress(0, 'Hata: ' + error.message, true);
            showRetryButton();
        }
    }

    // Durum kontrolü
    function startStatusCheck() {
        wpInstallationState.statusCheckInterval = setInterval(async () => {
            try {
                const response = await fetch(`/sites/${wpInstallationState.siteId}/setup/status?token=${wpInstallationState.setupToken}`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': wpInstallationState.csrfToken,
                    },
                });

                const data = await response.json();

                if (data.status === 'completed') {
                    clearInterval(wpInstallationState.statusCheckInterval);
                    updateProgress(100, 'WordPress kurulumu tamamlandı!', false, true);
                    showSuccessState();
                } else if (data.status === 'failed') {
                    clearInterval(wpInstallationState.statusCheckInterval);
                    const errorMessage = data.message || 'Bilinmeyen hata';
                    
                    // Veritabanı hatası için özel mesaj
                    let displayMessage = errorMessage;
                    if (errorMessage.toLowerCase().includes('access denied') || errorMessage.toLowerCase().includes('veritabanı')) {
                        displayMessage = '❌ ' + errorMessage + '\n\nLütfen veritabanı bilgilerini kontrol edin:\n- Kullanıcı adı\n- Şifre\n- Veritabanı yetkileri';
                    } else {
                        displayMessage = '❌ Kurulum başarısız: ' + errorMessage;
                    }
                    
                    updateProgress(data.progress || 0, displayMessage, true);
                    showRetryButton();
                    
                    // Hata mesajını alert olarak da göster
                    if (errorMessage.toLowerCase().includes('access denied') || errorMessage.toLowerCase().includes('veritabanı')) {
                        alert('Veritabanı Bağlantı Hatası\n\n' + errorMessage + '\n\nLütfen veritabanı bilgilerini kontrol edin ve tekrar deneyin.');
                    }
                } else if (data.status === 'running') {
                    updateProgress(data.progress || 0, `Adım ${data.current_step}/${data.total_steps} - ${data.message || 'Kurulum devam ediyor...'}`);
                } else if (data.status === 'not_found') {
                    clearInterval(wpInstallationState.statusCheckInterval);
                    updateProgress(0, 'Kurulum oturumu bulunamadı.', true);
                    showRetryButton();
                }
            } catch (error) {
                console.error('Durum kontrolü hatası:', error);
            }
        }, 2000); // Her 2 saniyede bir kontrol et
    }

    // Progress bar'ı güncelle
    function updateProgress(percent, text, isError = false, isComplete = false) {
        if (wpInstallationState.progressBar) {
            wpInstallationState.progressBar.style.width = Math.min(100, Math.max(0, percent)) + '%';
            if (isError) {
                wpInstallationState.progressBar.classList.remove('bg-blue-600');
                wpInstallationState.progressBar.classList.add('bg-red-600');
            } else if (isComplete) {
                wpInstallationState.progressBar.classList.remove('bg-blue-600');
                wpInstallationState.progressBar.classList.add('bg-green-600');
            } else {
                wpInstallationState.progressBar.classList.remove('bg-red-600', 'bg-green-600');
                wpInstallationState.progressBar.classList.add('bg-blue-600');
            }
        }
        
        if (wpInstallationState.progressText) {
            wpInstallationState.progressText.textContent = text;
        }
        
        if (wpInstallationState.progressPercent) {
            wpInstallationState.progressPercent.textContent = Math.round(percent) + '%';
        }
    }

    // Başarılı durumu göster
    function showSuccessState() {
        if (wpInstallationState.installIcon) {
            wpInstallationState.installIcon.className = 'mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4';
            wpInstallationState.installIcon.innerHTML = '<i class="fas fa-check-circle text-green-600 text-3xl"></i>';
        }
        
        if (wpInstallationState.installTitle) {
            wpInstallationState.installTitle.textContent = 'WordPress Kurulumu Tamamlandı!';
        }
        
        if (wpInstallationState.installMessage) {
            wpInstallationState.installMessage.textContent = '{{ $site->name }} adlı site için WordPress başarıyla kuruldu. Şimdi kurulum adımlarını tamamlayarak siteyi kullanıma hazır hale getirebilirsiniz.';
        }
        
        if (wpInstallationState.installButton) {
            wpInstallationState.installButton.classList.remove('hidden');
        }
        
        // Retry butonunu gizle
        if (wpInstallationState.retryButton) {
            wpInstallationState.retryButton.classList.add('hidden');
        }
    }

    // Retry butonunu göster
    function showRetryButton() {
        if (wpInstallationState.retryButton) {
            wpInstallationState.retryButton.classList.remove('hidden');
        }
        
        // Install butonunu gizle
        if (wpInstallationState.installButton) {
            wpInstallationState.installButton.classList.add('hidden');
        }
    }

    // Kurulumu tekrar dene (global function)
    window.retryWordPressInstallation = async function() {
        if (wpInstallationState.retryButton) {
            wpInstallationState.retryButton.classList.add('hidden');
        }
        
        // İkonu ve mesajları sıfırla
        if (wpInstallationState.installIcon) {
            wpInstallationState.installIcon.className = 'mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 mb-4';
            wpInstallationState.installIcon.innerHTML = '<i class="fas fa-spinner fa-spin text-blue-600 text-3xl"></i>';
        }
        
        if (wpInstallationState.installTitle) {
            wpInstallationState.installTitle.textContent = 'WordPress Kuruluyor...';
        }
        
        if (wpInstallationState.installMessage) {
            wpInstallationState.installMessage.textContent = '{{ $site->name }} adlı site için WordPress kurulumu tekrar başlatılıyor. Lütfen bekleyin...';
        }
        
        // Progress bar'ı sıfırla
        updateProgress(0, 'Kurulum tekrar başlatılıyor...', false);
        
        // Kurulumu tekrar başlat
        wpInstallationState.setupToken = null;
        if (wpInstallationState.statusCheckInterval) {
            clearInterval(wpInstallationState.statusCheckInterval);
            wpInstallationState.statusCheckInterval = null;
        }
        
        await startWordPressInstallation();
    };

    // Sayfa yüklendiğinde kurulumu başlat
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startWordPressInstallation);
    } else {
        startWordPressInstallation();
    }
})();

// Form gönderilmeden önce validasyon
document.getElementById('setupForm').addEventListener('submit', function(e) {
    const appPassword = document.getElementById('wp_application_password').value;
    const selectedPlugins = document.querySelectorAll('input[name="selected_plugins[]"]:checked:not([disabled])');
    
    if (!appPassword || appPassword.trim() === '') {
        e.preventDefault();
        alert('Lütfen WordPress Application Password girin.');
        switchTab(2);
        return false;
    }
    
    if (selectedPlugins.length === 0) {
        e.preventDefault();
        alert('Lütfen en az bir eklenti seçin.');
        switchTab(3);
        return false;
    }
    
    // GSP Connector'ın seçili olduğundan emin ol
    const gspConnector = document.querySelector('input[name="selected_plugins[]"][value="gsp-connector"]');
    if (!gspConnector || !gspConnector.checked) {
        e.preventDefault();
        alert('GSP Connector eklentisi zorunludur.');
        switchTab(3);
        return false;
    }
});
</script>
@endpush