document.addEventListener('DOMContentLoaded', () => {
    const askBtn = document.getElementById('askBtn');
    const tokenInput = document.getElementById('tokenInput');
    const contextText = document.getElementById('contextText');
    const questionText = document.getElementById('questionText');
    const outputResult = document.getElementById('outputResult');

    askBtn.addEventListener('click', async () => {
        const HF_TOKEN = tokenInput.value.trim();
        const context = contextText.value.trim();
        const question = questionText.value.trim();

        if (!HF_TOKEN) {
            outputResult.textContent = "Please enter your Hugging Face access token in the configuration field above.";
            return;
        }

        if (!question) {
            outputResult.textContent = "Please provide a query or question to process.";
            return;
        }

        outputResult.textContent = "Processing request, please wait...";

        const prompt = `You are Zuban AI, a professional assistant. Use the provided context to answer the user's query accurately. 
IMPORTANT RULE: You MUST reply entirely in clear, natural Roman Urdu (Hindi/Urdu written in English script). Do not reply in standard Urdu script or English.

Context:
${context}

Query:
${question}

Roman Urdu Response:`;

        try {
            const response = await fetch("https://router.huggingface.co/v1/chat/completions", {
                method: "POST",
                headers: {
                    "Authorization": `Bearer ${HF_TOKEN}`,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    model: "meta-llama/Llama-3.1-8B-Instruct:fastest",
                    messages: [
                        { role: "user", content: prompt }
                    ],
                    max_tokens: 500,
                    temperature: 0.7
                })
            });

            const data = await response.json();

            if (data.choices && data.choices.length > 0) {
                outputResult.textContent = data.choices[0].message.content.trim();
            } else if (data.error) {
                outputResult.textContent = `API Error: ${data.error.message || JSON.stringify(data.error)}`;
            } else {
                outputResult.textContent = "No valid response received. Please check your token and inputs.";
            }

        } catch (error) {
            console.error(error);
            outputResult.textContent = "A network or transmission error occurred. Please verify your connection.";
        }
    });
});