document.addEventListener('DOMContentLoaded', () => {
    const convo = document.querySelector(".convo");
    const fileUpload = document.getElementById('file-upload');
    const imageUpload = document.getElementById('image-upload');
    const fileBtn = document.getElementById('file-btn');
    const imageBtn = document.getElementById('image-btn');
    const sendButtons = document.querySelectorAll('.sendingQA');
    const SummarizeInput = document.querySelector(".SummarizeInput");
    const CaptionInput = document.querySelector(".CaptionInput");
    const gotItButton = document.getElementById('got-it-btn'); // ✅ Button to hide explain div
    const explainChoixDiv = document.getElementById('explainChoix'); // ✅ Div to hide

    let selectedFile = null;
    let filePreviewBubble = null;

    // Mode switching
    document.querySelectorAll('.select-options input[name="mode"]').forEach(radio => {
        radio.addEventListener('change', (e) => {
            if (e.target.checked) {
                const selectedValue = e.target.value;
                if (selectedValue === "Summarize") {
                    SummarizeInput.classList.add("active");
                    SummarizeInput.classList.remove("innactive");
                    CaptionInput.classList.remove("active");
                    CaptionInput.classList.add("innactive");
                } else {
                    SummarizeInput.classList.add("innactive");
                    SummarizeInput.classList.remove("active");
                    CaptionInput.classList.remove("innactive");
                    CaptionInput.classList.add("active");
                }
            }
        });
    });

    // File upload handlers
    fileBtn.addEventListener('click', () => fileUpload.click());
    imageBtn.addEventListener('click', () => imageUpload.click());

    fileUpload.addEventListener('change', (e) => {
        if (e.target.files.length) {
            selectedFile = e.target.files[0];
            displayFilePreview(selectedFile);
        }
    });

    imageUpload.addEventListener('change', (e) => {
        if (e.target.files.length) {
            selectedFile = e.target.files[0];
            displayFilePreview(selectedFile);
        }
    });

    // ✅ REMOVE Drag & Drop handlers (completely deleted!)

    // ✅ "Got it" button to hide explanation div
    if (gotItButton) {
        gotItButton.addEventListener('click', () => {
            if (explainChoixDiv) {
                explainChoixDiv.style.display = "none";
            }
        });
    }

    // Send button handlers
    sendButtons.forEach(button => {
        button.addEventListener('click', handleSubmit);
    });

    function displayFilePreview(file) {
        if (filePreviewBubble) filePreviewBubble.remove();

        filePreviewBubble = createMessageBubble(
            `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
            "You"
        );
    }

    function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
        const bubble = document.createElement('div');
        bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
        bubble.style.maxWidth = "50%"; // ✅ Max width 50% of screen
        bubble.style.wordWrap = "break-word";

        const label = document.createElement('div');
        label.className = "label";
        label.textContent = sender;

        const message = document.createElement('div');
        message.className = "text";
        message.style.whiteSpace = "pre-wrap";
        message.style.display = "flex";
        message.style.flexDirection = "column";

        const textSpan = document.createElement("span");
        textSpan.innerText = text;
        message.appendChild(textSpan);

        if (sender !== "You") {
            const iconContainer = document.createElement('div');
            iconContainer.style.marginTop = "10px";
            iconContainer.style.display = "flex";
            iconContainer.style.justifyContent = "flex-end";
            iconContainer.style.gap = "10px";

            if (audioSrc) {
                const audioIcon = document.createElement("i");
                audioIcon.className = "fa-solid fa-volume-high audio-toggle";
                audioIcon.title = "Click to mute";
                audioIcon.style.cursor = "pointer";
                audioIcon.style.fontSize = "18px";

                const audio = new Audio(audioSrc);
                audio.play();

                audioIcon.addEventListener("click", () => {
                    if (audio.muted) {
                        audio.currentTime = 0;
                        audio.muted = false;
                        audioIcon.classList.remove("fa-volume-xmark");
                        audioIcon.classList.add("fa-volume-high");
                        audioIcon.title = "Click to mute";
                        audio.play();
                    } else {
                        audio.muted = true;
                        audioIcon.classList.remove("fa-volume-high");
                        audioIcon.classList.add("fa-volume-xmark");
                        audioIcon.title = "Click to unmute";
                    }
                });

                iconContainer.appendChild(audioIcon);
            }

            if (fileName) {
                const downloadIcon = document.createElement("a");
                downloadIcon.href = fileName;
                downloadIcon.target = "_blank";
                downloadIcon.title = "Download PDF";

                const icon = document.createElement("i");
                icon.className = "fa-solid fa-file-arrow-down";
                icon.style.fontSize = "18px";
                icon.style.cursor = "pointer";

                downloadIcon.appendChild(icon);
                iconContainer.appendChild(downloadIcon);
            }

            message.appendChild(iconContainer);
        }

        bubble.appendChild(label);
        bubble.appendChild(message);
        convo.appendChild(bubble);
        convo.scrollTop = convo.scrollHeight;
        return bubble;
    }

    async function handleSubmit() {
        if (!selectedFile) {
            alert("Please upload a file first");
            return;
        }

        const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
        const thinkingText = isSummarizeMode ? 'Processing document...' : "Generating caption... <div class='loader'></div>";
        const senderName = isSummarizeMode ? 'Assistant' : 'Aidan';

        const thinkingBubble = createMessageBubble(thinkingText, senderName);

        const formData = new FormData();
        formData.append('file', selectedFile);
        if (isSummarizeMode) formData.append('length', 'medium');

        try {
            const response = await fetch(endpoint, {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                let errorMessage = 'Request failed';
                try {
                    const error = await response.json();
                    errorMessage = error.detail || error.error || errorMessage;
                } catch (e) {
                    // response not JSON
                }
                throw new Error(errorMessage);
            }

            const result = await response.json();
            thinkingBubble.remove();

            if (isSummarizeMode) {
                createMessageBubble(
                    result.summary || "No summary generated.",
                    "Assistant",
                    result.audioUrl,
                    result.pdfUrl
                );
            } else {
                createMessageBubble(
                    `<strong>Caption:</strong><br><br>${result.answer || result.caption}`,
                    "Aidan",
                    result.audio
                );
            }
        } catch (error) {
            thinkingBubble.remove();
            createMessageBubble(`⚠️ Error: ${error.message}`, senderName);
        } finally {
            resetFileInputs();
        }
    }

    function resetFileInputs() {
        selectedFile = null;
        fileUpload.value = '';
        imageUpload.value = '';
        if (filePreviewBubble) {
            filePreviewBubble.remove();
            filePreviewBubble = null;
        }
    }

    // Loader CSS
    const style = document.createElement('style');
    style.textContent = `
        .loader {
            display: inline-block;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3b82f6;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .audio-toggle {
            cursor: pointer;
            transition: all 0.2s;
        }
    `;
    document.head.appendChild(style);
});