import { Pencil, Trash2 } from 'lucide-react';
import { iconMap } from '@/data/pipelineData';
import type { PipelineTask } from '@/types/pipeline';

interface TaskCardProps {
  task: PipelineTask;
  isSelected: boolean;
  onSelect: () => void;
  onDelete: () => void;
}

// Subtle type indicator colors — just for the small dot/icon, NOT background
const typeConfig: Record<string, { color: string; label: string }> = {
  build: { color: '#9a6700', label: '构建' },
  deploy: { color: '#1a7f37', label: '部署' },
  test: { color: '#8250df', label: '测试' },
  custom: { color: '#6e7781', label: '自定义' },
};

export default function TaskCard({ task, isSelected, onSelect, onDelete }: TaskCardProps) {
  const config = typeConfig[task.type] || typeConfig.custom;
  const IconComponent = iconMap[task.icon] || iconMap.Settings;

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
    onDelete();
  };

  return (
    <div
      onClick={onSelect}
      className="flex items-center gap-2.5 px-3 py-[10px] rounded-md cursor-pointer transition-all duration-150 group mb-[2px] last:mb-0"
      style={{
        background: isSelected ? '#f0f5ff' : 'transparent',
        border: isSelected ? '1px solid #b7d4f0' : '1px solid transparent',
        ...(isSelected
          ? { boxShadow: '0 0 0 1px rgba(9,105,218,0.08)' }
          : {}),
      }}
    >
      {/* Type icon — small colored dot with icon inside */}
      <div
        className="w-6 h-6 rounded-[6px] flex items-center justify-center flex-shrink-0"
        style={{
          background: `${config.color}10`,
          border: `1px solid ${config.color}25`,
        }}
      >
        <IconComponent className="w-3 h-3" style={{ color: config.color }} />
      </div>

      {/* Task info */}
      <div className="flex-1 min-w-0">
        <div
          className="text-[13px] font-medium truncate leading-tight"
          style={{ color: isSelected ? 'var(--text-primary)' : 'var(--text-primary)' }}
        >
          {task.name}
        </div>
        <div
          className="text-[11px] truncate leading-tight mt-[1px]"
          style={{ color: 'var(--text-tertiary)' }}
        >
          {config.label}
          {task.scriptType && ` · ${task.scriptType}`}
        </div>
      </div>

      {/* Actions — hover reveal */}
      <div className="flex items-center gap-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex-shrink-0">
        <button
          onClick={(e) => { e.stopPropagation(); onSelect(); }}
          className="p-1 rounded transition-colors hover:bg-black/5"
          title="编辑"
        >
          <Pencil className="w-3 h-3" style={{ color: 'var(--text-tertiary)' }} />
        </button>
        <button
          onClick={handleDelete}
          className="p-1 rounded transition-colors hover:bg-red-50"
          title="删除"
        >
          <Trash2 className="w-3 h-3" style={{ color: 'var(--text-tertiary)' }} />
        </button>
      </div>
    </div>
  );
}