content.js

const FAVORITES_KEY = 'dropdownHelperFavorites';
const lastSearchMap = new WeakMap();

let settings = {
    language: 'auto',
    minOptions: 5,
    defaultSort: 'asc',
    caseSensitive: false
};
let favorites = {};
let currentHelperWindow = null;
let currentLang = chrome.i18n.getUILanguage().substring(0, 2);

function i18n(key) {
    return chrome.i18n.getMessage(key);
}

function refreshAllHelperButtons() {
    document.querySelectorAll('select').forEach(selectEl => {
        const existingButton = selectEl.nextElementSibling;
        const shouldShow = selectEl.options.length > settings.minOptions;
        if (shouldShow && !existingButton?.classList.contains('select-helper-trigger-btn')) {
            addHelperButton(selectEl);
        } else if (!shouldShow && existingButton?.classList.contains('select-helper-trigger-btn')) {
            existingButton.remove();
        }
    });
}

function addHelperButton(selectElement) {
    const button = document.createElement('button');
    button.className = 'select-helper-trigger-btn';
    button.textContent = '🔍';
    button.title = i18n('helperButtonTitle');
    button.addEventListener('click', (e) => {
        e.stopPropagation();
        e.preventDefault();
        createHelperWindow(selectElement);
    });
    selectElement.parentNode.insertBefore(button, selectElement.nextSibling);
}

function createHelperWindow(targetSelect) {
    closeHelperWindow();
    const helperWindow = document.createElement('div');
    helperWindow.id = 'select-helper-window';
    currentHelperWindow = helperWindow;
    let highlightedIndex = 0;

    const topArea = document.createElement('div');
    topArea.className = 'top-area';
    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = i18n('searchInputPlaceholder');
    const resultCounter = document.createElement('span');
    resultCounter.className = 'result-counter';
    const copyButton = document.createElement('button');
    copyButton.className = 'copy-button';
    copyButton.title = i18n('copyButtonTitle');
    copyButton.innerHTML = i18n('copyButtonText');
    topArea.append(searchInput, resultCounter);
    const optionsList = document.createElement('div');
    optionsList.id = 'select-helper-options-list';
    let options = Array.from(targetSelect.options);

    options.sort((a, b) => {
        const aIsFav = favorites[a.value] === a.textContent;
        const bIsFav = favorites[b.value] === b.textContent;
        if (aIsFav && !bIsFav) return -1;
        if (!aIsFav && bIsFav) return 1;
        if (settings.defaultSort === 'asc') return a.textContent.localeCompare(b.textContent, currentLang);
        if (settings.defaultSort === 'desc') return b.textContent.localeCompare(a.textContent, currentLang);
        return 0;
    });

    options.forEach(opt => {
        const optionItem = document.createElement('div');
        optionItem.className = 'select-helper-option';
        optionItem.dataset.value = opt.value;
        const star = document.createElement('span');
        star.className = 'favorite-star';
        const isFavorite = favorites[opt.value] === opt.textContent;
        star.textContent = isFavorite ? '⭐' : '☆';
        if (isFavorite) optionItem.classList.add('is-favorite');
        const textNode = document.createElement('span');
        textNode.className = 'option-text';
        textNode.textContent = opt.textContent;
        optionItem.append(star, textNode);
        if (opt.selected) optionItem.classList.add('selected');
        optionsList.appendChild(optionItem);
    });
    helperWindow.append(topArea, optionsList, copyButton);
    document.body.appendChild(helperWindow);
    const rect = targetSelect.getBoundingClientRect();
    helperWindow.style.top = `${window.scrollY + rect.bottom + 2}px`;
    helperWindow.style.left = `${window.scrollX + rect.left}px`;
    helperWindow.style.minWidth = `${rect.width}px`;
    searchInput.focus();

    function updateHighlight() {
        const visibleItems = Array.from(optionsList.querySelectorAll('.select-helper-option')).filter(item => item.style.display !== 'none');
        if (highlightedIndex >= visibleItems.length) highlightedIndex = 0;
        if (visibleItems.length > 0 && highlightedIndex < 0) highlightedIndex = 0;
        visibleItems.forEach((item, index) => {
            if (index === highlightedIndex) {
                item.classList.add('keyboard-highlight');
                item.scrollIntoView({ block: 'nearest' });
            } else {
                item.classList.remove('keyboard-highlight');
            }
        });
    }

    function filterAndRenderList() {
        highlightedIndex = 0;
        const keyword = searchInput.value;
        const regex = new RegExp(keyword, settings.caseSensitive ? 'g' : 'gi');
        let visibleCount = 0;
        optionsList.querySelectorAll('.select-helper-option').forEach(item => {
            const textNode = item.querySelector('.option-text');
            if (!textNode) return;
            const text = textNode.textContent;
            const textToCompare = settings.caseSensitive ? text : text.toLowerCase();
            const keywordToCompare = settings.caseSensitive ? keyword : keyword.toLowerCase();
            if (textToCompare.includes(keywordToCompare)) {
                item.style.display = 'flex';
                visibleCount++;
                if (keyword) {
                    textNode.innerHTML = text.replace(regex, match => `<span class="highlight">${match}</span>`);
                } else {
                    textNode.innerHTML = text;
                }
            } else {
                item.style.display = 'none';
            }
        });
        resultCounter.textContent = `${visibleCount} ${i18n('itemCounterSuffix')}`;
        updateHighlight();
    }

    const lastKeyword = lastSearchMap.get(targetSelect) || '';
    searchInput.value = lastKeyword;
    filterAndRenderList();

    searchInput.addEventListener('keyup', (e) => {
        if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) return;
        lastSearchMap.set(targetSelect, searchInput.value);
        filterAndRenderList();
    });

    searchInput.addEventListener('keydown', (e) => {
        const visibleItems = Array.from(optionsList.querySelectorAll('.select-helper-option')).filter(item => item.style.display !== 'none');
        if (visibleItems.length === 0) return;
        switch (e.key) {
            case 'ArrowDown': e.preventDefault(); highlightedIndex = (highlightedIndex < visibleItems.length - 1) ? highlightedIndex + 1 : 0; updateHighlight(); break;
            case 'ArrowUp': e.preventDefault(); highlightedIndex = (highlightedIndex > 0) ? highlightedIndex - 1 : visibleItems.length - 1; updateHighlight(); break;
            case 'Enter': e.preventDefault(); if (highlightedIndex >= 0) { visibleItems[highlightedIndex].click(); } break;
            case 'Escape': e.preventDefault(); closeHelperWindow(); break;
        }
    });

    optionsList.addEventListener('click', e => {
        const targetItem = e.target.closest('.select-helper-option');
        if (!targetItem) return;
        if (e.target.classList.contains('favorite-star')) {
            const value = targetItem.dataset.value;
            const text = targetItem.querySelector('.option-text').textContent;
            const star = e.target;
            if (favorites[value] === text) {
                delete favorites[value];
                star.textContent = '☆';
                targetItem.classList.remove('is-favorite');
            } else {
                favorites[value] = text;
                star.textContent = '⭐';
                targetItem.classList.add('is-favorite');
            }
            chrome.storage.sync.set({ [FAVORITES_KEY]: favorites });
        } else {
            targetSelect.value = targetItem.dataset.value;
            targetSelect.dispatchEvent(new Event('change', { bubbles: true }));
            closeHelperWindow();
        }
    });

    copyButton.addEventListener('click', () => {
        const visibleItems = Array.from(optionsList.querySelectorAll('.select-helper-option'))
            .filter(item => item.style.display !== 'none')
            .map(item => item.querySelector('.option-text').textContent)
            .join('\n');
        navigator.clipboard.writeText(visibleItems).then(() => {
            copyButton.innerHTML = i18n('copyButtonSuccess');
            setTimeout(() => { copyButton.innerHTML = i18n('copyButtonText'); }, 1200);
        });
    });
}

