document.addEventListener("DOMContentLoaded", () => {
    const fileInput = document.getElementById("fileInput");
    const scanBtn = document.getElementById("scan-btn");
    const resultDiv = document.getElementById("result");
    const consentCheckbox = document.getElementById("user-consent");
    const preview = document.getElementById("preview");
    const previewBox = document.getElementById("previewBox"); // ✅ NEW
    const removeBtn = document.getElementById("removeBtn");   // ✅ NEW
    const splash = document.getElementById("splash-screen");
    const yearEl = document.getElementById("year");

    // Initially hide preview
    if (previewBox) previewBox.style.display = "none";

    function updateButton() {
        scanBtn.disabled = !(consentCheckbox.checked && fileInput.files.length > 0);
    }

    consentCheckbox.addEventListener("change", updateButton);

    fileInput.addEventListener("change", function () {
        const file = this.files[0];

        if (!file) {
            preview.style.display = "none";
            if (previewBox) previewBox.style.display = "none";
            updateButton();
            return;
        }

        if (file.size > 4 * 1024 * 1024) {
            alert("File too big! Max 4MB allowed");
            fileInput.value = "";
            preview.style.display = "none";
            if (previewBox) previewBox.style.display = "none";
            updateButton();
            return;
        }

        preview.src = URL.createObjectURL(file);
        preview.style.display = "block";
        if (previewBox) previewBox.style.display = "block";

        updateButton();
    });

    // ❌ REMOVE IMAGE BUTTON (X)
    if (removeBtn) {
        removeBtn.addEventListener("click", () => {
            preview.src = "";
            preview.style.display = "none";
            fileInput.value = "";
            if (previewBox) previewBox.style.display = "none";
            updateButton();
        });
    }

    scanBtn.addEventListener("click", async (e) => {
        e.preventDefault();

        if (!fileInput.files[0]) {
            alert("Select image first");
            return;
        }

        resultDiv.innerHTML = "Analyzing...";

        const formData = new FormData();
        formData.append("image", fileInput.files[0]);

        try {
            const res = await fetch("/analyze", {
                method: "POST",
                body: formData
            });

            const data = await res.json();

            if (data.error) {
                resultDiv.innerHTML = "Error: " + data.error;
                return;
            }

            const analysis = data.analysis || {};
            const metadata = data.metadata || {};
            const width = metadata.width ?? "N/A";
            const height = metadata.height ?? "N/A";
            const size = metadata.size_mb ?? "N/A";
            const status = analysis.is_real ? "Likely Real" : "Likely AI Generated";

            resultDiv.innerHTML = `
                <div style="text-align: center; margin-top: 15px;">
                    <p><b>Result:</b> ${status}</p>
                    <p><b>Confidence:</b> ${analysis.confidence ?? 0}%</p>
                    <p><b>Reason:</b> ${analysis.reason ?? "N/A"}</p>
                    <p><b>Detected Text:</b> ${data.text || "None"}</p>
                    <hr>
                    <p><b>Width:</b> ${width} px</p>
                    <p><b>Height:</b> ${height} px</p>
                    <p><b>Size:</b> ${size} MB</p>
                </div>
            `;
        } catch (error) {
            console.error("Analyze error:", error);
            resultDiv.innerHTML = "Server connection error!";
        }
    });

    window.addEventListener('load', () => {
        if (splash) {
            splash.style.display = "flex";
            setTimeout(() => {
                splash.style.transition = "opacity 0.8s ease";
                splash.style.opacity = "0";
                setTimeout(() => {
                    splash.style.display = "none";
                }, 800);
            }, 2000);
        }
    });

    if (yearEl) {
        yearEl.innerText = new Date().getFullYear();
    }
});