import { memo } from 'react';
import { Handle, Position, NodeProps } from '@xyflow/react';
import { SetFlagNode as SetFlagNodeData } from '../../types/dialogue';
import { useValidation } from '../../hooks/useValidation';
import styles from './nodes.module.css';

export const SetFlagNode = memo(({ data, selected }: NodeProps & { data: SetFlagNodeData }) => {
  const { hasError, hasWarning } = useValidation();
  const error = hasError(data.id);
  const warning = !error && hasWarning(data.id);

  return (
    <div
      className={[
        styles.node,
        styles.setFlagNode,
        selected ? styles.selected : '',
        error ? styles.hasError : '',
        warning ? styles.hasWarning : '',
      ].join(' ')}
    >
      <Handle type="target" position={Position.Top} id="target" className={styles.handle} />
      <div className={styles.nodeHeader}>
        <span className={styles.speakerName}>Set Flag</span>
        <span className={styles.nodeType}>Flag</span>
      </div>
      <div className={styles.nodeId}>{data.id}</div>
      <div className={styles.nodeBody}>
        {data.effects.map((e, i) => (
          <div key={i} className={styles.conditionRow}>
            <span className={styles.flagPill}>{e.flag}</span>
            <span className={styles.opBadge}>=</span>
            <span className={styles.valuePill}>{String(e.value)}</span>
          </div>
        ))}
        {data.effects.length === 0 && (
          <span className={styles.emptyText}>(no effects)</span>
        )}
      </div>
      <Handle type="source" position={Position.Bottom} id="source" className={styles.handle} />
    </div>
  );
});