'use client'

import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useRouter } from 'next/navigation'

// components
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'

// _components
import ProfileSidebar from '../../_components/ProfileSidebar'
import LoginHistoryTab from '../../_components/LoginHistoryTab'
import LoginDevicesTab from '../../_components/LoginDevicesTab'
import LoginSecurityTab from '../../_components/LoginSecurityTab'
import { LoginPageSkeleton } from '../../_components/Skeletons'

const categoryMap: Record<string, string> = {
    logs: 'history',
    devices: 'devices',
    security: 'security',
}

export default function LoginCategoryPageClient({ category }: { category: string }) {
    const { t } = useTranslation()
    const router = useRouter()
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const [loading, setLoading] = useState(true)

    const activeTab = categoryMap[category] || 'history'

    const tabs: { key: string; label: string; href: string }[] = [
        {
            key: 'history',
            label: t('profile.tabs.loginHistory'),
            href: '/my/login/logs',
        },
        {
            key: 'devices',
            label: t('profile.tabs.loginDevices'),
            href: '/my/login/devices',
        },
        {
            key: 'security',
            label: t('profile.tabs.loginSecurity'),
            href: '/my/login/security',
        },
    ]

    useEffect(() => {
        if (!categoryMap[category]) {
            router.replace('/my/login/logs')
            return
        }
        setLoading(true)
        const timer = setTimeout(() => {
            setLoading(false)
        }, 600)
        return () => clearTimeout(timer)
    }, [category, router])

    if (loading) {
        return (
            <div className="min-h-screen supports-[height:100svh]:min-h-[100svh] bg-white dark:bg-[#0c0d0e] text-gray-900 dark:text-white flex flex-col">
                <Header onMenuClick={() => setSidebarOpen(true)} />
                <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} mode="drawer" />
                <LoginPageSkeleton />

                <Footer />
            </div>
        )
    }

    return (
        <div className="min-h-screen supports-[height:100svh]:min-h-[100svh] bg-white dark:bg-[#0c0d0e] text-gray-900 dark:text-white flex flex-col">
            <Header onMenuClick={() => setSidebarOpen(true)} />
            <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} mode="drawer" />

            <div className="flex-1 w-full max-w-[960px] mx-auto px-4 pt-[6rem] md:pt-[6rem] pb-10">
                <ProfileSidebar />

                <div className="mt-8">
                    <h2 className="text-2xl font-semibold mb-6">{t('profile.loginInfo')}</h2>

                    {/* 標籤頁切換 */}
                    <div className="flex flex-wrap gap-2 mb-6">
                        {tabs.map((tab) => (
                            <div key={tab.key}>
                                <button
                                    onClick={() => router.push(tab.href)}
                                    className={`inline-flex items-center px-4 py-2 rounded-md text-sm font-medium border transition-colors ${activeTab === tab.key
                                        ? 'bg-black text-white border-black dark:bg-white dark:text-black dark:border-white'
                                        : 'bg-transparent text-gray-700 border-gray-400 hover:bg-black hover:text-white hover:border-black dark:text-gray-200 dark:border-gray-500 dark:hover:bg-white dark:hover:text-black dark:hover:border-white'
                                        }`}
                                >
                                    {tab.label}
                                </button>
                            </div>
                        ))}
                    </div>

                    {/* 標籤頁內容 */}
                    <div className="mt-6">
                        {activeTab === 'history' && <LoginHistoryTab />}
                        {activeTab === 'devices' && <LoginDevicesTab />}
                        {activeTab === 'security' && <LoginSecurityTab />}
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    )
}