"use client"

import { usePathname } from "next/navigation"
import { useState, useCallback } from "react"
import { SiteHeader } from "@/components/layout/site-header"
import { SportsSidebar } from "@/components/layout/sports-sidebar"
import { RightPanel } from "@/components/layout/right-panel"
import { SiteFooter } from "@/components/layout/site-footer"
import { AuthModal } from "@/components/layout/auth-modal"
import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav"
import { cn } from "@/lib/utils"

type AuthMode = "login" | "register"

export default function LayoutClientWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const isLivePage = pathname === "/live"
  const isVirtualPage = pathname === "/virtual"
  const isSpecialGamesPage = pathname === "/special-games"
  
  const hideLeftSidebar = isLivePage || isVirtualPage || isSpecialGamesPage
  const hideRightSidebar = isVirtualPage || isSpecialGamesPage // Show RightPanel on Live page

  const [authOpen, setAuthOpen] = useState(false)
  const [authMode, setAuthMode] = useState<AuthMode>("login")

  const openAuth = useCallback((mode: AuthMode) => {
    setAuthMode(mode)
    setAuthOpen(true)
  }, [])

  return (
    <div className="flex min-h-screen flex-col pb-14 md:pb-0 overflow-x-hidden">
      <SiteHeader
        onLoginClick={() => openAuth("login")}
        onRegisterClick={() => openAuth("register")}
      />
      <div className="flex w-full flex-1 gap-0 min-w-0">
        {/* Sidebar: hidden on mobile and hidden on specific pages */}
        {!hideLeftSidebar && (
          <div className="hidden md:block shrink-0">
            <SportsSidebar />
          </div>
        )}
        <main className={cn("flex-1 min-w-0 overflow-x-hidden", !hideLeftSidebar && "px-2 py-3")}>{children}</main>
        {/* Right panel: completely off-flow on mobile/tablet; only from lg to match RightPanel */}
        {!hideRightSidebar && (
          <div className="hidden lg:block shrink-0 overflow-hidden">
            <RightPanel />
          </div>
        )}
      </div>
      <SiteFooter />

      {/* Mobile fixed bottom nav */}
      <MobileBottomNav />

      {/* Auth modal */}
      <AuthModal
        open={authOpen}
        defaultMode={authMode}
        onClose={() => setAuthOpen(false)}
      />
    </div>
  )
}