(function () {
    function initSymbolInput(wrapper) {
        const input = wrapper.querySelector('.symbol-input');
        const hiddenThs = wrapper.querySelector('input[name="symbol"]');
        const hiddenName = wrapper.querySelector('input[name="symbol_name"]');
        const hiddenSina = wrapper.querySelector('input[name="sina_code"]');
        const dropdown = wrapper.querySelector('.symbol-dropdown');
        const selectedEl = wrapper.querySelector('.symbol-selected');
        let timer = null;

        function hideDropdown() {
            dropdown.classList.remove('show');
        }

        function selectItem(item) {
            input.value = item.name;
            hiddenThs.value = item.ths_code;
            hiddenName.value = item.name;
            if (hiddenSina) hiddenSina.value = item.sina_code;
            selectedEl.textContent = '同花顺: ' + item.ths_code + ' | 主力 ' + (item.contract || item.ths_code);
            hideDropdown();
        }

        function renderItems(items) {
            dropdown.innerHTML = '';
            if (!items.length) {
                dropdown.innerHTML = '<div class="symbol-option">无匹配品种，可输入同花顺合约如 ag2606</div>';
            } else {
                items.forEach(function (item) {
                    const div = document.createElement('div');
                    div.className = 'symbol-option';
                    div.innerHTML = item.display +
                        '<div class="sub">同花顺 ' + item.ths_code + ' · ' + item.exchange + '</div>';
                    div.addEventListener('mousedown', function (e) {
                        e.preventDefault();
                        selectItem(item);
                    });
                    dropdown.appendChild(div);
                });
            }
            dropdown.classList.add('show');
        }

        input.addEventListener('input', function () {
            hiddenThs.value = '';
            hiddenName.value = '';
            if (hiddenSina) hiddenSina.value = '';
            selectedEl.textContent = '';
            const q = input.value.trim();
            if (!q) {
                hideDropdown();
                return;
            }
            clearTimeout(timer);
            timer = setTimeout(function () {
                fetch('/api/symbols/search?q=' + encodeURIComponent(q))
                    .then(function (r) { return r.json(); })
                    .then(renderItems)
                    .catch(function () { hideDropdown(); });
            }, 300);
        });

        input.addEventListener('blur', function () {
            setTimeout(hideDropdown, 150);
        });

        input.addEventListener('focus', function () {
            const q = input.value.trim();
            if (q && !hiddenThs.value) {
                fetch('/api/symbols/search?q=' + encodeURIComponent(q))
                    .then(function (r) { return r.json(); })
                    .then(renderItems);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.symbol-wrap').forEach(initSymbolInput);

        document.querySelectorAll('form').forEach(function (form) {
            if (!form.querySelector('.symbol-wrap')) return;
            form.addEventListener('submit', function (e) {
                const ths = form.querySelector('input[name="symbol"]');
                const sina = form.querySelector('input[name="sina_code"]');
                if (ths && !ths.value.trim()) {
                    e.preventDefault();
                    alert('请从下拉列表选择品种');
                    return;
                }
                if (sina && !sina.value.trim()) {
                    e.preventDefault();
                    alert('请从下拉列表选择品种（需含同花顺合约代码）');
                }
            });
        });
    });
})();