@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row">
            <div class="col-lg-8 mx-auto">

                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>تجربة توليد درس صوتي</strong>
                        <div id="loading" class="d-none">
                            <div class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></div>
                            <span class="ml-1">جاري التحميل…</span>
                        </div>
                    </div>

                    <div class="card-body">
                        <div id="alertBox"></div>

                        <form id="ingestForm" onsubmit="return false;">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="classRoom">الفصل</label>
                                    <select id="classRoom" class="custom-select" required>
                                        <option value="" selected disabled>اختر الفصل…</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="category">الفئة</label>
                                    <select id="category" class="custom-select" disabled required>
                                        <option value="" selected disabled>اختر الفئة…</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="course">المادة</label>
                                    <select id="course" class="custom-select" disabled required>
                                        <option value="" selected disabled>اختر المادة…</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="lesson_name">عنوان الدرس</label>
                                <input type="text" id="lesson_name" class="form-control"
                                    placeholder="مثال: الانحدار الخطي" required>
                            </div>

                            <div class="form-group">
                                <label for="ai_search_query">ملاحظات/كلمات مفتاحية للسكربت (اختياري)</label>
                                <textarea id="ai_search_query" class="form-control" rows="3"
                                    placeholder="أدخل نقاط سريعة: ما هو؟ لماذا مهم؟ أمثلة…"></textarea>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-3">
                                    <label for="duration_min">مدة الصوت (دقائق)</label>
                                    <input type="number" id="duration_min" class="form-control" min="2"
                                        max="15" value="3">
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="level">مستوى الشرح</label>
                                    <select id="level" class="custom-select">
                                        <option value="beginner">مبتدئ</option>
                                        <option value="intermediate">متوسط</option>
                                        <option value="advanced">متقدم</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="tone">نبرة الإلقاء</label>
                                    <select id="tone" class="custom-select">
                                        <option value="inspiring">مُلهم (مبهر)</option>
                                        <option value="energetic">حيوي</option>
                                        <option value="friendly" selected>ودود</option>
                                        <option value="formal">رسمي</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="intensity">شِدّة الأداء</label>
                                    <select id="intensity" class="custom-select">
                                        <option value="epic" selected>مُبهر/خيالي</option>
                                        <option value="balanced">متوازن</option>
                                        <option value="calm">هادئ</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="style">أسلوب الشرح</label>
                                    <select id="style" class="custom-select">
                                        <option value="cinematic" selected>سينمائي قصصي</option>
                                        <option value="story">حكاية/سرد</option>
                                        <option value="step_by_step">خطوة-بخطوة</option>
                                        <option value="coaching">توجيهي/تحفيزي</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="speech_rate">سرعة القراءة</label>
                                    <select id="speech_rate" class="custom-select">
                                        <option value="medium" selected>متوسطة</option>
                                        <option value="slow">بطيئة</option>
                                        <option value="fast">سريعة</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="voice">الصوت (اختياري)</label>
                                    <input type="text" id="voice" class="form-control"
                                        value="alloy"
                                        placeholder="مثال: alloy / verse / ash">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="keywords">كلمات مفتاحية (سطر لكل كلمة/عبارة)</label>
                                <textarea id="keywords" class="form-control" rows="3"
                                    placeholder="انحدار خطي&#10;تجهيز البيانات&#10;خطأ التربيع"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="extra_requirements">متطلبات إضافية (سطر لكل طلب)</label>
                                <textarea id="extra_requirements" class="form-control" rows="3"
                                    placeholder="استخدم تشبيه قصصي بسيط&#10;قدّم مثال رقمي كامل خطوة بخطوة&#10;اسأل أسئلة سريعة بعد كل نقطة"></textarea>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="order">الترتيب داخل المادة</label>
                                    <input type="number" id="order" class="form-control" min="0"
                                        step="1" value="0">
                                </div>
                                <div class="form-group col-md-4 d-flex align-items-center">
                                    <div class="custom-control custom-switch mt-4">
                                        <input type="checkbox" class="custom-control-input" id="is_free">
                                        <label class="custom-control-label" for="is_free">مجاني</label>
                                    </div>
                                </div>
                            </div>

                            <button id="submitBtn" class="btn btn-primary">
                                <span class="btn-text">توليد الدرس الصوتي</span>
                                <span class="btn-wait d-none">
                                    <span class="spinner-border spinner-border-sm" role="status"
                                        aria-hidden="true"></span>
                                    جاري الإرسال…
                                </span>
                            </button>
                        </form>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-body small text-muted">
                        ملاحظة: تحتاج الـ spinners في Bootstrap 4 إلى إصدار 4.2 أو أحدث.
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        (function() {
            'use strict';

            var $classRoom = document.getElementById('classRoom');
            var $category = document.getElementById('category');
            var $course = document.getElementById('course');
            var $form = document.getElementById('ingestForm');
            var $submit = document.getElementById('submitBtn');
            var $alertBox = document.getElementById('alertBox');
            var $loading = document.getElementById('loading');

            // لو وُجد التوكن في <head> (مفيد لمسارات web)
            var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

            function showLoading(on) {
                $loading.classList.toggle('d-none', !on);
            }

            function lock(el, on) {
                el.disabled = !!on;
            }

            function resetSelect($sel, placeholder) {
                $sel.innerHTML = '';
                var opt = document.createElement('option');
                opt.value = '';
                opt.disabled = true;
                opt.selected = true;
                opt.textContent = placeholder;
                $sel.appendChild(opt);
            }

            function alertBox(type, msg) {
                $alertBox.innerHTML =
                    '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    msg +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="إغلاق"><span aria-hidden="true">&times;</span></button></div>';
            }

            function toggleSubmitWaiting(wait) {
                $submit.disabled = !!wait;
                $submit.querySelector('.btn-text').classList.toggle('d-none', !!wait);
                $submit.querySelector('.btn-wait').classList.toggle('d-none', !wait);
            }

            // 1) جلب الفصول
            async function loadClassRooms() {
                try {
                    showLoading(true);
                    let r = await fetch('/api/class-rooms', {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    let data = await r.json();
                    resetSelect($classRoom, 'اختر الفصل…');
                    data.forEach(function(item) {
                        var o = document.createElement('option');
                        o.value = item.id;
                        o.textContent = item.name;
                        $classRoom.appendChild(o);
                    });
                } catch (e) {
                    alertBox('danger', 'فشل جلب الفصول. حدّث الصفحة وحاول مجددًا.');
                } finally {
                    showLoading(false);
                }
            }

            // 2) عند اختيار فصل ← جلب الفئات
            $classRoom.addEventListener('change', async function() {
                lock($category, true);
                lock($course, true);
                resetSelect($category, 'جاري تحميل الفئات…');
                resetSelect($course, 'اختر المادة…');
                try {
                    showLoading(true);
                    let url = '/api/categories?class_room_id=' + encodeURIComponent($classRoom.value);
                    let r = await fetch(url, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    let data = await r.json();
                    resetSelect($category, 'اختر الفئة…');
                    data.forEach(function(item) {
                        var o = document.createElement('option');
                        o.value = item.id;
                        o.textContent = item.name;
                        $category.appendChild(o);
                    });
                    lock($category, false);
                } catch (e) {
                    alertBox('danger', 'فشل جلب الفئات.');
                    resetSelect($category, 'اختر الفئة…');
                } finally {
                    showLoading(false);
                }
            });

            // 3) عند اختيار فئة ← جلب المواد
            $category.addEventListener('change', async function() {
                lock($course, true);
                resetSelect($course, 'جاري تحميل المواد…');
                try {
                    showLoading(true);
                    let params = new URLSearchParams({
                        class_room_id: $classRoom.value,
                        category_id: $category.value
                    });
                    let r = await fetch('/api/courses?' + params.toString(), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    let data = await r.json();
                    resetSelect($course, 'اختر المادة…');
                    data.forEach(function(item) {
                        var o = document.createElement('option');
                        o.value = item.id;
                        o.textContent = item.name;
                        $course.appendChild(o);
                    });
                    lock($course, false);
                } catch (e) {
                    alertBox('danger', 'فشل جلب المواد.');
                    resetSelect($course, 'اختر المادة…');
                } finally {
                    showLoading(false);
                }
            });

            // 4) إرسال التوليد
            $form.addEventListener('submit', async function() {
                var courseId = $course.value;
                if (!courseId) {
                    alertBox('warning', 'رجاءً اختر المادة.');
                    return;
                }

                function parseLines(id) {
                    var raw = (document.getElementById(id).value || '').trim();
                    return raw ? raw.split(/\r?\n/).map(s => s.trim()).filter(Boolean) : [];
                }

                var payload = {
                    class_room_id: parseInt($classRoom.value, 10),
                    category_id: parseInt($category.value, 10),
                    course_id: parseInt(courseId, 10),
                    lesson_name: document.getElementById('lesson_name').value.trim(),

                    // تحكم موسع
                    duration_min: parseInt(document.getElementById('duration_min').value || '3', 10),
                    level: document.getElementById('level').value,
                    tone: document.getElementById('tone').value,
                    intensity: document.getElementById('intensity').value,
                    style: document.getElementById('style').value,
                    speech_rate: document.getElementById('speech_rate').value,
                    voice: (document.getElementById('voice').value || '').trim(),

                    // قوائم متعددة
                    keywords: parseLines('keywords'),
                    extra_requirements: parseLines('extra_requirements'),

                    // القديم
                    ai_search_query: (document.getElementById('ai_search_query').value || '').trim(),
                    is_free: document.getElementById('is_free').checked,
                    order: parseInt(document.getElementById('order').value || '0', 10),
                };

                if (!payload.lesson_name) {
                    alertBox('warning', 'عنوان الدرس مطلوب.');
                    return;
                }

                try {
                    toggleSubmitWaiting(true);
                    let r = await fetch('/api/courses/' + encodeURIComponent(courseId) +
                        '/lessons/ingest', {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrf // لو endpoint على web middleware
                            },
                            body: JSON.stringify(payload),
                            credentials: 'same-origin'
                        });

                    if (r.status === 202) {
                        alertBox('success',
                            'تم إدراج الطلب في الطابور بنجاح. سيتم إنشاء ملف الصوت قريبًا.');
                        $form.reset();
                        lock($category, true);
                        lock($course, true);
                        resetSelect($category, 'اختر الفئة…');
                        resetSelect($course, 'اختر المادة…');
                    } else {
                        let errorData = await r.json().catch(() => ({}));
                        let msg = errorData.message || 'فشل الإرسال. تحقّق من الحقول.';
                        if (errorData.errors) {
                            msg += '<ul class="mt-2 mb-0">';
                            Object.keys(errorData.errors).forEach(function(k) {
                                msg += '<li><strong>' + k + ':</strong> ' + errorData.errors[k] +
                                    '</li>';
                            });
                            msg += '</ul>';
                        }
                        alertBox('danger', msg);
                    }
                } catch (e) {
                    alertBox('danger', 'حدث خطأ غير متوقع أثناء الإرسال.');
                } finally {
                    toggleSubmitWaiting(false);
                }
            });

            // تشغيل
            loadClassRooms();
        })();
    </script>
@endsection