/** 진입점: 이벤트 바인딩·초기 렌더·URL 모달 처리 */
import { state, productsData, saveSelection } from './state.js';
import { applyFilters, renderStatusChips, renderCategoryChips, bindCategoryFilter, renderTagChips } from './filters.js';
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
import { renderProducts, changePage } from './productList.js';
import { openModal, closeModal } from './modal.js';
import { scrollToImage } from './carousel.js';

console.log('Total products loaded:', productsData.length);

let lastThumbnailIndex = -1;

// HTML onclick에서 사용하기 위한 전역 등록
window.openModal = openModal;
window.closeModal = closeModal;
window.changePage = changePage;
window.scrollToImage = scrollToImage;

let fadeTimers = {};

// 뷰 전환 이벤트
// 뷰 전환 이벤트 바인딩
document.getElementById('view-grid').onclick = () => {
    state.viewMode = 'grid';
    updateViewButtons();
    renderProducts(state.currentPage);
};
document.getElementById('view-table').onclick = () => {
    state.viewMode = 'table';
    updateViewButtons();
    renderProducts(state.currentPage);
};

function updateViewButtons() {
    const isGrid = state.viewMode === 'grid';
    const gridBtn = document.getElementById('view-grid');
    const tableBtn = document.getElementById('view-table');

    if (!gridBtn || !tableBtn) return;

    const active = ['bg-white', 'dark:bg-slate-700', 'shadow-sm', 'text-primary'];
    const inactive = ['text-slate-400'];

    if (isGrid) {
        gridBtn.classList.add(...active);
        gridBtn.classList.remove(...inactive);
        tableBtn.classList.add(...inactive);
        tableBtn.classList.remove(...active);
    } else {
        tableBtn.classList.add(...active);
        tableBtn.classList.remove(...inactive);
        gridBtn.classList.add(...inactive);
        gridBtn.classList.remove(...active);
    }
}

// [전역 함수] 체크박스 토글 및 합계 업데이트
window.toggleSelectItem = (id) => {
    if (state.selectedIds.has(id)) state.selectedIds.delete(id);
    else state.selectedIds.add(id);

    updateSummary();
};

/** 선택 요약 바 업데이트 (모바일 레이아웃 대응) */
export function updateSummary() {
    const summaryBar = document.getElementById('selection-summary');
    const countEl = document.getElementById('selected-count');
    const priceEl = document.getElementById('selected-total-price');

    if (state.selectedIds.size > 0) {
        summaryBar.classList.remove('hidden');
        summaryBar.classList.add('flex'); // flex-wrap은 HTML에 이미 적용됨
        countEl.textContent = state.selectedIds.size;

        const total = Array.from(state.selectedIds).reduce((sum, id) => {
            const p = productsData.find((item) => item.id === id);
            return sum + (p ? p.price : 0);
        }, 0);
        priceEl.textContent = `₩${total.toLocaleString()}`;
    } else {
        summaryBar.classList.add('hidden');
        summaryBar.classList.remove('flex');
    }
}

// 검색 입력
const searchInput = document.getElementById('search-input');
if (searchInput) {
    searchInput.addEventListener('input', (e) => {
        state.searchKeyword = e.target.value.trim().toLowerCase();
        applyFilters();
    });
}

// Escape로 모달 닫기
document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return;
    const modal = document.getElementById('product-modal');
    if (!modal || modal.classList.contains('hidden')) return;
    closeModal();
});

function checkUrlAndOpenModal() {
    const params = new URLSearchParams(window.location.search);
    const productId = params.get('id');
    if (productId) {
        const product = productsData.find((p) => String(p.id) === productId);
        if (product) {
            setTimeout(() => openModal(product.id), 100);
        }
    }
}

// 초기 테마 설정 확인
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');

