/**
 * AgentCard - 智能体卡片组件
 * 
 * 100%还原原型图V11的卡片设计：
 * - 背景色: #F6F9FF (蓝色系) / #F0FDFA (青色系-工具)
 * - 边框: #E0E7FF / #CCFBF1
 * - 圆角: 10px
 * - 内边距: 14px
 * - 最小高度: 145px
 * - 序号水印
 * - 悬停效果
 */

import React from 'react';
import * as LucideIcons from 'lucide-react';
import type { AgentConfig } from '../types';
import '../styles/agent-card.css';

interface AgentCardProps {
  agent: AgentConfig;
  onClick: (agent: AgentConfig) => void;
}

/**
 * 动态获取 Lucide 图标
 */
const getIcon = (iconName: string): React.ComponentType<any> => {
  // 转换为 PascalCase
  const pascalCase = iconName
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join('');
  
  return (LucideIcons as any)[pascalCase] || LucideIcons.HelpCircle;
};

export const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick }) => {
  const Icon = getIcon(agent.icon);
  const orderStr = String(agent.order).padStart(2, '0');

  const handleClick = () => {
    if (agent.isTool && agent.toolUrl) {
      // 工具类：跳转外部链接
      window.location.href = agent.toolUrl;
    } else {
      onClick(agent);
    }
  };

  return (
    <div
      className={`agent-card theme-${agent.theme} ${agent.isTool ? 'tool-card' : ''}`}
      onClick={handleClick}
    >
      {/* 工具类：右上角跳转图标 */}
      {agent.isTool && (
        <LucideIcons.ExternalLink className="link-icon" />
      )}

      {/* 头部：图标 + 标题 + 序号 */}
      <div className="card-header">
        <div className="card-header-left">
          <div className="icon-box">
            <Icon className="agent-icon" />
          </div>
          <h3 className="card-title">{agent.name}</h3>
        </div>
        <span className="num-watermark">{orderStr}</span>
      </div>

      {/* 描述文本 */}
      <p className="desc-text">{agent.description}</p>
    </div>
  );
};

export default AgentCard;