document.addEventListener('DOMContentLoaded', function() {
    const diaryForm = document.querySelector('form');
    const keywordsInput = document.querySelector('textarea');
    const resultDiv = document.querySelector('#result');
    const generateButton = document.querySelector('button');
    const loadingContainer = document.querySelector('#loading-container');
    const progressBar = document.querySelector('.progress-bar');

    diaryForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const keywords = keywordsInput.value.trim();
        if (!keywords) {
            resultDiv.textContent = "키워드를 입력해주세요";
            return;
        }

        try {
            generateButton.disabled = true;
            resultDiv.textContent = "";
            loadingContainer.style.display = 'block';
            progressBar.style.width = '0%';
            
            // 프로그레스 바 애니메이션 시작 (60초에서 30초로 변경)
            progressBar.style.animation = 'progress 30s linear';
            
            const API_URL = 'http://your-ec2-instance-ip:5000';

            const response = await fetch(`${API_URL}/api/generate-diary`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    keywords: keywords
                })
            });

            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`서버 응답 오류: ${response.status}`);
            }

            const data = await response.json();
            
            if (data.error) {
                resultDiv.textContent = `오류: ${data.error}`;
            } else {
                resultDiv.textContent = data.diary || '일기 생성에 실패했습니다.';
            }
        } catch (error) {
            resultDiv.textContent = `오류가 발생했습니다: ${error.message}`;
        } finally {
            generateButton.disabled = false;
            loadingContainer.style.display = 'none';
            progressBar.style.animation = 'none';
        }
    });
});