import {
	EyeOutlined,
	LikeOutlined,
	LikeFilled,
	UserOutlined,
	BankOutlined,
	CalendarOutlined,
	FileTextOutlined,
} from "@ant-design/icons";
import { Button, Typography, Space, Tooltip } from "antd";
import toast from "react-hot-toast";
import { useState } from "react";
import { getBadgeStyle } from "@web/src/app/main/letter/list/utils";
import { PostDto } from "@nice/common";
import dayjs from "dayjs";
const { Title, Paragraph, Text } = Typography;

interface LetterCardProps {
	letter: PostDto;
}

export function LetterCard({ letter }: LetterCardProps) {
	const [likes, setLikes] = useState(0);
	const [liked, setLiked] = useState(false);
	const [views] = useState(Math.floor(Math.random() * 100)); // 模拟浏览量数据

	const handleLike = () => {
		if (!liked) {
			setLikes((prev) => prev + 1);
			setLiked(true);
			toast.success("已点赞!", {
				icon: <LikeFilled className="text-blue-500" />,
				className: "custom-message",
			});
		} else {
			setLikes((prev) => prev - 1);
			setLiked(false);
			toast("已取消点赞", {
				className: "custom-message",
			});
		}
	};

	return (
		<div className="w-full p-4 bg-white transition-all duration-300 ease-in-out   group">
			<div className="flex flex-col gap-3">
				{/* Title & Priority */}
				<div className="flex justify-between items-start">
					<Title level={4} className="!mb-0 flex-1">
						<a
							href={`/letters/${letter.id}`}
							target="_blank"
							className="text-primary transition-all duration-300 relative
                            before:absolute before:bottom-0 before:left-0 before:w-0 before:h-[2px] before:bg-primary-600
                            group-hover:before:w-full before:transition-all before:duration-300
                            group-hover:text-primary-600 group-hover:scale-105 group-hover:drop-shadow-md">
							{letter.title}
						</a>
					</Title>
				</div>

				{/* Meta Info */}
				<div className="flex justify-between items-center text-sm  text-secondary">
					<Space size="middle">
						<Space>
							<UserOutlined className="text-secondary-400" />
							<Text strong>
								{letter.author?.showname ||
									letter?.author?.username}
							</Text>
						</Space>
						<Text type="secondary">|</Text>
						<Space>
							<BankOutlined className="text-secondary-400" />
							<Text>{letter.author?.department?.name}</Text>
						</Space>
					</Space>
					<Space>
						<CalendarOutlined className="text-secondary-400" />
						<Text type="secondary">
							{dayjs(letter.createdAt).format("YYYY-MM-DD")}
						</Text>
					</Space>
				</div>

				{/* Content Preview */}
				{letter.content && (
					<div className="flex items-start gap-2">
						<FileTextOutlined className="text-gray-400 mt-1" />
						<Paragraph
							ellipsis={{ rows: 2 }}
							className="!mb-3 text-gray-600 flex-1">
							{letter.content}
						</Paragraph>
					</div>
				)}

				{/* Badges & Interactions */}
				<div className="flex justify-between items-center">
					<Space size="small" wrap className="flex-1">
						<Badge type="category" value={"11"} />
						<Badge type="status" value={"22"} />
					</Space>

					<div className="flex items-center gap-4">
						<div className="flex items-center gap-1 text-gray-500">
							<EyeOutlined className="text-lg" />
							<span className="text-sm">{views}</span>
						</div>
						<Tooltip
							title={liked ? "取消点赞" : "点赞"}
							placement="top">
							<Button
								type={liked ? "primary" : "default"}
								shape="round"
								size="small"
								icon={liked ? <LikeFilled /> : <LikeOutlined />}
								onClick={handleLike}
								className={`
                                    flex items-center gap-1 px-3 transform transition-all duration-300
                                    hover:scale-105 hover:shadow-md
                                    ${liked ? "bg-blue-500 hover:bg-blue-600" : "hover:border-blue-500 hover:text-blue-500"}
                                `}>
								<span className={liked ? "text-white" : ""}>
									{likes}
								</span>
							</Button>
						</Tooltip>
					</div>
				</div>
			</div>
		</div>
	);
}

export function Badge({
	type,
	value,
	className = "",
}: {
	type: "priority" | "category" | "status";
	value: string;
	className?: string;
}) {
	return (
		value && (
			<span
				className={`
                inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                ${getBadgeStyle(type, value)}
                transition-all duration-200 ease-in-out transform hover:scale-105
                ${className}
            `}>
				{value?.toUpperCase()}
			</span>
		)
	);
}