'use client'

import Link from 'next/link'
import Image from 'next/image'
import { useState, useRef, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import HeaderMenu from './HeaderMenu'
import NotificationPanel from './NotificationPanel'
import { useUserNotifications } from '@/contexts/UserNotificationsContext'
import { useUnreadBadge } from '@/hooks/useUnreadBadge'
import { FiMenu, FiBell, FiLogOut, FiSettings } from 'react-icons/fi'
import { FaUser } from 'react-icons/fa6'
import type { UserInfo } from '@/app/_helpers/types'
import { SESSION_CHANGED_EVENT } from '@/lib/notices/wsNotice'

interface HeaderProps {
    onMenuClick: () => void
    initialUserInfo?: UserInfo | null
}

function mapHeaderUser(info: UserInfo | null | undefined) {
    if (!info?.id) return null
    return {
        nickname: info.nickname?.trim() || '',
        id: info.id,
        avatarUrl: info.avatarUrl ?? null,
    }
}

export default function Header({ onMenuClick, initialUserInfo }: HeaderProps) {
    const router = useRouter()

    // Refs
    const userMenuRef = useRef<HTMLDivElement>(null)
    const notificationTriggerRef = useRef<HTMLButtonElement>(null)

    // Translations
    const { t } = useTranslation()
    const { i18n } = useTranslation()

    // State
    const [notificationOpen, setNotificationOpen] = useState(false)
    const [userMenuOpen, setUserMenuOpen] = useState(false)
    const [userInfo, setUserInfo] = useState<{
        nickname: string
        id: string
        avatarUrl: string | null
    } | null>(() => mapHeaderUser(initialUserInfo))
    const [isLoading, setIsLoading] = useState(false)
    const [isDarkLogo, setIsDarkLogo] = useState(false)
    const { refreshUnread: refreshUnreadNotifications } = useUserNotifications()
    const showUnreadDot = useUnreadBadge()

    useEffect(() => {
        const fetchUserInfo = async () => {
            try {
                const response = await fetch('/api/profile/user-info', {
                    credentials: 'include',
                })
                if (response.status === 401) {
                    setUserInfo(null)
                    return
                }
                const data = await response.json()
                if (data.ok) {
                    setUserInfo({
                        nickname: data.nickname || '',
                        id: data.id || data.nickname || '',
                        avatarUrl: data.avatarUrl || null,
                    })
                } else {
                    setUserInfo(null)
                }
            } catch (error) {
                console.error('Failed to fetch user info:', error)
                setUserInfo(null)
            } finally {
                setIsLoading(false)
            }
        }
        if (initialUserInfo === undefined) {
            void fetchUserInfo()
        }
        const onSessionChange = () => {
            void fetchUserInfo()
        }
        window.addEventListener(SESSION_CHANGED_EVENT, onSessionChange)
        return () => window.removeEventListener(SESSION_CHANGED_EVENT, onSessionChange)
    }, [initialUserInfo])

    useEffect(() => {
        if (!userInfo) return
        void refreshUnreadNotifications()
    }, [userInfo, refreshUnreadNotifications])

    useEffect(() => {
        if (!notificationOpen && userInfo) {
            void refreshUnreadNotifications()
        }
    }, [notificationOpen, userInfo, refreshUnreadNotifications])

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
                setUserMenuOpen(false)
            }
        }
        document.addEventListener('mousedown', handleClickOutside)
        return () => document.removeEventListener('mousedown', handleClickOutside)
    }, [])

    useEffect(() => {
        if (typeof document === 'undefined') return
        const root = document.documentElement

        const updateLogoTheme = () => {
            setIsDarkLogo(root.classList.contains('dark'))
        }

        updateLogoTheme()

        const observer = new MutationObserver((mutations) => {
            for (const m of mutations) {
                if (m.type === 'attributes' && m.attributeName === 'class') {
                    updateLogoTheme()
                    break
                }
            }
        })

        observer.observe(root, { attributes: true, attributeFilter: ['class'] })

        return () => observer.disconnect()
    }, [])

    const handleLogout = async () => {
        try {
            await fetch('/api/auth/logout', { method: 'POST' })
            window.dispatchEvent(new CustomEvent('gp-live:session-changed'))
            setUserInfo(null)
            setUserMenuOpen(false)
            router.push('/')
            router.refresh()
        } catch (error) {
            console.error('Logout error:', error)
        }
    }

    useEffect(() => {
        if (typeof document === 'undefined') return
        const lang = i18n.language || 'zh-TW'
        document.documentElement.lang = lang
        document.cookie = `lang=${lang}; path=/; max-age=31536000`
    }, [i18n.language])

    return (
        <header className="min-w-[375px] bg-white dark:bg-[#0c0d0e] border-b border-gray-200 dark:border-gray-800 fixed top-0 left-0 right-0 z-[100] shadow-sm transition-colors">
            <div className="mx-3 px-2 py-3 md:py-2">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 md:gap-4">
                        <button
                            onClick={onMenuClick}
                            className="text-black dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
                            aria-label={t('header.hamburger')}
                        >
                            <FiMenu className="w-6 h-6" />
                        </button>
                        <Link href="/" className="flex items-center">
                            <span className="relative block w-10 h-10">
                                {/* eslint-disable-next-line @next/next/no-img-element */}
                                <img
                                    src={`/images/logo/small_${isDarkLogo ? 'white' : 'black'}.png`}
                                    alt="NoiR"
                                    className="block w-auto h-full object-contain pointer-events-none"
                                />
                            </span>
                        </Link>
                    </div>
                    <div className="flex items-center gap-2 md:gap-4">
                        <div className="notice-area relative h-[40px]">
                            <button
                                ref={notificationTriggerRef}
                                onClick={() => setNotificationOpen(!notificationOpen)}
                                className={`relative w-10 h-10 p-0 border-0 rounded-full cursor-pointer transition-all ${notificationOpen
                                    ? 'bg-gray-100 dark:bg-neutral-900'
                                    : 'hover:bg-gray-100 dark:hover:bg-gray-800'
                                    }`}
                                aria-label={t('header.notifications')}
                            >
                                <span className="relative block w-10 h-10">
                                    <FiBell className="w-6 h-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0" />
                                    {showUnreadDot ? (
                                        <span
                                            className="absolute right-0.5 top-0.5 z-10 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-white dark:ring-[#0c0d0e] pointer-events-none"
                                            aria-hidden
                                        />
                                    ) : null}
                                </span>
                            </button>
                            <NotificationPanel
                                isOpen={notificationOpen}
                                onClose={() => setNotificationOpen(false)}
                                triggerRef={notificationTriggerRef}
                            />
                        </div>
                        {isLoading ? null : userInfo ? (
                            <div className="relative" ref={userMenuRef}>
                                <button
                                    onClick={() => setUserMenuOpen(!userMenuOpen)}
                                    className="flex items-center justify-center w-10 h-10 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                                    aria-label={t('header.userMenu')}
                                >
                                    {userInfo.avatarUrl ? (
                                        <Image
                                            src={userInfo.avatarUrl}
                                            alt={userInfo.nickname || t('header.userMenu')}
                                            width={32}
                                            height={32}
                                            className="w-8 h-8 rounded-full object-cover"
                                            unoptimized
                                        />
                                    ) : (
                                        <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center">
                                            <FaUser className="w-3 h-3 text-gray-400 dark:text-white/50" />
                                        </div>
                                    )}
                                </button>
                                {userMenuOpen && (
                                    <div className="absolute right-0 mt-2 w-[270px] bg-white dark:bg-[#0c0d0e] border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-[120] overflow-hidden">
                                        <Link
                                            href={`/user/${userInfo.id}`}
                                            className="flex items-center px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                            onClick={() => setUserMenuOpen(false)}
                                        >
                                            <div className="flex-shrink-0 w-[42px] h-[42px] rounded-full overflow-hidden border border-gray-200 dark:border-gray-700">
                                                {userInfo.avatarUrl ? (
                                                    <Image
                                                        src={userInfo.avatarUrl}
                                                        alt={userInfo.nickname || t('header.userMenu')}
                                                        width={42}
                                                        height={42}
                                                        className="w-full h-full object-cover"
                                                        unoptimized
                                                    />
                                                ) : (
                                                    <div className="w-full h-full bg-gray-100 dark:bg-white/10 flex items-center justify-center">
                                                        <FaUser className="w-6 h-6 text-gray-400 dark:text-white/50" />
                                                    </div>
                                                )}
                                            </div>
                                            <div className="ml-3 flex-1 min-w-0">
                                                <div className="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                                    {userInfo.nickname}
                                                </div>
                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
                                                    {userInfo.id}
                                                </div>
                                            </div>
                                        </Link>

                                        <div className="border-t border-gray-200 dark:border-gray-700">
                                            <Link
                                                href="/my/profile"
                                                className="flex items-center px-5 py-2.5 text-sm text-gray-900 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                                onClick={() => setUserMenuOpen(false)}
                                            >
                                                <FiSettings className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400" />
                                                {t('header.myInfo')}
                                            </Link>
                                            <button
                                                onClick={handleLogout}
                                                className="w-full flex items-center px-5 py-2.5 text-sm text-gray-900 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                            >
                                                <FiLogOut className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400" />
                                                {t('header.logout')}
                                            </button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        ) : (
                            <Link
                                href="/login"
                                className="bg-black text-white dark:bg-white dark:text-black hover:opacity-90 dark:hover:opacity-90 transition-colors px-3 md:px-4 h-10 text-sm md:text-base rounded-3xl flex items-center justify-center"
                            >
                                {t('header.login')}
                            </Link>
                        )}
                        <HeaderMenu />
                    </div>
                </div>
            </div>
        </header>
    )
}