Router.register('/shipments/summary', async () => {
  setTimeout(async () => {
    const queryBtn = document.getElementById('summary-query-btn');
    const startDateInput = document.getElementById('start-date');
    const endDateInput = document.getElementById('end-date');
    const resultDiv = document.getElementById('summary-result');

    // 设置默认日期为当前月份
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    
    if (startDateInput) {
      startDateInput.value = firstDay.toISOString().split('T')[0];
    }
    if (endDateInput) {
      endDateInput.value = lastDay.toISOString().split('T')[0];
    }

    const performQuery = async () => {
      const startDate = startDateInput?.value;
      const endDate = endDateInput?.value;

      if (!startDate || !endDate) {
        resultDiv.innerHTML = '<div class="error">请选择开始和结束日期</div>';
        return;
      }

      try {
        resultDiv.innerHTML = '<div>查询中...</div>';
        
        const res = await fetch(`/api/shipments/summary?start=${encodeURIComponent(startDate)}&end=${encodeURIComponent(endDate)}`, {
          credentials: 'include'
        });
        const data = await res.json();
        
        if (data.records && data.records.length > 0) {
          const totalQty = data.records.reduce((sum, r) => sum + (r.qty || 0), 0);
          
          const tableRows = data.records.map(record => `
            <tr>
              <td>${record.date}</td>
              <td>${record.qty}</td>
              <td>${record.receiver || '-'}</td>
              <td>${record.ts || '-'}</td>
            </tr>
          `).join('');
          
          resultDiv.innerHTML = `
            <div style="margin-bottom:16px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px">
              <div style="display:flex;align-items:center;gap:16px">
                <div>
                  <div style="color:var(--text-2);font-size:14px">查询时间段</div>
                  <div style="font-weight:600;margin-top:4px">${startDate} 至 ${endDate}</div>
                </div>
                <div style="margin-left:auto">
                  <div style="color:var(--text-2);font-size:14px">总出货数量</div>
                  <div style="font-weight:600;font-size:24px;color:var(--primary);margin-top:4px">${totalQty}</div>
                </div>
              </div>
            </div>
            
            <div style="overflow-x:auto">
              <table class="table">
                <thead>
                  <tr>
                    <th>发货日期</th>
                    <th>数量</th>
                    <th>收货方</th>
                    <th>录入时间</th>
                  </tr>
                </thead>
                <tbody>
                  ${tableRows}
                </tbody>
              </table>
            </div>
          `;
        } else {
          resultDiv.innerHTML = `
            <div class="result-card error">
              <div class="result-title">未找到记录</div>
              <div class="result-item">该时间段内没有发货记录</div>
            </div>
          `;
        }
      } catch (e) {
        resultDiv.innerHTML = `<div class="error">查询失败：${e.message}</div>`;
      }
    };

    queryBtn?.addEventListener('click', performQuery);
    
    // 自动执行一次查询
    performQuery();
  }, 0);

  return `<div class="card">
    <div style="font-weight:600;margin-bottom:16px">发货汇总信息查询</div>
    
    <div style="margin-bottom:16px">
      <div class="grid cols-2" style="margin-bottom:12px">
        <div class="field">
          <label>开始日期</label>
          <input 
            id="start-date" 
            type="date" 
            class="input"
          />
        </div>
        <div class="field">
          <label>结束日期</label>
          <input 
            id="end-date" 
            type="date" 
            class="input"
          />
        </div>
      </div>
      <button class="btn" id="summary-query-btn">查询</button>
    </div>

    <div id="summary-result"></div>
  </div>`;
});