import { Card, Tag, Typography, Button } from "antd";
import {
    BookOutlined,
    EyeOutlined,
    PlayCircleOutlined,
    TeamOutlined,
} from "@ant-design/icons";
import { CourseDto, PostDto, TaxonomySlug } from "@nice/common";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

interface PostCardProps {
    course?: CourseDto;
    path?: PostDto
}
const { Title, Text } = Typography;
export default function PostCard({ course = null, path = null }: PostCardProps) {
    const navigate = useNavigate();
    const handleClick = (course: CourseDto) => {
        if (course) {
            navigate(`/course/${course.id}/detail`);
        } else if (path) {
            navigate(`/path/editor/${path.id}`);
        }
        window.scrollTo({ top: 0, behavior: "smooth", })
    };
    return (
        <Card
            onClick={() => handleClick(course)}
            key={course?.id}
            hoverable
            className="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
            cover={
                <div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
                    <div
                        className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
                        style={{
                            backgroundImage: `url(${course?.meta?.thumbnail})`,
                        }}
                    />

                    {course && (
                        <>
                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
                            <PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-white/90 opacity-0 group-hover:opacity-100 transition-all duration-300" />
                        </>
                    )}
                </div>
            }>
            <div className="px-4 ">
                <div className="overflow-hidden hover:overflow-auto">
                    <div className="flex gap-2 h-7 mb-4  whiteSpace-nowrap">
                        {course?.terms?.map((term) => {
                            return (
                                <>
                                    <Tag
                                        key={term.id}
                                        color={
                                            term?.taxonomy?.slug ===
                                                TaxonomySlug.CATEGORY
                                                ? "blue"
                                                : term?.taxonomy?.slug ===
                                                    TaxonomySlug.LEVEL
                                                    ? "green"
                                                    : "orange"
                                        }
                                        className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0 ">
                                        {term.name}
                                    </Tag>
                                </>
                            );
                        })}
                    </div>
                </div>

                <Title
                    level={4}
                    className="mb-4 mt-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
                    <button> {course?.title}</button>
                </Title>
                <div className="flex items-center mb-4  rounded-lg transition-all duration-300 hover:bg-blue-50 group">
                    <TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
                    <div className="ml-2 flex items-center flex-grow">
                        <Text className="font-medium text-blue-500  transition-colors duration-300 truncate max-w-[120px]">
                            {course?.depts?.length > 1
                                ? `${course.depts[0].name}等`
                                : course?.depts?.[0]?.name}
                            {/* {course?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
                            {/* {course?.depts?.map((dept)=>{return dept.name})} */}
                        </Text>

                    </div>
                    {!course && (
                        <>
                            <span className="text-xs font-medium text-gray-500">
                                {path?.meta?.views
                                    ? `观看次数 ${path?.meta?.views}`
                                    : null}
                            </span>
                        </>
                    )}
                </div>
                {course && (
                    <div className="flex items-center gap-2">
                        <span className="text-xs font-medium text-gray-500 flex items-center">
                            <EyeOutlined />
                            {`观看次数 ${course?.meta?.views || 0}`}
                        </span>
                        <span className="text-xs font-medium text-gray-500 flex items-center">
                            <BookOutlined />
                            {`学习人数 ${course?.studentIds?.length || 0}`}
                        </span>
                    </div>
                )}
                <div className="pt-4 border-t border-gray-100 text-center">
                    <Button
                        type="primary"
                        size="large"
                        className="w-full shadow-[0_8px_20px_-6px_rgba(59,130,246,0.5)] hover:shadow-[0_12px_24px_-6px_rgba(59,130,246,0.6)] 
            transform hover:translate-y-[-2px] transition-all duration-500 ease-out">
                        {"立即学习"}
                    </Button>
                </div>
            </div>
        </Card>
    );
}