breakpilot-lehrer/studio-v2/components/gamification/CoinAnimation.tsx

'use client'

import React, { useState, useEffect, useCallback } from 'react'

interface CoinAnimationProps {
  amount: number
  trigger: number // increment to trigger animation
}

interface FloatingCoin {
  id: number
  x: number
  delay: number
}

export function CoinAnimation({ amount, trigger }: CoinAnimationProps) {
  const [coins, setCoins] = useState<FloatingCoin[]>([])
  const [total, setTotal] = useState(0)
  const [showBounce, setShowBounce] = useState(false)

  useEffect(() => {
    if (trigger === 0) return

    // Create floating coins
    const newCoins: FloatingCoin[] = Array.from({ length: Math.min(amount, 5) }, (_, i) => ({
      id: Date.now() + i,
      x: Math.random() * 60 - 30,
      delay: i * 100,
    }))
    setCoins(newCoins)
    setShowBounce(true)

    // Update total after animation
    setTimeout(() => {
      setTotal((prev) => prev + amount)
      setShowBounce(false)
    }, 800)

    // Clean up coins
    setTimeout(() => setCoins([]), 1500)
  }, [trigger, amount])

  return (
    <div className="relative inline-flex items-center gap-1.5">
      {/* Coin icon + total */}
      <div className={`flex items-center gap-1 px-3 py-1 rounded-full bg-yellow-500/20 border border-yellow-500/30 transition-transform ${showBounce ? 'scale-110' : 'scale-100'}`}>
        <span className="text-yellow-400 text-sm">&#x1FA99;</span>
        <span className="text-yellow-300 text-sm font-bold tabular-nums">{total}</span>
      </div>

      {/* Floating coins animation */}
      {coins.map((coin) => (
        <span
          key={coin.id}
          className="absolute text-lg animate-coin-float pointer-events-none"
          style={{
            left: `calc(50% + ${coin.x}px)`,
            animationDelay: `${coin.delay}ms`,
          }}
        >
          &#x1FA99;
        </span>
      ))}

      <style>{`
        @keyframes coin-float {
          0% { transform: translateY(0) scale(1); opacity: 1; }
          100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
        }
        .animate-coin-float {
          animation: coin-float 1s ease-out forwards;
        }
      `}</style>
    </div>
  )
}

/** Hook to manage coin rewards */
export function useCoinRewards() {
  const [totalCoins, setTotalCoins] = useState(0)
  const [triggerCount, setTriggerCount] = useState(0)
  const [lastReward, setLastReward] = useState(0)

  const awardCoins = useCallback((amount: number) => {
    setLastReward(amount)
    setTriggerCount((c) => c + 1)
    setTotalCoins((t) => t + amount)
  }, [])

  return { totalCoins, triggerCount, lastReward, awardCoins }
}