{{-- AI Generate Button + Modal --}}

<button type="button" id="openAiModal"
    style="display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;border:1px solid rgba(168,85,247,.4);background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(236,72,153,.15));color:#e9d5ff;font-weight:600;cursor:pointer;transition:.2s"
    onmouseover="this.style.background='linear-gradient(135deg,rgba(168,85,247,.3),rgba(236,72,153,.3))'"
    onmouseout="this.style.background='linear-gradient(135deg,rgba(168,85,247,.15),rgba(236,72,153,.15))'">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
    </svg>
    Generate with AI
</button>

<div id="aiModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);backdrop-filter:blur(4px)">
    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto">
        <div style="width:100%;max-width:720px;max-height:92vh;overflow-y:auto;background:#0f172a;border:1px solid rgba(255,255,255,.14);border-radius:1.25rem;padding:1.75rem;box-shadow:0 24px 60px rgba(0,0,0,.5)">

            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
                <h3 style="font-size:1.2rem;font-weight:700;color:#fff;margin:0">Generate Questions with AI</h3>
                <button type="button" onclick="closeAiModal()" style="background:none;border:none;color:#94a3b8;font-size:1.5rem;cursor:pointer;line-height:1">&times;</button>
            </div>

            {{-- Source selector --}}
            <div style="margin-bottom:1rem">
                <label style="display:block;font-size:.85rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem">Source</label>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
                    <label class="ai-source-opt" data-source="syllabus" style="cursor:pointer;padding:1rem;border:2px solid #06b6d4;border-radius:.75rem;background:rgba(6,182,212,.08)">
                        <input type="radio" name="ai_source" value="syllabus" checked style="display:none">
                        <div style="color:#fff;font-weight:600">From Syllabus</div>
                        <div style="font-size:.75rem;color:#94a3b8;margin-top:.25rem">Generate questions from an uploaded PDF.</div>
                    </label>
                    <label class="ai-source-opt" data-source="url" style="cursor:pointer;padding:1rem;border:2px solid rgba(255,255,255,.1);border-radius:.75rem;background:rgba(255,255,255,.03)">
                        <input type="radio" name="ai_source" value="url" style="display:none">
                        <div style="color:#fff;font-weight:600">From URL</div>
                        <div style="font-size:.75rem;color:#94a3b8;margin-top:.25rem">Generate questions from a website page.</div>
                    </label>
                </div>
            </div>

            {{-- Syllabus section --}}
            <div id="aiSyllabusSection" style="margin-bottom:1rem">
                <label style="display:block;font-size:.85rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem">
                    Matching Syllabus for <span id="aiExamLabel" style="color:#67e8f9">...</span>
                </label>
                <select id="aiSyllabusSelect" style="width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.12);background:rgba(2,6,23,.6);color:#fff;outline:none">
                    <option value="">Loading...</option>
                </select>
                <p id="aiSyllabusHelp" style="font-size:.75rem;color:#94a3b8;margin:.5rem 0 0 0"></p>
            </div>

            {{-- URL section --}}
            <div id="aiUrlSection" style="margin-bottom:1rem;display:none">
                <label style="display:block;font-size:.85rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem">Website URL</label>
                <input type="url" id="aiUrlInput" placeholder="https://example.com/topic-page"
                    style="width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.12);background:rgba(2,6,23,.6);color:#fff;outline:none">
                <p style="font-size:.75rem;color:#94a3b8;margin:.5rem 0 0 0">The page should contain static HTML. JavaScript-heavy pages may not work.</p>
            </div>

            {{-- Count --}}
            <div style="margin-bottom:1rem">
                <label style="display:block;font-size:.85rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem">Number of Questions</label>
                <input type="number" id="aiCount" min="1" max="50" value="10"
                    style="width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.12);background:rgba(2,6,23,.6);color:#fff;outline:none">
                <p style="font-size:.75rem;color:#94a3b8;margin:.5rem 0 0 0">Maximum 50 questions per batch. For larger exams, generate questions in multiple batches.</p>
            </div>

            {{-- Actions --}}
            <div style="display:flex;gap:.75rem;justify-content:flex-end;margin-top:1rem">
                <button type="button" onclick="closeAiModal()"
                    style="padding:10px 20px;border-radius:.75rem;border:none;background:#475569;color:#fff;font-weight:600;cursor:pointer">
                    Cancel
                </button>
                <button type="button" id="aiGenerateBtn"
                    style="padding:10px 20px;border-radius:.75rem;border:none;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-weight:700;cursor:pointer">
                    Generate
                </button>
            </div>

            {{-- Loading --}}
            <div id="aiLoading" style="display:none;text-align:center;padding:1.5rem;margin-top:1rem">
                <div style="display:inline-block;width:32px;height:32px;border:3px solid rgba(34,211,238,.2);border-top-color:#06b6d4;border-radius:50%;animation:spin 1s linear infinite"></div>
                <p style="color:#cbd5e1;margin-top:.75rem;font-size:.9rem">Generating questions... This may take 30–60 seconds.</p>
            </div>

            {{-- Error --}}
            <div id="aiError" style="display:none;margin-top:1rem;padding:.75rem 1rem;border-radius:.75rem;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fca5a5;font-size:.85rem"></div>

            {{-- Preview --}}
            <div id="aiPreview" style="display:none;margin-top:1.25rem">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
                    <h4 style="color:#fff;font-weight:700;margin:0">Preview <span id="aiPreviewCount" style="color:#67e8f9"></span></h4>
                    <button type="button" id="aiSaveBtn"
                        style="padding:8px 16px;border-radius:.75rem;border:none;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:700;cursor:pointer">
                        Save Selected
                    </button>
                </div>
                <div id="aiPreviewList" style="display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto;padding-right:.25rem"></div>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
