"use client"

import { useBetslipStore } from "@/lib/store/betslip-store"
import { mockEvents, type Event } from "@/lib/mock-data"
import { cn } from "@/lib/utils"
import { BarChart2, TrendingUp, Monitor, Tv } from "lucide-react"


function LiveEventRow({ event, isNoOdds }: { event: Event, isNoOdds?: boolean }) {
  const { bets, addBet } = useBetslipStore()
  
  // Dummy data for demonstration
  const score = event.homeScore !== undefined ? `${event.homeScore} - ${event.awayScore}` : "0 - 0"
  const time = event.liveMinute ? `${event.liveMinute}:00` : "83:10"
  const period = "H2"

  return (
    <div className="bg-brand-bg border-b border-white/5 hover:bg-white/5 transition-colors h-[50px] flex items-center group">
       {/* Match Info Column (Time & Score) */}
       <div className="flex items-center gap-3 px-3 w-[360px] shrink-0 h-full border-r border-white/5">
         <div className="flex flex-col text-[10px] font-black leading-tight italic w-[55px] shrink-0 tabular-nums">
            <span className="text-brand-primary">{time}</span>
            <span className="text-white/40">{period}</span>
         </div>
         <div className="flex items-center min-w-0 flex-1 gap-2">
            <span className="text-[11.5px] font-black text-white truncate italic uppercase">
              {event.homeTeam} <span className="text-brand-primary mx-1 tabular-nums">{score}</span> {event.awayTeam}
            </span>
         </div>
         <div className="flex items-center gap-2 shrink-0 px-1 opacity-20 group-hover:opacity-100 transition-opacity">
            <BarChart2 className="size-3.5 text-white" />
            <Monitor className="size-3.5 text-white" />
         </div>
       </div>

       {/* Odds Grid or Placeholder */}
       <div className="flex-1 h-full flex items-center">
          {isNoOdds ? (
             <div className="flex-1 h-full bg-brand-surface-light flex items-center justify-center text-[10.5px] font-black text-white/20 uppercase italic tracking-tight">
                Sorry, no odds for this match
             </div>
          ) : (
             <div className="flex-1 grid grid-cols-3 h-full">
                {event.markets.slice(0, 3).map((m, idx) => {
                   const labels = ["Home", "Draw", "Away"]
                   return (
                      <button 
                        key={m.id}
                        onClick={() => addBet({
                          id: `${event.id}-${m.id}`,
                          event: `${event.homeTeam} - ${event.awayTeam}`,
                          league: `${event.sport} - ${event.country} - ${event.league}`,
                          market: "1X2",
                          selection: m.label,
                          odds: m.odds,
                        })}
                        className="bg-brand-bg hover:bg-white/5 flex items-center justify-between px-4 h-full border-r border-white/5 transition-colors group/btn"
                      >
                         <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white uppercase">{labels[idx]}</span>
                         <span className="text-[11px] font-black text-brand-primary tabular-nums">{m.odds.toFixed(2)}</span>
                      </button>
                   )
                })}
             </div>
          )}
       </div>
       
       {/* Right Indicator */}
       <div className="w-[4px] bg-brand-primary h-full" />
    </div>
  )
}

const liveSports = [
  { id: "soccer", label: "Soccer", icon: "⚽", count: 25, active: true },
  { id: "basketball", label: "Basketball", icon: "🏀", count: 39 },
  { id: "ice-hockey", label: "Ice Hockey", icon: "🏒", count: 3 },
  { id: "tennis", label: "Tennis", icon: "🎾", count: 4 },
  { id: "handball", label: "Handball", icon: "🤾", count: 10 },
  { id: "rugby", label: "Rugby", icon: "🏉", count: 2 },
  { id: "table-tennis", label: "Table Tennis", icon: "🏓", count: 8 },
  { id: "volleyball", label: "Volleyball", icon: "🏐", count: 7 },
  { id: "futsal", label: "Futsal", icon: "⚽", count: 2 },
  { id: "esport-counter-strike", label: "ESport Cou...", icon: "🎮", count: 2 },
  { id: "esport-league-of-legends", label: "ESport Lea...", icon: "🎮", count: 1 },
  { id: "esport-dota-2", label: "ESport Dota", icon: "🎮", count: 1 },
  { id: "efootball", label: "eFootball", icon: "⚽", count: 4 },
  { id: "ebasketball", label: "eBasketball", icon: "🏀", count: 1 },
]

