'use client'

import { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

// components
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import LiveBanner from '@/components/LiveBanner'
import PopularLiveGrid from '@/components/PopularLiveGrid'
import Footer from '@/components/Footer'
import BackToTop from '@/components/BackToTop'
import AuthModal from '@/components/AuthModal'

// _helpers
import type { UserInfo } from '@/app/_helpers/types'

type LiveStreamBanner = {
    roomId: string
    userId: string
    title: string
    viewers: number
    thumbnail: string | null
    src: string | null
    isLive: boolean
    streamerName: string
    avatar: string | null
    category: string | null
}

interface HomeClientProps {
    initialUserInfo?: UserInfo | null
    initialLiveStreams?: LiveStreamBanner[]
}

export default function HomeClient({ initialUserInfo, initialLiveStreams = [] }: HomeClientProps) {
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const router = useRouter()
    const searchParams = useSearchParams()
    const modal = searchParams?.get('modal') || ''
    const tabParam = (searchParams?.get('tab') || '').toLowerCase()
    const authOpen = modal === 'auth' || modal === 'register' || modal === 'login'
    const authTab = (modal === 'register' ? 'register' : modal === 'login' ? 'login' : tabParam) === 'register' ? 'register' : 'login'

    const closeAuth = () => {
        const sp = new URLSearchParams(searchParams?.toString() || '')
        sp.delete('modal')
        sp.delete('tab')
        const next = sp.toString()
        router.replace(next ? `/?${next}` : '/')
    }

    return (
        <>
            <Header
                onMenuClick={() => setSidebarOpen(!sidebarOpen)}
                initialUserInfo={initialUserInfo}
            />
            <div className="min-h-screen min-w-[375px] flex overflow-x-auto md:overflow-x-hidden transition-colors">
                <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
                <main
                    className="main-content flex-1 lg:ml-64 pt-[6rem] md:pt-[6rem] min-h-screen w-full max-w-full overflow-x-hidden transition-all"
                    data-compact-open={sidebarOpen ? 'true' : 'false'}
                >
                    <div className="w-full max-w-full mx-auto">
                        {initialLiveStreams.length > 0 ? (
                            <LiveBanner initialStreams={initialLiveStreams} />
                        ) : null}
                        <PopularLiveGrid />
                        <Footer />
                    </div>
                </main>
            </div>
            <BackToTop />
            <AuthModal
                open={authOpen}
                tab={authTab}
                onTabChange={(nextTab) => {
                    const sp = new URLSearchParams(searchParams?.toString() || '')
                    sp.set('modal', 'auth')
                    sp.set('tab', nextTab)
                    router.replace(`/?${sp.toString()}`)
                }}
                onClose={closeAuth}
            />
        </>
    )
}