import { type Workspace } from "../../services/api";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import {
  formFieldClass,
  modalFormClass,
} from "../platform/modalUi";

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:ring-3 focus:ring-brand/10 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:ring-3 focus:ring-brand/10";

export function ProjectEditDialog({
  open,
  editingProject,
  projectForm,
  saving,
  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;
}) {
  return (
    <AppFormDialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) onClose();
      }}
      eyebrow="PROJECT"
      title={editingProject ? "编辑项目" : "新建项目"}
    >
      <form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
        {!editingProject && (
          <label className={formFieldClass}>
            <span>项目编码<span className="text-danger">*</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-danger">*</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="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
          <Button
            variant="outline"
            size="sm"
            type="button"
            onClick={() => onClose()}
            className={dialogSecondaryButtonClass}
          >
            取消
          </Button>
          <Button
            variant="default"
            size="sm"
            type="submit"
            disabled={saving}
            className={dialogPrimaryButtonClass}
          >
            {saving ? "保存中…" : "保存"}
          </Button>
        </div>
      </form>
    </AppFormDialog>
  );
}