const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
        const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

        function escapeHtml(value) {
            return String(value ?? '').replace(/[&<>"']/g, char => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            }[char]));
        }

        async function handleSearch() {
            const recipientTerm = document.getElementById('recipientTerm').value.trim();
            const contentTerm = document.getElementById('searchTerm').value.trim();
            const from = document.getElementById('dateFrom').value;
            const to = document.getElementById('dateTo').value;
            const out = document.getElementById('searchResults');

            out.innerHTML = '<div class="loading-state">正在连接信函数据库并执行检索...</div>';

            let q = sb.from('xinhan').select('*');
            if (recipientTerm) q = q.ilike('recipient', `%${recipientTerm}%`);
            if (contentTerm) q = q.ilike('content', `%${contentTerm}%`);
            if (from) q = q.gte('sent_date', from);
            if (to) q = q.lte('sent_date', to);

            const { data, error } = await q.order('sent_date', { ascending: false });
            if (error) {
                out.innerHTML = `<div class="error-state">查询失败：${escapeHtml(error.message)}</div>`;
                return;
            }
            renderResults(data || []);
        }

        function renderResults(rows) {
            const container = document.getElementById('searchResults');
            if (!rows.length) {
                container.innerHTML = '<div class="empty-state">未找到符合条件的信函记录。</div>';
                return;
            }

            let html = `
                <div class="table-wrapper">
                    <table class="result-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>收件人</th>
                                <th>目的地</th>
                                <th>寄出日期</th>
                                <th>寄达日期</th>
                                <th>内容摘要</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            rows.forEach(row => {
                const content = row.content || '';
                const summary = content.length > 60
                    ? `<span class="text-truncate" title="${escapeHtml(content)}">${escapeHtml(content)}</span>`
                    : escapeHtml(content);

                html += `
                    <tr>
                        <td class="table-highlight">${escapeHtml(row.id)}</td>
                        <td>${escapeHtml(row.recipient || '')}</td>
                        <td>${escapeHtml(row.destination || '')}</td>
                        <td>${escapeHtml(row.sent_date || '')}</td>
                        <td>${escapeHtml(row.arrival_date || '')}</td>
                        <td>${summary}</td>
                    </tr>
                `;
            });

            html += '</tbody></table></div>';
            container.innerHTML = html;
        }

        document.getElementById('searchBtn').addEventListener('click', handleSearch);