zenn.inventory/scripts/filters.js

/** 상태·카테고리·검색 필터 로직 및 UI */
import { state, productsData } from './state.js';
import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG, SORT_CONFIG } from './config.js';
import { renderProducts } from './productList.js';

// 1 & 2. 칩 사이즈 통일 및 미판매 활성화 스타일 강화
function getStatusChipClass(status, isActive) {
    // 1. 태그 칩과 동일한 사이즈 (텍스트 크기 포함)
    const commonSize = 'min-w-[70px] justify-center px-3 py-1 text-[11px] md:text-xs';
    const base = STATUS_COLOR[status] ?? '';

    if (isActive) {
        if (status === '미판매') {
            // 2. 미판매 활성화 시 특수 컬러 (인디고)
            return `${commonSize} bg-indigo-600 text-white border-indigo-700 shadow-md ring-1 ring-indigo-300 opacity-100`;
        }
        return `${commonSize} ${base} opacity-100 shadow-sm ring-1 ring-offset-1 ring-slate-200 dark:ring-slate-700`;
    }

    return `${commonSize} bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale`;
}

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

    STATUS_FILTERS.forEach(({ key, label }) => {
        const isActive = state.activeStatuses.has(key);
        const chip = document.createElement('button');

        // 칩 공통 스타일 적용
        chip.className = `status-chip flex items-center rounded-full font-bold transition-all duration-200 border ${getStatusChipClass(key, isActive)}`;
        chip.textContent = label;

        chip.onclick = () => {
            if (state.activeStatuses.has(key)) state.activeStatuses.delete(key);
            else state.activeStatuses.add(key);
            renderStatusChips();
            applyFilters();
        };
        container.appendChild(chip);
    });
}

function toggleStatusFilter(status) {
    if (state.activeStatuses.has(status)) {
        state.activeStatuses.delete(status);
    } else {
        state.activeStatuses.add(status);
    }
    if (state.activeStatuses.size === 0) {
        STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key));
    }
    applyFilters();
    renderStatusChips();
}

export function renderTagChips() {
    const container = document.getElementById('tag-chips');
    if (!container) return;

    // 1. 모든 상품에서 유니크한 태그 추출
    const allTags = new Set();
    productsData.forEach((p) => {
        if (p.tags) p.tags.forEach((tag) => allTags.add(tag));
    });
    const sortedTags = Array.from(allTags).sort();

    // 2. 리셋 버튼 HTML (맨 앞에 배치)
    // 활성화된 태그가 있을 때만 강조되거나, 항상 보이게 설정 가능합니다.
    const hasActiveTags = state.activeTags.size > 0;
    const resetBtnHtml = `
        <button id="tag-reset-btn" class="flex items-center justify-center px-2 py-1 rounded-full border transition-all duration-200 
            ${hasActiveTags ? 'bg-red-50 text-red-500 border-red-200 hover:bg-red-100' : 'bg-slate-50 text-slate-400 border-slate-200 opacity-60'}"
            title="태그 초기화">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
                <path d="M3 3v5h5"/>
            </svg>
        </button>
    `;

    // 3. 태그 칩들과 합치기
    container.innerHTML =
        resetBtnHtml +
        sortedTags
            .map((tag) => {
                const isActive = state.activeTags.has(tag);
                return `
            <button class="tag-chip flex items-center justify-center px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border
                ${isActive ? 'bg-primary text-white border-primary shadow-sm' : 'bg-slate-50 dark:bg-slate-800 text-slate-500 border-slate-200 dark:border-slate-700 hover:border-primary'}"
                data-tag="${tag}">
                #${tag}
            </button>
        `;
            })
            .join('');

    // 4. 리셋 버튼 이벤트 바인딩
    document.getElementById('tag-reset-btn').onclick = () => {
        if (state.activeTags.size === 0) return;
        state.activeTags.clear();
        renderTagChips(); // UI 갱신
        applyFilters(); // 필터 적용
    };

    // 5. 개별 태그 칩 이벤트 바인딩
    container.querySelectorAll('.tag-chip').forEach((chip) => {
        chip.onclick = () => {
            const tag = chip.dataset.tag;
            if (state.activeTags.has(tag)) state.activeTags.delete(tag);
            else state.activeTags.add(tag);

            renderTagChips();
            applyFilters();
        };
    });
}

