import Icon from "../../components/common/Icon";
import type { StableVersion } from "../../services/api";
import { copyToClipboard } from "../../lib/clipboard";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import { modalEyebrowClass } from "./modalUi";

type VersionReceiptModalProps = {
  publishedVersion: StableVersion | null;
  onClose: () => void;
  onCopy: (text: string) => void;
};

export function VersionReceiptModal({
  publishedVersion,
  onClose,
  onCopy,
}: VersionReceiptModalProps) {
  return (
    <AppFormDialog
      open={publishedVersion !== null}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) onClose();
      }}
      showCloseButton={false}
      contentClassName="sm:max-w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center"
      bodyClassName="overflow-visible"
    >
      <div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-[0_9px_24px_rgb(25_157_104/25%)]">
        <Icon name="check" size={28} />
      </div>
      <span className={modalEyebrowClass}>STABLE VERSION</span>
      <h2 className="mb-2 mt-[5px] text-xl text-[#24374a]">
        稳定版本发布成功
      </h2>
      <p className="mx-auto mb-5 max-w-[360px] text-[11px] leading-[1.65] text-[#718093]">
        {publishedVersion?.version_label} 已成为不可变制品，
        后续调度将通过 versions_id 引用它。
      </p>
      <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[9px] rounded-[7px] border border-[#dce6ee] bg-[#f7fafc] px-3 py-[11px] text-left">
        <span className="text-[9px] text-[#8795a4]">versions_id</span>
        <code className="truncate text-[10px] text-[#275271]">
          {publishedVersion?.versions_id}
        </code>
        <button
          type="button"
          className="cursor-pointer rounded border border-[#bad3e8] bg-white px-2 py-1 text-[9px] text-[#2475b7]"
          onClick={async () => {
            if (!publishedVersion) return;
            await copyToClipboard(publishedVersion.versions_id);
            onCopy("versions_id 已复制");
          }}
        >
          复制
        </button>
      </div>
      <Button
        className={`${dialogPrimaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
        type="button"
        onClick={onClose}
      >
        完成
      </Button>
    </AppFormDialog>
  );
}