const STATUS_MAP = {
  pending: { label: '待开奖', className: 'pending' },
  won: { label: '已中奖', className: 'won' },
  lost: { label: '未中奖', className: 'lost' }
};

const TYPE_MAP = {
  welfare: '福彩',
  sports: '体彩'
};

function TicketList({ tickets, onSelect, title }) {
  if (!tickets || tickets.length === 0) {
    return (
      <div className="ticket-list">
        <div className="empty-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8" y1="2" x2="8" y2="6"/>
            <line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          <p>暂无彩票记录</p>
          <p>点击"拍照识别"或"手动添加"开始记录</p>
        </div>
      </div>
    );
  }

  return (
    <div className="ticket-list">
      <div className="ticket-list-header">
        <h3>{title || '彩票记录'} ({tickets.length})</h3>
      </div>

      {tickets.map(ticket => {
        const status = STATUS_MAP[ticket.status] || STATUS_MAP.pending;
        const typeLabel = TYPE_MAP[ticket.type] || ticket.type;

        // 格式化预计开奖时间
        const formatDrawTime = (isoString) => {
          if (!isoString) return '';
          const date = new Date(isoString);
          return date.toLocaleString('zh-CN', {
            month: 'numeric',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
        };

        return (
          <div key={ticket.id} className="ticket-item" onClick={() => onSelect(ticket)}>
            <div className="ticket-info">
              <h4>{typeLabel} - {ticket.game}</h4>
              <p>
                期号: {ticket.issue || '未填写'} |
                {ticket.bet_count}注 × {ticket.multiple}倍
                {ticket.is_additional ? ' (追加)' : ''}
              </p>
              {ticket.status === 'pending' && ticket.estimated_draw_time && (
                <p style={{color: '#ff9800', fontSize: '12px'}}>
                  预计开奖: {formatDrawTime(ticket.estimated_draw_time)}
                </p>
              )}
              <p>
                花费: ¥{ticket.cost}
                {ticket.prize > 0 && ` | 中奖: ¥${ticket.prize}`}
              </p>
              <p style={{fontSize: '12px', color: '#aaa'}}>
                {new Date(ticket.created_at).toLocaleString()}
              </p>
            </div>

            <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
              <span className={`ticket-status ${status.className}`}>
                {status.label}
              </span>
              <span style={{color: '#ccc', fontSize: '20px'}}>›</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default TicketList;
