staff_data/apps/web/src/app/main/home/components/CoursesSection.tsx

import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button, Card, Typography, Tag, Progress, Spin, Empty } from 'antd';
import {
  PlayCircleOutlined,
  UserOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  StarOutlined,
  ArrowRightOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import { CourseDto, TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client';
// const {courseId} = useParams();
interface GetTaxonomyProps {
  categories: string[];
  isLoading: boolean;
}
function useGetTaxonomy({ type }): GetTaxonomyProps {
  const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
    where: {
      taxonomy: {
        //TaxonomySlug.CATEGORY
        slug: type
      }
    },
    include: {
      children: true
    },
    take: 10, // 只取前10个
    orderBy: {
      createdAt: 'desc', // 按创建时间降序排列
    },
  })
  const categories = useMemo(() => {
    const allCategories = isLoading ? [] : data?.map((course) => course.name);
    return [...Array.from(new Set(allCategories))];
  }, [data]);
  return { categories, isLoading }
}
// 不同分类跳转
function useFetchCoursesByCategory(category: string) {
  const isAll = category === '全部';
  const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
    where: isAll ? {} : {
      terms: {
        some: {
          name: category
        },
      },
    },
    take: 8,
    include: {
      terms: true
    }
  });

  return { data, isLoading };
}



const { Title, Text } = Typography;

interface Course {
  id: number;
  title: string;
  instructor: string;
  students: number;
  rating: number;
  level: string;
  duration: string;
  category: string;
  progress: number;
  thumbnail: string;
}
interface CoursesSectionProps {
  title: string;
  description: string;
  courses: Course[];
  isLoading: boolean
  initialVisibleCoursesCount?: number;
}


const CoursesSection: React.FC<CoursesSectionProps> = ({
  title,
  description,
  courses,
  isLoading,
  initialVisibleCoursesCount = 8,
}) => {
  const navigate = useNavigate();
  const [selectedCategory, setSelectedCategory] = useState<string>('全部');
  const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount);
  const gateGory: GetTaxonomyProps = useGetTaxonomy({
    type: TaxonomySlug.CATEGORY,
  })
  const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
  useEffect(() => {
    console.log('data:', data)
  })
  const handleClick = (course: CourseDto) => {
    navigate(`/course/${course.id}/detail`);
  }

  useEffect(() => {
    console.log('data:', data)
  })
  const filteredCourses = useMemo(() => {
    return selectedCategory === '全部'
      ? data
      : data?.filter(c => c.terms.some(t => t.name === selectedCategory));
  }, [selectedCategory, data]);

  const displayedCourses = isDataLoading ? [] : filteredCourses?.slice(0, visibleCourses);
  return (
    <section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
      <div className="max-w-screen-2xl mx-auto px-6 relative">
        <div className="flex justify-between items-end mb-16">
          <div>
            <Title
              level={2}
              className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
            >
              {title}
            </Title>
            <Text type="secondary" className="text-xl font-light text-gray-600">
              {description}
            </Text>
          </div>
        </div>

        <div className="mb-12 flex flex-wrap gap-4">
          {gateGory.isLoading ? <Spin className='m-3' /> :
            (
              <>
                <Tag
                  color={selectedCategory === "全部" ? 'blue' : 'default'}
                  onClick={() => setSelectedCategory("全部")}
                  className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === "全部"
                    ? 'bg-blue-600 text-white shadow-lg'
                    : 'bg-white text-gray-600 hover:bg-gray-100'
                    }`}
                >全部</Tag>
                {gateGory.categories.map((category) => (
                  <Tag
                    key={category}
                    color={selectedCategory === category ? 'blue' : 'default'}
                    onClick={() => {
                      setSelectedCategory(category)
                      console.log(category)
                    }}
                    className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
                      ? 'bg-blue-600 text-white shadow-lg'
                      : 'bg-white text-gray-600 hover:bg-gray-100'
                      }`}

                  >
                    {category}
                  </Tag>

                ))
                }

              </>
            )
          }
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {displayedCourses.length=== 0 ? (
            <div  className="col-span-full">
              <Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
            </div>
          ) : displayedCourses?.map((course) => (
            <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})` }}
                  />
                  <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="flex gap-2 mb-4">
                  <Tag
                    color="blue"
                    className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
                  >
                    {course.terms[0].name}
                  </Tag>
                  <Tag
                    color={
                      course.terms[1].name === '入门'
                        ? 'green'
                        : course.terms[1].name === '中级'
                          ? 'blue'
                          : 'purple'
                    }
                    className="px-3 py-1 rounded-full border-0"
                  >
                    {course.terms[1].name}
                  </Tag>
                </div>
                <Title
                  level={4}
                  className="mb-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 p-2 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 hover:text-blue-600 transition-colors duration-300">
                    </Text>
                  </div>
                  <span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
                    <EyeOutlined className="ml-1.5 text-sm" />
                    <span className="text-xs font-medium">观看次数{course?.meta?.views}次</span>
                  </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>
          ))}
        </div>

        {filteredCourses?.length >= visibleCourses && (
          <div className='flex items-center gap-4 justify-between mt-12'>
            <div className='h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent'></div>
            <div className="flex justify-end">
              <Button
                type="link"
                onClick={() => navigate('/courses')}
                className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300"
              >
                查看更多
                <ArrowRightOutlined />
              </Button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

export default CoursesSection;