document.addEventListener('DOMContentLoaded', () => {
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('file-input');
    const preview = document.getElementById('preview');
    const imagePreview = document.getElementById('image-preview');
    const result = document.getElementById('result');
    const caption = document.getElementById('caption');
    const loading = document.getElementById('loading');

    // Kliknutí na oblast nahrávání otevře dialog pro výběr souboru
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });

    // Přetáhnutí souboru
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('bg-gray-100');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('bg-gray-100');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('bg-gray-100');
        if (e.dataTransfer.files.length) {
            handleFile(e.dataTransfer.files[0]);
        }
    });

    // Výběr souboru pomocí dialogu
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            handleFile(fileInput.files[0]);
        }
    });

    // Funkce pro zpracování souboru
    function handleFile(file) {
        if (!file.type.match('image.*')) {
            alert('Prosím, vyberte obrázek.');
            return;
        }

        // Zobrazit náhled obrázku
        const reader = new FileReader();
        reader.onload = (e) => {
            imagePreview.src = e.target.result;
            preview.classList.remove('hidden');
            result.classList.add('hidden');
            loading.classList.add('hidden');
        };
        reader.readAsDataURL(file);

        // Odeslat obrázek na server
        uploadImage(file);
    }

    // Funkce pro odeslání obrázku na server
    async function uploadImage(file) {
        const formData = new FormData();
        formData.append('image', file);

        loading.classList.remove('hidden');
        result.classList.add('hidden');

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

            if (!response.ok) {
                throw new Error('Chyba při zpracování obrázku');
            }

            const data = await response.json();
            caption.textContent = data.caption;
            result.classList.remove('hidden');
        } catch (error) {
            console.error('Chyba:', error);
            alert('Chyba při zpracování obrázku. Zkuste to znovu.');
        } finally {
            loading.classList.add('hidden');
        }
    }
});