import React from 'react';

const CreatePromotionDialog = ({
  showCreateDialog,
  formData,
  handleInputChange,
  closeCreateDialog,
  handleCreatePromotion,
  fetchPromoColdTorrents,
  showPromoColdTable,
  coldTorrents,
  handlePromoTorrentSelection
}) => {
  return (
    showCreateDialog && (
      <div className="dialog-overlay">
        <div className="dialog">
          <h3>创建冷门资源促销</h3>
          <div className="form-item">
            <label>促销名称：</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="请输入促销名称"
            />
          </div>
          <div className="form-item">
            <label>开始时间：</label>
            <input
              type="datetime-local"
              name="startTime"
              value={formData.startTime}
              onChange={handleInputChange}
            />
          </div>
          <div className="form-item">
            <label>结束时间：</label>
            <input
              type="datetime-local"
              name="endTime"
              value={formData.endTime}
              onChange={handleInputChange}
            />
          </div>
          <div className="form-item">
            <label>折扣百分比：</label>
            <input
              type="number"
              name="discountPercentage"
              value={formData.discountPercentage}
              onChange={handleInputChange}
              placeholder="正数表示上传加成，负数表示下载折扣"
              step="0.1"
            />
          </div>
          <div className="form-item">
            <label>适用种子：</label>
            <button 
              className="cold-btn small" 
              onClick={fetchPromoColdTorrents}
            >
              选择冷门资源 <span>(点击加载列表)</span>
            </button>
            
            {showPromoColdTable && (
              <div className="torrent-table-container">
                <table className="torrent-selection-table">
                  <thead>
                    <tr>
                      <th>选择</th>
                      <th>序号</th>
                      <th>资源名称</th>
                      <th>资源ID</th>
                      <th>分类</th>
                      <th>下载用户数</th>
                      <th>浏览次数</th>
                    </tr>
                  </thead>
                  <tbody>
                    {coldTorrents.map((torrent, index) => (
                      <tr key={torrent.id}>
                        <td>
                          <input
                            type="checkbox"
                            checked={formData.applicableTorrentIds.includes(torrent.id)}
                            onChange={(e) => handlePromoTorrentSelection(torrent.id, e.target.checked)}
                          />
                        </td>
                        <td>{index + 1}</td>
                        <td>{torrent.title}</td>
                        <td>{torrent.id}</td>
                        <td>{torrent.category || '未分类'}</td>
                        <td>{torrent.leechers || 0}</td>
                        <td>{torrent.views || 0}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          <div className="dialog-buttons">
            <button onClick={handleCreatePromotion}>确定</button>
            <button onClick={closeCreateDialog}>取消</button>
          </div>
        </div>
      </div>
    )
  );
};

export default CreatePromotionDialog;