'use client'

import { useState, useEffect } from 'react'
import { FaRegHeart, FaHeart, FaRegThumbsDown } from 'react-icons/fa6'
import { BiMessageDetail, BiSolidMessageDetail } from 'react-icons/bi'
import { RiShareForwardLine } from 'react-icons/ri'
import { useTranslation } from 'react-i18next'
import SharePanel from './SharePanel'

interface DesktopInteractionButtonsProps {
    likes: number
    comments: number
    onCommentsClick?: () => void
    formatViews: (views: number) => string
    isLiked?: boolean
    onLikeClick?: () => void
    videoUrl?: string
    videoTitle?: string
    isCommentsOpen?: boolean
}

export default function DesktopInteractionButtons({
    likes,
    comments,
    onCommentsClick,
    formatViews,
    isLiked = false,
    onLikeClick,
    videoUrl = '',
    videoTitle = '',
    isCommentsOpen = false,
}: DesktopInteractionButtonsProps) {
    const { t } = useTranslation()
    const [flyingHearts, setFlyingHearts] = useState<number[]>([])
    const [displayLikes, setDisplayLikes] = useState(likes)
    const [isShareOpen, setIsShareOpen] = useState(false)

    // 同步外部傳入的 likes 值
    useEffect(() => {
        setDisplayLikes(likes)
    }, [likes])

    const handleLikeClick = () => {
        // 即時更新數字
        if (isLiked) {
            // 取消按讚，減少1
            setDisplayLikes((prev) => Math.max(0, prev - 1))
        } else {
            // 按讚，增加1
            setDisplayLikes((prev) => prev + 1)
            // 只有在按讚時（從未按讚變為按讚）才顯示飛行動畫
            const newHearts = Array.from({ length: 5 }, (_, i) => Date.now() + i)
            setFlyingHearts(newHearts)

            // 1秒後清除飛出的愛心
            setTimeout(() => {
                setFlyingHearts([])
            }, 1000)
        }
        onLikeClick?.()
    }

    return (
        <div className="flex flex-col items-center gap-6">
            {/* 點讚 */}
            <button
                onClick={handleLikeClick}
                className="flex flex-col items-center gap-2 group"
            >
                <div className={`relative w-14 h-14 flex items-center justify-center rounded-full transition-all ${isLiked ? 'bg-red-500/80 dark:bg-red-500/80' : 'bg-gray-200/60 dark:bg-white/10 hover:bg-gray-300/80 dark:hover:bg-white/20'
                    }`}>
                    {/* 飛出的愛心 */}
                    {flyingHearts.map((heartId, index) => {
                        const animations = [
                            'animate-heart-fly-1',
                            'animate-heart-fly-2',
                            'animate-heart-fly-3',
                            'animate-heart-fly-4',
                            'animate-heart-fly-5',
                        ]
                        return (
                            <div
                                key={heartId}
                                className={`absolute inset-0 flex items-center justify-center pointer-events-none ${animations[index] || animations[0]}`}
                            >
                                <FaHeart className="w-7 h-7 text-white" />
                            </div>
                        )
                    })}
                    <div className="relative">
                        {isLiked ? (
                            <FaHeart className="w-7 h-7 text-white" />
                        ) : (
                            <FaRegHeart className="w-7 h-7 text-black dark:text-white" />
                        )}
                    </div>
                </div>
                <span className={`text-sm font-medium transition-colors duration-300 ${isLiked ? 'text-red-500 dark:text-red-500' : 'text-black dark:text-white'}`}>
                    {formatViews(displayLikes)}
                </span>
            </button>

            {/* 評論 */}
            <button
                onClick={onCommentsClick}
                className="flex flex-col items-center gap-2 group"
            >
                <div className={`w-14 h-14 flex items-center justify-center rounded-full transition-all ${isCommentsOpen ? 'bg-gray-200/80 dark:bg-white/30' : 'bg-gray-200/60 dark:bg-white/10 hover:bg-gray-300/80 dark:hover:bg-white/20'
                    }`}>
                    {isCommentsOpen ? (
                        <BiSolidMessageDetail className="w-7 h-7 text-black dark:text-white" />
                    ) : (
                        <BiMessageDetail className="w-7 h-7 text-black dark:text-white" />
                    )}
                </div>
                <span className="text-black dark:text-white text-sm font-medium">
                    {comments}
                </span>
            </button>

            {/* 分享 */}
            <button
                onClick={() => setIsShareOpen(true)}
                className="flex flex-col items-center gap-2 group"
            >
                <div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-200/60 dark:bg-white/10 hover:bg-gray-300/80 dark:hover:bg-white/20 transition-all">
                    <RiShareForwardLine className="w-7 h-7 text-black dark:text-white" />
                </div>
                <span className="text-black dark:text-white text-sm font-medium">
                    {t('explore.share')}
                </span>
            </button>

            {/* 分享面板 */}
            <SharePanel
                isOpen={isShareOpen}
                onClose={() => setIsShareOpen(false)}
                videoUrl={videoUrl}
                videoTitle={videoTitle}
            />
        </div>
    )
}