import { useEffect, useState, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'

interface ConfettiPiece {
  id: number
  x: number
  color: string
  delay: number
  duration: number
  size: number
  rotation: number
}

interface CelebrationProps {
  isOpen: boolean
  onClose: () => void
  onReset?: () => void
}

// 生成随机纸屑
function generateConfetti(count: number): ConfettiPiece[] {
  const colors = [
    'var(--color-primary)', // 青色
    'var(--color-success)', // 绿色
    'var(--color-amber)',   // 琥珀色
    '#FF6B6B',              // 珊瑚红
    '#A78BFA',              // 紫罗兰
    '#FBBF24',              // 金色
  ]

  return Array.from({ length: count }, (_, i) => ({
    id: i,
    x: Math.random() * 100,
    color: colors[Math.floor(Math.random() * colors.length)],
    delay: Math.random() * 0.5,
    duration: 2 + Math.random() * 2,
    size: 8 + Math.random() * 8,
    rotation: Math.random() * 360,
  }))
}

function Confetti({ pieces }: { pieces: ConfettiPiece[] }) {
  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden z-50">
      {pieces.map((piece) => (
        <div
          key={piece.id}
          className="absolute top-0 animate-confetti-fall"
          style={{
            left: `${piece.x}%`,
            width: piece.size,
            height: piece.size * 0.6,
            backgroundColor: piece.color,
            borderRadius: '2px',
            animationDelay: `${piece.delay}s`,
            animationDuration: `${piece.duration}s`,
            transform: `rotate(${piece.rotation}deg)`,
          }}
        />
      ))}
    </div>
  )
}

function CelebrationModal({ isOpen, onClose, onReset }: CelebrationProps) {
  const [confetti, setConfetti] = useState<ConfettiPiece[]>([])

  useEffect(() => {
    if (isOpen) {
      // 生成纸屑
      setConfetti(generateConfetti(60))
      // 3秒后清除纸屑
      const timer = setTimeout(() => setConfetti([]), 5000)
      return () => clearTimeout(timer)
    }
  }, [isOpen])

  if (!isOpen) return null

  return createPortal(
    <>
      <Confetti pieces={confetti} />
      <div className="fixed inset-0 z-40 flex items-center justify-center p-4">
        {/* 背景遮罩 */}
        <div
          className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
          onClick={onClose}
        />

        {/* 弹窗内容 */}
        <div className="relative bg-[var(--color-bg-elevated)] border border-[var(--color-border)] rounded-2xl p-8 max-w-md w-full animate-scale-in shadow-2xl">
          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-card)] transition-colors"
          >
            <X className="w-5 h-5" strokeWidth={2} />
          </button>

          {/* 庆祝图标 */}
          <div className="text-center mb-6">
            <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-primary-dim)] mb-4 animate-bounce-slow">
              <span className="text-4xl">🎉</span>
            </div>
            <h2 className="text-2xl font-bold text-[var(--color-text)] mb-2">
              恭喜完成全部教程！
            </h2>
            <p className="text-[var(--color-text-secondary)]">
              你已经掌握了所有知识点，太棒了！
            </p>
          </div>

          {/* 统计信息 */}
          <div className="grid grid-cols-2 gap-4 mb-6">
            <div className="bg-[var(--color-bg-card)] rounded-xl p-4 text-center">
              <div className="text-3xl font-bold text-[var(--color-primary-solid)] mb-1">100%</div>
              <div className="text-sm text-[var(--color-text-muted)]">完成进度</div>
            </div>
            <div className="bg-[var(--color-bg-card)] rounded-xl p-4 text-center">
              <div className="text-3xl font-bold text-[var(--color-success)] mb-1">✓</div>
              <div className="text-sm text-[var(--color-text-muted)]">全部完成</div>
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="flex gap-3">
            <button
              onClick={onClose}
              className="flex-1 px-4 py-3 rounded-xl bg-[var(--color-bg-card)] text-[var(--color-text-secondary)] font-medium hover:text-[var(--color-text)] transition-colors"
            >
              关闭
            </button>
            <button
              onClick={onReset || onClose}
              className="flex-1 px-4 py-3 rounded-xl bg-[var(--color-primary-solid)] text-[var(--color-on-primary)] font-semibold hover:opacity-90 transition-opacity"
            >
              重新学习
            </button>
          </div>
        </div>
      </div>
    </>,
    document.body
  )
}

export function Celebration() {
  const [isOpen, setIsOpen] = useState(false)
  const [hasShown, setHasShown] = useState(false)

  // 监听完成事件
  useEffect(() => {
    const handleComplete = () => {
      if (!hasShown) {
        setIsOpen(true)
        setHasShown(true)
      }
    }

    window.addEventListener('tutorial-complete', handleComplete)
    return () => window.removeEventListener('tutorial-complete', handleComplete)
  }, [hasShown])

  const handleClose = useCallback(() => {
    setIsOpen(false)
  }, [])

  const handleReset = useCallback(() => {
    setIsOpen(false)
    // 触发重置事件
    window.dispatchEvent(new CustomEvent('tutorial-reset'))
    setHasShown(false)
  }, [])

  return (
    <CelebrationModal
      isOpen={isOpen}
      onClose={handleClose}
      onReset={handleReset}
    />
  )
}

// 触发庆祝的 hook
export function useCelebration() {
  const triggerCelebration = useCallback(() => {
    window.dispatchEvent(new CustomEvent('tutorial-complete'))
  }, [])

  return { triggerCelebration }
}