// script.js

document.addEventListener('DOMContentLoaded', () => {
    const imageInput = document.getElementById('imageInput');  // 파일 입력 요소를 가져옴
    const addImageButton = document.getElementById('addImageButton');  // 이미지 추가 버튼 요소를 가져옴
    const gallery = document.getElementById('gallery');  // 갤러리 요소를 가져옴
    const fileNameSpan = document.getElementById('fileName');  // 파일명을 표시할 요소를 가져옴

    // 파일 입력 변화 이벤트 리스너
    imageInput.addEventListener('change', () => {
        const file = imageInput.files[0];  // 선택된 파일을 가져옴
        if (file) {
            fileNameSpan.textContent = file.name;  // 파일명이 존재하면 파일명을 표시
        } else {
            fileNameSpan.textContent = '';  // 파일이 없으면 파일명을 빈 문자열로 설정
        }
    });

    // 이미지 추가 버튼 클릭 이벤트 리스너
    addImageButton.addEventListener('click', () => {
        const file = imageInput.files[0];  // 파일 입력의 첫 번째 파일을 가져옴
        if (file) {
            const reader = new FileReader();  // FileReader 객체 생성
            reader.onload = function(e) {
                const imgElement = document.createElement('img');  // 새로운 img 요소 생성
                imgElement.src = e.target.result;  // FileReader가 읽은 파일을 이미지 소스로 설정
                imgElement.alt = 'Uploaded Image';  // 이미지 대체 텍스트 설정

                // 이미지 분석 및 배경색 결정 로직
                getAverageColor(imgElement).then(color => {
                    document.body.style.backgroundColor = color;  // 계산된 평균 색상으로 배경색 설정
                }).catch(error => {
                    console.error('Error calculating average color:', error);  // 오류 발생 시 콘솔에 로그 출력
                });

                const deleteButton = document.createElement('button');  // 삭제 버튼 생성
                deleteButton.classList.add('delete-button');  // 삭제 버튼에 클래스 추가
                deleteButton.innerText = 'Delete';  // 삭제 버튼 텍스트 설정
                deleteButton.addEventListener('click', () => {
                    galleryItem.remove();  // 삭제 버튼 클릭 시 갤러리 항목 제거
                });

                const galleryItem = document.createElement('div');  // 새로운 갤러리 항목 div 생성
                galleryItem.classList.add('gallery-item');  // 갤러리 항목에 클래스 추가
                galleryItem.appendChild(imgElement);  // 갤러리 항목에 이미지 추가
                galleryItem.appendChild(deleteButton);  // 갤러리 항목에 삭제 버튼 추가
                gallery.appendChild(galleryItem);  // 갤러리에 갤러리 항목 추가

                imgElement.addEventListener('click', () => {
                    openLightbox(imgElement.src);  // 이미지 클릭 시 라이트박스 열기
                });

                // 파일 선택 후 파일명 초기화
                imageInput.value = '';  // 파일 입력값 초기화
                fileNameSpan.textContent = '';  // 파일명 초기화
            };
            reader.readAsDataURL(file);  // 파일을 DataURL로 읽음
        }
    });

    // 이미지 클릭 시 라이트박스 열기
    function openLightbox(src) {
        const lightbox = document.createElement('div');  // 새로운 div 요소 생성
        lightbox.id = 'lightbox';  // 라이트박스의 id 설정
        lightbox.style.position = 'fixed';  // 고정 위치 설정
        lightbox.style.top = '0';  // 상단 위치 설정
        lightbox.style.left = '0';  // 좌측 위치 설정
        lightbox.style.width = '100%';  // 너비 100% 설정
        lightbox.style.height = '100%';  // 높이 100% 설정
        lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';  // 반투명 배경 설정
        lightbox.style.display = 'flex';  // flexbox 설정
        lightbox.style.alignItems = 'center';  // 수직 정렬 설정
        lightbox.style.justifyContent = 'center';  // 수평 정렬 설정
        lightbox.style.zIndex = '1000';  // z-index 설정
        lightbox.innerHTML = `<img src="${src}" style="max-width: 90%; max-height: 90%;">`;  // 이미지 요소 추가
        document.body.appendChild(lightbox);  // 라이트박스를 body에 추가

        lightbox.addEventListener('click', () => {
            lightbox.remove();  // 라이트박스 클릭 시 제거
        });
    }

    // 이미지 주요 색상 추출 함수
    function getAverageColor(imgElement) {
        return new Promise((resolve, reject) => {
            const canvas = document.createElement('canvas');  // 새로운 캔버스 요소 생성
            const ctx = canvas.getContext('2d');  // 캔버스의 2D 컨텍스트 가져옴
            canvas.width = imgElement.width;  // 캔버스 너비 설정
            canvas.height = imgElement.height;  // 캔버스 높이 설정
            ctx.drawImage(imgElement, 0, 0);  // 캔버스에 이미지 그리기

            let r = 0, g = 0, b = 0;  // 색상 초기화
            let count = 0;  // 픽셀 수 초기화

            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);  // 이미지 데이터 가져옴
            const data = imageData.data;  // 이미지 데이터의 픽셀 데이터 가져옴

            for (let i = 0; i < data.length; i += 4) {  // 픽셀 데이터를 순회
                r += data[i];  // 빨강 값 더하기
                g += data[i + 1];  // 초록 값 더하기
                b += data[i + 2];  // 파랑 값 더하기
                count++;  // 픽셀 수 증가
            }

            r = Math.floor(r / count);  // 평균 빨강 값 계산
            g = Math.floor(g / count);  // 평균 초록 값 계산
            b = Math.floor(b / count);  // 평균 파랑 값 계산

            const rgbColor = `rgb(${r}, ${g}, ${b})`;  // rgb 문자열 생성
            resolve(rgbColor);  // 평균 색상 반환
        });
    }
});