'use client'

import { ReactNode } from 'react'
import CommentItem from './CommentItem'
import type { Comment } from './types'

interface CommentsListProps {
    comments: Comment[]
    commentInput?: ReactNode
    onReply?: (commentId: string, replyText: string, replyTo: string) => void
    onDelete?: (commentId: string) => void
    onEdit?: (commentId: string, newContent: string) => Promise<void>
    onPin?: (commentId: string, isPinned: boolean) => Promise<void>
    onLike?: (commentId: string) => Promise<void>
    userAvatar?: string | null
    isLoggedIn?: boolean
    currentUserId?: string | null
    videoOwnerId?: string | null
}

export default function CommentsList({ comments, commentInput, onReply, onDelete, onEdit, onPin, onLike, userAvatar, isLoggedIn = false, currentUserId, videoOwnerId }: CommentsListProps) {
    return (
        <div className="flex flex-col h-full w-full min-h-0">
            {/* 留言列表區域（面板標題列由 CommentsPanel 負責，避免 popup 內又一層 popup） */}
            <div className="flex-1 overflow-y-auto hide-scrollbar px-4 md:px-5 py-3 md:py-4 min-h-0">
                <div className="space-y-3 md:space-y-4">
                    {comments.length > 0 ? (
                        comments.map((comment) => (
                            <CommentItem
                                key={comment.id}
                                comment={comment}
                                onReply={onReply}
                                onDelete={onDelete}
                                onEdit={onEdit}
                                onPin={onPin}
                                onLike={onLike}
                                userAvatar={userAvatar}
                                isLoggedIn={isLoggedIn}
                                currentUserId={currentUserId}
                                videoOwnerId={videoOwnerId}
                            />
                        ))
                    ) : (
                        <div className="flex items-center justify-center py-8 text-gray-400 dark:text-gray-500 text-sm">
                            暫無留言
                        </div>
                    )}
                </div>
            </div>

            {/* 輸入框區域 */}
            {commentInput && (
                <div className="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e]">
                    {commentInput}
                </div>
            )}
        </div>
    )
}