fotohost/app/static/js/main.js

document.addEventListener("DOMContentLoaded", () => {
    initUploadForm();
    initCopyButtons();
    initShareModal();
});

function initUploadForm() {
    const dropzone = document.getElementById("dropzone");
    const photoInput = document.getElementById("photoInput");
    const preview = document.getElementById("preview");
    const previewImg = document.getElementById("previewImg");
    const previewName = document.getElementById("previewName");
    const submitBtn = document.getElementById("submitBtn");
    const uploadForm = document.getElementById("uploadForm");
    const tabButtons = document.querySelectorAll(".upload-tabs__btn");
    const panels = document.querySelectorAll(".upload-panel");

    if (!uploadForm) return;

    tabButtons.forEach((btn) => {
        btn.addEventListener("click", () => {
            const tab = btn.dataset.tab;
            tabButtons.forEach((item) => item.classList.toggle("upload-tabs__btn--active", item === btn));
            panels.forEach((panel) => {
                panel.classList.toggle("upload-panel--active", panel.dataset.panel === tab);
            });
        });
    });

    if (!dropzone || !photoInput) return;

    const maxFiles = parseInt(photoInput.dataset.max || "100", 10);

    dropzone.addEventListener("click", (e) => {
        if (e.target.closest("button")) return;
        photoInput.click();
    });

    ["dragenter", "dragover"].forEach((event) => {
        dropzone.addEventListener(event, (e) => {
            e.preventDefault();
            dropzone.classList.add("dropzone--active");
        });
    });

    ["dragleave", "drop"].forEach((event) => {
        dropzone.addEventListener(event, (e) => {
            e.preventDefault();
            dropzone.classList.remove("dropzone--active");
        });
    });

    dropzone.addEventListener("drop", (e) => {
        e.preventDefault();
        assignFiles(e.dataTransfer.files);
    });

    photoInput.addEventListener("change", () => {
        if (photoInput.files.length > 0) {
            showPreview(photoInput.files);
        }
    });

    uploadForm.addEventListener("submit", (e) => {
        const activePanel = document.querySelector(".upload-panel--active");
        if (!activePanel) return;

        if (activePanel.dataset.panel === "urls") {
            const urls = document.getElementById("imageUrls");
            if (!urls || !urls.value.trim()) {
                e.preventDefault();
                showToast("Укажите хотя бы одну ссылку");
            }
            return;
        }

        if (activePanel.dataset.panel === "files" && photoInput.files.length === 0) {
            e.preventDefault();
            showToast("Выберите файлы для загрузки");
        }
    });

    function assignFiles(fileList) {
        const dt = new DataTransfer();
        const limit = Math.min(fileList.length, maxFiles);
        for (let i = 0; i < limit; i++) {
            if (fileList[i].type.startsWith("image/")) {
                dt.items.add(fileList[i]);
            }
        }
        photoInput.files = dt.files;
        showPreview(photoInput.files);
    }

    function showPreview(files) {
        if (!files || files.length === 0) return;

        const first = files[0];
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImg.src = e.target.result;
            previewName.textContent =
                files.length === 1
                    ? first.name
                    : `${files.length} файлов (первый: ${first.name})`;
            preview.hidden = false;
            submitBtn.disabled = false;
        };
        reader.readAsDataURL(first);
    }
}

function initCopyButtons() {
    document.querySelectorAll(".copy-btn").forEach((btn) => {
        btn.addEventListener("click", async (e) => {
            e.stopPropagation();
            const targetId = btn.dataset.target;
            const url = targetId
                ? document.getElementById(targetId)?.value
                : btn.dataset.url;

            if (!url) return;

            const copied = await copyText(url);
            if (copied) {
                const label = btn.textContent.trim();
                showToast(label === "BBCode" ? "BBCode скопирован!" : "Скопировано!");
            }
        });
    });
}

function initShareModal() {
    const modal = document.getElementById("shareModal");
    if (!modal) return;

    const urlInput = document.getElementById("shareModalUrl");
    const bbcodeInput = document.getElementById("shareModalBbcode");
    const htmlInput = document.getElementById("shareModalHtml");
    const qrImg = document.getElementById("shareModalQr");
    const nameEl = document.getElementById("shareModalName");

    document.querySelectorAll(".share-qr-btn").forEach((btn) => {
        btn.addEventListener("click", (e) => {
            e.stopPropagation();
            urlInput.value = btn.dataset.url || "";
            bbcodeInput.value = btn.dataset.bbcode || "";
            htmlInput.value = btn.dataset.html || "";
            qrImg.src = btn.dataset.qr || "";
            nameEl.textContent = btn.dataset.name || "";
            modal.hidden = false;
            document.body.classList.add("modal-open");
        });
    });

    modal.querySelectorAll("[data-close-share]").forEach((el) => {
        el.addEventListener("click", closeShareModal);
    });

    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && !modal.hidden) {
            closeShareModal();
        }
    });

    function closeShareModal() {
        modal.hidden = true;
        document.body.classList.remove("modal-open");
    }
}

async function copyText(text) {
    try {
        await navigator.clipboard.writeText(text);
        return true;
    } catch {
        const input = document.createElement("input");
        input.value = text;
        document.body.appendChild(input);
        input.select();
        const ok = document.execCommand("copy");
        document.body.removeChild(input);
        return ok;
    }
}

function showToast(message) {
    const existing = document.querySelector(".toast");
    if (existing) existing.remove();

    const toast = document.createElement("div");
    toast.className = "toast";
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2500);
}