const copyBtn = document.getElementById('copyBtn');
const copyFeedback = document.getElementById('copyFeedback');
const transcriptText = document.getElementById('transcriptText');
const dropZone = document.getElementById('dropZone');
const attachBtn = document.getElementById('attachBtn');
const transcriptArea = document.getElementById('transcriptArea');

// Copy button functionality
copyBtn.addEventListener('click', async () => {
    if (transcriptText.value) {
        await navigator.clipboard.writeText(transcriptText.value);
        copyFeedback.classList.add('show');
        setTimeout(() => {
            copyFeedback.classList.remove('show');
        }, 2000);
    }
});

// Prevent defaults for drag events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

// Drag over effects
['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.add('drag-over');
    });
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.remove('drag-over');
    });
});

// Handle dropped files
dropZone.addEventListener('drop', (e) => {
    const files = e.dataTransfer.files;
    if (files.length) {
        handleFile(files[0]);
    }
});

// Attach button click
attachBtn.addEventListener('click', () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'audio/*';
    input.onchange = (e) => {
        if (e.target.files.length) {
            handleFile(e.target.files[0]);
        }
    };
    input.click();
});

// Click on drop zone (except attach button)
dropZone.addEventListener('click', (e) => {
    if (e.target !== attachBtn && !attachBtn.contains(e.target)) {
        attachBtn.click();
    }
});

// Handle file upload and transcription
async function handleFile(file) {
    console.log('файл получен:', file.name);
    
    dropZone.style.display = 'none';
    transcriptArea.classList.add('active');
    transcriptText.value = 'расшифровка...\n\nэто занимает несколько секунд';
    
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        const response = await fetch('/transcribe', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.status === 'ok') {
            transcriptText.value = data.text;
        } else {
            transcriptText.value = 'Ошибка: ' + data.text;
        }
    } catch (error) {
        transcriptText.value = 'Ошибка соединения с сервером';
        console.error('Fetch error:', error);
    }
}