'use client'

import { useState, useEffect } from 'react'
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'
import BackToTop from '@/components/BackToTop'
import { useTranslation } from 'react-i18next'
import RankSkeleton from './RankSkeleton'
import type { RankType, Period, RankItem, StarRankItem } from './_components/types'
import RankTypeTabs from './_components/RankTypeTabs'
import PeriodTabs from './_components/PeriodTabs'
import RankHeader from './_components/RankHeader'
import TopRankCard from './_components/TopRankCard'
import RankListItem from './_components/RankListItem'
import StarRankToggle from './_components/StarRankToggle'
import StarRankSection from './_components/StarRankSection'

export default function RankPageClient() {
    const { t } = useTranslation()
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const [activeType, setActiveType] = useState<RankType>('gift')
    const [activePeriod, setActivePeriod] = useState<Period>('day')
    const [isLoading, setIsLoading] = useState(true)
    const [rankData, setRankData] = useState<RankItem[]>([])
    const [dataType, setDataType] = useState<RankType>('gift')
    const [thisWeekStar, setThisWeekStar] = useState<StarRankItem[]>([])
    const [lastWeekStar, setLastWeekStar] = useState<StarRankItem[]>([])
    const [isLoadingStar, setIsLoadingStar] = useState(true)
    const [activeStarPeriod, setActiveStarPeriod] = useState<'thisWeek' | 'lastWeek'>('thisWeek')

    useEffect(() => {
        const fetchRankData = async () => {
            setIsLoading(true)
            setRankData([])
            const currentType = activeType
            try {
                const response = await fetch(`/api/ranking?type=${activeType}&period=${activePeriod}`)
                const result = await response.json()
                if (result.ok) {
                    if (currentType === activeType) {
                        setRankData(result.data || [])
                        setDataType(activeType)
                    }
                } else {
                    console.error('Failed to fetch rank data:', result.message)
                    if (currentType === activeType) {
                        setRankData([])
                        setDataType(activeType)
                    }
                }
            } catch (error) {
                console.error('Error fetching rank data:', error)
                if (currentType === activeType) {
                    setRankData([])
                    setDataType(activeType)
                }
            } finally {
                if (currentType === activeType) {
                    setIsLoading(false)
                }
            }
        }

        fetchRankData()
    }, [activeType, activePeriod])

    useEffect(() => {
        const fetchStarData = async () => {
            setIsLoadingStar(true)
            try {
                const [thisWeekRes, lastWeekRes] = await Promise.all([
                    fetch('/api/ranking?type=star&period=thisWeek'),
                    fetch('/api/ranking?type=star&period=lastWeek'),
                ])
                const thisWeekResult = await thisWeekRes.json()
                const lastWeekResult = await lastWeekRes.json()
                if (thisWeekResult.ok) {
                    setThisWeekStar(thisWeekResult.data || [])
                }
                if (lastWeekResult.ok) {
                    setLastWeekStar(lastWeekResult.data || [])
                }
            } catch (error) {
                console.error('Error fetching star data:', error)
            } finally {
                setIsLoadingStar(false)
            }
        }

        fetchStarData()
    }, [])

    const topThree = rankData.filter((item) => item.rank <= 3)
    const others = rankData.filter((item) => item.rank > 1 && item.rank <= 10)
    const othersForDesktop = rankData.filter((item) => item.rank > 3 && item.rank <= 10)
    const columns: RankItem[][] = [[], [], []]
    othersForDesktop.forEach((item, index) => {
        columns[index % 3].push(item)
    })

    return (
        <>
            <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
            <div className="min-h-screen min-w-[375px] bg-[#fefdfd] dark:bg-[#0c0d0e] flex overflow-x-auto md:overflow-x-hidden transition-colors">
                <Sidebar mode="drawer" isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
                <main
                    className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden transition-all pt-[6rem] md:pt-[6rem]"
                >
                    <div className="w-full max-w-[1200px] mx-auto px-4 sm:px-5 py-6 sm:py-12 overflow-x-hidden space-y-8 sm:space-y-12">
                        {/* 禮物榜容器 */}
                        <div className="bg-white dark:bg-[#1a1c21] border border-[#e6e5e5] dark:border-gray-800 rounded-lg p-4 sm:p-6">
                            {/* Tabs for Rank Type */}
                            <RankTypeTabs activeType={activeType} onTypeChange={setActiveType} />

                            {/* Header */}
                            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0 border-b border-[#e6e5e5] dark:border-gray-800 pb-2 mb-4 sm:mb-6">
                                <RankHeader activeType={activeType} />

                                {/* Period Tabs - Segmented Control */}
                                <PeriodTabs activePeriod={activePeriod} onPeriodChange={setActivePeriod} />
                            </div>

                            {/* Content */}
                            {isLoading || dataType !== activeType ? (
                                <RankSkeleton />
                            ) : (
                                <div className="mt-6">
                                    {/* Top 3 */}
                                    {topThree.length > 0 && (
                                        <div className="flex flex-col lg:flex-row gap-3 sm:gap-4 lg:gap-5 mb-6 sm:mb-8">
                                            {topThree.map((item) => (
                                                <TopRankCard
                                                    key={`${activeType}-${item.rank}`}
                                                    item={item}
                                                    activeType={activeType}
                                                />
                                            ))}
                                        </div>
                                    )}

                                    {/* Other Rankings - 3 Columns */}
                                    {columns.some((col) => col.length > 0) && (
                                        <>
                                            {/* Mobile: Single column with correct order */}
                                            <div className="flex flex-col sm:hidden">
                                                {others.map((item) => (
                                                    <RankListItem
                                                        key={`${activeType}-${item.rank}`}
                                                        item={item}
                                                        activeType={activeType}
                                                        isMobile={true}
                                                    />
                                                ))}
                                            </div>

                                            {/* Tablet & Desktop: Multi-column layout (only ranks 4-10) */}
                                            <div className="hidden sm:grid sm:grid-cols-2 lg:flex lg:flex-row gap-x-4 sm:gap-x-6 lg:gap-x-8 xl:gap-x-[100px] gap-y-4 sm:gap-y-5 lg:gap-y-7">
                                                {columns.map((column, colIndex) => (
                                                    <ul key={colIndex} className="flex-1 min-w-0 space-y-4 sm:space-y-5 lg:space-y-7">
                                                        {column.map((item) => (
                                                            <RankListItem
                                                                key={`${activeType}-${item.rank}`}
                                                                item={item}
                                                                activeType={activeType}
                                                                isMobile={false}
                                                            />
                                                        ))}
                                                    </ul>
                                                ))}
                                            </div>
                                        </>
                                    )}

                                    {rankData.length === 0 && (
                                        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
                                            {t('rank.noData')}
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>

                        {/* 禮物周星容器 */}
                        <div className="bg-white dark:bg-[#1a1c21] border border-[#e6e5e5] dark:border-gray-800 rounded-lg p-4 sm:p-6 overflow-visible">
                            {/* 手机模式切换按钮 */}
                            <StarRankToggle
                                activePeriod={activeStarPeriod}
                                onPeriodChange={setActiveStarPeriod}
                            />

                            <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 min-w-0">
                                {/* 本周禮物周星 */}
                                <div className={`flex-1 min-w-0 ${activeStarPeriod !== 'thisWeek' ? 'hidden lg:block' : ''}`}>
                                    <StarRankSection
                                        title={t('rank.star.thisWeek')}
                                        helpText={t('rank.star.help')}
                                        items={thisWeekStar}
                                        isLoading={isLoadingStar}
                                    />
                                </div>

                                {/* 上周禮物周星 */}
                                <div className={`flex-1 min-w-0 ${activeStarPeriod !== 'lastWeek' ? 'hidden lg:block' : ''}`}>
                                    <StarRankSection
                                        title={t('rank.star.lastWeek')}
                                        helpText={t('rank.star.help')}
                                        items={lastWeekStar}
                                        isLoading={isLoadingStar}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <Footer />
            <BackToTop />
        </>
    )
}