import products from '/data.js';

const ITEMS_PER_PAGE = 20;
let currentPage = 1;
let activeCategories = new Set(['All']);
let visibleProducts = products;
let searchKeyword = '';

const VISIBILITY_CONFIG = {
    showUnlisted: false, // 🔥 미판매 노출 여부
    showSold: true, // 🔥 판매완료 노출 여부
};

const STATUS_META = {
    미판매: {
        selectable: false,
        defaultVisible: false,
        soldOut: false,
    },
    판매예정: {
        selectable: true,
        defaultVisible: true,
        soldOut: false,
    },
    판매중: {
        selectable: true,
        defaultVisible: true,
        soldOut: false,
    },
    판매완료: {
        selectable: true,
        defaultVisible: false,
        soldOut: true,
    },
};

const STATUS_FILTERS = [
    {
        key: '판매중',
        label: '판매중',
        defaultActive: true,
        visible: true,
    },
    {
        key: '판매예정',
        label: '판매 예정',
        defaultActive: true,
        visible: true,
    },
    {
        key: '미판매',
        label: '미판매',
        defaultActive: false,
        visible: VISIBILITY_CONFIG.showUnlisted,
    },
    {
        key: '판매완료',
        label: '판매완료',
        defaultActive: false,
        visible: VISIBILITY_CONFIG.showSold,
    },
];

const STATUS_ORDER = {
    판매중: 0,
    판매예정: 1,
    미판매: 2,
    판매완료: 3, // 🔥 항상 맨 뒤
};

const STATUS_COLOR = {
    판매중: 'bg-primary/10 text-primary border-primary/30',
    판매예정: 'bg-amber-400/10 text-amber-600 border-amber-400/30',
    판매완료: 'bg-slate-400/10 text-slate-500 border-slate-400/30',
    미판매: 'bg-slate-200/10 text-slate-400 border-slate-300/30',
};

let activeStatuses = new Set(
    Object.entries(STATUS_META)
        .filter(([_, meta]) => meta.defaultVisible)
        .map(([status]) => status),
);

function getStatusChipClass(status, isActive) {
    const base = STATUS_COLOR[status] ?? '';

    if (isActive) {
        return `
          ${base}
          opacity-100
          shadow-sm
        `;
    }

    // 🔥 비활성
    return `
      bg-slate-50
      text-slate-400
      border-slate-200
      opacity-30
      grayscale
      hover:opacity-50
    `;
}

function renderStatusChips() {
    const container = document.getElementById('status-chips');
    if (!container) return;

    container.innerHTML = '';

    STATUS_FILTERS.filter((f) => f.visible).forEach(({ key, label }) => {
        const isActive = activeStatuses.has(key);

        const chip = document.createElement('button');
        chip.className = `
          status-chip
          px-4 py-2
          rounded-full
          text-sm font-medium
          transition-all duration-200
          border
          ${getStatusChipClass(key, isActive)}
        `;

        chip.textContent = label;
        chip.onclick = () => toggleStatusFilter(key);

        container.appendChild(chip);
    });
}

function toggleStatusFilter(status) {
    if (activeStatuses.has(status)) {
        activeStatuses.delete(status);
    } else {
        activeStatuses.add(status);
    }

    // 최소 1개는 유지
    if (activeStatuses.size === 0) {
        STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => activeStatuses.add(f.key));
    }

    applyFilters();
    renderStatusChips();
}

const searchInput = document.getElementById('search-input');

if (searchInput) {
    searchInput.addEventListener('input', (e) => {
        searchKeyword = e.target.value.trim().toLowerCase();
        applyFilters();
    });
}

function applyFilters() {
    currentPage = 1;

    visibleProducts = products
        .filter((product) => {
            // 🔒 미판매 강제 차단
            if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) {
                return false;
            }

            // 🔒 판매완료 기본 숨김
            if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) {
                return false;
            }

            const statusMatch = activeStatuses.has(product.status);
            const categoryMatch = activeCategories.has('All') || activeCategories.has(product.category);
            const searchMatch = searchKeyword === '' || product.title.toLowerCase().includes(searchKeyword);

            return statusMatch && categoryMatch && searchMatch;
        })
        // 🔥 여기서 정렬
        .sort((a, b) => {
            const aOrder = STATUS_ORDER[a.status] ?? 999;
            const bOrder = STATUS_ORDER[b.status] ?? 999;
            return aOrder - bOrder;
        });

    renderProducts(currentPage);
}

/**
 * 1. 상품 목록 렌더링
 */
