model-platform/frontend/app/features/admin/ProjectEditDialog.tsx

import { X } from "lucide-react";
import { type Workspace } from "../../services/api";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import {
  formFieldClass,
  modalBackdropClass,
  modalCompactClass,
  modalEyebrowClass,
  modalFooterClass,
  modalFormClass,
  modalHeaderClass,
  modalTitleClass,
} from "../platform/modalUi";

const CLOSE_BUTTON_CLASS =
  "size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
const SECONDARY_BUTTON_CLASS =
  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
const PRIMARY_BUTTON_CLASS =
  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
const FORM_INPUT_CLASS =
  "h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
const FORM_TEXTAREA_CLASS =
  "min-h-[92px] w-full resize-y rounded-md border border-[#d6e0e9] bg-white px-[11px] py-2.5 text-xs leading-[1.55] text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)]";

export function ProjectEditDialog({
  open,
  editingProject,
  projectForm,
  saving,
  onNotify,
  onChangeForm,
  onSubmit,
  onClose,
}: {
  open: boolean;
  editingProject: Workspace | null;
  projectForm: { workspace_code: string; workspace_name: string; quota_bytes: number; description: string };
  saving: boolean;
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onChangeForm: (next: { workspace_code: string; workspace_name: string; quota_bytes: number; description: string }) => void;
  onSubmit: (event: React.FormEvent) => Promise<void> | void;
  onClose: () => void;
}) {
  if (!open) return null;

  return (
    <div className={modalBackdropClass} role="presentation">
      <section className={modalCompactClass} role="dialog" aria-modal="true">
        <div className={modalHeaderClass}>
          <div>
            <span className={modalEyebrowClass}>PROJECT</span>
            <h2 className={modalTitleClass}>{editingProject ? "编辑项目" : "新建项目"}</h2>
          </div>
          <Button
            variant="ghost"
            size="icon-sm"
            type="button"
            aria-label="关闭"
            onClick={() => onClose()}
            className={CLOSE_BUTTON_CLASS}
          >
            <X size={16} />
          </Button>
        </div>
        <form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
          {!editingProject && (
            <label className={formFieldClass}>
              <span>项目编码<span className="text-[#e74c3c]">*</span></span>
              <Input
                className={FORM_INPUT_CLASS}
                autoFocus
                value={projectForm.workspace_code}
                onChange={(event) => onChangeForm({ ...projectForm, workspace_code: event.target.value })}
                placeholder="例如：model-development（小写字母、数字、连字符，3-32 字符）"
              />
            </label>
          )}
          <label className={formFieldClass}>
            <span>项目名称<span className="text-[#e74c3c]">*</span></span>
            <Input
              className={FORM_INPUT_CLASS}
              value={projectForm.workspace_name}
              onChange={(event) => onChangeForm({ ...projectForm, workspace_name: event.target.value })}
              placeholder="请输入项目名称"
            />
          </label>
          <label className={formFieldClass}>
            <span>配额（字节）</span>
            <Input
              className={FORM_INPUT_CLASS}
              type="number"
              value={projectForm.quota_bytes}
              onChange={(event) => onChangeForm({ ...projectForm, quota_bytes: parseInt(event.target.value) || 0 })}
              placeholder="0 表示无配额限制"
            />
          </label>
          <label className={formFieldClass}>
            <span>项目描述</span>
            <Textarea
              className={FORM_TEXTAREA_CLASS}
              value={projectForm.description}
              onChange={(event) => onChangeForm({ ...projectForm, description: event.target.value })}
              placeholder="请输入项目描述（可选）"
              rows={4}
            />
          </label>
          <div className={modalFooterClass}>
            <Button
              variant="outline"
              size="sm"
              type="button"
              onClick={() => onClose()}
              className={SECONDARY_BUTTON_CLASS}
            >
              取消
            </Button>
            <Button
              variant="default"
              size="sm"
              type="submit"
              disabled={saving}
              className={PRIMARY_BUTTON_CLASS}
            >
              {saving ? "保存中…" : "保存"}
            </Button>
          </div>
        </form>
      </section>
    </div>
  );
}