src/pages/Forum/promotion-part/Promotion.jsx

// import React, { useEffect, useState, useRef } from 'react';
// import './Promotion.css';



// const Promotion = () => {
//   const [promotions, setPromotions] = useState([]);
//   const [coldResources, setColdResources] = useState([]);
//   const [loading, setLoading] = useState(true);

//   // 轮播索引
//   const [promoIndex, setPromoIndex] = useState(0);
//   const [coldIndex, setColdIndex] = useState(0);

//   // 计时器引用，用于清理
//   const promoTimerRef = useRef(null);
//   const coldTimerRef = useRef(null);

//   useEffect(() => {
//     fetchData();
//   }, []);

//   // 自动轮播：促销活动
//   useEffect(() => {
//     if (promotions.length === 0) return;
//     // 清理旧的计时器
//     clearInterval(promoTimerRef.current);
//     promoTimerRef.current = setInterval(() => {
//       setPromoIndex(prev => (prev + 1) % promotions.length);
//     }, 5000);
//     return () => clearInterval(promoTimerRef.current);
//   }, [promotions]);

//   // 自动轮播：冷门资源
//   useEffect(() => {
//     if (coldResources.length === 0) return;
//     clearInterval(coldTimerRef.current);
//     coldTimerRef.current = setInterval(() => {
//       setColdIndex(prev => (prev + 1) % coldResources.length);
//     }, 5000);
//     return () => clearInterval(coldTimerRef.current);
//   }, [coldResources]);

//   const fetchData = async () => {
//     try {
//       const promoResponse = await fetch(`/echo/promotions/active`);
//       const promoData = await promoResponse.json();
//       setPromotions(promoData);

//       const coldResponse = await fetch(`/echo/resources/cold`);
//       const coldData = await coldResponse.json();
//       setColdResources(coldData);
//     } catch (error) {
//       console.error('获取数据失败:', error);
//     } finally {
//       setLoading(false);
//     }
//   };

//   if (loading) {
//     return <div className="promotion-container">加载中...</div>;
//   }

//   // 手动切换
//   const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
//   const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
//   const prevCold = () => setColdIndex((coldIndex - 1 + coldResources.length) % coldResources.length);
//   const nextCold = () => setColdIndex((coldIndex + 1) % coldResources.length);

//   const currentPromo = promotions[promoIndex];
//   const currentCold = coldResources[coldIndex];

//   return (
//     <div className="promotion-container carousel-container">
//       {/* 促销活动轮播 */}
//       <section className="carousel-section">
//         <h2>当前促销活动</h2>
//         {promotions.length === 0 ? (
//           <div className="empty-state">暂无促销活动</div>
//         ) : (
//           <div
//             className="carousel"
//             onMouseEnter={() => clearInterval(promoTimerRef.current)}
//             onMouseLeave={() => {
//               promoTimerRef.current = setInterval(() => {
//                 setPromoIndex(prev => (prev + 1) % promotions.length);
//               }, 3000);
//             }}
//           >
//             <button className="arrow left" onClick={prevPromo}>&lt;</button>
//             <div className="slide">
//               <div><strong>种子类型：</strong>{currentPromo.category}</div>
//               <div><strong>促销时间：</strong>
//                 {new Date(currentPromo.promotion_start_time).toLocaleString()} ～{' '}
//                 {new Date(currentPromo.promotion_end_time).toLocaleString()}
//               </div>
//               <div><strong>下载折扣：</strong>{currentPromo.download_discount ?? '无'}</div>
//               <div><strong>上传奖励：</strong>{currentPromo.upload_reward ?? '无'}</div>
//               {currentPromo.description && (
//                 <div><strong>详细描述：</strong>{currentPromo.description}</div>
//               )}
//             </div>
//             <button className="arrow right" onClick={nextPromo}>&gt;</button>
//           </div>
//         )}
//       </section>

//       {/* 冷门资源轮播 */}
//       <section className="carousel-section">
//         <h2>冷门资源推荐</h2>
//         {coldResources.length === 0 ? (
//           <div className="empty-state">暂无冷门资源推荐</div>
//         ) : (
//           <div
//             className="carousel"
//             onMouseEnter={() => clearInterval(coldTimerRef.current)}
//             onMouseLeave={() => {
//               coldTimerRef.current = setInterval(() => {
//                 setColdIndex(prev => (prev + 1) % coldResources.length);
//               }, 3000);
//             }}
//           >
//             <button className="arrow left" onClick={prevCold}>&lt;</button>
//             <div className="slide cold-slide">
//               <img src={currentCold.poster} alt={currentCold.title} className="resource-poster" />
//               <div className="resource-info">
//                 <div><strong>标题：</strong>{currentCold.title}</div>
//                 <div><strong>下载量：</strong>{currentCold.download_count}  |  <strong>种子数：</strong>{currentCold.seed_count}</div>
//                 <div><strong>激励：</strong>
//                   {currentCold.incentives?.download_exempt && <span className="incentive-badge">免下载量</span>}
//                   {currentCold.incentives?.extra_seed_bonus && <span className="incentive-badge">做种加成</span>}
//                   {!(currentCold.incentives?.download_exempt || currentCold.incentives?.extra_seed_bonus) && '无'}
//                 </div>
//               </div>
//             </div>
//             <button className="arrow right" onClick={nextCold}>&gt;</button>
//           </div>
//         )}
//       </section>
//     </div>
//   );
// };

