<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>محادثة الكتاب</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
        body { font-family: 'Amiri', serif; }
    </style>
</head>
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-4xl mb-8">محادثة الكتاب</h1>
    
    <!-- اختيار الكتاب -->
    <div id="booksContainer" class="w-2/3 grid grid-cols-3 gap-4 mb-8"></div>
    
    <!-- محادثة الذكاء الاصطناعي -->
    <div class="w-2/3">
        <button id="talkButton" onclick="toggleChat()" 
                class="bg-green-500 px-6 py-3 mt-6 rounded hover:bg-green-700 w-full">
            🎤 ابدأ المحادثة
        </button>
        <button id="stopButton" onclick="stopRecognition()" 
                class="bg-red-500 px-6 py-3 mt-4 rounded hover:bg-red-700 w-full hidden">
            ⛔ إيقاف المحادثة
        </button>
    </div>

    <!-- الرد -->
    <div id="response" class="mt-8 p-4 bg-gray-800 rounded w-2/3 text-center"></div>
    
    <script src="/static/script.js" defer></script>
</body>
</html>

script.js:
const responseDiv = document.getElementById('response');
const booksContainer = document.getElementById('booksContainer');
const talkButton = document.getElementById('talkButton');
const stopButton = document.getElementById('stopButton');

let recognition;
let isListening = false;
let selectedBook = "";

// قائمة الكتب
const books = [
    "الصف الأول", "الصف الثاني", "الصف الثالث",
    "الصف الرابع", "الصف الخامس", "الصف السادس",
    "الصف السابع", "الصف الثامن", "الصف التاسع",
    "الصف العاشر", "الصف الحادي عشر", "الصف الثاني عشر"
];

// عرض الأزرار لاختيار الكتاب
function displayBooks() {
    books.forEach((book, index) => {
        const button = document.createElement('button');
        button.textContent = book;
        button.className = "bg-blue-500 hover:bg-blue-700 text-white py-3 rounded w-full";
        button.onclick = () => selectBook(book);
        booksContainer.appendChild(button);
    });
}

// اختيار الكتاب
function selectBook(book) {
    selectedBook = book;
    responseDiv.textContent = `تم اختيار: ${book}`;
}

// إعداد Web Speech API
function initRecognition() {
    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'ar-SA';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.onresult = async function(event) {
        const transcript = event.results[0][0].transcript;
        responseDiv.textContent = `سؤالك: ${transcript}`;
        await sendMessage(transcript);

        if (isListening) {
            recognition.start();
        }
    };

    recognition.onerror = function(event) {
        console.error('خطأ في التعرف على الكلام:', event.error);
        if (isListening) {
            recognition.start();
        }
    };
}

// بدء المحادثة
async function toggleChat() {
    if (!selectedBook) {
        alert("يرجى اختيار كتاب أولاً");
        return;
    }

    isListening = true;
    talkButton.classList.add('hidden');
    stopButton.classList.remove('hidden');
    
    if (!recognition) initRecognition();
    recognition.start();
}

// إيقاف المحادثة
function stopRecognition() {
    isListening = false;
    recognition.stop();
    talkButton.classList.remove('hidden');
    stopButton.classList.add('hidden');
}

// إرسال الرسالة إلى الخادم والحصول على الرد
async function sendMessage(message) {
    const response = await fetch('/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ book: selectedBook, message: message })
    });

    const result = await response.json();
    responseDiv.textContent = result.response;

    // تشغيل الرد باستخدام OpenAI Text-to-Speech
    await playAudio(result.response);
}

// تحويل النص إلى كلام باستخدام OpenAI
async function playAudio(text) {
    const response = await fetch('/text-to-speech', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: text })
    });

    const audioBlob = await response.blob();
    const audioUrl = URL.createObjectURL(audioBlob);
    const audio = new Audio(audioUrl);

    audio.onended = function() {
        if (isListening) {
            recognition.start();
        }
    };

    audio.play();
}

// عرض قائمة الكتب عند تحميل الصفحة
displayBooks();


remove book slection and make it more modern and also add modern circle audio visualizer visualze when ai talk or user talk  and save history talks in cokkies and display it ,modern style, ui edit only