import { useQuery } from '@tanstack/react-query'
import { getWhaleBets } from '../../api/gamification'
import { formatDistanceToNow } from 'date-fns'
import type { WhaleBet } from '../../types/gamification'

const TIER_COLORS: Record<string, string> = {
  'Bronze I': 'text-amber-700',
  'Bronze II': 'text-amber-700',
  'Bronze III': 'text-amber-700',
  'Silver I': 'text-gray-500',
  'Silver II': 'text-gray-500',
  'Silver III': 'text-gray-500',
  'Gold I': 'text-yellow-600',
  'Gold II': 'text-yellow-600',
  'Gold III': 'text-yellow-600',
  'Platinum': 'text-cyan-600',
  'Diamond': 'text-purple-600',
}

function getWhaleEmoji(amount: number): string {
  if (amount >= 5000) return '🐋'
  if (amount >= 2000) return '🦈'
  if (amount >= 1000) return '🐬'
  return '🐟'
}

export default function WhaleTracker() {
  const { data: whales = [], isLoading } = useQuery({
    queryKey: ['whale-bets'],
    queryFn: () => getWhaleBets(10),
    refetchInterval: 15000,
    retry: 1,
  })

  return (
    <div className="bg-white rounded-xl shadow-sm p-6">
      <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
        <span className="text-2xl">🐋</span> Whale Tracker
      </h3>

      {isLoading ? (
        <div className="space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
          ))}
        </div>
      ) : whales.length === 0 ? (
        <p className="text-gray-500 text-center py-4">No big bets yet... Be the first whale!</p>
      ) : (
        <div className="space-y-3">
          {whales.map((whale: WhaleBet, index: number) => {
            const amount = whale.amount ?? 0
            return (
              <div
                key={whale.id ?? `whale-${index}`}
                className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-2 min-w-0">
                    <span className="text-xl">{getWhaleEmoji(amount)}</span>
                    <div className="min-w-0">
                      <p className="text-gray-900 font-medium text-sm truncate">
                        {whale.display_name || whale.username || 'Unknown'}
                      </p>
                      <p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
                        {whale.tier_name || 'Unranked'}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-green-600 font-bold">
                      ${amount.toLocaleString()}
                    </p>
                    <p className="text-gray-500 text-xs">
                      {whale.created_at ? formatDistanceToNow(new Date(whale.created_at), { addSuffix: true }) : 'Recently'}
                    </p>
                  </div>
                </div>
                <div className="mt-2 text-xs text-gray-600 truncate">
                  <span className="text-gray-400">on</span> {whale.event_title || 'Unknown event'}
                  <span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
                    {whale.side || '-'}
                  </span>
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