// export default Promotion;

import React, { useEffect, useState, useRef } from 'react';
import './Promotion.css';

const Promotion = () => {
  const [promotions, setPromotions] = useState([]);
  const [coldResources, setColdResources] = useState([]);
  const [loading, setLoading] = useState(true);

  const [promoIndex, setPromoIndex] = useState(0);
  const [coldIndex, setColdIndex] = useState(0);

  const promoTimerRef = useRef(null);
  const coldTimerRef = useRef(null);

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (promotions.length === 0) return;
    clearInterval(promoTimerRef.current);
    promoTimerRef.current = setInterval(() => {
      setPromoIndex(prev => (prev + 1) % promotions.length);
    }, 5000);
    return () => clearInterval(promoTimerRef.current);
  }, [promotions]);

  useEffect(() => {
    if (coldResources.length === 0) return;
    clearInterval(coldTimerRef.current);
    coldTimerRef.current = setInterval(() => {
      setColdIndex(prev => (prev + 1) % coldResources.length);
    }, 5000);
    return () => clearInterval(coldTimerRef.current);
  }, [coldResources]);

  const fetchData = async () => {
    try {
      const promoResponse = await fetch(`/echo/promotions/active`);
      const promoData = await promoResponse.json();
      setPromotions(promoData);

      const coldResponse = await fetch(`/echo/resources/cold`);
      const coldData = await coldResponse.json();
      setColdResources(coldData);
    } catch (error) {
      console.error('获取数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div className="promotion-container">加载中...</div>;
  }

  const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
  const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
  const prevCold = () => setColdIndex((coldIndex - 1 + coldResources.length) % coldResources.length);
  const nextCold = () => setColdIndex((coldIndex + 1) % coldResources.length);

  const currentPromo = promotions[promoIndex];
  const currentCold = coldResources[coldIndex];

  return (
    <div className="promotion-container carousel-container">
      {/* 促销活动轮播 */}
      <section className="carousel-section">
        <h2>当前促销活动</h2>
        {promotions.length === 0 || !currentPromo ? (
          <div className="empty-state">暂无促销活动</div>
        ) : (
          <div
            className="carousel"
            onMouseEnter={() => clearInterval(promoTimerRef.current)}
            onMouseLeave={() => {
              promoTimerRef.current = setInterval(() => {
                setPromoIndex(prev => (prev + 1) % promotions.length);
              }, 3000);
            }}
          >
            <button className="arrow left" onClick={prevPromo}>&lt;</button>
            <div className="slide">
              <div><strong>种子类型：</strong>{currentPromo?.category ?? '未知'}</div>
              <div><strong>促销时间：</strong>
                {currentPromo?.promotion_start_time && currentPromo?.promotion_end_time
                  ? `${new Date(currentPromo.promotion_start_time).toLocaleString()} ～ ${new Date(currentPromo.promotion_end_time).toLocaleString()}`
                  : '未知'}
              </div>
              <div><strong>下载折扣：</strong>{currentPromo?.download_discount ?? '无'}</div>
              <div><strong>上传奖励：</strong>{currentPromo?.upload_reward ?? '无'}</div>
              {currentPromo?.description && (
                <div><strong>详细描述：</strong>{currentPromo.description}</div>
              )}
            </div>
            <button className="arrow right" onClick={nextPromo}>&gt;</button>
          </div>
        )}
      </section>

      {/* 冷门资源轮播 */}
      <section className="carousel-section">
        <h2>冷门资源推荐</h2>
        {coldResources.length === 0 || !currentCold ? (
          <div className="empty-state">暂无冷门资源推荐</div>
        ) : (
          <div
            className="carousel"
            onMouseEnter={() => clearInterval(coldTimerRef.current)}
            onMouseLeave={() => {
              coldTimerRef.current = setInterval(() => {
                setColdIndex(prev => (prev + 1) % coldResources.length);
              }, 3000);
            }}
          >
            <button className="arrow left" onClick={prevCold}>&lt;</button>
            <div className="slide cold-slide">
              <img src={currentCold.poster} alt={currentCold.title} className="resource-poster" />
              <div className="resource-info">
                <div><strong>标题：</strong>{currentCold.title}</div>
                <div><strong>下载量：</strong>{currentCold.download_count ?? 0}  |  <strong>种子数：</strong>{currentCold.seed_count ?? 0}</div>
                <div><strong>激励：</strong>
                  {currentCold.incentives?.download_exempt && <span className="incentive-badge">免下载量</span>}
                  {currentCold.incentives?.extra_seed_bonus && <span className="incentive-badge">做种加成</span>}
                  {!currentCold.incentives?.download_exempt && !currentCold.incentives?.extra_seed_bonus && '无'}
                </div>
              </div>
            </div>
            <button className="arrow right" onClick={nextCold}>&gt;</button>
          </div>
        )}
      </section>
    </div>
  );
};

export default Promotion;