import { Link, useParams } from 'react-router-dom'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { useAuthStore } from '@/store'
import { sportEventsApi } from '@/api/sport-events'
import { SpreadGrid } from '@/components/bets/SpreadGrid'
import { TradingPanel } from '@/components/bets/TradingPanel'
import { Button } from '@/components/common/Button'
import { Loading } from '@/components/common/Loading'
import { Header } from '@/components/layout/Header'
import { ChevronLeft } from 'lucide-react'

export const EventDetail = () => {
  const { id } = useParams<{ id: string }>()
  const eventId = parseInt(id || '0', 10)
  const { isAuthenticated } = useAuthStore()
  const queryClient = useQueryClient()

  const { data: event, isLoading, error } = useQuery({
    queryKey: ['sport-event', eventId, isAuthenticated],
    queryFn: () =>
      isAuthenticated
        ? sportEventsApi.getEventWithGrid(eventId)
        : sportEventsApi.getPublicEventWithGrid(eventId),
    enabled: eventId > 0,
  })

  const handleBetCreated = () => {
    // Refetch event data to show new bet
    queryClient.invalidateQueries({ queryKey: ['sport-event', eventId] })
    queryClient.invalidateQueries({ queryKey: ['public-sport-events'] })
  }

  const handleBetTaken = () => {
    // Refetch event data to update bet status
    queryClient.invalidateQueries({ queryKey: ['sport-event', eventId] })
    queryClient.invalidateQueries({ queryKey: ['public-sport-events'] })
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header />
        <div className="px-4 sm:px-6 lg:px-8 py-8">
          <Link to="/">
            <Button variant="secondary">
              <ChevronLeft size={20} className="mr-2" />
              Back to Events
            </Button>
          </Link>
          <div className="mt-8">
            <Loading />
          </div>
        </div>
      </div>
    )
  }

  if (error || !event) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header />
        <div className="px-4 sm:px-6 lg:px-8 py-8">
          <Link to="/">
            <Button variant="secondary">
              <ChevronLeft size={20} className="mr-2" />
              Back to Events
            </Button>
          </Link>
          <div className="mt-8 text-center py-12 bg-white rounded-lg shadow">
            <p className="text-gray-500">Event not found</p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <div className="px-4 sm:px-6 lg:px-8 py-8">
        <Link to="/">
          <Button variant="secondary" className="mb-6">
            <ChevronLeft size={20} className="mr-2" />
            Back to Events
          </Button>
        </Link>

        {/* Trading Panel - Exchange-style interface */}
        <div className="mb-8">
          <TradingPanel
            event={event}
            onBetCreated={handleBetCreated}
            onBetTaken={handleBetTaken}
          />
        </div>

        {/* Spread Grid - Visual betting grid */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Spread Grid</h2>
          <SpreadGrid
            event={event}
            onBetCreated={handleBetCreated}
            onBetTaken={handleBetTaken}
          />
        </div>
      </div>
    </div>
  )
}
