import React, { useState } from 'react';
import UrlCard from '@/components/UrlCard';
import styles from './index.less';
import { useSpecialServices } from '../../../hooks/useSpecialServices';
import { SPECIAL_SERVICES, updateServiceUrls } from '../../../config/specialServices';

// 导入logo和标题资源
import logo1 from '@/assets/images/V-2504/url-logo-1.png';
import logo2 from '@/assets/images/V-2504/url-logo-2.png';
import logo3 from '@/assets/images/V-2504/url-logo-3.png';
import logo4 from '@/assets/images/V-2504/url-logo-4.png';
import logo5 from '@/assets/images/V-2504/url-logo-5.png';
import logo6 from '@/assets/images/V-2504/url-logo-6.png';
import logo7 from '@/assets/images/V-2504/url-logo-7.png';
import logo8 from '@/assets/images/V-2504/url-logo-8.png';

import title1 from '@/assets/images/V-2504/url-title-1.png';
import title2 from '@/assets/images/V-2504/url-title-2.png';
import title3 from '@/assets/images/V-2504/url-title-3.png';
import title4 from '@/assets/images/V-2504/url-title-4.png';
import title5 from '@/assets/images/V-2504/url-title-5.png';
import title6 from '@/assets/images/V-2504/url-title-6.png';
import title7 from '@/assets/images/V-2504/url-title-7.png';
import title8 from '@/assets/images/V-2504/url-title-8.png';

const RightBottom: React.FC = () => {
  const [activeCardId, setActiveCardId] = useState<string>('');
  const { serviceList, handleServiceAction } = useSpecialServices();
  
  // 更新服务配置中的URL
  const cardConfigs = React.useMemo(() => {
    return updateServiceUrls(serviceList);
  }, [serviceList]);

  const handleCardClick = (id: string) => {
    setActiveCardId(id);
    
    // 找到对应的卡片配置
    const card = cardConfigs.find(card => card.id === id);
    if (card) {
      handleServiceAction(card);
    }
  };

  // 将卡片分成两行
  const firstRowCards = cardConfigs.slice(0, 4);
  const secondRowCards = cardConfigs.slice(4, 8);

  return (
    <div className={styles.container}>
      {/* <div className={styles.title}>相关链接</div> */}
      <div className={styles.content}>
        <div className={styles.cardsRow}>
          {firstRowCards.map((card) => (
            <UrlCard
              key={card.id}
              id={card.id}
              logoSrc={card.logoSrc}
              titleSrc={card.titleSrc || ''}
              targetUrl={card.targetUrl || ''}
              onClick={handleCardClick}
            />
          ))}
        </div>
        <div className={styles.cardsRow}>
          {secondRowCards.map((card) => (
            <UrlCard
              key={card.id}
              id={card.id}
              logoSrc={card.logoSrc}
              titleSrc={card.titleSrc || ''}
              targetUrl={card.targetUrl || ''}
              onClick={handleCardClick}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default RightBottom; 