import { type FormEvent } from "react";
import { Upload } from "lucide-react";
import type { Visibility } from "../../services/api";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import {
  formFieldClass,
  formHintClass,
  formInputClass,
  formTextareaClass,
  modalFormClass,
} 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) {
  const finalTarget = targetPath.trim();
  const finalPath = finalTarget
    ? `${finalTarget}/${file?.name ?? ""}`
    : file?.name ?? "";

  return (
    <AppFormDialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen && !uploading) onClose();
      }}
      eyebrow="数据资源"
      title="上传数据文件"
    >
      <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="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
          <Button
            variant="outline"
            size="sm"
            type="button"
            onClick={onClose}
            disabled={uploading}
            className={dialogSecondaryButtonClass}
          >
            取消
          </Button>
          <Button
            variant="default"
            size="sm"
            type="submit"
            disabled={uploading || !resourceName.trim()}
            className={dialogPrimaryButtonClass}
          >
            {uploading ? (
              <span className="button-spinner" />
            ) : (
              <Upload size={16} />
            )}
            {uploading ? "上传中…" : "上传"}
          </Button>
        </div>
      </form>
    </AppFormDialog>
  );
}