import { type FormEvent } from "react";
import { Check, Loader2Icon } from "lucide-react";

import { Button } from "~/components/ui/button";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import {
  formFieldClass,
  formInputClass,
  modalFormClass,
} from "~/features/platform/modalUi";

import { useSchedulesStore } from "./state/useSchedulesStore";

export function ScheduleRenameDialog() {
  const renameTarget = useSchedulesStore((s) => s.renameTarget);
  const renameName = useSchedulesStore((s) => s.renameName);
  const busy = useSchedulesStore((s) => s.busy);
  const setRenameName = useSchedulesStore((s) => s.setRenameName);
  const closeRenameDialog = useSchedulesStore((s) => s.closeRenameDialog);

  const renaming = busy === "rename-schedule";
  const trimmed = renameName.trim();
  const unchanged = Boolean(
    renameTarget && trimmed === renameTarget.schedule_name,
  );

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!renameTarget || !trimmed || unchanged) return;
    void useSchedulesStore.getState().renameSchedule(renameTarget, trimmed);
  };

  return (
    <AppFormDialog
      open={renameTarget !== null}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) closeRenameDialog();
      }}
      eyebrow="SCHEDULE"
      title="改名调度方案"
      titleId="rename-schedule-title"
    >
      <form className={modalFormClass} onSubmit={handleSubmit}>
        <label className={formFieldClass}>
          <span>调度方案名称</span>
          <input
            className={formInputClass}
            autoFocus
            maxLength={255}
            placeholder="请输入新的调度方案名称"
            value={renameName}
            onChange={(event) => setRenameName(event.target.value)}
            onFocus={(event) => event.currentTarget.select()}
          />
        </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
            type="button"
            variant="outline"
            size="sm"
            disabled={renaming}
            onClick={closeRenameDialog}
            className={dialogSecondaryButtonClass}
          >
            取消
          </Button>
          <Button
            type="submit"
            variant="default"
            size="sm"
            disabled={renaming || !trimmed || unchanged}
            className={dialogPrimaryButtonClass}
          >
            {renaming
              ? <Loader2Icon className="size-4 animate-spin" />
              : <Check size={15} />}
            {renaming ? "正在保存…" : "保存"}
          </Button>
        </div>
      </form>
    </AppFormDialog>
  );
}