import { useContext } from "react";
import { PostDetailContext } from "../context/PostDetailContext";
import { Space, Typography } from "antd";
import { PostBadge } from "../badge/PostBadge";
import { MailOutlined, SendOutlined } from "@ant-design/icons";

import {
	CalendarOutlined,
	ClockCircleOutlined,
	LockOutlined,
	UnlockOutlined,
	UserOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { LetterBadge } from "../../LetterBadge";
const { Title, Paragraph, Text } = Typography;
export default function Header() {
	const { post, user } = useContext(PostDetailContext);
	return (
		<header className="rounded-t-xl bg-gradient-to-r from-primary to-primary-400 text-white p-6 relative">
			<div className="flex flex-col space-b-1">
				{/* 主标题 */}
				<div>
					<h1 className="text-3xl font-bold tracking-wider flex items-center gap-2">
						{post?.title}
					</h1>
				</div>
				<div className="space-y-1">
					<Space className="mr-4">
						<span className="text-white">发件人</span>
						<Text className="text-white" strong>
							{post?.meta?.signature ||
								post?.author?.showname ||
								"匿名用户"}
						</Text>
					</Space>
					<Space className="mr-4">
						<span className="text-white">收件人 </span>

						{post?.receivers?.map((receiver, index) => (
							<Text
								strong
								className="text-white"
								key={`${index}`}>
								{receiver?.meta?.rank}{" "}
								{receiver?.showname || "匿名用户"}
							</Text>
						))}
					</Space>

					{/* Date Info Badge */}
					<Space className="mr-4">
						<span className="text-white">创建于</span>
						<Text className="text-white">
							{dayjs(post?.createdAt).format("YYYY-MM-DD")}
						</Text>
					</Space>
					{/* Last Updated Badge */}
					<Space className="mr-4">
						<span className="text-white">最后更新于</span>
						<Text className="text-white">
							{dayjs(post?.updatedAt).format("YYYY-MM-DD")}
						</Text>
					</Space>
					{/* Visibility Status Badge */}
					<Space className="mr-4">
						{post?.isPublic ? (
							<UnlockOutlined className="text-white" />
						) : (
							<LockOutlined className="text-white" />
						)}
						<Text className="text-white">
							{post?.isPublic ? "公开" : "保密"}
						</Text>
					</Space>

					{/* First Row - Basic Info */}
					<div className="flex flex-wrap items-center gap-1">
						{/* Author Info Badge */}
					</div>
					{/* Second Row - Term and Tags */}
					{post?.meta?.tags?.length > 0 && (
						<div className="flex flex-wrap gap-2">
							{/* Tags Badges */}

							<LetterBadge type="state" value={post?.state} />
							{(post?.terms || [])?.map((term, index) => {
								return (
									<LetterBadge
										key={`${term.name}-${index}`}
										type="category"
										value={term.name}
									/>
								);
							})}
							{post.meta.tags.length > 0 &&
								post.meta.tags.map((tag, index) => (
									<LetterBadge
										key={`${tag}-${index}`}
										type="tag"
										value={tag}
									/>
								))}
						</div>
					)}
				</div>
			</div>
		</header>
	);
}
