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

import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Typography, Tag, Progress,Spin } from 'antd';
import {
  PlayCircleOutlined,
  UserOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  StarOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons';
import { TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client';
import { GetTaxonomyProps, useGetTaxonomy } from '@web/src/hooks/useGetTaxonomy';

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[];
  initialVisibleCoursesCount?: number;
}


const CoursesSection: React.FC<CoursesSectionProps> = ({
  title,
  description,
  courses,
  initialVisibleCoursesCount = 8,
}) => {
  const navigate = useNavigate();
  const [selectedCategory, setSelectedCategory] = useState<string>('全部');
  const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount);
  const gateGory : GetTaxonomyProps = useGetTaxonomy({
    type: TaxonomySlug.CATEGORY,
  })
  useEffect(() => {
    
  })
  const filteredCourses = useMemo(() => {
    return selectedCategory === '全部'
      ? courses
      : courses.filter((course) => course.category === selectedCategory);
  }, [selectedCategory, courses]);

  const displayedCourses = filteredCourses.slice(0, visibleCourses);

  return (
    <section className="relative py-16 overflow-hidden">
      <div className="max-w-screen-2xl mx-auto px-4 relative">
        <div className="flex justify-between items-end mb-12">
          <div>
            <Title
              level={2}
              className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-blue-600 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x"
            >
              {title}
            </Title>
            <Text type="secondary" className="text-xl font-light">
              {description}
            </Text>
          </div>
        </div>

        <div className="mb-8 flex flex-wrap gap-3">
          {gateGory.isLoading ? <Spin className='m-3'/> : 
            (
              <>
              <Tag 
                color={selectedCategory === "全部" ? 'blue' : 'default'} 
                onClick={() => setSelectedCategory("全部")}
                className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === "全部"
                  ? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
                  : 'hover:shadow-md'
                  }`}
              >全部</Tag>
              {
                gateGory.categories.map((category) => (
                  <Tag
                    key={category}
                    color={selectedCategory === category ? 'blue' : 'default'}
                    onClick={() => setSelectedCategory(category)}
                    className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === category
                      ? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
                      : 'hover:shadow-md'
                      }`}
                  >
                    {category}
                  </Tag>
                ))
              }
              </>

            )
            }
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {displayedCourses.map((course) => (
            <Card
              key={course.id}
              hoverable
              className="group overflow-hidden rounded-2xl border-0 bg-white/70 backdrop-blur-sm 
                shadow-[0_10px_40px_-15px_rgba(0,0,0,0.1)] hover:shadow-[0_20px_50px_-15px_rgba(0,0,0,0.15)] 
                transition-all duration-700 ease-out transform hover:-translate-y-1 will-change-transform"
              cover={
                <div className="relative h-48 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-1000 ease-out group-hover:scale-110"
                    style={{ backgroundImage: `url(${course.thumbnail})` }}
                  />
                  <div className="absolute inset-0 bg-gradient-to-tr from-black/60 via-black/40 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-700" />
                  <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-500 ease-out transform group-hover:scale-110 drop-shadow-lg" />
                  {course.progress > 0 && (
                    <div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/20">
                      <Progress
                        percent={course.progress}
                        showInfo={false}
                        strokeColor={{
                          from: '#3b82f6',
                          to: '#60a5fa',
                        }}
                        className="m-0"
                      />
                    </div>
                  )}
                </div>
              }
            >
              <div className="px-2">
                <div className="flex gap-2 mb-4">
                  <Tag
                    color="blue"
                    className="px-3 py-1 rounded-full border-0 shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)] transition-all duration-300 hover:shadow-[0_4px_12px_-4px_rgba(59,130,246,0.6)]"
                  >
                    {course.category}
                  </Tag>
                  <Tag
                    color={
                      course.level === '入门'
                        ? 'green'
                        : course.level === '中级'
                          ? 'blue'
                          : 'purple'
                    }
                    className="px-3 py-1 rounded-full border-0 shadow-sm transition-all duration-300 hover:shadow-md"
                  >
                    {course.level}
                  </Tag>
                </div>
                <Title
                  level={4}
                  className="mb-4 line-clamp-2 font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600"
                >
                  {course.title}
                </Title>
                <div className="flex items-center mb-4 transition-all duration-300 group-hover:text-blue-500">
                  <UserOutlined className="mr-2 text-blue-500" />
                  <Text className="text-gray-600 font-medium group-hover:text-blue-500">
                    {course.instructor}
                  </Text>
                </div>
                <div className="flex justify-between items-center mb-4 text-gray-500 text-sm">
                  <span className="flex items-center">
                    <ClockCircleOutlined className="mr-1.5" />
                    {course.duration}
                  </span>
                  <span className="flex items-center">
                    <TeamOutlined className="mr-1.5" />
                    {course.students.toLocaleString()}
                  </span>
                  <span className="flex items-center text-yellow-500">
                    <StarOutlined className="mr-1.5" />
                    {course.rating}
                  </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-6'>
            <div className='h-[1px]    flex-grow  bg-gray-200'></div>
            <div className="flex justify-end ">
              <div
                onClick={() => navigate('/courses')}
                className="cursor-pointer tracking-widest text-gray-500 hover:text-primary font-medium flex items-center gap-2 transition-all duration-300 ease-in-out"
              >
                查看更多

              </div>

            </div>

          </div>
        )}
      </div>
    </section>
  );
};

export default CoursesSection;