// 1. 현재 테마 상태에 따라 아이콘 표시/숨김 처리
function updateIcons() {
    if (document.documentElement.classList.contains('dark')) {
        themeToggleLightIcon.classList.remove('hidden');
        themeToggleDarkIcon.classList.add('hidden');
    } else {
        themeToggleDarkIcon.classList.remove('hidden');
        themeToggleLightIcon.classList.add('hidden');
    }
}

// 2. 초기 로드 시 설정 (localStorage 또는 시스템 설정 확인)
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}
updateIcons();

// 3. 버튼 클릭 이벤트
themeToggleBtn.addEventListener('click', function () {
    // 테마 토글
    if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
    } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
    }
    updateIcons();
});

document.addEventListener('DOMContentLoaded', () => {
    console.log('Total products loaded:', productsData.length);

    // 1. UI 컴포넌트 렌더링
    renderCategoryChips(productsData);
    bindCategoryFilter(productsData);
    renderStatusChips();
    renderTagChips();

    // 2. 초기 데이터 계산 및 첫 페이지 렌더링 (순서 중요)
    applyFilters();
    renderProducts(state.currentPage);
    updateViewButtons();
    updateSummary();

    // 테마 설정 (기존 로직 유지)
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
    updateIcons();

    // 3. 태그 토글 로직 (SVG 회전 포함)
    const toggleBtn = document.getElementById('toggle-tags');
    const tagContainer = document.getElementById('tag-container');
    if (toggleBtn && tagContainer) {
        toggleBtn.onclick = () => {
            const isExpanded = tagContainer.classList.contains('expanded');
            const svgIcon = toggleBtn.querySelector('svg');
            if (isExpanded) {
                tagContainer.style.maxHeight = tagContainer.scrollHeight + 'px';
                requestAnimationFrame(() => {
                    tagContainer.style.maxHeight = '34px';
                    tagContainer.classList.remove('expanded');
                    if (svgIcon) svgIcon.style.transform = 'rotate(0deg)';
                });
            } else {
                tagContainer.style.maxHeight = tagContainer.scrollHeight + 'px';
                tagContainer.classList.add('expanded');
                if (svgIcon) svgIcon.style.transform = 'rotate(180deg)';
                setTimeout(() => {
                    if (tagContainer.classList.contains('expanded')) tagContainer.style.maxHeight = 'none';
                }, 300);
            }
        };
    }
});

