import { useContext } from "react";
import { PostDetailContext } from "./context/PostDetailContext";
import { motion } from "framer-motion";
import {
	CalendarIcon,
	UserCircleIcon,
	LockClosedIcon,
	LockOpenIcon,
	StarIcon,
	ClockIcon,
	EyeIcon,
	ChatBubbleLeftIcon,
} from "@heroicons/react/24/outline";

import { useVisitor } from "@nice/client";
import { PostState, VisitType } from "@nice/common";
import {
	CommentOutlined,
	EyeOutlined,
	LikeFilled,
	LikeOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { TitleSection } from "./PostHeader/TitleSection";
import {
	AuthorBadge,
	DateBadge,
	TermBadge,
	UpdatedBadge,
	VisibilityBadge,
} from "./PostHeader/InfoBadge";
import { StatsSection } from "./PostHeader/StatsSection";

export default function PostHeader() {
	const { post, user } = useContext(PostDetailContext);
	const { like, unLike } = useVisitor();

	function likeThisPost() {
		if (!post?.liked) {
			post.likes += 1;
			post.liked = true;
			like.mutateAsync({
				data: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.LIKE,
				},
			});
		} else {
			post.likes -= 1;
			post.liked = false;
			unLike.mutateAsync({
				where: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.LIKE,
				},
			});
		}
	}

	return (
		<motion.div
			initial={{ opacity: 0, y: -20 }}
			animate={{ opacity: 1, y: 0 }}
			transition={{ duration: 0.5 }}
			className="relative bg-gradient-to-br from-[#E6E9F0] via-[#EDF0F8] to-[#D8E2EF] rounded-lg p-6 shadow-lg border border-[#97A9C4]/30">
			{/* Corner Decorations */}
			<div className="absolute top-0 left-0 w-5 h-5 border-t-2 border-l-2 border-[#97A9C4] rounded-tl-lg" />
			<div className="absolute bottom-0 right-0 w-5 h-5 border-b-2 border-r-2 border-[#97A9C4] rounded-br-lg" />

			{/* Title Section */}

			<TitleSection
				title={post?.title}
				state={post?.state as PostState}></TitleSection>

			<div className="space-y-4">
				{/* First Row - Basic Info */}
				<div className="flex flex-wrap gap-4">
					{/* Author Info Badge */}
					<AuthorBadge
						name={
							post?.author?.showname || "匿名用户"
						}></AuthorBadge>

					{/* Date Info Badge */}
					{post?.createdAt && (
						<DateBadge
							date={dayjs(post?.createdAt).format("YYYY-MM-DD")}
							label="创建于:"></DateBadge>
					)}
					{/* Last Updated Badge */}
					{post?.updatedAt && post.updatedAt !== post.createdAt && (
						<UpdatedBadge
							date={dayjs(post?.updatedAt).format(
								"YYYY-MM-DD"
							)}></UpdatedBadge>
					)}
					{/* Visibility Status Badge */}
					<VisibilityBadge
						isPublic={post?.isPublic}></VisibilityBadge>
				</div>
				{/* Second Row - Term and Tags */}
				<div className="flex flex-wrap gap-4">
					{/* Term Badge */}
					{post?.term?.name && (
						<TermBadge term={post.term.name}></TermBadge>
					)}

					{/* Tags Badges */}
					{post?.meta?.tags &&
						post.meta.tags.length > 0 &&
						post.meta.tags.map((tag, index) => (
							<motion.span
								key={index}
								whileHover={{ scale: 1.05 }}
								className="inline-flex items-center bg-[#507AAF]/10 px-3 py-1.5 rounded border border-[#97A9C4]/50 shadow-md hover:bg-[#507AAF]/20">
								<span className="text-sm text-[#2B4C7E]">
									#{tag}
								</span>
							</motion.span>
						))}
				</div>
			</div>

			{/* Content Section */}
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				transition={{ delay: 0.6 }}
				className="mt-6 text-[#2B4C7E]">
				<div
					className="ql-editor space-y-4 leading-relaxed bg-white/60 p-4 rounded-md border border-[#97A9C4]/30 shadow-inner hover:bg-white/80 transition-colors duration-300"
					dangerouslySetInnerHTML={{ __html: post?.content || "" }}
				/>
			</motion.div>

			{/* Stats Section */}
			<StatsSection
				likes={post?.likes}
				views={post?.views}
				commentsCount={post?.commentsCount}
				liked={post?.liked}
				onLikeClick={likeThisPost}></StatsSection>
		</motion.div>
	);
}