"use client"

import { useState } from "react"
import Link from "next/link"
import { popularLeagues } from "@/lib/mock-data"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const sportCategories = [
  { id: "football", name: "Football", icon: "⚽", count: 1412 },
  { id: "tennis", name: "Tennis", icon: "🎾", count: 67 },
  { id: "basketball", name: "Basketball", icon: "🏀", count: 255 },
  { id: "ice-hockey", name: "Ice Hockey", icon: "🏒", count: 238 },
  { id: "mma", name: "MMA", icon: "🥊", count: 51 },
  { id: "handball", name: "Handball", icon: "🤾", count: 92 },
  { id: "darts", name: "Darts", icon: "🎯", count: 25 },
  { id: "snooker", name: "Snooker", icon: "🎱", count: 3 },
  { id: "cricket", name: "Cricket", icon: "🏏", count: 42 },
  { id: "dota2", name: "Dota 2", icon: "🎮", count: 2 },
  { id: "rugby", name: "Rugby", icon: "🏉", count: 41 },
  { id: "volleyball", name: "Volleyball", icon: "🏐", count: 69 },
]

export function SportsSidebar() {
  const [activeSport, setActiveSport] = useState("football")

  return (
    <aside className="hidden h-full w-[240px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
      {/* Sports Menu Header */}
      <div className="bg-brand-surface px-3 py-2 text-[11px] font-black text-brand-primary uppercase tracking-tighter flex items-center justify-between border-b border-border/30">
        Sports Menu
        <svg viewBox="0 0 24 24" className="size-3.5 fill-current opacity-60"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
      </div>

      {/* Top Leagues Header */}
      <div className="bg-brand-surface-light px-3 py-2.5 text-[11px] font-black text-brand-primary uppercase text-center border-b border-border/20 flex items-center justify-center gap-2">
        Top Leagues
      </div>

      {/* Popular Leagues */}
      <div className="flex flex-col">
        {popularLeagues.map((league) => (
          <Link
            key={league.id}
            href={`/?league=${league.id}`}
            className="w-full flex items-center justify-between px-3 py-2 text-left text-white/90 hover:bg-brand-surface transition-colors border-b border-border/10 group h-9"
          >
            <div className="flex items-center gap-2.5 min-w-0">
              <div className="size-4 shrink-0 overflow-hidden rounded-sm flex items-center justify-center bg-white/10 group-hover:bg-white/20 transition-colors">
                {league.logo ? (
                  <img src={league.logo} alt="" className="size-full object-contain" />
                ) : (
                  <span className="text-[10px] leading-none invert">⚽</span>
                )}
              </div>
              <span className="text-[10.5px] font-bold leading-tight truncate max-w-[150px]">{league.name}</span>
            </div>
            <div className="size-3.5 rounded-full border border-white/20 flex items-center justify-center group-hover:border-brand-primary transition-colors shrink-0">
               <div className="size-1.5 bg-white/40 rounded-full group-hover:bg-brand-primary" />
            </div>
          </Link>
        ))}
      </div>

      {/* In-Play Strip */}
      <Button className="w-full bg-[#004d40] text-[#00bfa5] hover:bg-[#003d33] border-none py-2.5 h-auto text-[11px] font-black uppercase rounded-none tracking-[2px]">
          <span className="size-2 rounded-full bg-[#ff9800] mr-2 live-dot shadow-[0_0_8px_#ff9800]"></span>
          IN-PLAY
      </Button>

      {/* Quick Filter Section */}
      <div className="bg-brand-surface p-3 border-b border-border/30">
           <span className="text-brand-primary text-[10.5px] uppercase font-black block mb-2 tracking-tight">Quick Filter</span>
           <div className="grid grid-cols-6 gap-[1px]">
             {["All", "Today", "3h", "6h", "9h", "12h"].map((t) => (
               <button key={t} className={cn(
                 "text-[10px] py-1.5 font-bold transition-colors",
                 t === "All" ? "bg-[#333] text-white" : "bg-[#2a2a2a] text-white/50 hover:text-white"
               )}>{t}</button>
             ))}
           </div>
      </div>

      {/* Search Event Section */}
      <div className="bg-brand-surface p-3 border-b border-border/40">
           <span className="text-brand-primary text-[10.5px] uppercase font-black block mb-1 tracking-tight">Search Event</span>
           <p className="text-[9px] text-white/30 mb-2 leading-tight font-medium uppercase">Insert the events name or at least one team in the form below</p>
           <div className="flex flex-col gap-1.5">
              <div className="relative">
                <input type="text" className="bg-brand-surface-light border-none text-white text-[11px] px-3 py-2 w-full focus:ring-0 placeholder:text-white/20" placeholder="Search" />
              </div>
              <Button className="bg-brand-primary text-black hover:bg-brand-primary-hover py-2 h-auto rounded-none text-[11px] font-black uppercase tracking-wider">Search</Button>
           </div>
      </div>

      {/* Sport categories */}
      <div className="divide-y divide-border/10 bg-brand-surface-light">
        {sportCategories.map((sport) => (
          <button
            key={sport.id}
            onClick={() => setActiveSport(sport.id)}
            className={cn(
              "w-full flex items-center justify-between px-3 py-2 text-left transition-colors border-b border-border/10 h-9",
              activeSport === sport.id
                ? "bg-brand-surface text-white"
                : "text-white/70 hover:bg-brand-surface hover:text-white"
            )}
          >
            <div className="flex items-center gap-3">
              <span className="text-[12px] opacity-80 shrink-0">{sport.icon}</span>
              <span className="text-[10.5px] font-bold tracking-tight">{sport.name}</span>
            </div>
            <div className="flex items-center gap-2">
               <span className="text-[10px] font-bold text-white/40">{sport.count}</span>
               <span className="text-[11px] text-white/20">⚽</span>
            </div>
          </button>
        ))}
      </div>

      {/* Bet Services */}
      <div className="mt-2 text-[11px] font-bold text-brand-primary px-3 py-2 uppercase border-y border-border/20 bg-brand-surface">
        Bet Services
      </div>
      <div className="grid grid-cols-3 gap-0 border-b border-border/10">
        <Button variant="ghost" className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group">
          <svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm3.3 14.71L11 12.41V7h2v4.59l3.71 3.71-1.42 1.41z"/></svg>
          <span className="text-[9px] text-white font-medium">Live Score</span>
        </Button>
        <Button variant="ghost" className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group">
          <svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/></svg>
          <span className="text-[9px] text-white font-medium">Results</span>
        </Button>
        <Button variant="ghost" className="flex flex-col items-center justify-center py-4 h-auto rounded-none hover:bg-brand-surface group">
          <svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
          <span className="text-[9px] text-white font-medium">Print Odds</span>
        </Button>
      </div>

      <div className="p-2 space-y-1">
         <Button className="w-full bg-[#004d40] text-[#00bfa5] hover:bg-[#003d33] border-none py-2 h-auto text-[11px] font-bold uppercase rounded-none tracking-widest">
            <span className="size-2 rounded-full bg-brand-primary mr-2 live-dot"></span>
            IN-PLAY
         </Button>
         <div className="bg-brand-surface p-3 border border-border/10">
           <span className="text-brand-primary text-[10px] uppercase font-bold block mb-2">Quick Filter</span>
           <div className="grid grid-cols-6 gap-0.5">
             {["All", "Today", "3h", "6h", "9h", "12h"].map((t) => (
               <button key={t} className="text-[9px] py-1 bg-brand-surface-light text-white/70 hover:bg-brand-surface transition-colors">{t}</button>
             ))}
           </div>
         </div>
         <div className="bg-brand-surface p-3 border border-border/10">
           <span className="text-brand-primary text-[10px] uppercase font-bold block mb-2">Search Event</span>
           <p className="text-[9px] text-white/40 mb-2 leading-tight">Insert the events name or at least one team in the form below</p>
           <div className="flex flex-col gap-1.5">
              <input type="text" className="bg-brand-surface-light border-none text-white text-[10px] px-2 py-1.5 focus:ring-0" placeholder="Search" />
              <Button className="bg-brand-surface text-white hover:bg-brand-bg py-1.5 h-auto rounded-none text-[10px] font-bold uppercase transition-colors">Search</Button>
           </div>
         </div>
      </div>
    </aside>
  )
}