'use client'
import React from 'react'

/**
 * 预购进度单元格组件
 * 在列表网格视图中显示订单计数和进度
 */
export function PreorderProgressCell({ rowData }: any) {
  const orderCount = parseInt(rowData?.orderCount || '0', 10) || 0
  const fakeOrderCount = parseInt(rowData?.fakeOrderCount || '0', 10) || 0
  const fundingGoal = parseInt(rowData?.fundingGoal || '0', 10) || 100
  
  const totalCount = orderCount + fakeOrderCount
  const percentage = fundingGoal > 0 ? Math.min(Math.round((totalCount / fundingGoal) * 100), 100) : 0

  return (
    <div className="preorder-progress-info">
      <div className="progress-label">
        <span>预购进度</span>
        <span className="progress-count">
          {totalCount} / {fundingGoal}
        </span>
      </div>
      
      <div className="progress-bar">
        <div 
          className="progress-fill" 
          style={{ width: `${percentage}%` }}
        />
      </div>

      <div className="progress-stats">
        <div className="stat-item">
          <span className="stat-label">真实</span>
          <span className="stat-value">{orderCount}</span>
        </div>
        <div className="stat-item">
          <span className="stat-label">Fake</span>
          <span className="stat-value">{fakeOrderCount}</span>
        </div>
        <div className="stat-item">
          <span className="stat-label">完成度</span>
          <span className="stat-value">{percentage}%</span>
        </div>
      </div>
    </div>
  )
}