import { type FormEvent } from "react";
import Icon from "../common/Icon";
import type { ScriptType, Visibility } from "../../services/api";

type NewScriptForm = {
  name: string;
  scriptType: ScriptType;
  visibility: Visibility;
  parentPath: string;
};

type CreateScriptModalProps = {
  open: boolean;
  creating: boolean;
  form: NewScriptForm;
  scripts: Array<{ script_type: ScriptType; script_name: string }>;
  onFormChange: (form: NewScriptForm) => void;
  onSubmit: (event: FormEvent) => void;
  onClose: () => void;
};

export function CreateScriptModal({
  open,
  creating,
  form,
  scripts,
  onFormChange,
  onSubmit,
  onClose,
}: CreateScriptModalProps) {
  if (!open) return null;

  const suffix = form.scriptType === "notebook" ? ".ipynb" : ".py";
  const requestedName = form.name.trim();
  const normalizedName = requestedName.toLocaleLowerCase().endsWith(suffix)
    ? requestedName
    : `${requestedName}${suffix}`;
  const duplicate = scripts.some((script) =>
    script.script_type === form.scriptType
    && script.script_name.toLocaleLowerCase() === normalizedName.toLocaleLowerCase()
  );

  return (
    <div className="modal-backdrop" role="presentation">
      <section className="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="destination-chip">
            <Icon name="folder" size={16} />
            保存到：{form.parentPath || "个人根目录"}
          </div>
          <label className="form-field">
            <span>脚本名称</span>
            <input
              autoFocus
              maxLength={255}
              placeholder={form.scriptType === "notebook"
                ? "例如：数据探索"
                : "例如：data_process"}
              value={form.name}
              onChange={(event) =>
                onFormChange({
                  ...form,
                  name: event.target.value,
                })}
            />
            <small>
              系统会自动补充
              {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
            </small>
          </label>

          <fieldset className="type-picker">
            <legend>脚本类型</legend>
            <button
              className={form.scriptType === "notebook" ? "is-selected" : ""}
              type="button"
              onClick={() => onFormChange({
                ...form,
                scriptType: "notebook",
              })}
            >
              <span className="type-picker__icon type-picker__icon--notebook">
                <Icon name="notebook" size={22} />
              </span>
              <span>
                <strong>Jupyter Notebook</strong>
                <small>交互式数据探索与模型实验</small>
              </span>
              <span className="type-picker__check">
                <Icon name="check" size={14} />
              </span>
            </button>
            <button
              className={form.scriptType === "python" ? "is-selected" : ""}
              type="button"
              onClick={() => onFormChange({
                ...form,
                scriptType: "python",
              })}
            >
              <span className="type-picker__icon type-picker__icon--python">
                <Icon name="python" size={23} />
              </span>
              <span>
                <strong>Python 脚本</strong>
                <small>批处理、训练和模型调用任务</small>
              </span>
              <span className="type-picker__check">
                <Icon name="check" size={14} />
              </span>
            </button>
          </fieldset>

          <label className="form-field">
            <span>可见范围</span>
            <select
              value={form.visibility}
              onChange={(event) =>
                onFormChange({
                  ...form,
                  visibility: 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={creating || !form.name.trim()}
            >
              {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
              {creating ? "正在创建…" : "创建脚本"}
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}