export function renderProducts(page) {
    const grid = document.getElementById('product-grid');
    if (!grid) return;
    grid.innerHTML = '';

    const startIndex = (page - 1) * ITEMS_PER_PAGE;
    const pagedProducts = visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);

    pagedProducts.forEach((product) => {
        const isSold = STATUS_META[product.status]?.soldOut === true;
        const cardHtml = `
            <div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal(${product.id})">
                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
                    <div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
                         style="background-image: url('${product.images[0]}')"></div>
                    <div class="absolute top-3 left-3">
                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
                            ${product.status}
                        </span>
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <div class="flex justify-between items-start">
                        <h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
                        <p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
                    </div>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
                </div>
            </div>
        `;
        grid.insertAdjacentHTML('beforeend', cardHtml);
    });

    renderPagination();
}

/**
 * 2. 모달 열기 및 데이터 채우기
 */
window.openModal = (id) => {
    const product = products.find((p) => p.id === id);
    if (!product) return;

    const modal = document.getElementById('product-modal');
    const images = product.images;

    // 무한 루프를 위해 처음과 끝에 클론 추가 [마지막 이미지, ...원본 이미지..., 첫 이미지]
    const loopImages = [images[images.length - 1], ...images, images[0]];

    const mainImagesHtml = loopImages
        .map(
            (img) => `
        <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4 select-none">
            <img src="${img}" draggable="false" class="max-w-full max-h-full object-contain pointer-events-none shadow-sm rounded-lg">
        </div>
    `,
        )
        .join('');

    // 2. 사이드 썸네일 동적 생성
    const thumbnailsHtml = product.images
        .map(
            (img, idx) => `
        <div onclick="scrollToImage(${idx})" 
             class="modal-thumb-item size-16 rounded-lg border-2 ${idx === 0 ? 'border-primary' : 'border-transparent'} 
                    bg-cover bg-center overflow-hidden cursor-pointer ${idx === 0 ? 'opacity-100' : 'opacity-70'} 
                    hover:opacity-100 transition-all flex-shrink-0" 
             style="background-image: url('${img}');"></div>
    `,
        )
        .join('');

    // 3. 페이지네이션 도트 동적 생성
    const dotsHtml = product.images
        .map(
            (_, idx) => `
        <div class="modal-dot-item ${idx === 0 ? 'w-4 bg-primary' : 'w-2 bg-gray-300 dark:bg-gray-700'} h-2 rounded-full transition-all"></div>
    `,
        )
        .join('');

    const customTagElement = document.getElementById('modal-custom-tag');
    const tagText = product.customTag;

    if (tagText && tagText.trim() !== '') {
        customTagElement.textContent = tagText;
        customTagElement.classList.remove('hidden');

        // 키워드별 색상 스타일 정의
        const tagStyles = {
            완전생산한정판: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
            특전포함: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
            미개봉: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
            무료배송: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
        };

        // 기본 스타일 (정의되지 않은 텍스트일 경우)
        const defaultStyle = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';

        // 기존 스타일 클래스 초기화 후 적용
        customTagElement.className = `px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ${tagStyles[tagText] || defaultStyle}`;
    } else {
        customTagElement.classList.add('hidden');
    }

    const modalCategory = document.getElementById('modal-category');
    if (modalCategory) {
        modalCategory.textContent = product.category;
    }

    // 2. 상태값 업데이트 (상태에 따른 디자인 변경 포함)
    const modalStatus = document.getElementById('modal-status');
    if (modalStatus) {
        modalStatus.textContent = product.status;

        // 상태별 스타일 정의 (배경색, 글자색)
        const statusStyles = {
            판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
            판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
            판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
            미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
        };

        // 기존 클래스 제거 후 해당 상태의 스타일 추가
        modalStatus.className = 'px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ' + (statusStyles[product.status] || statusStyles['미판매']);
    }

    // HTML 주입
    document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
    document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
    document.getElementById('modal-dots').innerHTML = dotsHtml;

    // 1. 제품 상태 (specs.condition) 업데이트
    const conditionText = product.specs?.condition;
    const isVerified = product.specs?.isVerified;

    const conditionRow = document.getElementById('modal-condition-row');
    const conditionValue = document.getElementById('modal-condition');
    const verifiedIcon = document.getElementById('modal-verified-icon');

    // 1. 그레이드(condition) 값이 있는지 체크하여 라인 노출 결정
    if (conditionText && conditionText.trim() !== '') {
        conditionValue.textContent = conditionText;
        conditionRow.classList.remove('hidden');
        conditionRow.classList.add('flex');

        // 2. 인증 여부에 따라 SVG 아이콘 노출 결정
        if (isVerified) {
            verifiedIcon.classList.remove('hidden');
        } else {
            verifiedIcon.classList.add('hidden');
        }
    } else {
        // 값이 없으면 라인 전체 숨김
        conditionRow.classList.add('hidden');
        conditionRow.classList.remove('flex');
    }

    // 2. 제품 설명 (fullDescription) 업데이트
    const modalDesc = document.getElementById('modal-desc');
    if (modalDesc) {
        const descData = product.fullDescription;

        if (Array.isArray(descData)) {
            // 배열을 <br> 태그로 합쳐서 HTML로 주입
            modalDesc.innerHTML = descData.join('<br>');
        } else {
            modalDesc.textContent = descData || '';
        }
    }

    // 구매일자 처리 (경로 수정: product.specs?.purchaseDate)
    const modalDate = document.getElementById('modal-date');
    const modalDateRow = document.getElementById('modal-date-row');

    // specs 객체 안의 purchaseDate를 가져옴
    const pDate = product.specs?.purchaseDate;

    if (pDate && pDate.trim() !== '' && pDate !== 'null') {
        modalDate.textContent = pDate;
        modalDateRow.classList.remove('hidden');
        modalDateRow.classList.add('flex');
    } else {
        modalDateRow.classList.add('hidden');
        modalDateRow.classList.remove('flex');
    }

    // 텍스트 정보 주입 (ID들 맞춰주세요)
    document.getElementById('modal-title').textContent = product.title;
    document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`;
    // ... 나머지 정보 주입

    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';

    // 드래그 기능 다시 연결
    const container = document.getElementById('modal-main-carousel-container');
    const carousel = document.getElementById('modal-main-carousel');
    carousel.innerHTML = mainImagesHtml;

    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';

    // 초기 위치 설정 (클론된 마지막 이미지 다음인 '진짜 첫 번째' 이미지로 이동)
    // const initialIndex = 1;
    container.style.scrollBehavior = 'auto';
    container.scrollLeft = container.clientWidth;

    // 드래그 및 무한 루프 감시 시작
    initBetterCarousel(container, images.length);
};

function initBetterCarousel(container, originalLength) {
    let isDragging = false;
    let startX = 0;
    let startScroll = 0;
    let startTime = 0;

    const width = () => container.clientWidth;

    container.addEventListener('mousedown', start);
    container.addEventListener('touchstart', start, { passive: true });

    function start(e) {
        isDragging = true;
        startX = e.touches ? e.touches[0].pageX : e.pageX;
        startScroll = container.scrollLeft;
        startTime = Date.now();
    }

    container.addEventListener('mousemove', move);
    container.addEventListener('touchmove', move, { passive: false });

    function move(e) {
        if (!isDragging) return;
        const x = e.touches ? e.touches[0].pageX : e.pageX;
        container.scrollLeft = startScroll - (x - startX);
    }

    container.addEventListener('mouseup', end);
    container.addEventListener('mouseleave', end);
    container.addEventListener('touchend', end);

    function end(e) {
        if (!isDragging) return;
        isDragging = false;

        const delta = container.scrollLeft - startScroll;
        const elapsed = Date.now() - startTime;

        const direction = Math.abs(delta) > width() * 0.1 || elapsed < 200 ? (delta > 0 ? 1 : -1) : 0;

        let index = Math.round(startScroll / width()) + direction;

        container.style.scrollBehavior = 'smooth';
        container.scrollTo({ left: index * width() });

        // 무한 루프 보정
        setTimeout(() => {
            container.style.scrollBehavior = 'auto';
            if (index === 0) {
                container.scrollLeft = width() * originalLength;
            }
            if (index === originalLength + 1) {
                container.scrollLeft = width();
            }
            syncModalUI(originalLength);
        }, 300);
    }
}

/**
 * 이미지 슬라이드와 UI(Dots, Thumbs) 동기화
 */
function syncModalUI(originalLength) {
    const container = document.getElementById('modal-main-carousel-container');
    const index = getRealIndex(container, originalLength);

    document.querySelectorAll('.modal-thumb-item').forEach((t, i) => {
        t.classList.toggle('border-primary', i === index);
        t.classList.toggle('opacity-100', i === index);
        t.classList.toggle('opacity-70', i !== index);
    });

    document.querySelectorAll('.modal-dot-item').forEach((d, i) => {
        d.classList.toggle('bg-primary', i === index);
        d.classList.toggle('w-4', i === index);
        d.classList.toggle('bg-gray-300', i !== index);
        d.classList.toggle('w-2', i !== index);
    });

    ensureThumbnailVisible(index);
}

/**
 * 3. 모달 내 이미지 스크롤 및 UI 동기화
 */
window.scrollToImage = (index) => {
    const container = document.getElementById('modal-main-carousel-container');
    if (!container) return;

    container.scrollTo({
        left: container.clientWidth * (index + 1), // 🔥 중요
        behavior: 'smooth',
    });
};

/**
 * 5. 기타 (페이지네이션, 모달 닫기)
 */
function renderPagination() {
    const container = document.getElementById('pagination');
    if (!container) return;
    const totalPages = Math.ceil(visibleProducts.length / ITEMS_PER_PAGE);

    let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
     stroke="#64748B" stroke-width="3"
     stroke-linecap="round" stroke-linejoin="round"
     class="w-5 h-5">
  <path d="M15 18l-6-6 6-6" />
</svg>
</button>`;
    for (let i = 1; i <= totalPages; i++) {
        html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
    }
    html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
     stroke="#64748B" stroke-width="3"
     stroke-linecap="round" stroke-linejoin="round"
     class="w-5 h-5">
  <path d="M9 18l6-6-6-6" />
</svg>
</button>`;
    container.innerHTML = html;
}

window.changePage = (page) => {
    currentPage = page;
    renderProducts(currentPage);
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

window.closeModal = () => {
    document.getElementById('product-modal').classList.add('hidden');
    document.body.style.overflow = 'auto';
};

// 초기 실행
document.addEventListener('DOMContentLoaded', () => renderProducts(currentPage));

document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return;

    const modal = document.getElementById('product-modal');
    if (!modal || modal.classList.contains('hidden')) return;

    closeModal();
});

const thumbnailContainer = document.getElementById('modal-thumbnails');

function ensureThumbnailVisible(index) {
    const container = document.getElementById('modal-thumbnails');
    if (!container) return;

    const thumbs = container.querySelectorAll('.modal-thumb-item');
    const active = thumbs[index];
    if (!active) return;

    const cRect = container.getBoundingClientRect();
    const tRect = active.getBoundingClientRect();

    const isVisible = tRect.top >= cRect.top && tRect.bottom <= cRect.bottom;

    if (!isVisible) {
        active.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
        });
    }
}

function getRealIndex(container, originalLength) {
    let rawIndex = Math.round(container.scrollLeft / container.clientWidth);
    let index = rawIndex - 1; // 클론 보정

    if (index < 0) index = originalLength - 1;
    if (index >= originalLength) index = 0;

    return index;
}

// 카테고리 필터
function getCategories(products) {
    return ['All', ...new Set(products.map((p) => p.category))];
}

function renderCategoryChips(products) {
    const container = document.getElementById('filter-chips');
    if (!container) return;

    const categories = ['All', ...new Set(products.map((p) => p.category))];

    container.innerHTML = '';

    categories.forEach((cat) => {
        const isActive = activeCategories.has(cat);

        const chip = document.createElement('button');
        chip.className = `
      filter-chip px-4 py-2 rounded-full text-sm font-medium transition
      border
      ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'}
    `;
        chip.textContent = cat;
        chip.dataset.category = cat;

        chip.onclick = () => {
            toggleCategory(cat);
        };

        container.appendChild(chip);
    });
}

function toggleCategory(category) {
    if (category === 'All') {
        activeCategories.clear();
        activeCategories.add('All');
    } else {
        activeCategories.delete('All');
        activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category);

        if (activeCategories.size === 0) {
            activeCategories.add('All');
        }
    }

    renderCategoryChips(products);
    applyFilters();
}

function bindCategoryFilter(products) {
    const chips = document.querySelectorAll('.filter-chip');

    chips.forEach((chip) => {
        chip.addEventListener('click', () => {
            const category = chip.dataset.category;

            if (category === 'All') {
                activeCategories.clear();
                activeCategories.add('All');
            } else {
                activeCategories.delete('All');

                if (activeCategories.has(category)) {
                    activeCategories.delete(category);
                } else {
                    activeCategories.add(category);
                }

                // 아무 것도 없으면 All로 복귀
                if (activeCategories.size === 0) {
                    activeCategories.add('All');
                }
            }

            applyFilters();
        });
    });
}

// 카테고리 필터
renderCategoryChips(products);
bindCategoryFilter(products);
// updateChipUI();

// 상태 필터 (정책 기반)
renderStatusChips();

// 🔥 최초 필터 적용 (이게 첫 렌더)
applyFilters();