/**
 * Action Card - Deep Link 动作卡片
 * 
 * 100%还原原型图Action Card设计
 */

import React from 'react';
import { Calculator, ExternalLink, Rocket } from 'lucide-react';
import type { ActionCard } from '../types';

interface ActionCardProps {
  card: ActionCard;
}

const CARD_ICONS: Record<string, React.ComponentType<any>> = {
  sample_size_calculator: Calculator,
  generate_protocol: Rocket,
};

export const ActionCardComponent: React.FC<ActionCardProps> = ({ card }) => {
  const Icon = CARD_ICONS[card.id] || Calculator;

  const handleClick = () => {
    if (card.type === 'tool') {
      // 打开工具页面（新标签页或模态框）
      window.open(card.actionUrl, '_blank');
    } else if (card.type === 'action') {
      // 触发动作（如一键生成）
      // 这里会被父组件处理
      console.log('Action triggered:', card.id);
    }
  };

  return (
    <div className={`action-card ${card.type}`} onClick={handleClick}>
      <div className="action-card-header">
        <div className="action-icon-box">
          <Icon size={20} />
        </div>
        <div className="action-info">
          <h3 className="action-title">{card.title}</h3>
          <p className="action-description">{card.description}</p>
        </div>
      </div>

      {card.type === 'tool' && (
        <div className="action-footer">
          <button className="action-button">
            <span>🚀 前往工具</span>
            <ExternalLink size={14} />
          </button>
          <p className="action-hint">点击将打开工具面板，参数已自动预填</p>
        </div>
      )}

      {card.type === 'action' && (
        <button className="action-button primary">
          <span>立即生成</span>
          <Rocket size={14} />
        </button>
      )}
    </div>
  );
};