import React from 'react';
import FieldLabel from './FieldLabel';

export default function ScoringDimensions({
  scoring,
  dimensions,
  onUpdateScoring,
  onUpdateDimension,
  onRemoveDimension,
  onAddDimension,
}) {
  return (
    <div className="studio-scoring-block">
      <h3 className="studio-scoring-block__title">
        <FieldLabel tip="定义评分维度及修改时的参考标准，用于循环迭代直至满意">
          评判维度与如何完善
        </FieldLabel>
      </h3>

      <label className="studio-edit-switch-row studio-edit-switch-row--compact">
        <input
          type="checkbox"
          checked={scoring.enabled ?? true}
          onChange={(e) => onUpdateScoring('enabled', e.target.checked)}
        />
        启用评分
      </label>

      <div className="studio-dim-list">
        {dimensions.map((dim, index) => (
          <div key={dim.id || index} className="studio-dim-card">
            <div className="studio-dim-card__fields">
              <label className="studio-edit-field">
                <span className="studio-edit-field-label">维度名称</span>
                <input
                  type="text"
                  className="studio-edit-input"
                  value={dim.name}
                  onChange={(e) =>
                    onUpdateDimension(index, 'name', e.target.value)
                  }
                  placeholder="例如：真实性"
                />
              </label>
              <label className="studio-edit-field">
                <span className="studio-edit-field-label">
                  <FieldLabel tip="说明如何改进，并作为评判参考">
                    如何完善（含评判参考）
                  </FieldLabel>
                </span>
                <textarea
                  className="studio-edit-textarea studio-edit-textarea--compact"
                  rows={2}
                  value={dim.criteria}
                  onChange={(e) =>
                    onUpdateDimension(index, 'criteria', e.target.value)
                  }
                  placeholder="说明如何改进，并作为评判参考…"
                />
              </label>
            </div>
            <button
              type="button"
              className="studio-dim-card__remove"
              title="删除此维度"
              onClick={() => onRemoveDimension(index)}
            >
              删除
            </button>
          </div>
        ))}
      </div>

      <button
        type="button"
        className="studio-edit-btn-ghost"
        onClick={onAddDimension}
      >
        + 新增维度
      </button>
    </div>
  );
}
