"use client"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import { useBetslipStore } from "@/lib/store/betslip-store"
import { mockEvents, popularLeagues, type Event } from "@/lib/mock-data"
import { cn } from "@/lib/utils"
import { ChevronDown, BarChart2, TrendingUp, Plus } from "lucide-react"

function OddsButton({ odds, onClick, isSelected }: {
  odds: number
  onClick: () => void
  isSelected: boolean
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "flex items-center justify-center py-2 px-0.5 border-r border-border/10 text-[10px] transition-all min-w-0 bg-[#262626] hover:bg-[#333] h-full",
        isSelected && "bg-[#ff9800] text-black font-bold border-none"
      )}
    >
      <span className={cn("font-bold tracking-tighter", isSelected ? "text-black" : "text-[#ff9800]")}>{odds.toFixed(2)}</span>
    </button>
  )
}

function EventRow({ event }: { event: Event }) {
  const { bets, addBet } = useBetslipStore()
  
  return (
    <div className="bg-[#1a1a1a] border-b border-border/20 hover:bg-[#222] transition-colors h-[38px] flex items-center">
       {/* Small Icons & ID Column */}
       <div className="flex items-center gap-1.5 px-2 w-[80px] shrink-0 border-r border-border/10 h-full">
         <BarChart2 className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
         <TrendingUp className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
         <span className="text-[9.5px] text-[#ff9800] font-bold tabular-nums italic ml-0.5">{event.id || "01682"}</span>
       </div>

       {/* Time & Team Column */}
       <div className="flex items-center gap-3 px-3 w-[240px] shrink-0 border-r border-border/10 h-full">
         <div className="flex flex-col text-[9.5px] font-bold text-white leading-tight italic shrink-0 w-[45px]">
            <span>11:00</span>
            <span className="text-white/40 uppercase font-medium">PM</span>
         </div>
         <span className="text-[10px] font-bold text-white truncate max-w-[180px]">{event.homeTeam} - {event.awayTeam}</span>
       </div>

       {/* Market Columns Grid (10 Markets) */}
       <div className="flex-1 grid grid-cols-10 h-full shrink-0">
          {event.markets.slice(0, 10).map((market) => {
             const betId = `${event.id}-${market.id}`
             const isSelected = bets.some((b) => b.id === betId)
             return (
              <OddsButton
                key={market.id}
                odds={market.odds}
                isSelected={isSelected}
                onClick={() => addBet({
                  id: betId,
                  event: `${event.homeTeam} vs ${event.awayTeam}`,
                  league: event.league,
                  market: "1X2",
                  selection: `${event.homeTeam} (${market.label})`,
                  odds: market.odds,
                })}
              />
             )
          })}
       </div>

       {/* More Markets Button */}
       <button className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-border/10 group">
          <Plus className="size-3 text-white group-hover:scale-110 transition-transform" />
       </button>
    </div>
  )
}

const MARKET_HEADERS = ["1", "x", "2", "Over (2.5)", "Under (2.5)", "1X", "12", "X2", "Yes", "No"];

