@extends('layouts.app')

@section('title', 'Yeni İçerik Ekle')

@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">Yeni İçerik Ekle</h1>

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

            <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 flex gap-2">
                            <input type="text" name="title" id="title" required value="{{ old('title') }}" class="block w-full rounded-md border-0 py-1.5 px-3 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" placeholder="Başlık girin...">
                            @if(Auth::user()->isAdmin())
                            <button type="button" id="ai-title-btn" class="px-4 py-2 bg-purple-600 text-white text-sm font-semibold rounded-md hover:bg-purple-700 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed" title="AI ile başlık önerileri alın">
                                <i class="fas fa-magic"></i> AI Başlık Öner
                            </button>
                            @endif
                        </div>
                        @if(Auth::user()->isAdmin())
                        <div id="ai-title-suggestions" class="mt-2 hidden">
                            <div class="bg-purple-50 border border-purple-200 rounded-md p-3">
                                <p class="text-sm font-medium text-purple-900 mb-2">AI Önerileri:</p>
                                <div id="ai-title-list" class="space-y-1"></div>
                            </div>
                        </div>
                        @endif
                        @error('title')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </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', 'page') === 'page' ? 'selected' : '' }}>Sayfa</option>
                                <option value="post" {{ old('type') === 'post' ? 'selected' : '' }}>Yazı</option>
                                <option value="custom" {{ old('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', 'draft') === 'draft' ? 'selected' : '' }}>Taslak</option>
                                <option value="published" {{ old('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', 'col') === 'row' ? 'selected' : '' }}>Yatay (sol resim, sağ içerik)</option>
                                <option value="row-reverse" {{ old('layout') === 'row-reverse' ? 'selected' : '' }}>Yatay ters (sağ resim, sol içerik)</option>
                                <option value="col" {{ old('layout', 'col') === 'col' ? 'selected' : '' }}>Dikey (üst resim, alt içerik)</option>
                                <option value="col-reverse" {{ old('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">
                        <div class="flex items-center justify-between mb-2">
                            <label for="content" class="block text-sm font-medium leading-6 text-gray-900">İçerik</label>
                            @if(Auth::user()->isAdmin())
                            <button type="button" id="ai-content-btn" class="px-3 py-1 bg-purple-600 text-white text-xs font-semibold rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed" title="AI ile içerik oluşturun">
                                <i class="fas fa-robot"></i> AI ile Oluştur
                            </button>
                            @endif
                        </div>
                        <div class="mt-2">
                            <textarea name="content" id="content" rows="10" required class="block w-full rounded-md border-0 py-1.5 px-3 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" placeholder="İçeriğinizi buraya yazın...">{{ old('content') }}</textarea>
                            @if(Auth::user()->isAdmin())
                            <div id="ai-content-description" class="mt-3 transition-all duration-200" style="display: none;">
                                <label for="ai-description" class="block text-xs font-medium text-gray-700 mb-1.5">
                                    <i class="fas fa-info-circle text-purple-600"></i> AI için İlave Bilgi (Opsiyonel)
                                </label>
                                <textarea id="ai-description" rows="3" placeholder="İçerik hakkında ek bilgi veya özel istekleriniz..." class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-purple-600 text-xs resize-y"></textarea>
                            </div>
                            @endif
                            @error('content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <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', [])) ? '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>

            <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">
                    Kaydet
                </button>
            </div>
        </form>
    </div>
</div>

@if(Auth::user()->isAdmin())
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('AI Scripts loaded');
    
    // AI Title Suggestions
    const aiTitleBtn = document.getElementById('ai-title-btn');
    const aiTitleSuggestions = document.getElementById('ai-title-suggestions');
    const aiTitleList = document.getElementById('ai-title-list');
    const titleInput = document.getElementById('title');
    const typeSelect = document.getElementById('type');
    
    console.log('Elements:', { aiTitleBtn, titleInput, typeSelect });
    
    if (aiTitleBtn) {
        console.log('AI Title button found');
        aiTitleBtn.addEventListener('click', function() {
            console.log('AI Title button clicked');
            const topic = titleInput.value.trim() || prompt('Konu/tema girin:');
            if (!topic) return;
            
            console.log('Fetching titles for topic:', topic);
            aiTitleBtn.disabled = true;
            aiTitleBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Yükleniyor...';
            
            const url = '{{ route("sites.contents.generate-titles", $site) }}';
            console.log('Fetch URL:', url);
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    topic: topic,
                    type: typeSelect.value
                })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || 'HTTP ' + response.status);
                    });
                }
                return response.json();
            })
            .then(data => {
                aiTitleBtn.disabled = false;
                aiTitleBtn.innerHTML = '<i class="fas fa-magic"></i> AI Başlık Öner';
                
                console.log('AI Title Response Data:', data);
                
                if (data.success && data.titles && Array.isArray(data.titles) && data.titles.length > 0) {
                    aiTitleList.innerHTML = '';
                    data.titles.forEach((title, index) => {
                        if (!title || typeof title !== 'string') {
                            console.warn('Invalid title at index', index, title);
                            return;
                        }
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'block w-full text-left px-3 py-2 text-sm text-purple-700 hover:bg-purple-100 rounded-md transition-colors';
                        btn.textContent = title.trim();
                        btn.addEventListener('click', function() {
                            titleInput.value = title.trim();
                            aiTitleSuggestions.classList.add('hidden');
                        });
                        aiTitleList.appendChild(btn);
                    });
                    if (aiTitleList.children.length > 0) {
                        aiTitleSuggestions.classList.remove('hidden');
                    } else {
                        alert('Başlık önerisi alındı ancak formatlanamadı. Lütfen tekrar deneyin.');
                        console.error('No valid titles found in response:', data);
                    }
                } else {
                    const errorMsg = data.error || (data.titles && data.titles.length === 0 ? 'Başlık önerisi bulunamadı' : 'Bilinmeyen hata');
                    
                        // Quota ve rate limit hatası için daha açıklayıcı mesaj
                        let userMessage = errorMsg;
                        if (errorMsg.includes('kotası') || errorMsg.includes('quota') || errorMsg.includes('billing')) {
                            userMessage = 'AI API kotası aşıldı. Lütfen hesabınızın faturalama ayarlarını kontrol edin.\n\nAlternatif: Başlıkları manuel olarak yazabilirsiniz.';
                        } else if (errorMsg.includes('yoğun') || errorMsg.includes('resource exhausted') || errorMsg.includes('429')) {
                            userMessage = 'AI API şu anda yoğun. Lütfen 10-30 saniye sonra tekrar deneyin.\n\nAlternatif: Başlıkları manuel olarak yazabilirsiniz.';
                        }

                        alert('Başlık önerisi oluşturulamadı: ' + userMessage);
                    console.error('AI Title Error Response:', data);
                }
            })
            .catch(error => {
                aiTitleBtn.disabled = false;
                aiTitleBtn.innerHTML = '<i class="fas fa-magic"></i> AI Başlık Öner';
                console.error('AI Title Error:', error);
                alert('Hata: ' + error.message);
            });
        });
    }
    
    // AI Content Generation
    const aiContentBtn = document.getElementById('ai-content-btn');
    const contentTextarea = document.getElementById('content');
    const aiDescriptionDiv = document.getElementById('ai-content-description');
    const aiDescription = document.getElementById('ai-description');
    
    if (aiContentBtn) {
        console.log('AI Content button found');
        aiContentBtn.addEventListener('click', function() {
            console.log('AI Content button clicked');
            const title = titleInput.value.trim();
            if (!title) {
                alert('Lütfen önce bir başlık girin.');
                titleInput.focus();
                return;
            }
            
            console.log('Generating content for title:', title);
            aiContentBtn.disabled = true;
            aiContentBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Oluşturuluyor...';
            
            const url = '{{ route("sites.contents.generate-ai", $site) }}';
            console.log('Fetch URL:', url);
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    title: title,
                    type: typeSelect.value,
                    description: aiDescription ? aiDescription.value.trim() : null
                })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || 'HTTP ' + response.status);
                    });
                }
                return response.json();
            })
            .then(data => {
                aiContentBtn.disabled = false;
                aiContentBtn.innerHTML = '<i class="fas fa-robot"></i> AI ile Oluştur';
                
                if (data.success && data.content) {
                    contentTextarea.value = data.content;
                    // Açıklama alanını gizleme, kullanıcı isterse tekrar kullanabilir
                } else {
                    const errorMsg = data.error || 'Bilinmeyen hata';
                    
                    // Quota ve rate limit hatası için daha açıklayıcı mesaj
                    let userMessage = errorMsg;
                    if (errorMsg.includes('kotası') || errorMsg.includes('quota') || errorMsg.includes('billing')) {
                        userMessage = 'AI API kotası aşıldı. Lütfen hesabınızın faturalama ayarlarını kontrol edin.\n\nAlternatif: İçeriği manuel olarak yazabilirsiniz.';
                    } else if (errorMsg.includes('yoğun') || errorMsg.includes('resource exhausted') || errorMsg.includes('429')) {
                        userMessage = 'AI API şu anda yoğun. Lütfen 10-30 saniye sonra tekrar deneyin.\n\nAlternatif: İçeriği manuel olarak yazabilirsiniz.';
                    }
                    
                    alert('İçerik oluşturulamadı: ' + userMessage);
                    console.error('AI Content Response:', data);
                }
            })
            .catch(error => {
                aiContentBtn.disabled = false;
                aiContentBtn.innerHTML = '<i class="fas fa-robot"></i> AI ile Oluştur';
                console.error('AI Content Error:', error);
                alert('Hata: ' + error.message);
            });
        });
        
        // Show description field when AI button is hovered or when textarea is clicked
        if (aiContentBtn) {
            aiContentBtn.addEventListener('mouseenter', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });
            
            // AI button'a tıklandığında da göster
            aiContentBtn.addEventListener('click', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });
        }
        
        // Textarea'ya tıklandığında göster ve focus et
        if (aiDescription) {
            aiDescription.addEventListener('click', function(e) {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                    setTimeout(() => aiDescription.focus(), 10);
                }
                e.stopPropagation();
            });
            
            // Focus event'i de ekle
            aiDescription.addEventListener('focus', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });
            
            // Mouse ile üzerine geldiğinde de göster
            aiDescription.addEventListener('mouseenter', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });
        }
    }
});
</script>
@endpush
@endif
@endsection