'use client'

import { useState, useRef, useEffect } from 'react'
import Image from 'next/image'
import { useTranslation } from 'react-i18next'
import { FiX, FiHeart, FiMessageCircle, FiThumbsDown, FiThumbsUp } from 'react-icons/fi'
import { FaThumbsUp } from 'react-icons/fa'

interface Comment {
    id: string
    author: string
    avatar: string
    content: string
    time: string
    likes: number
    replies?: number
    isPinned?: boolean
}

interface CommentsPanelProps {
    isOpen: boolean
    onClose: () => void
    comments: Comment[]
    commentCount: number
}

export default function CommentsPanel({ isOpen, onClose, comments, commentCount }: CommentsPanelProps) {
    const { t } = useTranslation()
    const panelRef = useRef<HTMLDivElement>(null)
    const [commentText, setCommentText] = useState('')

    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = ''
        }
        return () => {
            document.body.style.overflow = ''
        }
    }, [isOpen])

    return (
        <>
            {/* 背景遮罩 */}
            <div
                className={`fixed inset-0 bg-black/50 z-[200] md:hidden transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
                    }`}
                onClick={onClose}
            />

            {/* 評論面板 */}
            <div
                ref={panelRef}
                className={`fixed right-0 top-0 bottom-0 w-[85%] max-w-[95%] bg-white dark:bg-[#0c0d0e] z-[201] md:hidden flex flex-col shadow-2xl transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
                    }`}
            >
                {/* 標題欄 */}
                <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800">
                    <h2 className="text-lg font-semibold text-black dark:text-white">
                        {t('catch.comments')} {commentCount}
                    </h2>
                    <div className="flex items-center gap-2">
                        <button
                            onClick={onClose}
                            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
                        >
                            <FiX className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                        </button>
                    </div>
                </div>

                {/* 評論列表 */}
                <div className="flex-1 overflow-y-auto px-4 py-2">
                    {comments.map((comment) => (
                        <div key={comment.id} className="mb-4">
                            {comment.isPinned && (
                                <div className="flex items-center gap-1 mb-2 text-xs text-gray-500 dark:text-gray-400">
                                    <span className="text-blue-500">📌</span>
                                    <span>已由「@{comment.author}」設為置頂</span>
                                </div>
                            )}
                            <div className="flex gap-3">
                                <div className="relative w-8 h-8 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 flex-shrink-0">
                                    {comment.avatar ? (
                                        <Image
                                            src={comment.avatar}
                                            alt={comment.author}
                                            fill
                                            className="pointer-events-none"
                                            unoptimized
                                        />
                                    ) : (
                                        <div className="absolute inset-0 flex items-center justify-center">
                                            <span className="text-xs text-gray-400">{comment.author[0]}</span>
                                        </div>
                                    )}
                                </div>
                                <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2 mb-1">
                                        <span className="text-sm font-semibold text-black dark:text-white">
                                            @{comment.author}
                                        </span>
                                        <span className="text-xs text-gray-500 dark:text-gray-400">
                                            {comment.time}
                                        </span>
                                    </div>
                                    <p className="text-sm text-black dark:text-gray-300 mb-2 whitespace-pre-wrap">
                                        {comment.content}
                                    </p>
                                    <div className="flex items-center gap-4">
                                        <button className="flex items-center gap-1 text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">
                                            <FaThumbsUp className="w-4 h-4" />
                                            <span className="text-xs">{comment.likes}</span>
                                        </button>
                                        <button className="flex items-center gap-1 text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">
                                            <FiThumbsDown className="w-4 h-4" />
                                        </button>
                                        <button className="flex items-center gap-1 text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">
                                            <FiHeart className="w-4 h-4" />
                                        </button>
                                        <button className="text-xs text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">
                                            {t('catch.reply')}
                                        </button>
                                    </div>
                                    {comment.replies && comment.replies > 0 && (
                                        <button className="mt-2 text-xs text-blue-500 hover:text-blue-600 transition-colors">
                                            {comment.replies} {t('catch.replies')} ↓
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* 評論輸入框 */}
                <div className="border-t border-gray-200 dark:border-gray-800 p-4">
                    <div className="flex items-center gap-3">
                        <div className="relative w-8 h-8 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 flex-shrink-0">
                            <div className="absolute inset-0 flex items-center justify-center">
                                <span className="text-xs text-gray-400">👤</span>
                            </div>
                        </div>
                        <input
                            type="text"
                            value={commentText}
                            onChange={(e) => setCommentText(e.target.value)}
                            placeholder={t('catch.postComment')}
                            className="flex-1 px-4 py-2 bg-gray-100 dark:bg-neutral-900 rounded-full text-sm text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                    </div>
                </div>
            </div>
        </>
    )
}