"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"
import { ChevronsLeft } from "lucide-react"

/** Soccer ball icon - outline style for white/green theme */
function SoccerBallIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 2v20M2 12h20" />
      <path d="M4.93 4.93l14.14 14.14M4.93 19.07l14.14-14.14" strokeWidth="1" />
    </svg>
  )
}

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-[280px] 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-white uppercase tracking-tighter flex items-center justify-between border-b border-border/30 h-10">
        <span>Sports Menu</span>
        <button type="button" className="p-1 rounded hover:bg-white/10 text-white/70 hover:text-white transition-colors" aria-label="Collapse sidebar">
          <ChevronsLeft className="size-4" />
        </button>
      </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 min-w-0">
              <div className="size-5 shrink-0 overflow-hidden rounded-sm flex items-center justify-center bg-white/5 border border-white/10 group-hover:border-white/20 transition-colors">
                {league.logo ? (
                  <img src={league.logo} alt="" className="size-full object-contain" />
                ) : (
                  <span className="text-[11px]">⚽</span>
                )}
              </div>
              <span className="text-white/50 text-[8px] font-bold select-none">•</span>
              <span className="text-[10.5px] font-bold leading-tight truncate max-w-[140px]">{league.name}</span>
            </div>
            <SoccerBallIcon className="size-4 shrink-0 text-white/40 group-hover:text-brand-primary transition-colors" />
          </Link>
        ))}
      </div>

      {/* In-Play Strip */}
      <Button asChild 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]">
        <Link href="/live">
          <span className="size-2 rounded-full bg-brand-primary mr-2 live-dot shadow-[0_0_8px_var(--brand-primary)]"></span>
          IN-PLAY
        </Link>
      </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-brand-surface-light text-white" : "bg-brand-surface 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>
               <SoccerBallIcon className="size-3.5 text-white/30 shrink-0" />
            </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"
          type="button"
          className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group"
          onClick={() => {
            const w = 1200
            const h = 800
            const left = typeof window !== "undefined" ? Math.max(0, (window.screen.width - w) / 2) : 0
            const top = typeof window !== "undefined" ? Math.max(0, (window.screen.height - h) / 2) : 0
            window.open(
              "https://s5.sir.sportradar.com/betinaction/en",
              "LiveScore",
              `noopener,noreferrer,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`
            )
          }}
        >
          <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"
          type="button"
          className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group"
          onClick={() => {
            const w = 1200
            const h = 800
            const left = typeof window !== "undefined" ? Math.max(0, (window.screen.width - w) / 2) : 0
            const top = typeof window !== "undefined" ? Math.max(0, (window.screen.height - h) / 2) : 0
            window.open(
              "https://statistics.betconstruct.com/#/en",
              "Results",
              `noopener,noreferrer,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`
            )
          }}
        >
          <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" asChild className="flex flex-col items-center justify-center py-4 h-auto rounded-none hover:bg-brand-surface group">
          <Link href="/print-odds" className="flex flex-col items-center justify-center">
            <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>
          </Link>
        </Button>
      </div>

    </aside>
  )
}
