"use client"

import { Betslip } from "@/components/betting/betslip"
import { ReloadTicket } from "@/components/betting/reload-ticket"
import { CheckYourBet } from "@/components/betting/check-your-bet"
import { useBetslipStore } from "@/lib/store/betslip-store"
import { useState } from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function RightPanel() {
  const [activeTab, setActiveTab] = useState<"betslip" | "myBets">("betslip")
  const bets = useBetslipStore((s) => s.bets)

  return (
    <aside className="hidden lg:flex w-[280px] shrink-0 flex-col gap-0 border-l border-border/30 bg-brand-surface">
      {/* Search Header */}
      <div className="p-3 bg-brand-bg flex items-center justify-between border-b border-border/20">
         <div className="flex items-center gap-2 text-[12px] font-bold text-white uppercase">
            Fast Bet <span className="text-brand-primary">QBET</span>
            <svg viewBox="0 0 24 24" className="size-4 fill-brand-primary ml-1"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
         </div>
      </div>

      <div className="p-2 space-y-2">
        <div className="grid grid-cols-2 gap-0.5">
           <Input 
             type="text" 
             placeholder="Event Code" 
             className="bg-brand-surface-light border border-border/40 px-2 py-1.5 h-auto text-[11px] outline-none text-white focus:border-brand-primary rounded-none shadow-none" 
           />
           <div className="bg-brand-surface-light border border-border/40 px-2 py-1.5 text-[11px] text-muted-foreground flex items-center justify-center">...</div>
        </div>

        {/* Tab switcher */}
        <div className="flex items-center justify-between text-[11px] font-bold py-2.5 px-1 border-b border-border/10">
          <div className="flex items-center gap-2">
             <span className="text-brand-primary uppercase cursor-pointer">Betslip</span>
             <span className="bg-brand-primary text-black px-1.5 rounded-full text-[10px] font-bold min-w-[18px] text-center">{bets.length}</span>
             <Button 
               variant="ghost" 
               className="text-white uppercase flex items-center gap-1 ml-2 opacity-80 hover:opacity-100 p-0 h-auto font-bold text-[11px]"
             >
                <svg viewBox="0 0 24 24" className="size-3 fill-brand-primary"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                Settings
             </Button>
          </div>
          <span className="text-white uppercase cursor-pointer opacity-80 hover:opacity-100">Decimal</span>
        </div>

        <Betslip />

        <ReloadTicket />
        <CheckYourBet />
      </div>
    </aside>
  )
}