@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Favori Eklentiler</h1>
        <p class="text-gray-600 dark:text-gray-400">Sık kullandığınız eklentileri burada saklayın</p>
    </div>

    <!-- Tab Menüsü -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="flex -mb-px">
                <a href="{{ route('plugins.installed') }}" class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300">
                    <i class="fas fa-check-circle mr-2"></i>Kurulu Eklentiler
                </a>
                <a href="{{ route('plugins.index') }}" class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300">
                    <i class="fas fa-download mr-2"></i>İndirilebilir Eklentiler
                </a>
                <a href="{{ route('plugins.favorites') }}" class="px-6 py-4 text-sm font-medium border-b-2 border-blue-500 text-blue-600 dark:text-blue-400">
                    <i class="fas fa-star mr-2"></i>Favori Eklentiler
                </a>
            </nav>
        </div>
    </div>

    <!-- Son Güncelleme Bilgisi ve Yenile Butonu -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fas fa-info-circle text-blue-600 dark:text-blue-400"></i>
                <span class="text-blue-800 dark:text-blue-200">
                    @if($lastUpdated && $lastUpdated instanceof \Carbon\Carbon)
                        Son güncelleme: <strong id="last-updated-display">{{ $lastUpdated->format('d.m.Y H:i') }}</strong>
                    @else
                        Henüz güncelleme yapılmadı
                    @endif
                </span>
            </div>
            <button 
                id="refresh-plugins-btn"
                onclick="refreshInstalledPlugins()" 
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                {{ !($canRefresh ?? true) ? 'disabled' : '' }}
            >
                <i class="fas fa-sync-alt mr-2" id="refresh-icon"></i>
                <span id="refresh-text">Yenile</span>
            </button>
        </div>
        <div id="refresh-status" class="hidden mt-2"></div>
    </div>

    @if(empty($plugins))
        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6 text-center">
            <i class="fas fa-star text-4xl text-yellow-600 dark:text-yellow-400 mb-4"></i>
            <p class="text-yellow-800 dark:text-yellow-200 text-lg">Henüz favori eklentiniz yok</p>
            <p class="text-yellow-600 dark:text-yellow-400 mt-2">İndirilebilir eklentiler sayfasından eklentilere yıldız ekleyerek favorilerinize ekleyebilirsiniz.</p>
            <a href="{{ route('plugins.index') }}" class="inline-block mt-4 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-search mr-2"></i>Eklenti Ara
            </a>
        </div>
    @else
        <div class="mb-4">
            <p class="text-gray-600 dark:text-gray-400">
                <strong>{{ count($plugins) }}</strong> favori eklenti
            </p>
        </div>

        <!-- Eklenti Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($plugins as $plugin)
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow relative">
                    <!-- Favori Butonu -->
                    <button 
                        onclick="toggleFavorite('{{ $plugin['slug'] }}', '{{ addslashes($plugin['name'] ?? '') }}', this)"
                        class="absolute top-4 right-4 z-10 p-2 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 transition-colors"
                        title="Favorilerden çıkar"
                    >
                        <i class="fas fa-star text-yellow-500"></i>
                    </button>

                    <!-- Eklenti İkonu -->
                    <div class="bg-gray-100 dark:bg-gray-700 p-6 text-center">
                        @if(!empty($plugin['icons']['128']))
                            <img src="{{ $plugin['icons']['128'] }}" alt="{{ $plugin['name'] }}" class="w-32 h-32 mx-auto rounded-lg">
                        @elseif(!empty($plugin['icons']['256']))
                            <img src="{{ $plugin['icons']['256'] }}" alt="{{ $plugin['name'] }}" class="w-32 h-32 mx-auto rounded-lg">
                        @else
                            <div class="w-32 h-32 mx-auto bg-gray-300 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-plug text-4xl text-gray-500 dark:text-gray-400"></i>
                            </div>
                        @endif
                    </div>

                    <!-- Eklenti Bilgileri -->
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
                            <a href="{{ route('plugins.show', $plugin['slug']) }}" class="hover:text-blue-600 dark:hover:text-blue-400">
                                {{ $plugin['name'] ?? $plugin['slug'] }}
                            </a>
                        </h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
                            {{ $plugin['short_description'] ?? '' }}
                        </p>

                        <!-- İstatistikler -->
                        <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400 mb-4 flex-wrap">
                            @if(isset($plugin['active_installs']))
                                <span>
                                    <i class="fas fa-download mr-1"></i>
                                    {{ number_format($plugin['active_installs']) }}+ kurulum
                                </span>
                            @endif
                            @if(isset($plugin['rating']))
                                <span>
                                    <i class="fas fa-star mr-1 text-yellow-500"></i>
                                    {{ number_format($plugin['rating'] / 20, 1) }}/5
                                </span>
                            @endif
                            @if(isset($plugin['system_install_count']) && $plugin['system_install_count'] > 0)
                                <span class="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    {{ $plugin['system_install_count'] }} sitede kurulu
                                </span>
                            @endif
                            @if(isset($plugin['favorited_at']))
                                <span class="text-xs text-gray-400">
                                    {{ $plugin['favorited_at']->format('d.m.Y') }} eklendi
                                </span>
                            @endif
                        </div>

                        <!-- Butonlar -->
                        <div class="flex gap-2">
                            <a href="{{ route('plugins.show', $plugin['slug']) }}" class="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 text-center text-sm font-medium transition-colors">
                                Detay
                            </a>
                            <button 
                                onclick="showInstallModal('{{ $plugin['slug'] }}', '{{ addslashes($plugin['name'] ?? $plugin['slug']) }}')" 
                                class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors"
                            >
                                <i class="fas fa-download mr-1"></i>Yükle
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<!-- Yükleme Modal -->
<div id="install-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
        <div class="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Eklenti Yükle</h2>
            <button onclick="closeInstallModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <p class="text-gray-700 dark:text-gray-300 mb-4">
                <span id="plugin-name-modal"></span> eklentisini hangi siteye yüklemek istersiniz?
            </p>
            
            @if($sitesForModal->isEmpty())
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4">
                    <p class="text-yellow-800 dark:text-yellow-200 text-sm">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        Yükleyebileceğiniz site bulunamadı. SSH bilgileri olan bir site oluşturun.
                    </p>
                </div>
            @else
                <div class="space-y-2 mb-4 max-h-64 overflow-y-auto" id="sites-list">
                    @foreach($sitesForModal as $site)
                        <button 
                            onclick="installPlugin({{ $site->id }}, '{{ $site->name }}')" 
                            class="w-full text-left px-4 py-3 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors site-item"
                            data-site-id="{{ $site->id }}"
                            data-site-plugins="{{ json_encode($site->system_plugins ?? []) }}"
                        >
                            <div class="font-medium text-gray-900 dark:text-gray-100">{{ $site->name }}</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">{{ $site->url ?? $site->ssh_host }}</div>
                        </button>
                    @endforeach
                </div>
            @endif

            <div class="flex items-center gap-2 mb-4">
                <input type="checkbox" id="activate-plugin" checked class="rounded">
                <label for="activate-plugin" class="text-sm text-gray-700 dark:text-gray-300">Yükleme sonrası aktifleştir</label>
            </div>

            <div id="install-status" class="hidden"></div>
        </div>
    </div>