// 데이터용 새 ID 생성기
const newId = Math.random().toString(36).substring(2, 10);
console.log(`%c[NUMBER]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');

/** 현재 페이지의 '선택 가능한' 항목들만 선택/해제 */
window.toggleSelectAll = (isChecked) => {
    const startIndex = (state.currentPage - 1) * ITEMS_PER_PAGE;
    const currentPageProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);

    currentPageProducts.forEach((p) => {
        const isSelectable = STATUS_META[p.status]?.selectable !== false;
        if (isSelectable) {
            if (isChecked) state.selectedIds.add(p.id);
            else state.selectedIds.delete(p.id);
        }
    });

    saveSelection(); // 변경사항 저장
    updateSummary();
    renderProducts(state.currentPage);
};

/** 선택 리셋 */
// [수정] 기존 resetSelection을 모달 오픈으로 변경
window.resetSelection = () => {
    const modal = document.getElementById('selection-reset-modal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
};

// [추가] 모달 닫기
window.closeSelectionResetModal = () => {
    const modal = document.getElementById('selection-reset-modal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
};

// [추가] 실제 초기화 실행 (기존 로직 그대로)
window.confirmSelectionReset = () => {
    state.selectedIds.clear();
    saveSelection(); // 스토리지 동기화
    updateSummary();
    renderProducts(state.currentPage);
    window.closeSelectionResetModal();
};

/** 선택 토글 시 스토리지 저장 추가 */
window.toggleSelectItem = (id) => {
    const product = productsData.find((p) => p.id === id);
    if (!product || STATUS_META[product.status]?.selectable === false) return;

    if (state.selectedIds.has(id)) state.selectedIds.delete(id);
    else state.selectedIds.add(id);

    saveSelection(); // 변경사항 저장
    updateSummary();
};

/** 선택된 항목들을 CSV 파일로 내보내기 */
window.exportToExcel = () => {
    if (state.selectedIds.size === 0) {
        alert('내보낼 상품을 선택해 주세요.');
        return;
    }

    // 1. 선택된 데이터 추출 및 계산
    let totalCount = 0;
    let totalPrice = 0;

    const rows = Array.from(state.selectedIds)
        .map((id) => {
            const p = productsData.find((item) => item.id === id);
            if (p) {
                totalCount += 1;
                totalPrice += p.price;
                return [p.id, `"${p.title.replace(/"/g, '""')}"`, p.category, p.price, p.status, `"${p.description.replace(/"/g, '""')}"`];
            }
            return null;
        })
        .filter((row) => row !== null);

    // 2. 헤더 및 푸터(합계) 설정
    const headers = ['상품 ID', '상품명', '카테고리', '가격', '상태', '상세설명'];

    // 영수증 느낌을 위한 하단 합계 줄
    const footerEmpty = ['', '', '', '', '', '']; // 빈 줄
    const footerTotal = ['TOTAL', `"총 ${totalCount}건의 항목"`, '', totalPrice, '', `"발행일: ${new Date().toLocaleString()}"`];

    // 3. CSV 포맷 생성 (한글 깨짐 방지 BOM 추가)
    const csvContent =
        '\uFEFF' +
        [
            headers.join(','),
            ...rows.map((row) => row.join(',')),
            footerEmpty.join(','), // 간격 조절용 빈 줄
            footerTotal.join(','), // 합계 라인
        ].join('\n');

    // 4. 다운로드 실행
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');

    const timestamp = new Date().toISOString().split('T')[0];
    link.setAttribute('href', url);
    link.setAttribute('download', `inventory_receipt_${timestamp}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

let currentHoverIndex = -1;

window.handleThumbnailHover = (e, productId) => {
    if (window.isDragging) return;

    const product = productsData.find((p) => p.id === productId);
    if (!product || !product.images || product.images.length <= 1) return;

    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    let index = Math.floor((x / rect.width) * product.images.length);
    index = Math.max(0, Math.min(product.images.length - 1, index));

    if (currentHoverIndex !== index) {
        currentHoverIndex = index;
        updateThumbnailWithFade(productId, product.images[index], index);
    }
};

/** * 썸네일을 즉시 업데이트하는 함수 
 * 페이드 애니메이션을 제거하여 반응성을 높이고 깜빡임을 방지합니다.
 */
function updateThumbnailWithFade(productId, newImageUrl, index) {
    const mainThumb = document.getElementById(`thumb-${productId}`);
    const fadeThumb = document.getElementById(`thumb-fade-${productId}`);
    const indicator = document.getElementById(`indicator-${productId}`);

    if (!mainThumb) return;

    // 1. 기존 페이드 타이머가 있다면 즉시 제거 (충돌 방지)
    if (fadeTimers[productId]) {
        clearTimeout(fadeTimers[productId]);
        delete fadeTimers[productId];
    }

    // 2. 페이드 레이어(뒷배경)는 즉시 숨기고 메인 이미지만 즉시 교체
    // transition 없이 즉시 교체되도록 인라인 스타일로 제어합니다.
    if (fadeThumb) {
        fadeThumb.style.transition = 'none';
        fadeThumb.style.opacity = '0';
    }
    
    mainThumb.style.backgroundImage = `url("${newImageUrl}")`;

    // 3. 인디케이터 UI 업데이트
    if (indicator) updateIndicatorUI(indicator, index);
}

window.handleThumbnailLeave = (productId) => {
    currentHoverIndex = -1; // 인덱스 초기화

    resetThumbnail(productId);
};

/** * 마우스가 나갔을 때 썸네일을 첫 번째 이미지로 복구하는 함수
 */
function resetThumbnail(productId) {
    if (fadeTimers[productId]) {
        clearTimeout(fadeTimers[productId]);
        delete fadeTimers[productId];
    }

    const product = productsData.find((p) => p.id === productId);
    if (!product) return;

    const mainThumb = document.getElementById(`thumb-${productId}`);
    const fadeThumb = document.getElementById(`thumb-fade-${productId}`);
    const indicator = document.getElementById(`indicator-${productId}`);

    if (mainThumb) {
        const firstImgUrl = `url("${product.images[0]}")`;
        
        // 즉시 첫 번째 이미지로 복구
        mainThumb.style.backgroundImage = firstImgUrl;
        
        if (fadeThumb) {
            fadeThumb.style.transition = 'none';
            fadeThumb.style.opacity = '0';
            fadeThumb.style.backgroundImage = firstImgUrl;
        }
    }

    if (indicator) updateIndicatorUI(indicator, 0);
}

// 중복 코드를 방지하기 위한 UI 업데이트 헬퍼
function updateIndicatorUI(indicator, activeIndex) {
    Array.from(indicator.children).forEach((dot, i) => {
        const isActive = i === activeIndex;
        dot.style.backgroundColor = isActive ? 'white' : 'rgba(255, 255, 255, 0.4)';
        dot.style.transform = isActive ? 'scale(1.2)' : 'scale(1)';
        dot.style.opacity = isActive ? '1' : '0.7';
    });
}

// 터치 상태 관리를 위한 변수
let touchStartX = 0;
let isDragging = false;

window.handleTouchStart = (e) => {
    touchStartX = e.touches[0].clientX;
    isDragging = false;
};

window.handleTouchMove = (e, productId) => {
    const product = productsData.find((p) => p.id === productId);
    if (!product || !product.images || product.images.length <= 1) return;

    const cardElement = e.currentTarget;
    const cardWidth = cardElement.offsetWidth;
    const touchCurrentX = e.touches[0].clientX;
    const diffX = touchStartX - touchCurrentX;

    if (Math.abs(diffX) > 10) {
        isDragging = true;
        if (e.cancelable) e.preventDefault();
    }

    if (isDragging) {
        const product = productsData.find((p) => p.id === productId);
        const step = cardWidth / product.images.length;
        let index = Math.floor(Math.abs(diffX) / step);
        index = Math.max(0, Math.min(product.images.length - 1, index));

        // [수정 핵심] 인덱스가 이전과 같으면 함수를 종료하여 불필요한 리렌더링 방지
        if (lastThumbnailIndex === index) return;
        lastThumbnailIndex = index;

        const mainThumb = document.getElementById(`thumb-${productId}`);
        const fadeThumb = document.getElementById(`thumb-fade-${productId}`);

        // [수정 핵심] 인덱스가 실제로 변했을 때만 스타일을 바꿉니다.
        if (mainThumb && lastThumbnailIndex !== index) {
            lastThumbnailIndex = index; // 새 인덱스 저장

            mainThumb.style.backgroundImage = `url("${product.images[index]}")`;
            if (fadeThumb) fadeThumb.style.opacity = '0';
            updateIndicator(productId, index);
        }
    }
};

window.handleTouchEnd = (e, productId) => {
    if (e.cancelable) e.preventDefault();

    if (!isDragging) {
        window.openModal(productId);
    } else {
        resetThumbnail(productId); // 드래그 종료 시 확실한 리셋
    }
    lastThumbnailIndex = -1; // 초기화
    isDragging = false;
};

// 인디케이터 업데이트 헬퍼 함수
function updateIndicator(productId, index) {
    const indicator = document.getElementById(`indicator-${productId}`);
    if (indicator) {
        Array.from(indicator.children).forEach((dot, i) => {
            dot.style.backgroundColor = i === index ? 'white' : 'rgba(255, 255, 255, 0.4)';
            dot.style.opacity = i === index ? '1' : '0.7';
        });
    }
}
