'use client'

import { useRef, useState, useEffect } from 'react'
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import BackToTop from '@/components/BackToTop'
import { FiChevronLeft, FiChevronRight, FiChevronDown } from 'react-icons/fi'
import LiveCard, { LiveStream } from '@/components/LiveCard'
import { useTranslation } from 'react-i18next'
import PopularLiveGridSkeleton from '@/components/Skeletons/PopularLiveGridSkeleton'

// 移除 mock 數據，改用真實 API

const categories = [
    { key: 'all', labelKey: 'live.categories.all' as const },
    { key: 'game', labelKey: 'live.categories.game' as const },
    { key: 'talk', labelKey: 'live.categories.talk' as const },
    { key: 'sports', labelKey: 'live.categories.sports' as const },
    { key: 'music', labelKey: 'live.categories.music' as const },
    { key: 'study', labelKey: 'live.categories.study' as const },
    { key: 'irl', labelKey: 'live.categories.irl' as const },
    { key: 'life', labelKey: 'live.categories.life' as const },
]

export default function LiveCategoryPage({ params }: { params: { category: string } }) {
    const { t } = useTranslation()
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const initialCat = (params?.category || 'all').toLowerCase()
    const [activeCat, setActiveCat] = useState(categories.find((c) => c.key === initialCat) ? initialCat : 'all')
    const [visibleCount, setVisibleCount] = useState(12)
    const scrollRef = useRef<HTMLDivElement>(null)
    const [canScrollPrev, setCanScrollPrev] = useState(false)
    const [canScrollNext, setCanScrollNext] = useState(false)

    const [sortOpen, setSortOpen] = useState(false)
    const [sortKey, setSortKey] = useState<'viewer-desc' | 'viewer-asc' | 'recent'>('viewer-desc')
    const [isLoading, setIsLoading] = useState(true)
    const [loadingMore, setLoadingMore] = useState(false)
    const [streams, setStreams] = useState<LiveStream[]>([])
    const [total, setTotal] = useState(0)

    // 從 API 獲取直播數據
    useEffect(() => {
        const fetchStreams = async () => {
            setIsLoading(true)
            setVisibleCount(12) // 重置可見數量
            try {
                const response = await fetch(
                    `/api/live/${activeCat}?sort=${sortKey}&limit=12&offset=0`
                )
                const result = await response.json()
                if (result.ok) {
                    setStreams(result.data || [])
                    setTotal(result.total || 0)
                } else {
                    console.error('Failed to fetch streams:', result.message)
                    setStreams([])
                    setTotal(0)
                }
            } catch (error) {
                console.error('Error fetching streams:', error)
                setStreams([])
                setTotal(0)
            } finally {
                setIsLoading(false)
            }
        }

        fetchStreams()
    }, [activeCat, sortKey])

    const visibleStreams = streams.slice(0, visibleCount)

    const updateScrollState = () => {
        const el = scrollRef.current
        if (!el) return
        setCanScrollPrev(el.scrollLeft > 4)
        setCanScrollNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4)
    }

    useEffect(() => {
        updateScrollState()
    }, [activeCat])

    // 移除模擬延遲，改用真實 API 加載狀態

    useEffect(() => {
        const el = scrollRef.current
        if (!el) return
        const saved = typeof window !== 'undefined' ? Number(sessionStorage.getItem('live-cat-scroll') || '0') : 0
        if (!Number.isNaN(saved)) {
            el.scrollLeft = saved
        }
        updateScrollState()
        const onScroll = () => {
            updateScrollState()
            handleScroll()
        }
        el.addEventListener('scroll', onScroll, { passive: true })
        const resize = () => updateScrollState()
        window.addEventListener('resize', resize)
        return () => {
            el.removeEventListener('scroll', onScroll)
            window.removeEventListener('resize', resize)
        }
    }, [])

    const scrollBy = (dir: 'prev' | 'next') => {
        const el = scrollRef.current
        if (!el) return
        const delta = dir === 'prev' ? -240 : 240
        el.scrollBy({ left: delta, behavior: 'smooth' })
    }

    const handleScroll = () => {
        const el = scrollRef.current
        if (!el) return
        sessionStorage.setItem('live-cat-scroll', String(el.scrollLeft))
    }

    return (
        <>
            <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
            <div className="min-h-screen min-w-[375px] bg-white dark:bg-[#0c0d0e] 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 px-5 py-5">
                        <div className="z-30 bg-white/90 dark:bg-transparent">
                            <div className="overflow-hidden">
                                <div
                                    ref={scrollRef}
                                    className="flex items-center gap-2 overflow-x-auto hide-scrollbar scroll-smooth"
                                >
                                    {categories.map((cat) => (
                                        <button
                                            key={cat.key}
                                            type="button"
                                            onClick={() => {
                                                setActiveCat(cat.key)
                                                if (typeof window !== 'undefined') {
                                                    window.history.replaceState({}, '', `/live/${cat.key}`)
                                                }
                                            }}
                                            className={`flex items-center h-9 px-4 rounded-full text-sm border transition-all whitespace-nowrap ${activeCat === cat.key
                                                ? 'bg-[#17191C] text-white border-[#17191C] dark:bg-white dark:text-[#0c0d0e] dark:border-white'
                                                : 'bg-white dark:bg-[#0c0d0e] border-gray-200 dark:border-[#464A53] text-gray-600 dark:text-[#D5D7DC] hover:bg-gray-50 dark:hover:bg-[#2f3137]'
                                                }`}
                                        >
                                            {t(cat.labelKey)}
                                        </button>
                                    ))}
                                </div>
                            </div>
                            <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white dark:from-[#0c0d0e] to-transparent" />
                            <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white dark:from-[#0c0d0e] to-transparent" />
                            <button
                                type="button"
                                onClick={() => scrollBy('prev')}
                                className={`absolute left-0 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full border border-gray-200 dark:border-[#464A53] bg-white dark:bg-[#0c0d0e] shadow-sm flex items-center justify-center transition-opacity ${canScrollPrev ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
                                    }`}
                                aria-label={t('live.prevCategory')}
                            >
                                <FiChevronLeft className="w-5 h-5 text-black dark:text-gray-200" />
                            </button>
                            <button
                                type="button"
                                onClick={() => scrollBy('next')}
                                className={`absolute right-0 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full border border-gray-200 dark:border-[#464A53] bg-white dark:bg-[#0c0d0e] shadow-sm flex items-center justify-center transition-opacity ${canScrollNext ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
                                    }`}
                                aria-label={t('live.nextCategory')}
                            >
                                <FiChevronRight className="w-5 h-5 text-black dark:text-gray-200" />
                            </button>
                        </div>

                        <div className="mt-6 flex flex-wrap items-center gap-3">
                            <h2 className="text-xl font-semibold text-black dark:text-gray-100">
                                {activeCat === 'all'
                                    ? t('live.header.all')
                                    : t(categories.find((c) => c.key === activeCat)?.labelKey ?? 'live.header.all')}
                            </h2>
                            <div className="ml-auto relative">
                                <button
                                    type="button"
                                    className="flex items-center gap-2 px-3 py-2 text-sm text-black dark:text-gray-200 transition-colors"
                                    onClick={() => setSortOpen((prev) => !prev)}
                                >
                                    {sortKey === 'viewer-desc' && t('live.sort.viewerDesc')}
                                    {sortKey === 'viewer-asc' && t('live.sort.viewerAsc')}
                                    {sortKey === 'recent' && t('live.sort.recent')}
                                    <FiChevronDown className={`w-4 h-4 transition-transform ${sortOpen ? 'rotate-180' : ''}`} />
                                </button>
                                {sortOpen && (
                                    <ul className="absolute right-0 mt-1 w-44 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#0c0d0e] shadow-lg text-sm text-black dark:text-gray-200 overflow-hidden z-20">
                                        <li>
                                            <button
                                                type="button"
                                                className={`w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-[#1a1c21] ${sortKey === 'viewer-desc' ? 'font-semibold text-primary-600 dark:text-primary-400' : ''}`}
                                                onClick={() => {
                                                    setSortKey('viewer-desc')
                                                    setSortOpen(false)
                                                }}
                                            >
                                                {t('live.sort.viewerDesc')}
                                            </button>
                                        </li>
                                        <li>
                                            <button
                                                type="button"
                                                className={`w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-[#1a1c21] ${sortKey === 'viewer-asc' ? 'font-semibold text-primary-600 dark:text-primary-400' : ''}`}
                                                onClick={() => {
                                                    setSortKey('viewer-asc')
                                                    setSortOpen(false)
                                                }}
                                            >
                                                {t('live.sort.viewerAsc')}
                                            </button>
                                        </li>
                                        <li>
                                            <button
                                                type="button"
                                                className={`w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-[#1a1c21] ${sortKey === 'recent' ? 'font-semibold text-primary-600 dark:text-primary-400' : ''}`}
                                                onClick={() => {
                                                    setSortKey('recent')
                                                    setSortOpen(false)
                                                }}
                                            >
                                                {t('live.sort.recent')}
                                            </button>
                                        </li>
                                    </ul>
                                )}
                            </div>
                        </div>

                        {isLoading ? (
                            <PopularLiveGridSkeleton count={visibleCount} />
                        ) : (
                            <>
                                <div className="grid-popular mt-4">
                                    {visibleStreams.map((stream, idx) => (
                                        <LiveCard key={`${stream.id}-${idx}`} stream={stream} t={t} />
                                    ))}
                                    {loadingMore && (
                                        <PopularLiveGridSkeleton
                                            inline
                                            count={Math.max(1, Math.min(12, total - visibleCount))}
                                        />
                                    )}
                                </div>
                                {visibleCount < total && (
                                    <div className="show_more mt-6 flex items-center justify-center">
                                        <button
                                            type="button"
                                            className="flex items-center gap-2 px-4 py-2 rounded-md text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                                            disabled={loadingMore}
                                            onClick={async () => {
                                                if (loadingMore) return
                                                setLoadingMore(true)
                                                try {
                                                    const response = await fetch(
                                                        `/api/live/${activeCat}?sort=${sortKey}&limit=12&offset=${streams.length}`
                                                    )
                                                    const result = await response.json()
                                                    if (result.ok) {
                                                        setStreams((prev) => [...prev, ...(result.data || [])])
                                                        setTotal(result.total || 0)
                                                        setVisibleCount((prev) => prev + 12)
                                                    }
                                                } catch (error) {
                                                    console.error('Error loading more streams:', error)
                                                } finally {
                                                    setLoadingMore(false)
                                                }
                                            }}
                                        >
                                            {t('live.showMore')}
                                            <FiChevronDown className="w-4 h-4" />
                                        </button>
                                    </div>
                                )}
                            </>
                        )}
                    </div>
                </main>
            </div>
            <BackToTop />
        </>
    )
}