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 { Trophy, ArrowRight } from 'lucide-react'

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

  const sports = [
    { name: 'Football', icon: '🏈', filter: 'football' },
    { name: 'Basketball', icon: '🏀', filter: 'basketball' },
    { name: 'Hockey', icon: '🏒', filter: 'hockey' },
    { name: 'Soccer', icon: '⚽', filter: 'soccer' },
    { name: 'Baseball', icon: '⚾', filter: 'baseball' },
    { name: 'MMA', icon: '🥊', filter: 'mma' },
  ]

  // Group events by sport
  const eventsBySport = sports.map(sport => ({
    ...sport,
    events: events?.filter(e => e.sport.toLowerCase() === sport.filter) || [],
  }))

  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">
          <Trophy className="w-16 h-16 text-primary mx-auto mb-4" />
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Sports</h1>
          <p className="text-xl text-gray-600">Choose your sport and start betting</p>
        </div>

        {isLoading ? (
          <Loading />
        ) : (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {eventsBySport.map((sport) => (
              <div
                key={sport.name}
                className="bg-white rounded-xl shadow-sm p-6 border border-gray-100"
              >
                <div className="flex items-center gap-4 mb-4">
                  <span className="text-4xl">{sport.icon}</span>
                  <div>
                    <h2 className="text-2xl font-bold text-gray-900">{sport.name}</h2>
                    <p className="text-sm text-gray-500">{sport.events.length} events</p>
                  </div>
                </div>
                {sport.events.length > 0 ? (
                  <div className="space-y-2">
                    {sport.events.slice(0, 3).map((event) => (
                      <Link
                        key={event.id}
                        to={`/events/${event.id}`}
                        className="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <p className="font-medium text-gray-900 text-sm">
                          {event.home_team} vs {event.away_team}
                        </p>
                        <p className="text-xs text-gray-500">{event.league}</p>
                      </Link>
                    ))}
                    {sport.events.length > 3 && (
                      <p className="text-xs text-gray-400 text-center pt-2">
                        +{sport.events.length - 3} more events
                      </p>
                    )}
                  </div>
                ) : (
                  <p className="text-sm text-gray-400">No upcoming events</p>
                )}
              </div>
            ))}
          </div>
        )}

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