import { Link } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { Header } from '@/components/layout/Header'
import { Button } from '@/components/common/Button'
import { Loading } from '@/components/common/Loading'
import { sportEventsApi } from '@/api/sport-events'
import { Zap, ArrowRight, Clock } from 'lucide-react'

export const NewBets = () => {
  const { data: events, isLoading } = useQuery({
    queryKey: ['public-sport-events'],
    queryFn: () => sportEventsApi.getPublicEvents(),
  })

  // Show events with simulated bet activity
  const recentBets = events?.slice(0, 10).map((event, index) => ({
    id: index,
    event,
    amount: Math.floor(Math.random() * 500 + 25),
    spread: event.official_spread + (Math.random() > 0.5 ? 0.5 : -0.5),
    team: Math.random() > 0.5 ? event.home_team : event.away_team,
    timeAgo: `${Math.floor(Math.random() * 30 + 1)}m ago`,
  }))

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <Zap className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
          <h1 className="text-4xl font-bold text-gray-900 mb-4">New Bets</h1>
          <p className="text-xl text-gray-600">Fresh betting action from the community</p>
        </div>

        {isLoading ? (
          <Loading />
        ) : (
          <div className="space-y-4">
            {recentBets?.map((bet) => (
              <Link
                key={bet.id}
                to={`/events/${bet.event.id}`}
                className="block bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-100"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                      <span className="text-green-600 font-bold">${bet.amount}</span>
                    </div>
                    <div>
                      <p className="font-semibold text-gray-900">
                        {bet.team} {bet.spread > 0 ? '+' : ''}{bet.spread.toFixed(1)}
                      </p>
                      <p className="text-sm text-gray-500">
                        {bet.event.home_team} vs {bet.event.away_team}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded uppercase font-medium">
                      {bet.event.sport}
                    </span>
                    <span className="text-sm text-gray-400 flex items-center gap-1">
                      <Clock size={14} />
                      {bet.timeAgo}
                    </span>
                    <Button size="sm">View Event</Button>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}

        <div className="mt-12 text-center">
          <Link to="/">
            <Button variant="secondary" size="lg">
              View All Events 
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
