import { type FormEvent } from "react";
import Icon from "../../components/common/Icon";
import type { ScriptItem, Visibility } from "../../services/api";
import { scriptIcon } from "../../features/platform/WorkspaceTree";

type PublishModalProps = {
  publishTarget: ScriptItem | null;
  releaseNote: string;
  publishVisibility: Visibility;
  publishing: boolean;
  onReleaseNoteChange: (note: string) => void;
  onPublishVisibilityChange: (visibility: Visibility) => void;
  onSubmit: (event: FormEvent) => void;
  onClose: () => void;
};

export function PublishModal({
  publishTarget,
  releaseNote,
  publishVisibility,
  publishing,
  onReleaseNoteChange,
  onPublishVisibilityChange,
  onSubmit,
  onClose,
}: PublishModalProps) {
  if (!publishTarget) return null;

  return (
    <div className="modal-backdrop" role="presentation">
      <section className="modal publish-modal" role="dialog" aria-modal="true">
        <div className="modal__header">
          <div>
            <span className="modal__eyebrow">不可变制品</span>
            <h2>发布稳定版本</h2>
          </div>
          <button
            className="icon-button"
            type="button"
            aria-label="关闭"
            onClick={onClose}
          >
            <Icon name="close" />
          </button>
        </div>
        <form onSubmit={onSubmit}>
          <div className="publish-source">
            <span className={`file-icon file-icon--${publishTarget.script_type}`}>
              <Icon name={scriptIcon(publishTarget)} size={18} />
            </span>
            <span>
              <strong>{publishTarget.script_name}</strong>
              <small>当前 Workspace 工作副本</small>
            </span>
          </div>
          <label className="form-field">
            <span>发布说明</span>
            <textarea
              maxLength={1000}
              placeholder="例如：完成数据清洗和特征工程"
              value={releaseNote}
              onChange={(event) => onReleaseNoteChange(event.target.value)}
            />
            <small>稳定版本内容不可修改，可作为后续调度节点输入。</small>
          </label>
          <label className="form-field">
            <span>可见范围</span>
            <select
              value={publishVisibility}
              onChange={(event) =>
                onPublishVisibilityChange(event.target.value as Visibility)}
            >
              <option value="private">仅自己可见</option>
              <option value="workspace">Workspace 成员可见</option>
              <option value="public">公开</option>
            </select>
          </label>
          <div className="modal__footer">
            <button
              className="secondary-button"
              type="button"
              onClick={onClose}
            >
              取消
            </button>
            <button
              className="primary-button"
              type="submit"
              disabled={publishing}
            >
              {publishing
                ? <span className="button-spinner" />
                : <Icon name="release" size={16} />}
              {publishing ? "正在发布…" : "确认发布"}
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}