import { type FormEvent } from "react";
import Icon from "../../components/common/Icon";

type CreateFolderModalProps = {
  open: boolean;
  parentPath: string;
  name: string;
  busy: boolean;
  onNameChange: (name: string) => void;
  onSubmit: (event: FormEvent) => void;
  onClose: () => void;
};

export function CreateFolderModal({
  open,
  parentPath,
  name,
  busy,
  onNameChange,
  onSubmit,
  onClose,
}: CreateFolderModalProps) {
  if (!open) return null;

  return (
    <div className="modal-backdrop" role="presentation">
      <section className="modal modal--compact" role="dialog" aria-modal="true">
        <div className="modal__header">
          <div>
            <span className="modal__eyebrow">WORKSPACE</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} />
            创建到：{parentPath || "个人根目录"}
          </div>
          <label className="form-field">
            <span>文件夹名称</span>
            <input
              autoFocus
              maxLength={255}
              placeholder="例如：模型训练"
              value={name}
              onChange={(event) => onNameChange(event.target.value)}
            />
          </label>
          <div className="modal__footer">
            <button
              className="secondary-button"
              type="button"
              onClick={onClose}
            >
              取消
            </button>
            <button
              className="primary-button"
              type="submit"
              disabled={busy || !name.trim()}
            >
              {busy
                ? <span className="button-spinner" />
                : <Icon name="folder" size={16} />}
              {busy ? "正在创建…" : "创建文件夹"}
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}