export function LiveEventsList() {
  // Enhanced mock data local to live view to match screenshot exactly
  const liveMatches = [
    { 
      league: "Algeria - Ligue 1", 
      flag: "https://flagcdn.com/w20/dz.png",
      matches: [
        { ...mockEvents[0], id: "l1", homeTeam: "Paradou AC", awayTeam: "Ben Aknoun", homeScore: 3, awayScore: 5, liveMinute: 91, noOdds: true }
      ]
    },
    {
      league: "Australia - U23 Victoria NPL",
      flag: "https://flagcdn.com/w20/au.png",
      matches: [
        { ...mockEvents[1], id: "l2", homeTeam: "Oakleigh Cannons FC", awayTeam: "Altona Magic SC", homeScore: 5, awayScore: 1, liveMinute: 87, noOdds: true }
      ]
    },
    {
      league: "Australia - U23 Victoria Premier League 1",
      flag: "https://flagcdn.com/w20/au.png",
      matches: [
        { ...mockEvents[2], id: "l3", homeTeam: "Northcote City FC", awayTeam: "Western United FC", homeScore: 4, awayScore: 0, liveMinute: 83, noOdds: false },
        { ...mockEvents[3], id: "l4", homeTeam: "Melbourne Knights FC", awayTeam: "Melbourne Victory FC", homeScore: 0, awayScore: 3, liveMinute: 81, noOdds: true }
      ]
    },
    {
      league: "Australia - Victoria NPL, Women",
      flag: "https://flagcdn.com/w20/au.png",
      matches: [
        { ...mockEvents[4], id: "l5", homeTeam: "Preston Lions FC", awayTeam: "South Melbourne FC", homeScore: 1, awayScore: 1, liveMinute: 52, noOdds: true },
        { ...mockEvents[0], id: "l6", homeTeam: "Bentleigh Greens SC", awayTeam: "Box Hill United", homeScore: 0, awayScore: 6, liveMinute: 83, noOdds: true }
      ]
    }
  ]

  return (
    <div className="flex flex-col min-h-screen bg-brand-bg">
      {/* Sport Navigation Carousel */}
      <div className="bg-brand-surface border-b border-border/20 px-2 flex items-center h-[54px] overflow-x-auto scrollbar-hide">
         <div className="flex items-center gap-0 h-full">
            {/* Favourites & Prematch */}
            <button className="flex flex-col items-center justify-center px-4 h-full border-r border-white/5 min-w-[70px]">
               <span className="text-[14px]">⭐</span>
               <span className="text-[9px] font-bold text-white/40 uppercase mt-0.5">Favourites</span>
            </button>
            <button className="flex flex-col items-center justify-center px-4 h-full border-r border-white/5 min-w-[70px]">
               <span className="text-[14px]">⏱️</span>
               <span className="text-[9px] font-bold text-white/40 uppercase mt-0.5">Prematch</span>
            </button>

            {/* Live Sports */}
            {liveSports.map((sport) => (
               <button 
                 key={sport.id}
                 className={cn(
                   "flex flex-col items-center justify-center px-3 h-full border-r border-white/5 min-w-[75px] relative transition-colors",
                   sport.active ? "bg-white/5" : "hover:bg-white/5"
                 )}
               >
                 <span className="absolute top-1 right-2 text-[8.5px] font-black text-white/40">{sport.count}</span>
                 <span className="text-[16px]">{sport.icon}</span>
                 <span className={cn(
                   "text-[9px] font-bold uppercase mt-1 tracking-tighter whitespace-nowrap",
                   sport.active ? "text-brand-primary" : "text-white/40"
                 )}>
                   {sport.label}
                 </span>
                 {sport.active && (
                   <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-brand-primary" />
                 )}
               </button>
            ))}
         </div>
      </div>

      {/* Category Header (Soccer) */}
      <div className="bg-brand-primary px-3 py-1.5 flex items-center gap-2 border-l-[4px] border-brand-primary">
         <span className="text-[16px]">⚽</span>
         <h2 className="text-[14px] font-black text-white uppercase tracking-tight">Soccer</h2>
      </div>

      {/* Grouped Live Matches */}
      <div className="flex flex-col mb-10">
        {liveMatches.map((group, gIdx) => (
          <div key={gIdx} className="flex flex-col">
            {/* League Header */}
            <div className="bg-brand-surface px-3 py-1 border-b border-border/10 flex items-center gap-2">
               <img src={group.flag} width="14" alt={group.league} className="rounded-sm opacity-60" />
               <span className="text-[9.5px] font-black text-white/60 uppercase tracking-widest leading-none">
                  {group.league}
               </span>
            </div>

            {/* Matches in this league */}
            <div className="flex flex-col">
              {group.matches.map((match, mIdx) => (
                <LiveEventRow key={match.id} event={match as any} isNoOdds={match.noOdds} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}