import Icon from "../common/Icon";
import type { StableVersion } from "../../services/api";

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

export function VersionReceiptModal({
  publishedVersion,
  onClose,
  onCopy,
}: VersionReceiptModalProps) {
  if (!publishedVersion) return null;

  return (
    <div className="modal-backdrop" role="presentation">
      <section className="modal version-receipt" role="dialog" aria-modal="true">
        <div className="version-receipt__check">
          <Icon name="check" size={28} />
        </div>
        <span className="modal__eyebrow">STABLE VERSION</span>
        <h2>稳定版本发布成功</h2>
        <p>
          {publishedVersion.version_label} 已成为不可变制品，
          后续调度将通过 versions_id 引用它。
        </p>
        <div className="version-id-box">
          <span>versions_id</span>
          <code>{publishedVersion.versions_id}</code>
          <button
            type="button"
            onClick={() => {
              void navigator.clipboard.writeText(
                publishedVersion.versions_id,
              );
              onCopy("versions_id 已复制");
            }}
          >
            复制
          </button>
        </div>
        <button
          className="primary-button version-receipt__close"
          type="button"
          onClick={onClose}
        >
          完成
        </button>
      </section>
    </div>
  );
}