import { PostDto, VisitType } from "@nice/common";
import { motion } from "framer-motion";
import dayjs from "dayjs";
import { ChatBubbleLeftIcon, HeartIcon } from "@heroicons/react/24/outline";
import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
import { Avatar } from "antd";
import { useVisitor } from "@nice/client";
import { useContext } from "react";
import { PostDetailContext } from "./context/PostDetailContext";


export default function PostCommentCard({
	post,
	index,
	isReceiverComment
}: {
	post: PostDto;
	index: number;
	isReceiverComment: boolean;
}) {
	const { user } = useContext(PostDetailContext);
	const { like } = useVisitor();

	async function likeThisPost() {
		if (!post?.liked) {
			try {
				await like.mutateAsync({
					data: {
						visitorId: user?.id || null,
						postId: post.id,
						type: VisitType.LIKE,
					},
				});
			} catch (error) {
				console.error("Failed to like post:", error);
			}
		}
	}
	return (
		<motion.div
			className="bg-white rounded-lg shadow-sm border border-slate-200 p-4"
			layout>
			<div className="flex items-start space-x-3">
				<div className="flex-shrink-0">
					<Avatar
						src={post.author?.avatar}
						size={40}
					>
						{!post.author?.avatar && (post.author?.showname || "匿名用户")}
					</Avatar>
				</div>
				<div className="flex-1 min-w-0">
					<div
						className="flex items-center space-x-2"
						style={{ height: 40 }}>
						{isReceiverComment && (
							<span className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
								反馈解答
							</span>
						)}
						<span className="font-medium text-slate-900">
							{post.author?.showname || "匿名用户"}
						</span>
						<span className="text-sm text-slate-500">
							{dayjs(post?.createdAt).format("YYYY-MM-DD HH:mm")}
						</span>
					</div>
					<div
						className="ql-editor text-slate-800"
						style={{
							padding: 0,
						}}
						dangerouslySetInnerHTML={{ __html: post.content || "" }}
					/>

					{/* 添加有帮助按钮 */}
					<div className="mt-3 flex items-center">
						<motion.button
							onClick={likeThisPost}
							whileHover={{ scale: 1.05 }}
							whileTap={{ scale: 0.95 }}
							className={`inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-full text-sm
                                ${
									post?.liked
										? "bg-blue-50 text-blue-600"
										: "hover:bg-slate-50 text-slate-600"
								} transition-colors duration-200`}>
							{post?.liked ? (
								<HeartIconSolid className="h-4 w-4 text-blue-600" />
							) : (
								<HeartIcon className="h-4 w-4" />
							)}
							<span>{post?.likes || 0} 有帮助</span>
						</motion.button>
					</div>
				</div>
			</div>
		</motion.div>
	);
}