import { notification } from 'antd';
import { useRouter } from 'next/router';

type NotificationType = 'success' | 'info' | 'warning' | 'error';

const darkGlassStyle = {
  background: 'rgba(30, 32, 40, 0.95)',
  backdropFilter: 'blur(10px)',
  WebkitBackdropFilter: 'blur(10px)',
  border: '1px solid rgba(255, 255, 255, 0.08)',
  borderRadius: '8px',
  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
  padding: '12px 16px',
};

const messageStyle = {
  fontSize: '13px',
  fontWeight: 500,
  color: '#ffffff',
  marginBottom: '6px',
  display: 'flex',
  alignItems: 'center',
  gap: '6px',
};

const iconStyle = {
  color: '#F6B266', // 警告图标颜色
  background: 'rgba(246, 178, 102, 0.15)',
  padding: '4px',
  borderRadius: '6px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};

const descriptionStyle = {
  fontSize: '12px',
  color: 'rgba(255, 255, 255, 0.65)',
  marginBottom: '12px',
  lineHeight: '1.5',
};

const btnStyle = {
  color: 'rgb(250 173 20 / 90%)',
  background: 'transparent',
  border: 'none',
  cursor: 'pointer',
  padding: 0,
  fontSize: '12px',
  fontWeight: 500,
  textDecoration: 'underline',
  textUnderlineOffset: '2px',
  textDecorationColor: 'rgb(250 173 20 / 60%)',
  transition: 'all 0.2s ease',
};

/**
 * 显示积分不足通知
 * @description 在右上角显示一个带有充值链接的积分不足提醒
 */
export const showInsufficientPointsNotification = (detail?: {
  current_balance?: number;
  required_tokens?: number;
  message?: string;
}) => {
  notification.warning({
    message: null,
    description: (
      <div data-alt="insufficient-points-notification" style={{ minWidth: '280px' }}>
        <h3 style={messageStyle}>
        Insufficient credits reminder
        </h3>
        <p style={descriptionStyle}>
          {detail?.message || 'Your credits are insufficient, please upgrade to continue.'}
          {detail?.current_balance !== undefined && detail?.required_tokens !== undefined && (
            <>
              <br />
              <span style={{ color: 'rgba(255, 255, 255, 0.85)' }}>
                Current balance: {detail.current_balance} / Required: {detail.required_tokens}
              </span>
            </>
          )}
        </p>
        <button
          onClick={() => window.location.href = '/pricing'}
          style={btnStyle}
          data-alt="recharge-button"
        >
          Upgrade to continue →
        </button>
      </div>
    ),
    duration: 0,
    placement: 'topRight',
    style: darkGlassStyle,
    className: 'dark-glass-notification',
    closeIcon: (
      <button 
        className="hover:text-white"
        style={{
          background: 'transparent',
          border: 'none',
          padding: '2px',
          cursor: 'pointer',
          color: 'rgba(255, 255, 255, 0.45)',
          transition: 'color 0.2s ease',
        }}
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
    ),
  });
};

/**
 * 全局配置通知样式
 */
notification.config({
  maxCount: 3, // 最多同时显示3个通知
});