"use client";

import { useEffect, useState } from "react";

interface TipAnimationProps {
  amount: number;
  trigger: boolean;
}

interface Coin {
  id: number;
  x: number;
  amount: number;
}

let coinIdCounter = 0;

export default function TipAnimation({ amount, trigger }: TipAnimationProps) {
  const [coins, setCoins] = useState<Coin[]>([]);

  useEffect(() => {
    if (trigger && amount > 0) {
      const newCoin: Coin = {
        id: ++coinIdCounter,
        x: 30 + Math.random() * 40, // Random horizontal position between 30-70%
        amount,
      };
      setCoins((prev) => [...prev, newCoin]);

      // Remove coin after animation completes
      const timer = setTimeout(() => {
        setCoins((prev) => prev.filter((c) => c.id !== newCoin.id));
      }, 2200);

      return () => clearTimeout(timer);
    }
  }, [trigger, amount]);

  if (coins.length === 0) return null;

  return (
    <div className="pointer-events-none fixed inset-0 z-50 overflow-hidden">
      <style>{`
        @keyframes tipCoinFloat {
          0% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
          50% {
            opacity: 1;
            transform: translateY(-120px) scale(1.2);
          }
          100% {
            opacity: 0;
            transform: translateY(-240px) scale(0.8);
          }
        }
      `}</style>
      {coins.map((coin) => (
        <div
          key={coin.id}
          className="absolute bottom-1/3"
          style={{
            left: `${coin.x}%`,
            animation: "tipCoinFloat 2s ease-out forwards",
          }}
        >
          <div className="flex flex-col items-center">
            {/* Gold coin */}
            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-400 via-gold to-yellow-600 border-2 border-yellow-300 shadow-[0_0_20px_rgba(212,175,55,0.6)] flex items-center justify-center">
              <span className="text-black font-bold text-lg">C</span>
            </div>
            {/* Amount label */}
            <span className="mt-1 bg-black/70 text-gold font-bold text-sm px-2 py-0.5 rounded-full whitespace-nowrap">
              +{coin.amount}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}