template-10550/src/components/PaymentCountdown.tsx

import React from 'react';
import { View, Text } from '@tarojs/components';
import {
  usePaymentCountdown,
  formatCountdownText,
  isUrgentCountdown,
  isCriticalCountdown
} from '@/hooks/usePaymentCountdown';
import './PaymentCountdown.scss';

export interface PaymentCountdownProps {
  /** 订单创建时间 */
  createTime?: string;
  /** 支付状态 */
  payStatus?: boolean;
  /** 是否实时更新（详情页用true，列表页用false） */
  realTime?: boolean;
  /** 超时小时数，默认24小时 */
  timeoutHours?: number;
  /** 是否显示秒数 */
  showSeconds?: boolean;
  /** 自定义样式类名 */
  className?: string;
  /** 过期回调 */
  onExpired?: () => void;
  /** 显示模式：badge(徽章模式) | text(纯文本模式) */
  mode?: 'badge' | 'text';
}

const PaymentCountdown: React.FC<PaymentCountdownProps> = ({
  createTime,
  payStatus = false,
  realTime = false,
  timeoutHours = 1,
  showSeconds = false,
  className = '',
  onExpired,
  mode = 'badge'
}) => {
  const timeLeft = usePaymentCountdown(createTime, payStatus, realTime, timeoutHours);

  // 如果已支付或没有创建时间，不显示倒计时
  if (payStatus || !createTime) {
    return null;
  }

  // 如果已过期，触发回调并显示过期状态
  if (timeLeft.isExpired) {
    onExpired?.();
    return (
      <Text className={`payment-countdown-text expired ${className}`}>
        支付已过期
      </Text>
    );
  }

  // 判断紧急程度
  const isUrgent = isUrgentCountdown(timeLeft);
  const isCritical = isCriticalCountdown(timeLeft);

  // 格式化倒计时文本
  const countdownText = formatCountdownText(timeLeft, showSeconds);
  const fullText = `等待付款 ${countdownText}`;

  // 纯文本模式
  if (mode === 'text') {
    return (
      <Text className={`payment-countdown-text ${isUrgent ? 'urgent' : ''} ${isCritical ? 'critical' : ''} ${className}`}>
        {fullText}
      </Text>
    );
  }

  // 徽章模式
  return (
    <View className={`payment-countdown-badge ${isUrgent ? 'urgent' : ''} ${isCritical ? 'critical' : ''} ${className}`}>
      <Text className="countdown-text">{fullText}</Text>
    </View>
  );
};

export default PaymentCountdown;