import { useParams, useNavigate } from 'react-router-dom';
import { Button } from 'antd';
import { LeftOutlined, AppstoreOutlined, FireOutlined, EyeOutlined } from '@ant-design/icons';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Works from '../components/Works';
import './CategoryDetail.css';

const CategoryDetail = () => {
  const { name } = useParams();
  const navigate = useNavigate();

  const categoryData = {
    文化墙: {
      count: '6572',
      gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
      description: '适合企业形象、品牌理念和空间场景布置的长图与信息展示素材。',
    },
    周年庆: {
      count: '15868',
      gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
      description: '围绕纪念日、店庆、品牌里程碑等主题的高频视觉物料。',
    },
    直播: {
      count: '35429',
      gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
      description: '直播预告、封面、流程页和互动氛围图的整套素材集合。',
    },
    包装: {
      count: '9533',
      gradient: 'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
      description: '包装延展、产品展示和品牌包装视觉的常用内容。',
    },
    科技: {
      count: '44921',
      gradient: 'linear-gradient(135deg, #4356a8 0%, #7eb0da 100%)',
      description: '偏未来感、信息感和产品感表达的科技类视觉素材。',
    },
    活动: {
      count: '408131',
      gradient: 'linear-gradient(135deg, #8ec4d8 0%, #2f87a8 100%)',
      description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
    },
    医美: {
      count: '223068',
      gradient: 'linear-gradient(135deg, #f0a6b4 0%, #f7d6df 100%)',
      description: '轻医美、抗衰、项目卖点和机构宣传类视觉内容。',
    },
    邀请函: {
      count: '15361',
      gradient: 'linear-gradient(135deg, #a87ab8 0%, #ead9f3 100%)',
      description: '会议、婚礼、活动和品牌邀约相关的正式视觉模板。',
    },
  };

  const category = categoryData[name] || {
    count: '0',
    gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
    description: '当前分类正在持续补充中，可以先浏览已上线的作品内容。',
  };

  return (
    <div className="category-detail-page">
      <Header />

      <div className="category-detail-hero" style={{ background: category.gradient }}>
        <div className="category-detail-overlay">
          <Button icon={<LeftOutlined />} className="back-btn" onClick={() => navigate('/')}>
            返回首页
          </Button>

          <div className="category-detail-content">
            <span className="category-detail-kicker">分类精选</span>
            <h1 className="category-detail-title">{name}</h1>
            <p className="category-detail-desc">{category.description}</p>

            <div className="category-detail-stats">
              <div className="category-stat">
                <AppstoreOutlined />
                <div>
                  <strong>{category.count}</strong>
                  <span>作品总量</span>
                </div>
              </div>
              <div className="category-stat">
                <FireOutlined />
                <div>
                  <strong>高频</strong>
                  <span>适合首页承接</span>
                </div>
              </div>
              <div className="category-stat">
                <EyeOutlined />
                <div>
                  <strong>详情页</strong>
                  <span>支持预览与下载</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="category-detail-works">
        <Works categoryFilter={name} title={`${name} 分类作品`} />
      </div>

      <Footer />
    </div>
  );
};

export default CategoryDetail;