@php
    // system_plugins boş veya null ise, eklenti kurulu değil kabul et
    $systemPlugins = $site->system_plugins ?? [];
    $isRankMathInstalled = false;
    
    // Eğer system_plugins boş değilse kontrol et
    if (!empty($systemPlugins) && is_array($systemPlugins)) {
        $isRankMathInstalled = $site->isRankMathInstalled();
    }
    
    $hasSshCredentials = !empty($site->ssh_host) && !empty($site->ssh_user) && !empty($site->ssh_path);
@endphp

<div class="rounded-2xl border border-indigo-100 dark:border-indigo-800 bg-white dark:bg-gray-800 shadow-sm relative">
    @if (!$isRankMathInstalled)
        <!-- Blur overlay ve kurulum butonu -->
        <div class="absolute inset-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-2xl gap-4">
            <form action="{{ route('sites.install-plugin', $site) }}" method="POST" class="text-center">
                @csrf
                <input type="hidden" name="plugin_slug" value="seo-by-rank-math">
                <button type="submit"
                    class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 dark:bg-indigo-500 px-6 py-3 text-base font-semibold text-white shadow-lg hover:bg-indigo-500 dark:hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition"
                    {{ !$hasSshCredentials ? 'disabled' : '' }}>
                    <i class="fas fa-download"></i>
                    Rank Math SEO Kur
                </button>
                @if (!$hasSshCredentials)
                    <p class="mt-2 text-xs text-amber-600 dark:text-amber-400">
                        <i class="fas fa-exclamation-triangle"></i> SSH bilgileri eksik
                    </p>
                @endif
            </form>
            @if ($hasSshCredentials)
                <button type="button" 
                    id="check-plugins-rank-math-btn"
                    data-url="{{ route('sites.check-plugins-via-ssh', $site) }}"
                    class="inline-flex items-center gap-2 rounded-lg bg-gray-600 dark:bg-gray-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-2 transition">
                    <i class="fas fa-sync-alt"></i>
                    Eklentileri Kontrol Et
                </button>
            @endif
        </div>
    @endif

    <div class="px-6 py-5 border-b border-indigo-50 dark:border-indigo-800/50">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
            <i class="fas fa-search-plus text-indigo-500 dark:text-indigo-400"></i>
            Rank Math SEO Bilgileri
        </h2>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
            WordPress'teki gönderinin SEO başlığı ve açıklamasını GSP Connector üzerinden günceller.
        </p>
    </div>

    <div class="px-6 py-5 {{ !$isRankMathInstalled ? 'opacity-50' : '' }}">
        <form action="{{ route('sites.update-seo-meta', $site) }}" method="POST" class="space-y-5">
            @csrf
            <div class="flex flex-col gap-4 md:flex-row">
                <div class="w-full md:w-1/3">
                    <label for="seo_post_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Gönderi ID
                    </label>
                    <select name="post_id" id="seo_post_id"
                        data-manual-selected="{{ old('manual_post_id') ? '1' : '0' }}"
                        class="mt-1 w-full rounded-xl border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:bg-white dark:focus:bg-gray-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 transition">
                        <option value="" disabled {{ old('post_id') ? '' : 'selected' }}>Gönderi Seçin</option>
                        @if (!empty($wpSeoPosts) && is_array($wpSeoPosts))
                            @foreach ($wpSeoPosts as $post)
                                @php
                                    $postId = $post['id'] ?? $post['post_id'] ?? $post['ID'] ?? null;
                                    $postTitle = $post['title'] ?? $post['post_title'] ?? ($post['title']['rendered'] ?? 'Gönderi');
                                    if (is_array($postTitle)) {
                                        $postTitle = $postTitle['rendered'] ?? reset($postTitle) ?? 'Gönderi';
                                    }
                                    if ($postId && !is_scalar($postTitle)) {
                                        $postTitle = 'Gönderi ' . $postId;
                                    }
                                @endphp
                                @if ($postId)
                                    <option value="{{ $postId }}" {{ old('post_id') == $postId ? 'selected' : '' }}>
                                        {{ \Illuminate\Support\Str::limit(strip_tags($postTitle), 70) }} (ID: {{ $postId }})
                                    </option>
                                @endif
                            @endforeach
                        @endif
                        <option value="manual" {{ old('post_id') === 'manual' ? 'selected' : '' }}>ID'yi Elle Gir</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2">
                        @if (!empty($wpSeoPostsCachedAt))
                            <span>Son güncelleme: {{ optional($wpSeoPostsCachedAt)->format('d.m.Y H:i') }}</span>
                        @endif
                        <a href="{{ route('sites.show', [$site, 'refresh_wp_pages' => 1]) }}"
                            class="inline-flex items-center gap-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
                            <i class="fas fa-redo-alt"></i> Yenile
                        </a>
                    </p>
                    @if ($wpSeoPostsError)
                        <p class="mt-1 text-xs text-rose-600 dark:text-rose-400 flex items-start gap-1">
                            <i class="fas fa-exclamation-circle mt-0.5"></i>
                            <span>{{ $wpSeoPostsError }}</span>
                        </p>
                    @elseif (empty($wpSeoPosts))
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Gönderi listesi şu an boş görünüyor. Yenilemeyi deneyebilir veya ID'yi elle girebilirsiniz.</p>
                    @endif
                    @error('post_id')
                        <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">{{ $message }}</p>
                    @enderror
                    <input type="number" name="manual_post_id" id="manual_post_id"
                        value="{{ old('manual_post_id') }}"
                        class="mt-3 {{ old('post_id') === 'manual' ? '' : 'hidden' }} w-full rounded-xl border border-dashed border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20"
                        placeholder="Örn: 123">
                </div>
                <div class="w-full md:flex-1">
                    <label for="seo_title" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                        SEO Başlığı
                    </label>
                    <input type="text" name="seo_title" id="seo_title" required
                        value="{{ old('seo_title') }}"
                        class="mt-1 w-full rounded-xl border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:bg-white dark:focus:bg-gray-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 transition"
                        placeholder="Örn: En İyi Ürünler 2025">
                </div>
            </div>

            <div>
                <label for="seo_description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                    SEO Açıklaması
                </label>
                <textarea name="seo_description" id="seo_description" rows="3"
                    class="mt-1 w-full rounded-xl border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:bg-white dark:focus:bg-gray-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 transition resize-y"
                    placeholder="Ürünlerinizin öne çıkmasını sağlayacak açıklama...">{{ old('seo_description') }}</textarea>
            </div>

            <div class="flex flex-col-reverse gap-3 md:flex-row md:items-center md:justify-between">
                <button type="submit"
                    class="inline-flex items-center gap-2 rounded-full bg-indigo-600 dark:bg-indigo-500 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition">
                    <i class="fas fa-save"></i>
                    SEO Bilgilerini Senkronize Et
                </button>

                <div class="flex flex-col gap-1">
                    <div class="flex items-center gap-2">
                        <button type="button" id="seo-ai-generate-btn"
                            data-endpoint="{{ route('sites.seo-meta.generate-ai', $site) }}"
                            data-language="{{ $site->language ?? 'tr' }}"
                            class="inline-flex items-center gap-2 rounded-full border border-indigo-200 dark:border-indigo-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 shadow-sm transition hover:border-indigo-300 dark:hover:border-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2">
                            <i class="fas fa-magic"></i>
                            Yapay Zeka ile Doldur
                        </button>
                        <span id="seo-ai-status"
                            class="hidden text-sm font-medium text-indigo-600 dark:text-indigo-400 transition"></span>
                    </div>
                    <div id="seo-ai-keywords" class="hidden flex flex-wrap gap-1">
                        <!-- AI keywords badges -->
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Eklentileri Kontrol Et butonu
            const checkPluginsBtn = document.getElementById('check-plugins-rank-math-btn');
            if (checkPluginsBtn && checkPluginsBtn.dataset.url) {
                checkPluginsBtn.addEventListener('click', async () => {
                    const originalHtml = checkPluginsBtn.innerHTML;
                    checkPluginsBtn.disabled = true;
                    checkPluginsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kontrol Ediliyor...';
                    
                    try {
                        const response = await fetch(checkPluginsBtn.dataset.url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            },
                        });
                        
                        const data = await response.json();
                        
                        if (response.ok && data.status === 'success') {
                            // Başarılı - sayfayı yenile
                            window.location.reload();
                        } else {
                            alert('Hata: ' + (data.message || 'Eklenti kontrolü başarısız oldu.'));
                            checkPluginsBtn.disabled = false;
                            checkPluginsBtn.innerHTML = originalHtml;
                        }
                    } catch (error) {
                        console.error(error);
                        alert('Ağ bağlantısı kurulamadı. Lütfen tekrar deneyin.');
                        checkPluginsBtn.disabled = false;
                        checkPluginsBtn.innerHTML = originalHtml;
                    }
                });
            }
            
            const select = document.getElementById('seo_post_id');
            const manualInput = document.getElementById('manual_post_id');
            const aiButton = document.getElementById('seo-ai-generate-btn');
            const statusEl = document.getElementById('seo-ai-status');
            const keywordsWrapper = document.getElementById('seo-ai-keywords');
            const titleInput = document.getElementById('seo_title');
            const descriptionInput = document.getElementById('seo_description');
            const csrfToken = '{{ csrf_token() }}';

            if (!select || !manualInput) {
                return;
            }

            const toggleManual = () => {
                if (select.value === 'manual') {
                    manualInput.classList.remove('hidden');
                    manualInput.setAttribute('required', 'required');
                } else {
                    manualInput.classList.add('hidden');
                    manualInput.removeAttribute('required');
                }
            };

            select.addEventListener('change', toggleManual);
            if (select.dataset.manualSelected === '1') {
                select.value = 'manual';
            }
            toggleManual();

            if (!aiButton || !statusEl || !titleInput || !descriptionInput) {
                return;
            }

            const setStatus = (message, type = 'info') => {
                statusEl.classList.remove('hidden', 'text-rose-600', 'dark:text-rose-400', 'text-emerald-600', 'dark:text-emerald-400', 'text-indigo-600', 'dark:text-indigo-400');
                statusEl.textContent = message;

                if (type === 'error') {
                    statusEl.classList.add('text-rose-600', 'dark:text-rose-400');
                } else if (type === 'success') {
                    statusEl.classList.add('text-emerald-600', 'dark:text-emerald-400');
                } else {
                    statusEl.classList.add('text-indigo-600', 'dark:text-indigo-400');
                }
            };

            const clearStatus = () => {
                statusEl.classList.add('hidden');
                statusEl.textContent = '';
            };

            const setLoading = (isLoading) => {
                if (isLoading) {
                    aiButton.disabled = true;
                    aiButton.classList.add('opacity-70', 'cursor-wait');
                    aiButton.querySelector('i').classList.replace('fa-magic', 'fa-spinner');
                    aiButton.querySelector('i').classList.add('fa-spin');
                } else {
                    aiButton.disabled = false;
                    aiButton.classList.remove('opacity-70', 'cursor-wait');
                    aiButton.querySelector('i').classList.remove('fa-spin');
                    aiButton.querySelector('i').classList.replace('fa-spinner', 'fa-magic');
                }
            };

            aiButton.addEventListener('click', async () => {
                const selected = select.value;
                const manualValue = manualInput.classList.contains('hidden') ? null : manualInput.value;

                if (!selected || (selected === 'manual' && !manualValue)) {
                    setStatus('Lütfen önce geçerli bir gönderi seçin veya ID girin.', 'error');
                    return;
                }

                clearStatus();
                setStatus('Yapay zekâ çalışıyor...', 'info');
                setLoading(true);

                try {
                    const response = await fetch(aiButton.dataset.endpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: JSON.stringify({
                            post_id: selected,
                            manual_post_id: manualValue,
                            current_title: titleInput.value,
                            current_description: descriptionInput.value,
                            language: aiButton.dataset.language || 'tr',
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || (payload.status ?? 'error') !== 'success') {
                        throw new Error(payload.message || 'Yapay zekâ yanıtı alınamadı.');
                    }

                    const data = payload.data || {};

                    if (data.title) {
                        titleInput.value = data.title;
                    }

                    if (data.description) {
                        descriptionInput.value = data.description;
                    }

                    if (Array.isArray(data.keywords) && data.keywords.length) {
                        keywordsWrapper.innerHTML = '';
                        data.keywords.forEach((keyword) => {
                            const badge = document.createElement('span');
                            badge.className = 'inline-flex items-center rounded-full bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1 text-xs font-medium text-indigo-700 dark:text-indigo-300';
                            badge.textContent = keyword;
                            keywordsWrapper.appendChild(badge);
                        });
                        keywordsWrapper.classList.remove('hidden');
                    } else {
                        keywordsWrapper.classList.add('hidden');
                        keywordsWrapper.innerHTML = '';
                    }

                    setStatus(payload.message || 'SEO önerileri güncellendi.', 'success');
                } catch (error) {
                    console.error('AI SEO Error', error);
                    keywordsWrapper.classList.add('hidden');
                    keywordsWrapper.innerHTML = '';
                    setStatus(error.message || 'Yapay zekâ önerisi üretilemedi.', 'error');
                } finally {
                    setLoading(false);
                }
            });
        });
    </script>
@endpush