export function EventsList({ filter = "All", sport = "all", search = "" }: {
  filter?: string
  sport?: string
  search?: string
}) {
  const searchParams = useSearchParams()
  const leagueQuery = searchParams.get("league")
  const [selectedLeague, setSelectedLeague] = useState<string | null>(leagueQuery)
  const { bets, addBet } = useBetslipStore()

  useEffect(() => {
    setSelectedLeague(leagueQuery)
  }, [leagueQuery])

  const handleClose = () => {
    const url = new URL(window.location.href)
    url.searchParams.delete("league")
    window.history.pushState({}, "", url)
    setSelectedLeague(null)
  }

  const events = selectedLeague 
    ? mockEvents.filter(e => e.league.toLowerCase() === selectedLeague.toLowerCase())
    : mockEvents.filter((e) => {
        if (filter === "Live" && !e.isLive) return false
        if (sport !== "all" && e.sport.toLowerCase() !== sport.toLowerCase()) return false
        return true
      })

  // Common Header Rendering
  const renderTableHeaders = () => (
    <>
      {/* Table Header Categories */}
      <div className="bg-[#1a1a1a] border-b border-border/40 grid grid-cols-5 text-[11px] font-bold text-white uppercase text-center items-center h-9">
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Main</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Goals</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Handicap</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20 text-[9px] leading-tight">Half Time / Full Time</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer">Correct Score</div>
      </div>
      {/* Sub Headers */}
      <div className="bg-[#1a1a1a] border-b border-border/40 grid grid-cols-5 text-[10px] font-bold text-white uppercase text-center items-center h-8">
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">1st Half</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">2nd Half</div>
         <div className="h-full flex items-center justify-center bg-[#ff9800] text-black border-r border-border/10">Combo</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Chance Mix</div>
         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer">Home</div>
      </div>
    </>
  )

  const renderColumnHeaders = () => (
    <div className="bg-[#222] border-b border-white/5 h-8 flex items-center text-[9px] font-black text-white/40 uppercase">
       <div className="w-[180px] px-3 flex items-center gap-1.5 border-r border-border/10 h-full">Main</div>
       <div className="w-[180px] flex items-center justify-center border-r border-border/10 h-full">Over/Under</div>
       <div className="flex-1 grid grid-cols-10 text-center h-full items-center tracking-tighter">
          {MARKET_HEADERS.map(h => <span key={h}>{h}</span>)}
       </div>
       <div className="w-10 border-l border-border/10 h-full" />
    </div>
  )

  const renderEventItem = (event: Event) => (
    <div key={event.id} className="h-[34px] group flex items-center border-b border-white/5 bg-[#121212] hover:bg-white/5 transition-colors">
      {/* Stats & Icons */}
      <div className="w-[35px] flex items-center justify-center gap-1 px-2 border-r border-white/5 h-full opacity-40 group-hover:opacity-100">
        <BarChart2 className="size-3 cursor-pointer hover:text-primary" />
      </div>
      {/* ID */}
      <div className="w-[45px] text-[10px] font-black text-[#ff9800] italic tabular-nums text-center border-r border-white/5 h-full flex items-center justify-center">
        {event.id}
      </div>
      {/* Time */}
      <div className="w-[50px] flex flex-col items-center justify-center border-r border-white/5 h-full leading-none italic font-black text-[9px]">
        <span>{event.time}</span>
        <span className="text-[7px] text-white/30 uppercase mt-0.5">PM</span>
      </div>
      {/* Event Name */}
      <div className="flex-1 px-4 text-[10.5px] font-black text-white truncate max-w-[200px]">
        {event.homeTeam} - {event.awayTeam}
      </div>
      {/* Odds Grid */}
      <div className="flex-1 grid grid-cols-10 h-full">
        {event.markets.slice(0, 10).map((market) => {
          const betId = `${event.id}-${market.id}`
          const isSelected = bets.some((b) => b.id === betId)
          return (
            <button
              key={market.id}
              onClick={() => addBet({
                id: betId,
                event: `${event.homeTeam} vs ${event.awayTeam}`,
                league: event.league,
                market: "1X2",
                selection: `${event.homeTeam} (${market.label})`,
                odds: market.odds,
              })}
              className={cn(
                "flex items-center justify-center text-[10.5px] font-black tabular-nums transition-all border-r border-white/5",
                isSelected ? "bg-[#ff9800] text-black" : "text-[#ff9800] hover:bg-white/5"
              )}
            >
              {market.odds.toFixed(2)}
            </button>
          )
        })}
      </div>
      {/* More Button */}
      <button className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-white/5 text-white/40">
        <Plus className="size-3" />
      </button>
    </div>
  )

  if (selectedLeague) {
    // Group by date for league view
    const groupedEvents = events.reduce((acc, event) => {
      if (!acc[event.date]) acc[event.date] = []
      acc[event.date].push(event)
      return acc
    }, {} as Record<string, Event[]>)

    return (
      <div className="flex flex-col bg-[#121212] rounded overflow-hidden shadow-2xl">
        {/* League Header / Breadcrumbs */}
        <div className="bg-[#1a1a1a] px-3 py-2 flex items-center justify-between border-b border-border/20">
          <div className="flex items-center gap-2 text-[11px] font-bold text-white/60">
             <Plus className="size-3 cursor-pointer hover:text-white" />
             <div className="flex items-center gap-1.5">
                <span className="text-white font-black">•••</span>
                <span className="uppercase">Football</span>
                <span className="mx-1 opacity-20">|</span>
                <span className="text-white uppercase">{selectedLeague === "LaLiga" ? "Spain - LaLiga" : selectedLeague}</span>
             </div>
          </div>
          <button onClick={handleClose} className="text-white hover:text-primary transition-colors">
             <Plus className="size-5 rotate-45" />
          </button>
        </div>

        {/* Large Market Tab Grid */}
        <div className="grid grid-cols-5 bg-[#121212] border-b border-border/10">
           {[
             { label: "Main", active: true }, { label: "Goals" }, { label: "Handicap" }, { label: "Half Time / Full Time" }, { label: "Correct Score" },
             { label: "1st Half" }, { label: "2nd Half" }, { label: "Asian Markets" }, { label: "Corners" }, { label: "Home" }
           ].map((m, i) => (
             <button 
               key={i} 
               className={cn(
                 "h-8 border-r border-b border-border/10 flex items-center justify-center text-[10px] font-black uppercase transition-all",
                 m.active ? "bg-[#ff9800] text-black" : "text-white/60 hover:bg-[#222]"
               )}
             >
               {m.label}
             </button>
           ))}
        </div>

        {/* Column Headers */}
        {renderColumnHeaders()}

        {/* Grouped Events */}
        <div className="overflow-y-auto max-h-[700px]">
          {Object.entries(groupedEvents).map(([date, dateEvents]) => (
            <div key={date} className="flex flex-col">
              <div className="bg-[#1a1a1a] px-2 py-1 text-[10px] font-black text-white border-b border-white/5">
                {date}
              </div>
              {dateEvents.map(event => renderEventItem(event))}
            </div>
          ))}
        </div>
      </div>
    )
  }

  // Home View (No League Selected)
  const homeEventsByLeague = events.reduce((acc, event) => {
    if (!acc[event.league]) acc[event.league] = []
    acc[event.league].push(event)
    return acc
  }, {} as Record<string, Event[]>)

  return (
    <div className="flex flex-col bg-[#121212] rounded overflow-hidden">
      <div className="flex flex-col">
        {Object.entries(homeEventsByLeague).map(([leagueName, leagueEvents]) => (
          <div key={leagueName} className="flex flex-col border-b border-white/5 last:border-none">
            {/* League Box Header */}
            <div className="bg-[#2a2a2a] px-3 py-1.5 text-[10px] font-bold text-[#ff9800] uppercase border-y border-border/20 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-[14px]">
                  {popularLeagues.find(l => l.name === leagueName)?.icon || 
                   popularLeagues.find(l => l.id.toLowerCase() === leagueName.toLowerCase())?.icon || 
                   "⚽"}
                </span>
                <span>{leagueName === "LaLiga" ? "Spain - LaLiga" : 
                       leagueName === "Premier League" ? "England - Premier League" :
                       leagueName === "Bundesliga" ? "Germany - Bundesliga" :
                       leagueName === "Ligue 1" ? "France - Ligue 1" :
                       leagueName}</span>
              </div>
              <ChevronDown className="size-4 text-white" />
            </div>

            {/* Column Headers for each league box */}
            <div className="bg-[#222] px-3 py-1 flex items-center text-[8px] font-black text-white/40 uppercase border-b border-border/20">
               <div className="w-[180px] flex gap-4">
                  <span className="w-5 text-center">Stats</span>
                  <span className="w-6">ID</span>
                  <span className="w-10">Time</span>
                  <span>Event</span>
               </div>
               <div className="flex-1 grid grid-cols-10 text-center tracking-tighter">
                  {MARKET_HEADERS.map(h => <span key={h}>{h}</span>)}
               </div>
               <div className="w-10" />
            </div>

            {/* Matches in this league */}
            <div className="flex flex-col">
              {leagueEvents.map(event => renderEventItem(event))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}