@extends('layouts.app')

@section('title', 'Yeni Eğitim Modülü')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl">
        <div class="mb-6">
            <a href="{{ route('training.index') }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> Eğitim listesine dön
            </a>
        </div>

        <h1 class="text-3xl font-semibold text-gray-900 mb-6">Yeni Eğitim Modülü</h1>

        <form action="{{ route('training.store') }}" 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 space-y-6">
                <div>
                    <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" id="title" name="title" value="{{ old('title') }}" 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="Eğitim modülü başlığı girin...">
                        <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>
                    </div>
                    <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>
                    @error('title')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                    <div>
                        <label for="content_type" class="block text-sm font-medium leading-6 text-gray-900">İçerik Türü</label>
                        <select id="content_type" name="content_type" required class="mt-2 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="text" {{ old('content_type')==='text' ? 'selected' : '' }}>Metin</option>
                            <option value="code" {{ old('content_type')==='code' ? 'selected' : '' }}>Kod</option>
                            <option value="checklist" {{ old('content_type')==='checklist' ? 'selected' : '' }}>Checklist</option>
                        </select>
                        @error('content_type')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="estimated_time" class="block text-sm font-medium leading-6 text-gray-900">Tahmini Süre (dk)</label>
                        <input type="number" min="0" id="estimated_time" name="estimated_time" value="{{ old('estimated_time', 0) }}" required class="mt-2 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">
                        @error('estimated_time')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="category_id" class="block text-sm font-medium leading-6 text-gray-900">Kategori</label>
                        <select id="category_id" name="category_id" class="mt-2 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="">Kategori Seçin</option>
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500">
                            <a href="{{ route('training.categories.index') }}" class="text-blue-600 hover:text-blue-800">Kategorileri yönet</a>
                        </p>
                        @error('category_id')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label for="content_body" class="block text-sm font-medium leading-6 text-gray-900">İçerik</label>
                        <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>
                    </div>
                    <div class="mt-2">
                        <textarea id="content_body" name="content_body" 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="Eğitim modülü içeriğini buraya yazın...">{{ old('content_body') }}</textarea>
                        <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 türü, özel gereksinimler veya ek açıklamalar..." 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>
                    </div>
                    @error('content_body')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </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('training.index') }}" 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>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Training 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 contentTypeSelect = document.getElementById('content_type');

    if (aiTitleBtn) {
        aiTitleBtn.addEventListener('click', function() {
            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("training.generate-titles") }}';
            console.log('Fetch URL:', url);

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    topic: topic,
                    content_type: contentTypeSelect.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');

                    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_body');
    const aiDescriptionDiv = document.getElementById('ai-content-description');
    const aiDescription = document.getElementById('ai-description');

    if (aiContentBtn) {
        aiContentBtn.addEventListener('click', function() {
            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("training.generate-ai") }}';
            console.log('Fetch URL:', url);

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    title: title,
                    content_type: contentTypeSelect.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;
                } else {
                    const errorMsg = data.error || 'Bilinmeyen hata';

                    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 clicked
        if (aiContentBtn) {
            aiContentBtn.addEventListener('mouseenter', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });

            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();
            });

            aiDescription.addEventListener('focus', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });

            aiDescription.addEventListener('mouseenter', function() {
                if (aiDescriptionDiv) {
                    aiDescriptionDiv.style.display = 'block';
                }
            });
        }
    }
});
</script>
@endpush
@endsection