// [핵심] 필터 적용 함수
export function applyFilters() {
    const keyword = state.searchKeyword.toLowerCase();

    // 1. 데이터 필터링 및 정렬
    state.visibleProducts = productsData
        .filter((product) => {
            const meta = STATUS_META[product.status];

            // [1] 시스템 가시성 체크
            if (!meta || !meta.isSystemVisible) return false;

            // [2] 상태 필터 체크
            const statusMatch = state.activeStatuses.has(product.status);

            // [3] 카테고리 필터 체크
            const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);

            // [4] 검색어 매칭 로직
            const searchMatch =
                keyword === '' ||
                (() => {
                    // 검색어를 공백 기준으로 쪼개서 배열로 만듭니다 (예: "jp r19" -> ["jp", "r19"])
                    const searchTerms = keyword.split(/\s+/).filter((term) => term.length > 0);

                    const searchPool = [];
                    if (SEARCH_CONFIG.USE_TITLE) searchPool.push(product.title);
                    if (SEARCH_CONFIG.USE_CUSTOM_TAG && product.customTag) searchPool.push(product.customTag);
                    if (SEARCH_CONFIG.USE_DESCRIPTION && product.description) searchPool.push(product.description);

                    // 태그 배열과 상세 설명 배열을 문자열 풀에 합칩니다.
                    if (SEARCH_CONFIG.USE_TAGS && product.tags) searchPool.push(...product.tags);
                    if (SEARCH_CONFIG.USE_FULL_DESCRIPTION && product.fullDescription) searchPool.push(...product.fullDescription);

                    // 모든 텍스트를 하나의 검색용 문자열로 결합
                    const combinedText = searchPool.map((text) => String(text || '').toLowerCase()).join(' ');

                    // [핵심] 사용자가 입력한 모든 단어(searchTerms)가 결합된 텍스트에 포함되어 있는지 확인 (AND 조건)
                    return searchTerms.every((term) => combinedText.includes(term));
                })();

            // [5] 태그 필터 체크
            const tagMatch = state.activeTags.size === 0 || Array.from(state.activeTags).every((tag) => product.tags && product.tags.includes(tag));

            return statusMatch && categoryMatch && searchMatch && tagMatch;
        })
        .sort((a, b) => {
            // 0. 스위치가 모두 꺼져있다면 정렬하지 않고 원본 순서 유지
            if (!SORT_CONFIG.PUSH_SOLD_OUT_TO_END && !SORT_CONFIG.PUSH_NON_SALE_TO_END) {
                return 0;
            }

            const isASold = STATUS_META[a.status]?.soldOut;
            const isBSold = STATUS_META[b.status]?.soldOut;
            const isANonSale = a.status === '미판매';
            const isBNonSale = b.status === '미판매';

            // 1. 판매완료 정렬 제어
            if (SORT_CONFIG.PUSH_SOLD_OUT_TO_END) {
                if (isASold !== isBSold) return isASold ? 1 : -1;
            }

            // 2. 미판매 정렬 제어
            if (SORT_CONFIG.PUSH_NON_SALE_TO_END) {
                if (isANonSale !== isBNonSale) return isANonSale ? 1 : -1;
            }

            // 3. 만약 위 스위치들 중 하나라도 켜져 있다면, 나머지는 STATUS_ORDER를 따름
            const aOrder = STATUS_ORDER[a.status] ?? 999;
            const bOrder = STATUS_ORDER[b.status] ?? 999;
            return aOrder - bOrder;
        });

    // 2. 페이지 위치 안전 조정 로직
    const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);

    if (state.currentPage > totalPages) {
        state.currentPage = Math.max(1, totalPages);
    } else if (state.currentPage < 1) {
        state.currentPage = 1;
    }

    // 3. UI 업데이트
    // renderTotalCount 함수가 정의되어 있다면 실행
    if (typeof renderTotalCount === 'function') {
        renderTotalCount(state.visibleProducts.length);
    }

    renderProducts(state.currentPage);
}

