"use client"

import { ChevronRight } from "lucide-react"
import { useBetslipStore } from "@/lib/store/betslip-store"
import { cn } from "@/lib/utils"

const topMatches = [
  {
    id: "tm1",
    league: "England - Premier League",
    time: "05:00 PM",
    homeTeam: "Nottingham Forest",
    awayTeam: "Liverpool",
    odds: { home: 4.09, draw: 3.93, away: 1.82 }
  },
  {
    id: "tm2",
    league: "England - Premier League",
    time: "11:00 PM",
    homeTeam: "Man City",
    awayTeam: "Newcastle",
    odds: { home: 1.50, draw: 5.17, away: 5.93 }
  },
  {
    id: "tm3",
    league: "England - Premier League",
    time: "06:00 PM",
    homeTeam: "Chelsea",
    awayTeam: "Burnley",
    odds: { home: 1.21, draw: 6.91, away: 11.50 }
  },
  {
    id: "tm4",
    league: "Spain - LaLiga",
    time: "07:30 PM",
    homeTeam: "Arsenal",
    awayTeam: "Wolves",
    odds: { home: 1.56, draw: 4.16, away: 5.80 }
  },
  {
    id: "tm5",
    league: "Italy - Serie A",
    time: "09:45 PM",
    homeTeam: "Inter Milan",
    awayTeam: "Napoli",
    odds: { home: 1.85, draw: 3.60, away: 4.20 }
  }
]

export function TopMatches() {
  const { bets, addBet } = useBetslipStore()

  return (
    <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide -mx-1 px-1">
      {topMatches.map((match) => {
        const eventName = `${match.homeTeam} - ${match.awayTeam}`
        const leagueForBet = `Football - ${match.league}`
        const outcomes = [
          { key: "1", label: "1", odds: match.odds.home },
          { key: "x", label: "X", odds: match.odds.draw },
          { key: "2", label: "2", odds: match.odds.away },
        ] as const
        return (
          <div 
            key={match.id} 
            className="min-w-[280px] bg-brand-surface border border-border/20 rounded-sm overflow-hidden flex flex-col relative group"
          >
            {/* Top Label Ribbon */}
            <div className="absolute top-0 right-0 w-12 h-12 overflow-hidden z-10 pointer-events-none">
              <div className="absolute top-[6px] right-[-14px] bg-brand-primary text-black text-[8px] font-black py-0.5 px-6 rotate-45 shadow-sm uppercase tracking-tighter">
                TOP
              </div>
            </div>

            <div className="bg-brand-bg px-3 py-1.5 flex items-center justify-between text-[10px] text-muted-foreground border-b border-border/10">
              <div className="flex items-center gap-1">
                <span className="font-bold text-brand-primary">{match.league}</span>
                <span className="font-black text-white ml-1 italic">{match.time}</span>
              </div>
              <ChevronRight className="size-3 text-white/20 mr-4" />
            </div>

            <div className="p-3 flex flex-col gap-3">
               <div className="flex items-center justify-between gap-1">
                  <div className="flex items-center gap-2 flex-1 min-w-0">
                     <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
                     <span className="text-[11px] font-black text-white truncate uppercase italic">{match.homeTeam}</span>
                  </div>
                  <span className="text-brand-primary text-[9.5px] font-black italic shrink-0 px-2 opacity-60">VS</span>
                  <div className="flex items-center gap-2 flex-1 min-w-0 justify-end">
                     <span className="text-[11px] font-black text-white truncate uppercase italic text-right">{match.awayTeam}</span>
                     <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
                  </div>
               </div>
            </div>

            <div className="grid grid-cols-3 gap-[1px] bg-white/5 mx-2 mb-2 rounded-sm overflow-hidden border border-white/5">
               {outcomes.map(({ key, label, odds }) => {
                 const betId = `${match.id}-${key}`
                 const isSelected = bets.some((b) => b.id === betId)
                 return (
                   <button
                     key={key}
                     type="button"
                     onClick={() =>
                       addBet({
                         id: betId,
                         event: eventName,
                         league: leagueForBet,
                         market: "1X2",
                         selection: label,
                         odds,
                       })
                     }
                     className={cn(
                       "flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn border-x border-white/5 first:border-x-0",
                       isSelected
                         ? "bg-brand-primary text-black"
                         : "bg-brand-bg hover:bg-brand-surface-light"
                     )}
                   >
                     <span className={cn("text-[10px] font-black", isSelected ? "text-black" : "text-white/40 group-hover/btn:text-white")}>
                       {label}
                     </span>
                     <span className={cn("text-[11px] font-black tabular-nums", isSelected ? "text-black" : "text-brand-primary")}>
                       {odds.toFixed(2)}
                     </span>
                   </button>
                 )
               })}
            </div>
          </div>
        )
      })}
    </div>
  )
}