chajia/components/mothership/ms-refine-hold-prompt.tsx

/**
 * 登录态：确认是否继续补充信息以获取更准确报价（不对客户展示时限）
 */
"use client";

import { useRef } from "react";
import { PrimaryButton, SecondaryButton } from "@/components/ui/primary-button";
import { MS_NEEDS_DETAILS_MESSAGE } from "@/lib/constants/ms-refine-hold";

export type MsRefineHoldPromptProps = {
  decisionDeadlineMs: number;
  totalDeadlineMs: number;
  onContinue: () => void;
  onDecline: () => void;
  /** 首价未出，须补全信息后才能出价 */
  needsDetailsFirst?: boolean;
};

export function MsRefineHoldPrompt({
  onContinue,
  onDecline,
  needsDetailsFirst = false,
}: MsRefineHoldPromptProps) {
  const closedRef = useRef(false);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="ms-refine-hold-title"
    >
      <div className="w-full max-w-md rounded-lg border border-border bg-surface p-5 shadow-lg">
        <h2
          id="ms-refine-hold-title"
          className="text-base font-semibold text-text-primary"
        >
          {needsDetailsFirst
            ? "需补充信息以获取报价"
            : "补充信息以获取更准确报价"}
        </h2>
        <p className="mt-2 text-sm leading-relaxed text-text-secondary">
          {needsDetailsFirst
            ? MS_NEEDS_DETAILS_MESSAGE
            : "已获得初步报价。可继续填写提货/送货联系人、营业时间、货描等信息后重新获取更准确报价。"}
        </p>
        <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
          <SecondaryButton
            type="button"
            onClick={() => {
              if (closedRef.current) return;
              closedRef.current = true;
              onDecline();
            }}
          >
            {needsDetailsFirst ? "放弃询价" : "不继续填写"}
          </SecondaryButton>
          <PrimaryButton
            type="button"
            onClick={() => {
              if (closedRef.current) return;
              closedRef.current = true;
              onContinue();
            }}
          >
            {needsDetailsFirst ? "去补充信息" : "继续填写"}
          </PrimaryButton>
        </div>
      </div>
    </div>
  );
}