const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';

        if (!window._sbClient) {
            window._sbClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
        }
        const sbClient = window._sbClient;

        async function loadTicketDetail() {
            const urlParams = new URLSearchParams(window.location.search);
            const ticketId = urlParams.get('id');

            if (!ticketId) {
                showError('未提供单据 ID。');
                return;
            }

            try {
                const { data: ticket, error } = await sbClient
                    .from('tickets')
                    .select('*')
                    .eq('id', ticketId)
                    .single();

                if (error) throw error;
                if (!ticket) {
                    showError('未找到该单据。');
                    return;
                }

                displayTicketDetail(ticket);
            } catch (error) {
                showError(error.message || '加载失败');
            }
        }

        function displayTicketDetail(ticket) {
            const el = document.getElementById('detailContent');
            const processedLabel = ticket.processed ? '已处理' : '未处理';
            const completionLabel = ticket.status ? '已办结' : '未办结';
            const amount = Number(ticket.amount || 0).toLocaleString('zh-CN', {
                style: 'currency',
                currency: 'CNY'
            });

            el.classList.remove('feedback-card');
            el.innerHTML = `
                <div class="ticket-header">
                    <div>
                        <div class="section-kicker">Ticket Detail</div>
                        <h1 class="ticket-title">${ticket.ticket_number || '-'} / ${ticket.customer_name || '-'}</h1>
                        <p class="ticket-subtitle">单据全量信息、处理状态与打印操作在此统一展示。</p>
                    </div>
                    <div class="top-actions-group">
                        <span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>
                        <span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>
                    </div>
                </div>

                <div class="ticket-detail-grid">
                    ${item('编号', ticket.ticket_number)}
                    ${item('姓名', ticket.customer_name)}
                    ${item('事由', ticket.reason)}
                    ${item('处理结果', ticket.result)}
                    ${item('金额', amount, 'money')}
                    ${item('开具人', ticket.issuer)}
                    ${item('创建时间', formatDate(ticket.created_at))}
                    ${item('办结日期', formatDate(ticket.processed_at))}
                    ${item('处理状态', `<span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>`, '', true)}
                    ${item('办结状态', `<span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>`, '', true)}
                    ${item('备注', ticket.remarks || '无', '', false, true)}
                </div>
            `;
        }

        function item(label, value, extraClass = '', isHTML = false, isWide = false) {
            return `
                <div class="detail-item${isWide ? ' wide' : ''}">
                    <span class="detail-label">${label}</span>
                    <div class="detail-value${extraClass ? ` ${extraClass}` : ''}">${isHTML ? value : (value || '无')}</div>
                </div>
            `;
        }

        function goPrint() {
            window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
        }

        function formatDate(dateString) {
            if (!dateString) return '暂无';
            return new Date(dateString).toLocaleString('zh-CN');
        }

        function showError(msg) {
            const el = document.getElementById('detailContent');
            el.classList.add('feedback-card');
            el.innerHTML = `<div class="error-state">${msg}</div>`;
        }

        document.addEventListener('DOMContentLoaded', loadTicketDetail);