</div>

<script>
let currentPluginSlug = '';

function refreshInstalledPlugins() {
    const btn = document.getElementById('refresh-plugins-btn');
    const icon = document.getElementById('refresh-icon');
    const text = document.getElementById('refresh-text');
    const statusDiv = document.getElementById('refresh-status');
    
    // Butonu devre dışı bırak
    btn.disabled = true;
    icon.classList.add('fa-spin');
    text.textContent = 'Kontrol ediliyor...';
    statusDiv.classList.remove('hidden');
    statusDiv.innerHTML = `
        <div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
            <i class="fas fa-spinner fa-spin"></i>
            <span>SSH üzerinden tüm sitelerin eklentileri kontrol ediliyor...</span>
        </div>
    `;

    fetch('{{ route("plugins.refresh-installed") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            statusDiv.innerHTML = `
                <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
                    <div class="flex items-center gap-2 text-green-800 dark:text-green-200">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <div class="font-semibold">${data.message}</div>
                            ${data.results ? `<div class="text-xs mt-1">
                                Başarılı: ${data.results.success}, Başarısız: ${data.results.failed}
                            </div>` : ''}
                        </div>
                    </div>
                </div>
            `;
            
            // Son güncelleme tarihini güncelle
            if (data.refreshed_at) {
                const lastUpdatedDisplay = document.getElementById('last-updated-display');
                if (lastUpdatedDisplay) {
                    lastUpdatedDisplay.textContent = data.refreshed_at;
                }
            }
            
            // 2 saniye sonra sayfayı yenile
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else if (data.status === 'skipped') {
            statusDiv.innerHTML = `
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
                    <div class="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
                        <i class="fas fa-exclamation-triangle"></i>
                        <div>
                            <div>${data.message}</div>
                            ${data.last_refreshed ? `<div class="text-xs mt-1">Son kontrol: ${data.last_refreshed}</div>` : ''}
                        </div>
                    </div>
                </div>
            `;
            
            // Butonu tekrar aktif et
            btn.disabled = false;
            icon.classList.remove('fa-spin');
            text.textContent = 'Yenile';
        } else {
            statusDiv.innerHTML = `
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
                    <div class="flex items-center gap-2 text-red-800 dark:text-red-200">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>${data.message || 'Bir hata oluştu'}</span>
                    </div>
                </div>
            `;
            
            // Butonu tekrar aktif et
            btn.disabled = false;
            icon.classList.remove('fa-spin');
            text.textContent = 'Yenile';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        statusDiv.innerHTML = `
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
                <div class="flex items-center gap-2 text-red-800 dark:text-red-200">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>Bir hata oluştu: ${error.message}</span>
                </div>
            </div>
        `;
        
        // Butonu tekrar aktif et
        btn.disabled = false;
        icon.classList.remove('fa-spin');
        text.textContent = 'Yenile';
    });
}

function showInstallModal(slug, name) {
    currentPluginSlug = slug;
    document.getElementById('plugin-name-modal').textContent = name;
    document.getElementById('install-modal').classList.remove('hidden');
    document.getElementById('install-status').classList.add('hidden');
    
    // Zaten kurulu olan siteleri devre dışı bırak
    const pluginSlugLower = slug.toLowerCase();
    const siteItems = document.querySelectorAll('.site-item');
    let availableSites = 0;
    
    siteItems.forEach(item => {
        const sitePluginsJson = item.getAttribute('data-site-plugins');
        if (sitePluginsJson) {
            try {
                const sitePlugins = JSON.parse(sitePluginsJson);
                let isInstalled = false;
                
                // Debug: Gutenberg için özel kontrol
                if (pluginSlugLower === 'gutenberg') {
                    console.log('Gutenberg kontrolü:', {
                        searchingFor: pluginSlugLower,
                        sitePlugins: sitePlugins
                    });
                }
                
                // Eklentinin kurulu olup olmadığını kontrol et
                // system_plugins içinde slug alanı her zaman doldurulur (updateSiteSystemInfo)
                if (Array.isArray(sitePlugins)) {
                    for (const plugin of sitePlugins) {
                        if (!plugin || typeof plugin !== 'object') continue;
                        
                        // Önce slug kontrolü (en güvenilir)
                        if (plugin.slug && typeof plugin.slug === 'string') {
                            const installedSlug = plugin.slug.toLowerCase().trim();
                            if (installedSlug === pluginSlugLower) {
                                isInstalled = true;
                                if (pluginSlugLower === 'gutenberg') {
                                    console.log('Gutenberg bulundu (slug):', plugin);
                                }
                                break;
                            }
                        }
                        
                        // Slug yoksa, PHP normalizePluginSlug mantığıyla kontrol et
                        if (!isInstalled) {
                            let normalizedSlug = null;
                            
                            // ID kontrolü
                            if (plugin.id) {
                                normalizedSlug = String(plugin.id).toLowerCase().trim();
                                if (normalizedSlug === pluginSlugLower) {
                                    isInstalled = true;
                                    if (pluginSlugLower === 'gutenberg') {
                                        console.log('Gutenberg bulundu (id):', plugin);
                                    }
                                    break;
                                }
                            }
                            
                            // Plugin file'dan slug çıkar
                            if (!normalizedSlug) {
                                const pluginFile = plugin.plugin_file || plugin.file;
                                if (pluginFile && typeof pluginFile === 'string' && pluginFile.trim()) {
                                    const fileLower = pluginFile.toLowerCase().trim();
                                    const slashIndex = fileLower.indexOf('/');
                                    if (slashIndex !== -1) {
                                        normalizedSlug = fileLower.substring(0, slashIndex).trim();
                                    } else if (fileLower.indexOf('.php') !== -1) {
                                        normalizedSlug = fileLower.replace('.php', '').trim();
                                    } else {
                                        normalizedSlug = fileLower.trim();
                                    }
                                    
                                    if (normalizedSlug === pluginSlugLower) {
                                        isInstalled = true;
                                        if (pluginSlugLower === 'gutenberg') {
                                            console.log('Gutenberg bulundu (file):', plugin, 'normalizedSlug:', normalizedSlug);
                                        }
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
                
                if (isInstalled) {
                    // Eklenti zaten kurulu, devre dışı bırak
                    item.disabled = true;
                    item.classList.add('opacity-50', 'cursor-not-allowed');
                    item.classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600');
                    const siteName = item.querySelector('.font-medium').textContent;
                    item.innerHTML = `
                        <div class="font-medium text-gray-500 dark:text-gray-400">${siteName}</div>
                        <div class="text-xs text-gray-400 dark:text-gray-500">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i>Bu eklenti zaten kurulu
                        </div>
                    `;
                } else {
                    availableSites++;
                }
            } catch (e) {
                console.error('Plugin kontrolü hatası:', e);
                availableSites++;
            }
        } else {
            availableSites++;
        }
    });
    
    // Eğer hiç uygun site yoksa bilgi mesajı göster
    if (availableSites === 0 && siteItems.length > 0) {
        const sitesList = document.getElementById('sites-list');
        sitesList.insertAdjacentHTML('beforebegin', `
            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-4">
                <p class="text-yellow-800 dark:text-yellow-200 text-sm">
                    <i class="fas fa-info-circle mr-2"></i>
                    Bu eklenti tüm sitelerinizde zaten kurulu.
                </p>
            </div>
        `);
    }
}

function closeInstallModal() {
    document.getElementById('install-modal').classList.add('hidden');
    currentPluginSlug = '';
    
    // Site listesini sıfırla
    const siteItems = document.querySelectorAll('.site-item');
    siteItems.forEach(item => {
        item.disabled = false;
        item.classList.remove('opacity-50', 'cursor-not-allowed');
        item.classList.add('hover:bg-gray-100', 'dark:hover:bg-gray-600');
    });
    
    // Bilgi mesajını kaldır
    const infoMessage = document.querySelector('#sites-list')?.previousElementSibling;
    if (infoMessage && infoMessage.classList.contains('bg-yellow-50')) {
        infoMessage.remove();
    }
}

function installPlugin(siteId, siteName) {
    const statusDiv = document.getElementById('install-status');
    const activate = document.getElementById('activate-plugin').checked;
    
    statusDiv.classList.remove('hidden');
    statusDiv.innerHTML = `
        <div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
            <i class="fas fa-spinner fa-spin"></i>
            <span>${siteName} sitesine yükleniyor...</span>
        </div>
    `;

    fetch(`/sites/${siteId}/plugins/install`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            plugin_slug: currentPluginSlug,
            activate: activate
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            statusDiv.innerHTML = `
                <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                    <div class="flex items-center gap-2 text-green-800 dark:text-green-200">
                        <i class="fas fa-check-circle"></i>
                        <span>${data.message}</span>
                    </div>
                </div>
            `;
            setTimeout(() => {
                closeInstallModal();
            }, 2000);
        } else {
            statusDiv.innerHTML = `
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                    <div class="flex items-center gap-2 text-red-800 dark:text-red-200">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>${data.error || 'Yükleme başarısız oldu'}</span>
                    </div>
                    ${data.output ? `<pre class="mt-2 text-xs text-red-600 dark:text-red-400 overflow-auto">${data.output}</pre>` : ''}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        statusDiv.innerHTML = `
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                <div class="flex items-center gap-2 text-red-800 dark:text-red-200">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>Bir hata oluştu</span>
                </div>
            </div>
        `;
    });
}

function toggleFavorite(slug, name, button) {
    fetch('{{ route("plugins.toggle-favorite") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            plugin_slug: slug,
            plugin_name: name
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && !data.favorited) {
            // Favorilerden çıkarıldıysa sayfayı yenile
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
@endsection