chajia/components/flock/flock-quote-hold-prompt.tsx

/**
 * Flock 登录态：首价后 60s 确认是否继续填二级以下单（对齐 MS refine-hold）
 */
"use client";

import { useEffect, useRef, useState } from "react";
import { PrimaryButton, SecondaryButton } from "@/components/ui/primary-button";
import { formatFlockHoldRemainingLabel } from "@/lib/constants/flock-quote-hold";

export type FlockQuoteHoldPromptProps = {
  decisionDeadlineMs: number;
  totalDeadlineMs: number;
  onContinue: () => void;
  onDecline: () => void;
};

export function FlockQuoteHoldPrompt({
  decisionDeadlineMs,
  totalDeadlineMs,
  onContinue,
  onDecline,
}: FlockQuoteHoldPromptProps) {
  const [now, setNow] = useState(() => Date.now());
  const closedRef = useRef(false);

  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 250);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    if (closedRef.current) return;
    if (now >= decisionDeadlineMs || now >= totalDeadlineMs) {
      closedRef.current = true;
      onDecline();
    }
  }, [now, decisionDeadlineMs, totalDeadlineMs, onDecline]);

  const decisionLeft = formatFlockHoldRemainingLabel(decisionDeadlineMs, now);
  const totalLeft = formatFlockHoldRemainingLabel(totalDeadlineMs, now);

  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="flock-quote-hold-title"
    >
      <div className="w-full max-w-md rounded-lg border border-border bg-surface p-5 shadow-lg">
        <h2
          id="flock-quote-hold-title"
          className="text-base font-semibold text-text-primary"
        >
          更新二级信息以完成下单
        </h2>
        <p className="mt-2 text-sm leading-relaxed text-text-secondary">
          已获得初步报价。请先确认继续，再在右侧点击「查看报价选项」选择灵活价，然后填写提货/送货与货物详情（同一官网会话同步结账，不支付）。
        </p>
        <p className="mt-3 text-sm text-text-primary">
          请在 <span className="font-semibold text-error">{decisionLeft}</span>{" "}
          内选择；总时限剩余{" "}
          <span className="font-medium">{totalLeft}</span>
          （超时将结束询价进程并保留当前报价）。
        </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();
            }}
          >
            不继续填写
          </SecondaryButton>
          <PrimaryButton
            type="button"
            onClick={() => {
              if (closedRef.current) return;
              closedRef.current = true;
              onContinue();
            }}
          >
            继续填写
          </PrimaryButton>
        </div>
      </div>
    </div>
  );
}