(() => {
    const $ = (sel) => document.querySelector(sel);
    const inputEl = $('#queryInput');
    const queryBtn = $('#queryBtn');
    const summaryBoxEl = $('#summaryBox');
    const eventBoxEl = $('#eventBox');
    const state = {
        cards: [],
        selectedQuery: ''
    };

    const api = {
        async request(url) {
            const res = await fetch(url);
            const data = await res.json().catch(() => ({}));
            if (!res.ok || data.ok === false) {
                throw new Error(data.error || res.statusText || '请求失败');
            }
            return data;
        },
        query(q) {
            return api.request(`/api/public/ic-cards/query?q=${encodeURIComponent(q)}`);
        }
    };

    const getStatusClass = (status) => {
        const s = String(status || '').trim().toLowerCase();
        if (s === 'active') return 'jr-status-valid';
        if (s === 'pending_pickup') return 'jr-status-used';
        return 'jr-status-expired';
    };

    const getLookupKey = (card) => String(card?.card_id || '').trim();

    const escapeHtml = (value) => String(value == null ? '' : value)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');

    const formatTime = (value) => {
        if (value == null || value === '') return '---';
        const ts = Number(value);
        const date = Number.isFinite(ts) ? new Date(ts) : new Date(value);
        return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString('zh-CN', { hour12: false });
    };

    const eventTitle = (event) => {
        const map = {
            create: '后台建卡',
            update: '信息更新',
            topup: '余额充值',
            order_created: '线上购卡',
            activated: '正式启用'
        };
        return map[String(event?.type || '').toLowerCase()] || (event?.type || '事件');
    };

    const buildCardPreview = (card) => {
        const shownCardId = card.display_card_id || card.card_id || '---';
        return `
            <div class="jr-ticket-preview">
                <div class="jr-ticket-row-head">
                    <span class="jr-ticket-id mono">${escapeHtml(shownCardId)}</span>
                    <span class="jr-status-pill ${getStatusClass(card.status)}">${escapeHtml(card.status_label || card.status || '未知')}</span>
                </div>
                <div class="jr-meta-grid">
                    <div class="jr-meta-item"><span>持卡人</span><strong>${escapeHtml(card.holder_name || '未登记')}</strong></div>
                    <div class="jr-meta-item"><span>卡片类型</span><strong>${escapeHtml(card.card_type_label || 'IC 储值卡')}</strong></div>
                    <div class="jr-meta-item"><span>余额</span><strong>${escapeHtml(card.balance ?? 0)}</strong></div>
                    <div class="jr-meta-item"><span>首次充值</span><strong>${escapeHtml(card.purchase_amount ?? card.balance ?? 0)}</strong></div>
                    <div class="jr-meta-item"><span>凭证码</span><strong>${escapeHtml(card.voucher_code || card.code || card.order_code || '---')}</strong></div>
                    <div class="jr-meta-item"><span>购卡时间</span><strong>${escapeHtml(formatTime(card.created_ts))}</strong></div>
                </div>
            </div>
        `;
    };

    const buildEventsHtml = (events) => {
        if (!events.length) {
            return '<div class="jr-center-empty" style="min-height:180px;"><p>暂无相关事件记录。</p></div>';
        }
        return events.map((event) => `
            <div class="jr-history-item">
                <div class="jr-history-row">
                    <span class="jr-history-title">${escapeHtml(eventTitle(event))}</span>
                    <span class="jr-history-time">${escapeHtml(formatTime(event.ts))}</span>
                </div>
                <div class="jr-history-desc">${escapeHtml(typeof event.detail === 'string' ? event.detail : JSON.stringify(event.detail || {}, null, 2))}</div>
            </div>
        `).join('');
    };

    const renderEventPrompt = (message) => {
        eventBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`;
    };

    const renderSelectedCard = (card, events) => {
        if (!card) {
            renderEventPrompt('请选择左侧卡片查看详情与事件记录。');
            return;
        }
        eventBoxEl.innerHTML = `
            ${buildCardPreview(card)}
            <div class="jr-panel-headline" style="margin:20px 0 14px;">
                <h3>事件记录</h3>
                <span class="jr-panel-note">Recent Events</span>
            </div>
            <div class="jr-history-list">${buildEventsHtml(events)}</div>
        `;
    };

    const renderCardList = () => {
        if (!state.cards.length) {
            summaryBoxEl.className = 'jr-center-empty';
            summaryBoxEl.innerHTML = '<p>暂无可显示的 IC 卡记录。</p>';
            return;
        }

        summaryBoxEl.className = 'jr-scroll-box';
        summaryBoxEl.innerHTML = state.cards.map((card) => {
            const lookupKey = getLookupKey(card);
            const shownCardId = card.display_card_id || card.card_id || '---';
            const voucherCode = card.voucher_code || card.code || card.order_code || '---';
            const isSelected = lookupKey && state.selectedQuery === lookupKey;
            return `
                <div class="jr-ticket-row" data-card-query="${escapeHtml(lookupKey)}" style="${isSelected ? 'background:#f7faf7;border-left:4px solid #0b6b3a;padding-left:12px;padding-right:12px;' : ''}">
                    <div class="jr-ticket-row-head">
                        <span class="jr-ticket-id mono">${escapeHtml(shownCardId)}</span>
                        <span class="jr-status-pill ${getStatusClass(card.status)}">${escapeHtml(card.status_label || card.status || '未知')}</span>
                    </div>
                    <div class="jr-ticket-route">${escapeHtml(card.holder_name || '未登记持卡人')}</div>
                    <div class="text-muted" style="margin-top:6px; font-size:0.9rem;">
                        余额 ${escapeHtml(card.balance ?? 0)} · 凭证码 ${escapeHtml(voucherCode)}
                    </div>
                </div>
            `;
        }).join('');

        summaryBoxEl.querySelectorAll('[data-card-query]').forEach((item) => {
            item.addEventListener('click', () => {
                const q = item.getAttribute('data-card-query');
                if (q) {
                    loadCardDetail(q).catch((error) => {
                        renderEventPrompt(error.message || String(error));
                    });
                }
            });
        });
    };

    const loadCardDetail = async (q, options = {}) => {
        const { updateUrl = true } = options;
        eventBoxEl.innerHTML = '<div class="jr-center-empty" style="min-height:180px;"><p>正在加载卡片详情...</p></div>';
        const data = await api.query(q);
        const card = data.card || null;
        const events = data.events || [];
        const lookupKey = getLookupKey(card) || q;
        if (card) {
            const existingIdx = state.cards.findIndex((item) => getLookupKey(item) === lookupKey);
            if (existingIdx >= 0) state.cards[existingIdx] = card;
            else state.cards = [card];
        }
        state.selectedQuery = lookupKey;
        renderCardList();
        renderSelectedCard(card, events);
        if (updateUrl) {
            const newUrl = `${window.location.origin}${window.location.pathname}?q=${encodeURIComponent(q)}`;
            window.history.replaceState({ path: newUrl }, '', newUrl);
        }
    };

    const loadAllCards = async () => {
        summaryBoxEl.className = 'jr-center-empty';
        summaryBoxEl.innerHTML = '<p>正在加载全部 IC 卡...</p>';
        renderEventPrompt('正在准备卡片详情...');
        const data = await api.query('');
        state.cards = Array.isArray(data.cards) ? data.cards : [];
        state.selectedQuery = '';
        renderCardList();

        if (!state.cards.length) {
            renderEventPrompt('当前暂无 IC 卡记录。');
            const newUrl = `${window.location.origin}${window.location.pathname}`;
            window.history.replaceState({ path: newUrl }, '', newUrl);
            return;
        }

        await loadCardDetail(getLookupKey(state.cards[0]), { updateUrl: false });
        const newUrl = `${window.location.origin}${window.location.pathname}`;
        window.history.replaceState({ path: newUrl }, '', newUrl);
    };

    const doQuery = async () => {
        const q = inputEl.value.trim();
        if (!q) {
            await loadAllCards();
            return;
        }
        summaryBoxEl.className = 'jr-center-empty';
        summaryBoxEl.innerHTML = '<p>正在查询 IC 卡...</p>';
        state.cards = [];
        await loadCardDetail(q);
    };

    queryBtn.addEventListener('click', () => doQuery().catch((error) => renderEventPrompt(error.message || String(error))));
    inputEl.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') doQuery().catch((error) => renderEventPrompt(error.message || String(error)));
    });

    const params = new URLSearchParams(location.search);
    const q = params.get('q');
    if (q) {
        inputEl.value = q;
        doQuery().catch((error) => renderEventPrompt(error.message || String(error)));
    } else {
        loadAllCards().catch((error) => renderEventPrompt(error.message || String(error)));
    }
})();