@extends('layouts.admin', ['title' => 'এআই অটো-ভোকাবুলারি জেনারেটর'])

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="bg-gradient-to-r from-amber-950 via-slate-950 to-slate-900 border border-amber-800/60 p-6 rounded-3xl shadow-xl flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <span class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center font-bold">✨</span>
                <span class="text-xs font-bold text-amber-400 font-mono uppercase">Google Gemini AI Engine</span>
            </div>
            <h1 class="text-2xl font-black text-white font-outfit mt-1">এআই অটো-ভোকাবুলারি ও কারিকুলাম জেনারেটর</h1>
            <p class="text-xs text-slate-300 mt-1">
                গুগল জেমিনি এআই ব্যবহার করে লেভেল ও বিষয়বস্তু অনুযায়ী নতুন শব্দ ও বাক্য স্বয়ংক্রিয়ভাবে তৈরি করুন এবং এক ক্লিকে ডেটাবেসে যুক্ত করুন।
            </p>
        </div>
    </div>

    <!-- AI Generator Control Panel -->
    <div class="bg-slate-950 border border-slate-800 p-6 rounded-3xl shadow-xl space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
            
            <!-- Gemini API Key -->
            <div class="sm:col-span-12 md:col-span-6">
                <label class="block text-xs font-bold text-slate-300 mb-1">
                    গুগল জেমিনি এআই কী (Google Gemini API Key)*
                </label>
                <input type="password" id="geminiApiKey" placeholder="AIzaSy..." 
                       class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-amber-500 font-mono">
                <span class="text-[10px] text-slate-500 mt-1 block">গুগল এআই স্টুডিও (aistudio.google.com) থেকে ফ্রি কী ব্যবহার করতে পারেন।</span>
            </div>

            <!-- Level -->
            <div class="sm:col-span-6 md:col-span-2">
                <label class="block text-xs font-bold text-slate-300 mb-1">লেভেল (Level)*</label>
                <select id="genLevel" class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-amber-500">
                    <option value="A1" selected>A1 (প্রাথমিক)</option>
                    <option value="A0">A0 (নতুন শিক্ষার্থী)</option>
                    <option value="A2">A2 (বাস্তব জীবন ও কাজ)</option>
                    <option value="B1">B1 (কোয়েস্তুরা ও সিটিজেনশিপ)</option>
                    <option value="B2">B2 (উচ্চতর দক্ষতা)</option>
                    <option value="C1">C1 (অ্যাডভান্সড)</option>
                </select>
            </div>

            <!-- Word Count -->
            <div class="sm:col-span-6 md:col-span-2">
                <label class="block text-xs font-bold text-slate-300 mb-1">শব্দের সংখ্যা*</label>
                <select id="genCount" class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-amber-500 font-mono">
                    <option value="10" selected>১০ টি</option>
                    <option value="25">২৫ টি</option>
                    <option value="50">৫০ টি</option>
                    <option value="100">১০০ টি</option>
                </select>
            </div>

            <!-- Generate Button -->
            <div class="sm:col-span-12 md:col-span-2 flex items-end">
                <button type="button" id="btnGenerate" onclick="startGeneration()" 
                        class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-bold text-xs py-2.5 px-4 rounded-xl transition shadow flex items-center justify-center gap-1.5 font-outfit">
                    <i data-lucide="sparkles" class="w-4 h-4"></i>
                    <span id="btnGenText">জেনারেট করুন</span>
                </button>
            </div>

            <!-- Topic / Situation Select or Type -->
            <div class="sm:col-span-12">
                <label class="block text-xs font-bold text-slate-300 mb-1">বিষয়বস্তু বা পরিস্থিতি (Topic / Context)*</label>
                <input type="text" id="genTopic" value="হাসপাতাল ও ডাক্তার (Salute e Medico)" placeholder="উদা: সুপারমার্কেট, রেস্তোরাঁ, কোয়েস্তুরা, বাড়িভাড়া..." 
                       class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>

        </div>
    </div>

    <!-- Live Preview & Save Container -->
    <div id="resultsContainer" class="hidden bg-slate-950 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-base font-bold text-white font-outfit flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i>
                    <span>উৎপাদিত শব্দ প্রিভিউ (Live Preview)</span>
                </h3>
                <p class="text-xs text-slate-400 mt-0.5">প্রয়োজনে টেবিল থেকে সরাসরি এডিট করতে পারেন</p>
            </div>

            <button type="button" onclick="saveToDatabase()" class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-4 py-2.5 rounded-xl transition flex items-center gap-1.5 shadow">
                <i data-lucide="database" class="w-4 h-4"></i>
                <span>⚡ ডেটাবেসে সেভ করুন</span>
            </button>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="bg-slate-900/80 border-b border-slate-800 text-slate-400 uppercase tracking-wider text-[10px]">
                        <th class="py-2.5 px-3">ইতালিয়ান শব্দ</th>
                        <th class="py-2.5 px-3">বাংলা অর্থ</th>
                        <th class="py-2.5 px-3">লেভেল</th>
                        <th class="py-2.5 px-3">উদাহরণ বাক্য</th>
                        <th class="py-2.5 px-3">বাংলা অনুবাদ</th>
                        <th class="py-2.5 px-3 text-center">স্ট্যাটাস</th>
                    </tr>
                </thead>
                <tbody id="generatedTableBody" class="divide-y divide-slate-800/60">
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
    let currentGeneratedWords = [];

    async function startGeneration() {
        const apiKey = document.getElementById('geminiApiKey').value.trim();
        const level = document.getElementById('genLevel').value;
        const count = document.getElementById('genCount').value;
        const topic = document.getElementById('genTopic').value.trim();

        if (!apiKey) {
            alert('দয়া করে আপনার Google Gemini API Key প্রবেশ করান।');
            return;
        }

        const btn = document.getElementById('btnGenerate');
        const btnText = document.getElementById('btnGenText');
        btn.disabled = true;
        btnText.innerText = 'জেনারেট হচ্ছে...';

        try {
            const res = await fetch('{{ route("admin.ai_generate") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ api_key: apiKey, level: level, count: count, topic: topic })
            });

            const data = await res.json();
            if (data.status === 'success') {
                currentGeneratedWords = data.words;
                renderTable(data.words);
            } else {
                alert('ত্রুটি: ' + (data.message || 'জেনারেট করা সম্ভব হয়নি'));
            }
        } catch (e) {
            alert('নেটওয়ার্ক ত্রুটি: ' + e.message);
        } finally {
            btn.disabled = false;
            btnText.innerText = 'জেনারেট করুন';
        }
    }

    function renderTable(words) {
        const tbody = document.getElementById('generatedTableBody');
        tbody.innerHTML = '';

        words.forEach((w, i) => {
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-slate-900/60 transition';
            tr.innerHTML = `
                <td class="py-2.5 px-3 font-bold text-white font-outfit">${w.italian}</td>
                <td class="py-2.5 px-3 text-emerald-300 font-bold">${w.bangla}</td>
                <td class="py-2.5 px-3 font-mono text-[11px]">${w.level}</td>
                <td class="py-2.5 px-3 text-slate-400 italic font-outfit text-[11px]">${w.example_it || '—'}</td>
                <td class="py-2.5 px-3 text-slate-400 text-[11px]">${w.example_bn || '—'}</td>
                <td class="py-2.5 px-3 text-center">
                    ${w.is_duplicate ? '<span class="bg-amber-950 text-amber-400 px-2 py-0.5 rounded text-[10px]">বিদ্যমান</span>' : '<span class="bg-emerald-950 text-emerald-400 px-2 py-0.5 rounded text-[10px]">নতুন</span>'}
                </td>
            `;
            tbody.appendChild(tr);
        });

        document.getElementById('resultsContainer').classList.remove('hidden');
    }

    async function saveToDatabase() {
        if (!currentGeneratedWords.length) return;

        try {
            const res = await fetch('{{ route("admin.ai_save") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ words: currentGeneratedWords })
            });

            const data = await res.json();
            if (data.status === 'success') {
                alert(`🎉 সফল! মোট ${data.saved_count}টি শব্দ ডেটাবেসে সফলভাবে যুক্ত হয়েছে!`);
                window.location.href = '{{ route("admin.words.index") }}';
            } else {
                alert('সংরক্ষণ ব্যর্থ হয়েছে।');
            }
        } catch (e) {
            alert('ত্রুটি: ' + e.message);
        }
    }
</script>
@endsection