function closeHelperWindow() {
    if (currentHelperWindow) {
        currentHelperWindow.remove();
        currentHelperWindow = null;
    }
}

document.addEventListener('click', event => {
    if (currentHelperWindow && !currentHelperWindow.contains(event.target)) {
        closeHelperWindow();
    }
});

// --- ✅ 변경된 부분: 실행 순서 수정 ---

// 1. 저장된 설정을 먼저 불러옵니다.
chrome.storage.sync.get([
    'language', 'minOptions', 'defaultSort', 'caseSensitive', FAVORITES_KEY
], (data) => {
    settings = data;
    if (settings.language !== 'auto') {
        currentLang = settings.language;
    }
    favorites = data[FAVORITES_KEY] || {};
    // 설정이 로드된 후, 페이지에 이미 있는 드롭다운들을 스캔합니다.
    refreshAllHelperButtons();
});

// 2. 설정 변경을 감지하는 리스너는 독립적으로 실행됩니다.
chrome.storage.onChanged.addListener((changes, namespace) => {
    let languageChanged = false;
    for (let key in changes) {
        if (settings.hasOwnProperty(key)) {
            settings[key] = changes[key].newValue;
        }
        if (key === 'language') {
            languageChanged = true;
        }
    }
    if (changes[FAVORITES_KEY]) {
        favorites = changes[FAVORITES_KEY].newValue || {};
    }
    if (languageChanged) {
        if (settings.language !== 'auto') {
            currentLang = settings.language;
        } else {
            currentLang = chrome.i18n.getUILanguage().substring(0, 2);
        }
        closeHelperWindow();
    }
    refreshAllHelperButtons();
});

// 3. 페이지의 동적 변화를 감지하는 옵저버도 독립적으로 즉시 실행됩니다.
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) {
                if (node.tagName === 'SELECT') { // 새로 추가된 노드가 select 자체일 경우
                    refreshAllHelperButtons(); // 간단하게 전체를 다시 스캔
                } else if (node.querySelectorAll('select').length > 0) { // 새로 추가된 노드 안에 select가 있을 경우
                    refreshAllHelperButtons();
                }
            }
        });
    });
});
observer.observe(document.body, { childList: true, subtree: true });