@extends('layouts.app')

@section('title', 'İçerik Düzenle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl">
        <div class="mb-6">
            <a href="{{ route('sites.contents.index', $site) }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> İçerik listesine dön
            </a>
        </div>

        <h1 class="text-3xl font-semibold text-gray-900 mb-6">İçerik Düzenle</h1>

        <form action="{{ route('sites.contents.update', [$site, $content]) }}" method="POST" class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            @csrf
            @method('PUT')

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <label for="title" class="block text-sm font-medium leading-6 text-gray-900">Başlık</label>
                        <div class="mt-2">
                            <input type="text" name="title" id="title" required value="{{ old('title', $content->title) }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                            @error('title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="type" class="block text-sm font-medium leading-6 text-gray-900">Tip</label>
                        <div class="mt-2">
                            <select name="type" id="type" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                                <option value="page" {{ old('type', $content->type) === 'page' ? 'selected' : '' }}>Sayfa</option>
                                <option value="post" {{ old('type', $content->type) === 'post' ? 'selected' : '' }}>Yazı</option>
                                <option value="custom" {{ old('type', $content->type) === 'custom' ? 'selected' : '' }}>Özel</option>
                            </select>
                            @error('type')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="status" class="block text-sm font-medium leading-6 text-gray-900">Durum</label>
                        <div class="mt-2">
                            <select name="status" id="status" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                                <option value="draft" {{ old('status', $content->status) === 'draft' ? 'selected' : '' }}>Taslak</option>
                                <option value="published" {{ old('status', $content->status) === 'published' ? 'selected' : '' }}>Yayınlanmış</option>
                            </select>
                            @error('status')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="layout" class="block text-sm font-medium leading-6 text-gray-900">Yerleşim (Flex yönü)</label>
                        <div class="mt-2">
                            <select name="layout" id="layout" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                                <option value="row" {{ old('layout', $content->layout) === 'row' ? 'selected' : '' }}>Yatay (sol resim, sağ içerik)</option>
                                <option value="row-reverse" {{ old('layout', $content->layout) === 'row-reverse' ? 'selected' : '' }}>Yatay ters (sağ resim, sol içerik)</option>
                                <option value="col" {{ old('layout', $content->layout) === 'col' ? 'selected' : '' }}>Dikey (üst resim, alt içerik)</option>
                                <option value="col-reverse" {{ old('layout', $content->layout) === 'col-reverse' ? 'selected' : '' }}>Dikey ters (üst içerik, alt resim)</option>
                            </select>
                            @error('layout')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="sm:col-span-6">
                        <label for="wp_post_id" class="block text-sm font-medium leading-6 text-gray-900">WordPress Post ID</label>
                        <div class="mt-2">
                            <input type="number" name="wp_post_id" id="wp_post_id" value="{{ old('wp_post_id', $content->wp_post_id) }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                            <p class="mt-1 text-xs text-gray-500">WordPress'teki sayfa/yazı ID'si (Yayınlama için gerekli)</p>
                            @error('wp_post_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="sm:col-span-6">
                        <label for="content" class="block text-sm font-medium leading-6 text-gray-900">İçerik (Türkçe/Ana Dil)</label>
                        <div class="mt-2">
                            <textarea name="content" id="content" rows="10" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">{{ old('content', $content->content) }}</textarea>
                            @error('content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    @php
                        $languages = [
                            'de' => ['name' => 'Almanca', 'flag' => '🇩🇪'],
                            'it' => ['name' => 'İtalyanca', 'flag' => '🇮🇹'],
                            'es' => ['name' => 'İspanyolca', 'flag' => '🇪🇸'],
                            'fr' => ['name' => 'Fransızca', 'flag' => '🇫🇷'],
                            'pt' => ['name' => 'Portekizce', 'flag' => '🇵🇹'],
                        ];
                    @endphp

                    @foreach($languages as $langCode => $langInfo)
                    <div class="sm:col-span-6 border-t border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-2">
                            <label for="{{ $langCode }}_content" class="block text-sm font-medium leading-6 text-gray-900">
                                {{ $langInfo['flag'] }} {{ $langInfo['name'] }} İçerik
                            </label>
                            <div class="flex items-center gap-2">
                                <button type="button" 
                                    onclick="checkAIContentQuality('{{ $langCode }}', '{{ $langInfo['name'] }}')" 
                                    class="inline-flex items-center gap-2 rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">
                                    <i class="fas fa-robot"></i>
                                    AI QA Kontrolü
                                </button>
                                @if($content->wp_post_id)
                                <form action="{{ route('sites.contents.publish', [$site, $content]) }}" method="POST" class="inline-block" onsubmit="return confirm('{{ $langInfo['name'] }} içeriği WordPress\'e yayınlanacak. Devam etmek istiyor musunuz?');">
                                    @csrf
                                    <input type="hidden" name="language_code" value="{{ $langCode }}">
                                    <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-green-600 px-3 py-1.5 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-upload"></i>
                                        {{ $langInfo['name'] }} İçeriğini WP'ye Yayınla
                                    </button>
                                </form>
                                @else
                                <span class="text-xs text-gray-400">WordPress Post ID gerekli</span>
                                @endif
                            </div>
                        </div>
                        <div class="mt-2">
                            <textarea name="{{ $langCode }}_content" id="{{ $langCode }}_content" rows="10" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">{{ old($langCode . '_content', $content->{$langCode . '_content'}) }}</textarea>
                            @error($langCode . '_content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    @endforeach

                    <div class="sm:col-span-6">
                        <label class="block text-sm font-medium leading-6 text-gray-900 mb-2">Medya Seçimi</label>
                        <div class="grid grid-cols-3 gap-4 max-h-64 overflow-y-auto border border-gray-200 rounded-md p-4">
                            @forelse($media as $item)
                            <label class="relative flex items-center space-x-2 cursor-pointer hover:bg-gray-50 p-2 rounded">
                                <input type="checkbox" name="media_ids[]" value="{{ $item->id }}" {{ in_array($item->id, old('media_ids', $content->media->pluck('id')->toArray())) ? 'checked' : '' }} class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <img src="{{ Storage::url($item->file_path) }}" alt="{{ $item->alt_text }}" class="w-16 h-16 object-cover rounded">
                                <span class="text-xs text-gray-600 truncate">{{ $item->name }}</span>
                            </label>
                            @empty
                            <p class="col-span-3 text-sm text-gray-500 text-center">Henüz medya yüklenmemiş. <a href="{{ route('sites.media.create', $site) }}" class="text-blue-600 hover:text-blue-800">Medya yükle</a></p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI QA Modal -->
            <div id="ai-qa-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
                <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
                    <div class="mt-3">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900" id="ai-qa-modal-title">
                                <i class="fas fa-robot text-purple-600"></i> AI QA Analiz Sonuçları
                            </h3>
                            <button onclick="closeAIModal()" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="mt-4 space-y-4">
                            <div id="ai-qa-loading" class="text-center py-8">
                                <i class="fas fa-spinner fa-spin text-purple-600 text-2xl"></i>
                                <p class="mt-2 text-gray-600">AI analiz yapıyor, lütfen bekleyin...</p>
                            </div>
                            <div id="ai-qa-results" class="hidden space-y-4">
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Düzeltilmiş Metin:</h4>
                                    <div id="ai-corrected-text" class="p-3 bg-gray-50 rounded-md border border-gray-200 text-sm text-gray-800 whitespace-pre-wrap max-h-60 overflow-y-auto"></div>
                                    <button onclick="applyCorrectedText()" class="mt-2 inline-flex items-center gap-2 rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500">
                                        <i class="fas fa-check"></i>
                                        Düzeltilmiş Metni Uygula
                                    </button>
                                </div>
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Gözlemler ve Öneriler:</h4>
                                    <div id="ai-observations" class="p-3 bg-blue-50 rounded-md border border-blue-200 text-sm text-gray-800 whitespace-pre-wrap"></div>
                                </div>
                            </div>
                            <div id="ai-qa-error" class="hidden p-3 bg-red-50 rounded-md border border-red-200 text-sm text-red-800"></div>
                        </div>
                        <div class="mt-6 flex justify-end">
                            <button onclick="closeAIModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                                Kapat
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                <a href="{{ route('sites.contents.index', $site) }}" class="text-sm font-semibold leading-6 text-gray-900">İptal</a>
                <button type="submit" class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                    Güncelle
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
let currentLanguageCode = '';
let currentTextareaId = '';

function checkAIContentQuality(langCode, langName) {
    currentLanguageCode = langCode;
    currentTextareaId = langCode + '_content';
    
    const textarea = document.getElementById(currentTextareaId);
    const content = textarea.value.trim();
    
    if (!content) {
        alert('Lütfen önce ' + langName + ' içeriğini girin.');
        return;
    }
    
    // Modal'ı aç ve loading göster
    const modal = document.getElementById('ai-qa-modal');
    modal.classList.remove('hidden');
    document.getElementById('ai-qa-loading').classList.remove('hidden');
    document.getElementById('ai-qa-results').classList.add('hidden');
    document.getElementById('ai-qa-error').classList.add('hidden');
    document.getElementById('ai-qa-modal-title').innerHTML = '<i class="fas fa-robot text-purple-600"></i> ' + langName + ' - AI QA Analiz Sonuçları';
    
    // AJAX isteği gönder
    fetch('{{ route("sites.contents.check-quality", [$site, $content]) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({
            language: langCode,
            content: content
        })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('ai-qa-loading').classList.add('hidden');
        
        if (data.success) {
            document.getElementById('ai-corrected-text').textContent = data.corrected_text || data.full_analysis;
            document.getElementById('ai-observations').textContent = data.observations || 'Gözlem bulunamadı.';
            document.getElementById('ai-qa-results').classList.remove('hidden');
        } else {
            document.getElementById('ai-qa-error').textContent = 'Hata: ' + (data.error || 'Bilinmeyen hata oluştu.');
            document.getElementById('ai-qa-error').classList.remove('hidden');
        }
    })
    .catch(error => {
        document.getElementById('ai-qa-loading').classList.add('hidden');
        document.getElementById('ai-qa-error').textContent = 'Hata: ' + error.message;
        document.getElementById('ai-qa-error').classList.remove('hidden');
    });
}

function closeAIModal() {
    document.getElementById('ai-qa-modal').classList.add('hidden');
    currentLanguageCode = '';
    currentTextareaId = '';
}

function applyCorrectedText() {
    if (!currentTextareaId) {
        alert('Hata: Textarea bulunamadı.');
        return;
    }
    
    const correctedText = document.getElementById('ai-corrected-text').textContent;
    const textarea = document.getElementById(currentTextareaId);
    textarea.value = correctedText;
    
    alert('Düzeltilmiş metin uygulandı!');
    closeAIModal();
}

// Modal dışına tıklandığında kapat
document.getElementById('ai-qa-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAIModal();
    }
});
</script>
@endpush
@endsection