import React from 'react'
import { UnorderedListOutlined } from '@ant-design/icons'
import styles from './QuestionFloatButton.module.less'

interface QuestionFloatButtonProps {
  currentIndex: number
  totalQuestions: number
  onClick: () => void
  correctCount: number
  wrongCount: number
}

const QuestionFloatButton: React.FC<QuestionFloatButtonProps> = ({
  currentIndex,
  totalQuestions,
  onClick,
  correctCount,
  wrongCount,
}) => {
  if (totalQuestions === 0) return null

  const answeredCount = correctCount + wrongCount
  const progress = Math.round((answeredCount / totalQuestions) * 100)

  const radius = 28.5
  const circumference = 2 * Math.PI * radius

  return (
    <div className={styles.floatButtonWrapper}>
      {/* 统计信息卡片 */}
      <div className={styles.statsCard}>
        <div className={styles.statsRow}>
          <span className={styles.statsLabel}>进度</span>
          <span className={styles.statsValue}>
            {currentIndex + 1}/{totalQuestions}
          </span>
        </div>
        <div className={styles.statsDivider} />
        <div className={styles.statsRow}>
          <span className={styles.statsLabel}>正确</span>
          <span className={styles.statsValue} style={{ color: '#52c41a' }}>
            {correctCount}
          </span>
        </div>
        <div className={styles.statsDivider} />
        <div className={styles.statsRow}>
          <span className={styles.statsLabel}>错误</span>
          <span className={styles.statsValue} style={{ color: '#ff4d4f' }}>
            {wrongCount}
          </span>
        </div>
      </div>

      {/* 悬浮球 */}
      <div className={styles.floatButton} onClick={onClick}>
        {/* 进度环 */}
        <svg className={styles.progressRing} width="64" height="64">
          <circle
            className={styles.progressRingCircle}
            strokeWidth="3"
            fill="transparent"
            r={radius}
            cx="32"
            cy="32"
          />
          <circle
            className={styles.progressRingCircleProgress}
            strokeWidth="3"
            fill="transparent"
            r={radius}
            cx="32"
            cy="32"
            style={{
              strokeDasharray: `${circumference}`,
              strokeDashoffset: `${circumference * (1 - progress / 100)}`,
            }}
          />
        </svg>

        {/* 中心图标 */}
        <div className={styles.floatButtonContent}>
          <UnorderedListOutlined className={styles.icon} />
        </div>
      </div>
    </div>
  )
}

export default QuestionFloatButton