/** 총 개수를 화면에 표시하는 보조 함수 */
function renderTotalCount(count) {
    const totalCountElement = document.getElementById('total-count');
    if (totalCountElement) {
        totalCountElement.textContent = count.toLocaleString(); // 3자리마다 콤마
    }
}

export function getCategories(products) {
    return ['All', ...new Set(products.map((p) => p.category))];
}

export function renderCategoryChips(products) {
    const container = document.getElementById('filter-chips'); // 혹은 HTML 구조에 맞춰 'category-chips'
    if (!container) return;

    // 1. 가시성 있는 상품의 카테고리만 추출
    const validCategories = products
        .filter((p) => {
            const meta = STATUS_META[p.status];
            return meta && meta.isSystemVisible;
        })
        .map((p) => p.category);

    const categories = ['All', ...new Set(validCategories)];

    container.innerHTML = '';

    categories.forEach((cat) => {
        const isActive = state.activeCategories.has(cat);
        const chip = document.createElement('button');

        // [수정] 태그 칩 사이즈(px-3 py-1) 및 폰트 크기(text-[11px]) 통일
        // min-w-[65px]를 주면 'All' 같은 짧은 글자도 정갈하게 보입니다.
        chip.className = `filter-chip flex items-center justify-center min-w-[65px] px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border 
            ${isActive ? 'bg-primary text-white border-primary shadow-sm ring-1 ring-offset-1 ring-slate-200 dark:ring-slate-700 opacity-100' : 'bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale hover:opacity-60'}`;

        chip.textContent = cat;
        chip.dataset.category = cat;

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

        container.appendChild(chip);
    });
}

export function toggleCategory(category) {
    if (category === 'All') {
        state.activeCategories.clear();
        state.activeCategories.add('All');
    } else {
        state.activeCategories.delete('All');
        if (state.activeCategories.has(category)) {
            state.activeCategories.delete(category);
        } else {
            state.activeCategories.add(category);
        }
        if (state.activeCategories.size === 0) {
            state.activeCategories.add('All');
        }
    }
    renderCategoryChips(productsData); // 디자인(활성화 상태) 즉시 반영
    applyFilters();
}

export function bindCategoryFilter(products) {
    const chips = document.querySelectorAll('.filter-chip');
    chips.forEach((chip) => {
        chip.addEventListener('click', () => {
            const category = chip.dataset.category;
            if (category === 'All') {
                state.activeCategories.clear();
                state.activeCategories.add('All');
            } else {
                state.activeCategories.delete('All');
                if (state.activeCategories.has(category)) state.activeCategories.delete(category);
                else state.activeCategories.add(category);
                if (state.activeCategories.size === 0) state.activeCategories.add('All');
            }
            applyFilters();
        });
    });
}

// 로고 클릭 시 초기화 로직
document.getElementById('logo-title')?.addEventListener('click', () => {
    // 1. 검색어 초기화
    state.searchKeyword = '';
    const searchInput = document.getElementById('search-input'); // 검색창 ID가 있다면
    if (searchInput) searchInput.value = '';

    // 2. 카테고리 초기화 (All 선택)
    state.activeCategories.clear();
    state.activeCategories.add('All');

    // 3. 상태 필터 초기화 (기본 활성화 상태로)
    state.activeStatuses.clear();
    STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key));

    // 4. 필터 적용 및 UI 갱신
    applyFilters();
    renderStatusChips();
    renderCategoryChips(productsData);

    // 5. 페이지 최상단으로 스크롤 (선택 사항)
    window.scrollTo({ top: 0, behavior: 'smooth' });
});