/**
 * NodeListItem - Draggable node type item for the sidebar.
 * Used in both regular categories and I/O sub-groups.
 */

import React from 'react';
import type { NodeType } from '../../../api/workflowAutomationApi';
import { useLanguage } from '../../../providers/language/LanguageContext';
import { getCategoryIcon } from '../nodes/shared/utils';
import type { GetLabelFn } from '../nodes/shared/utils';
import styles from './WorkflowFlowEditor.module.css';
import { AiBadge } from '../nodes/shared/AiBadge';

interface NodeListItemProps {
  node: NodeType;
  language: string;
  getLabel: GetLabelFn;
  getCategoryIcon?: (categoryId: string) => React.ReactNode;
}

export const NodeListItem: React.FC<NodeListItemProps> = ({
  node,
  language,
  getLabel,
  getCategoryIcon: getIcon = getCategoryIcon,
}) => {
  const { t } = useLanguage();
  const desc = getLabel(node.description, language);
  return (
    <div
      className={styles.nodeItem}
      draggable
      onDragStart={(e) => {
        e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id }));
        e.dataTransfer.effectAllowed = 'copy';
      }}
    >
      <div
        className={styles.nodeItemIcon}
        style={{
          backgroundColor: node.meta?.color
            ? `${node.meta.color}20`
            : 'var(--bg-tertiary, #e9ecef)',
          color: node.meta?.color ?? 'var(--text-secondary, #666)',
        }}
      >
        {getIcon(node.category)}
      </div>
      <div className={styles.nodeItemInfo}>
        <span className={styles.nodeItemLabelRow}>
          <span className={styles.nodeItemLabel}>{getLabel(node.label, language)}</span>
          {node.meta?.usesAi === true && (
            <AiBadge
              variant="palette"
              title={t('Dieser Schritt nutzt AI und verbraucht Credits')}
            />
          )}
        </span>
        <span className={styles.nodeItemDesc}>{desc}</span>
      </div>
      {desc && <div className={styles.nodeItemTooltip}>{desc}</div>}
    </div>
  );
};