@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ route('themes.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline mb-4 inline-block">
            <i class="fas fa-arrow-left mr-2"></i>Tema Listesine Dön
        </a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">{{ $theme['name'] }}</h1>
        <p class="text-gray-600 dark:text-gray-400">{{ $theme['description'] ?? '' }}</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Sol Kolon: Ana Bilgiler -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Screenshot -->
            @if(!empty($theme['screenshot_url']))
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
                    <img src="{{ $theme['screenshot_url'] }}" alt="{{ $theme['name'] }}" class="w-full h-auto object-cover">
                </div>
            @endif

            <!-- Açıklama -->
            @if(!empty($theme['sections']['description']))
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Açıklama</h2>
                    <div class="prose dark:prose-invert max-w-none">
                        {!! $theme['sections']['description'] !!}
                    </div>
                </div>
            @endif

            <!-- Screenshots -->
            @if(!empty($theme['screenshots']))
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Ekran Görüntüleri</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($theme['screenshots'] as $screenshot)
                            <img src="{{ $screenshot }}" alt="Screenshot" class="w-full rounded-lg shadow-sm">
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Kurulum -->
            @if(!empty($theme['sections']['installation']))
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Kurulum</h2>
                    <div class="prose dark:prose-invert max-w-none">
                        {!! $theme['sections']['installation'] !!}
                    </div>
                </div>
            @endif

            <!-- SSS -->
            @if(!empty($theme['sections']['faq']))
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Sık Sorulan Sorular</h2>
                    <div class="prose dark:prose-invert max-w-none">
                        {!! $theme['sections']['faq'] !!}
                    </div>
                </div>
            @endif
        </div>

        <!-- Sağ Kolon: Sidebar -->
        <div class="space-y-6">
            <!-- Tema Kartı -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <div class="text-center mb-6">
                    @if(!empty($theme['screenshot_url']))
                        <img src="{{ $theme['screenshot_url'] }}" alt="{{ $theme['name'] }}" class="w-full aspect-video mx-auto rounded-lg mb-4 object-cover">
                    @else
                        <div class="w-full aspect-video mx-auto bg-gray-300 dark:bg-gray-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-palette text-4xl text-gray-500 dark:text-gray-400"></i>
                        </div>
                    @endif
                    
                    <button 
                        onclick="showInstallModal('{{ $theme['slug'] }}', '{{ addslashes($theme['name']) }}')" 
                        class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
                    >
                        <i class="fas fa-download mr-2"></i>Siteye Yükle
                    </button>
                </div>

                <!-- İstatistikler -->
                <div class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
                    @if(isset($theme['version']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Versiyon</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">{{ $theme['version'] }}</span>
                        </div>
                    @endif

                    @if(isset($theme['last_updated']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Son Güncelleme</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                {{ \Carbon\Carbon::parse($theme['last_updated'])->format('d.m.Y') }}
                            </span>
                        </div>
                    @endif

                    @if(isset($theme['downloaded']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">İndirme</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                {{ number_format($theme['downloaded']) }}+
                            </span>
                        </div>
                    @endif

                    @if(isset($theme['rating']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Değerlendirme</span>
                            <div class="flex items-center gap-1">
                                <span class="font-medium text-gray-900 dark:text-gray-100">
                                    {{ number_format($theme['rating'] / 20, 1) }}/5
                                </span>
                                <i class="fas fa-star text-yellow-500"></i>
                            </div>
                        </div>
                    @endif

                    @if(isset($theme['author']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Geliştirici</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                {{ $theme['author'] }}
                            </span>
                        </div>
                    @endif

                    @if(isset($theme['parent']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Ana Tema</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                {{ $theme['parent'] }}
                            </span>
                        </div>
                    @endif

                    @if(isset($theme['template']))
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Template</span>
                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                {{ $theme['template'] }}
                            </span>
                        </div>
                    @endif
                </div>

                <!-- Etiketler -->
                @if(!empty($theme['tags']))
                    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Etiketler</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($theme['tags'] as $tag => $url)
                                <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-xs">
                                    {{ $tag }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Linkler -->
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    @if(!empty($theme['homepage']))
                        <a href="{{ $theme['homepage'] }}" target="_blank" class="block text-blue-600 dark:text-blue-400 hover:underline text-sm mb-2">
                            <i class="fas fa-external-link-alt mr-2"></i>Ana Sayfa
                        </a>
                    @endif
                    @if(!empty($theme['preview_url']))
                        <a href="{{ $theme['preview_url'] }}" target="_blank" class="block text-blue-600 dark:text-blue-400 hover:underline text-sm mb-2">
                            <i class="fas fa-eye mr-2"></i>Önizleme
                        </a>
                    @endif
                    <a href="https://wordpress.org/themes/{{ $theme['slug'] }}/" target="_blank" class="block text-blue-600 dark:text-blue-400 hover:underline text-sm">
                        <i class="fas fa-external-link-alt mr-2"></i>WordPress.org Sayfası
                    </a>
                </div>
            </div>
        </div>
    </div>
</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">Tema 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="theme-name-modal"></span> temasını hangi siteye yüklemek istersiniz?
            </p>
            
            @if($sites->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($sites as $site)
                        <button 
                            onclick="installTheme({{ $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-theme="{{ strtolower($site->theme_slug ?? '') }}"
                        >
                            <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-theme" class="rounded">
                <label for="activate-theme" 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 currentThemeSlug = '';

function showInstallModal(slug, name) {
    currentThemeSlug = slug;
    document.getElementById('theme-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 themeSlugLower = slug.toLowerCase();
    const siteItems = document.querySelectorAll('.site-item');
    let availableSites = 0;
    
    siteItems.forEach(item => {
        const siteTheme = item.getAttribute('data-site-theme');
        if (siteTheme && siteTheme === themeSlugLower) {
            // Tema 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 tema zaten kurulu
                </div>
            `;
        } 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 tema tüm sitelerinizde zaten kurulu.
                </p>
            </div>
        `);
    }
}

function closeInstallModal() {
    document.getElementById('install-modal').classList.add('hidden');
    currentThemeSlug = '';
    
    // 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 installTheme(siteId, siteName) {
    const statusDiv = document.getElementById('install-status');
    const activate = document.getElementById('activate-theme').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}/themes/install`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            theme_slug: currentThemeSlug,
            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>
        `;
    });
}
</script>
@endsection