</style>

<script>
    (function() {
        const AI_SYLLABI_URL = "{{ route('admin.exams.ai-syllabi', $exam) }}";
        const AI_GENERATE_URL = "{{ route('admin.exams.ai-generate', $exam) }}";
        const AI_SAVE_URL = "{{ route('admin.exams.ai-save', $exam) }}";
        const CSRF = "{{ csrf_token() }}";
        const SYLLABI_CREATE_URL = "{{ route('admin.syllabi.create') }}";

        let generatedQuestions = [];

        document.getElementById('openAiModal').addEventListener('click', () => {
            document.getElementById('aiModal').style.display = 'block';
            document.body.style.overflow = 'hidden';
            loadSyllabi();
        });

        window.closeAiModal = function() {
            document.getElementById('aiModal').style.display = 'none';
            document.body.style.overflow = '';
            document.getElementById('aiPreview').style.display = 'none';
            document.getElementById('aiError').style.display = 'none';
            generatedQuestions = [];
        };

        // Source toggle
        document.querySelectorAll('.ai-source-opt').forEach(el => {
            el.addEventListener('click', () => {
                document.querySelectorAll('.ai-source-opt').forEach(x => {
                    x.style.borderColor = 'rgba(255,255,255,.1)';
                    x.style.background = 'rgba(255,255,255,.03)';
                });
                el.style.borderColor = '#06b6d4';
                el.style.background = 'rgba(6,182,212,.08)';
                el.querySelector('input').checked = true;

                const src = el.dataset.source;
                document.getElementById('aiSyllabusSection').style.display = src === 'syllabus' ? 'block' : 'none';
                document.getElementById('aiUrlSection').style.display = src === 'url' ? 'block' : 'none';
            });
        });

        async function loadSyllabi() {
            const select = document.getElementById('aiSyllabusSelect');
            const help = document.getElementById('aiSyllabusHelp');
            const label = document.getElementById('aiExamLabel');

            select.innerHTML = '<option value="">Loading...</option>';
            help.textContent = '';

            try {
                const res = await fetch(AI_SYLLABI_URL, {
                    headers: {
                        'Accept': 'application/json'
                    }
                });
                const data = await res.json();

                label.textContent = `${data.exam.exam_type} - ${data.exam.subject}`;

                if (!data.has_any) {
                    select.innerHTML = '<option value="">No matching syllabus found</option>';
                    help.innerHTML = `No matching syllabus was found for this exam
                    (<b>${escapeHtml(data.exam.exam_type)} / ${escapeHtml(data.exam.subject)}</b>).
                    Please upload one in the
                    <a href="${SYLLABI_CREATE_URL}" target="_blank" style="color:#67e8f9">Syllabus Library</a>.`;
                    return;
                }

                select.innerHTML = '<option value="">-- Select Syllabus --</option>' +
                    data.syllabi.map(s => `<option value="${s.id}">${escapeHtml(s.title)}${s.subject ? ' - ' + escapeHtml(s.subject) : ' - All Subjects'} (${s.pages ?? '?'} pages)</option>`).join('');

                help.innerHTML = `Found ${data.syllabi.length} syllabi for exam type <b>${escapeHtml(data.exam.exam_type)}</b>. Please select one.`;
            } catch (e) {
                select.innerHTML = '<option value="">Load failed</option>';
                help.textContent = 'Syllabus list load nahi hui.';
            }
        }

        document.getElementById('aiGenerateBtn').addEventListener('click', async () => {
            const src = document.querySelector('input[name="ai_source"]:checked').value;
            const count = parseInt(document.getElementById('aiCount').value || 0);

            if (count < 1) {
                showAiError('Question count must be at least 1.');
                return;
            }

            const body = {
                source: src,
                count,
                _token: CSRF
            };

            if (src === 'syllabus') {
                const sid = document.getElementById('aiSyllabusSelect').value;
                if (!sid) {
                    showAiError('Please select a syllabus first.');
                    return;
                }
                body.syllabus_id = sid;
            } else {
                const url = document.getElementById('aiUrlInput').value.trim();
                if (!url) {
                    showAiError('Please enter a URL.');
                    return;
                }
                body.url = url;
            }

            document.getElementById('aiLoading').style.display = 'block';
            document.getElementById('aiError').style.display = 'none';
            document.getElementById('aiPreview').style.display = 'none';
            document.getElementById('aiGenerateBtn').disabled = true;

            try {
                const res = await fetch(AI_GENERATE_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': CSRF,
                    },
                    body: JSON.stringify(body),
                });
                const data = await res.json();

                if (!data.status) {
                    showAiError(data.message || 'AI generation failed.');
                    return;
                }

                generatedQuestions = data.questions.map(q => ({
                    ...q,
                    _selected: true,
                    _key: data.cache_key,
                    _model: data.model,
                }));
                renderPreview();
            } catch (e) {
                showAiError('Network error: ' + e.message);
            } finally {
                document.getElementById('aiLoading').style.display = 'none';
                document.getElementById('aiGenerateBtn').disabled = false;
            }
        });

        function showAiError(msg) {
            const el = document.getElementById('aiError');
            el.textContent = msg;
            el.style.display = 'block';
        }

        function renderPreview() {
            document.getElementById('aiPreviewCount').textContent = `(${generatedQuestions.length})`;
            document.getElementById('aiPreview').style.display = 'block';

            document.getElementById('aiPreviewList').innerHTML = generatedQuestions.map((q, i) => `
            <div style="border:1px solid rgba(255,255,255,.1);border-radius:.75rem;background:rgba(0,0,0,.3);padding:1rem">
                <label style="display:flex;align-items:flex-start;gap:.75rem;cursor:pointer">
                    <input type="checkbox" ${q._selected ? 'checked' : ''}
                           onchange="generatedQuestions[${i}]._selected = this.checked"
                           style="margin-top:.25rem;accent-color:#06b6d4">
                    <div style="flex:1">
                        <div style="color:#fff;font-weight:600;font-size:.875rem">${escapeHtml(q.question_en || q.question_hi)}</div>
                        <div style="color:#67e8f9;font-size:.75rem;font-style:italic;margin-top:.25rem">${escapeHtml(q.question_hi || '')}</div>
                        <div style="margin-top:.5rem;font-size:.75rem;line-height:1.6">
                            ${(q.options_en || q.options_hi).map((o, j) => `
                                <div style="${j === q.correct_index ? 'color:#86efac;font-weight:600' : 'color:#cbd5e1'}">
                                    ${String.fromCharCode(65 + j)}. ${escapeHtml(o)}
                                    ${j === q.correct_index ? ' [Correct]' : ''}
                                </div>
                            `).join('')}
                        </div>
                        <div style="margin-top:.5rem;font-size:.7rem;color:#94a3b8">Topic: ${escapeHtml(q.topic || '-')} | ${escapeHtml(q.difficulty || '')}</div>
                    </div>
                </label>
            </div>
        `).join('');
        }

        function escapeHtml(s) {
            return String(s || '').replace(/[&<>"']/g, m => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            })[m]);
        }

        document.getElementById('aiSaveBtn').addEventListener('click', async () => {
            const selected = generatedQuestions.filter(q => q._selected);
            if (!selected.length) {
                showAiError('Please select at least one question.');
                return;
            }

            const btn = document.getElementById('aiSaveBtn');
            btn.disabled = true;
            btn.textContent = 'Saving...';

            try {
                const res = await fetch(AI_SAVE_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': CSRF,
                    },
                    body: JSON.stringify({
                        questions: selected,
                        cache_key: selected[0]._key,
                        model: selected[0]._model,
                        _token: CSRF,
                    }),
                });
                const data = await res.json();

                if (!data.status) {
                    showAiError(data.message || 'Failed to save questions.');
                    return;
                }
                
                // Show success message
                const success = document.createElement('div');
                success.style.cssText = `
                    margin-top: 1rem;
                    padding: 12px 16px;
                    border-radius: 12px;
                    border: 1px solid rgba(16,185,129,.4);
                    background: rgba(16,185,129,.1);
                    color: #6ee7b7;
                    font-size: .9rem;
                `;
                success.textContent = data.message || 'Questions saved successfully.';
                
                document.getElementById('aiError').style.display = 'none';
                document.getElementById('aiPreview').prepend(success);
                
                // Redirect after 1.5 seconds
                setTimeout(() => {
                    window.location.href = data.redirect;
                }, 1500);
            } catch (e) {
                showAiError('Save error: ' + e.message);
            } finally {
                btn.disabled = false;
                btn.textContent = 'Save Selected';
            }
        });
    })();
</script>