model-platform/frontend/app/features/platform/DataResourceUploadModal.tsx

import { type FormEvent } from "react";
import Icon from "../../components/common/Icon";
import type { Visibility } from "../../services/api";
import {
  formFieldClass,
  formHintClass,
  formInputClass,
  formTextareaClass,
  iconButtonClass,
  modalBackdropClass,
  modalCompactClass,
  modalEyebrowClass,
  modalFooterClass,
  modalFormClass,
  modalHeaderClass,
  modalTitleClass,
  primaryButtonClass,
  secondaryButtonClass,
} from "./modalUi";

type DataResourceUploadModalProps = {
  open: boolean;
  file: File | null;
  resourceName: string;
  visibility: Visibility;
  description: string;
  uploading: boolean;
  parentPath: string;
  targetPath: string;
  onNameChange: (name: string) => void;
  onVisibilityChange: (visibility: Visibility) => void;
  onDescriptionChange: (description: string) => void;
  onTargetPathChange: (path: string) => void;
  onSubmit: (event: FormEvent) => void;
  onClose: () => void;
};

export function DataResourceUploadModal({
  open,
  file,
  resourceName,
  visibility,
  description,
  uploading,
  parentPath,
  targetPath,
  onNameChange,
  onVisibilityChange,
  onDescriptionChange,
  onTargetPathChange,
  onSubmit,
  onClose,
}: DataResourceUploadModalProps) {
  if (!open) return null;

  const finalTarget = targetPath.trim();
  const finalPath = finalTarget
    ? `${finalTarget}/${file?.name ?? ""}`
    : file?.name ?? "";

  return (
    <div className={modalBackdropClass} role="presentation">
      <section className={modalCompactClass} role="dialog" aria-modal="true">
        <div className={modalHeaderClass}>
          <div>
            <span className={modalEyebrowClass}>数据资源</span>
            <h2 className={modalTitleClass}>上传数据文件</h2>
          </div>
          <button
            className={iconButtonClass}
            type="button"
            aria-label="关闭"
            onClick={onClose}
          >
            <Icon name="close" />
          </button>
        </div>
        <form className={modalFormClass} onSubmit={onSubmit}>
          <label className={formFieldClass}>
            <span>已选文件</span>
            <div className="font-normal text-[#283a4e]">
              {file ? file.name : "未选择文件"}
            </div>
          </label>
          <label className={formFieldClass}>
            <span>资源名称</span>
            <input
              className={formInputClass}
              autoFocus
              maxLength={255}
              placeholder="例如：训练数据"
              value={resourceName}
              onChange={(event) => onNameChange(event.target.value)}
              required
            />
          </label>
          <label className={formFieldClass}>
            <span>子目录</span>
            <input
              className={formInputClass}
              type="text"
              maxLength={1024}
              placeholder="例如：train/v1（留空上传到当前目录）"
              value={targetPath}
              onChange={(event) => onTargetPathChange(event.target.value)}
            />
            <small className={formHintClass}>
              {parentPath
                ? `当前位于 ${parentPath || "根目录"} · 最终路径：${finalPath || "—"}`
                : `最终路径：${finalPath || "—"}`}
            </small>
          </label>
          <label className={formFieldClass}>
            <span>可见性</span>
            <select
              className={formInputClass}
              value={visibility}
              onChange={(event) =>
                onVisibilityChange(event.target.value as Visibility)
              }
            >
              <option value="private">私有</option>
              <option value="workspace">工作区</option>
              <option value="public">公开</option>
            </select>
          </label>
          <label className={formFieldClass}>
            <span>描述</span>
            <textarea
              className={formTextareaClass}
              rows={3}
              placeholder="可选描述"
              value={description}
              onChange={(event) => onDescriptionChange(event.target.value)}
            />
          </label>
          <div className={modalFooterClass}>
            <button
              className={secondaryButtonClass}
              type="button"
              onClick={onClose}
              disabled={uploading}
            >
              取消
            </button>
            <button
              className={primaryButtonClass}
              type="submit"
              disabled={uploading || !resourceName.trim()}
            >
              {uploading ? (
                <span className="button-spinner" />
              ) : (
                <Icon name="upload" size={16} />
              )}
              {uploading ? "上传中…" : "上传"}
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}