import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import CustomNode from './CustomNode';
import { withNodeContext } from '../../../.storybook/decorators';

const meta: Meta<typeof CustomNode> = {
  title: 'Components/Nodes/CustomNode',
  component: CustomNode,
  decorators: [withNodeContext],
  parameters: {
    layout: 'centered',
  },
  args: {
    id: 'node_1',
    type: 'custom',
    selected: false,
    dragging: false,
    isConnectable: true,
    xPos: 0,
    yPos: 0,
    zIndex: 0,
    data: {
      label: 'Send Email Notification',
      plugin: 'eca_mail:send_mail',
      locked: false,
      configured: false,
      annotation: '',
      isAnnotationVisible: false,
      isLocked: false,
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
  argTypes: {
    selected: {
      control: 'boolean',
      description: 'Whether the node is selected',
    },
    'data.label': {
      control: 'text',
      description: 'Node label text',
    },
    'data.plugin': {
      control: 'text',
      description: 'Plugin identifier',
    },
    'data.locked': {
      control: 'boolean',
      description: 'Whether the node is locked',
    },
    'data.configured': {
      control: 'boolean',
      description: 'Whether the node has been configured',
    },
    'data.annotation': {
      control: 'text',
      description: 'Annotation text for the node',
    },
    'data.isAnnotationVisible': {
      control: 'boolean',
      description: 'Whether the annotation is visible',
    },
  },
};

export default meta;
type Story = StoryObj<typeof CustomNode>;

/**
 * Default action node
 */
export const Default: Story = {};

/**
 * Selected node state
 */
export const Selected: Story = {
  args: {
    selected: true,
  },
};

/**
 * Locked node (cannot be edited or deleted)
 */
export const Locked: Story = {
  args: {
    data: {
      label: 'Protected Action',
      plugin: 'eca_core:system_action',
      locked: true,
      configured: true,
      isLocked: true,
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Configured node (shows settings icon)
 */
export const Configured: Story = {
  args: {
    data: {
      label: 'Send SMS Alert',
      plugin: 'eca_sms:send_sms',
      configured: true,
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Node with annotation (collapsed)
 */
export const WithAnnotation: Story = {
  args: {
    data: {
      label: 'Process Payment',
      plugin: 'eca_commerce:process_payment',
      annotation: 'This action processes the payment via the configured gateway. Make sure to test with sandbox credentials first.',
      isAnnotationVisible: false,
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Node with visible annotation
 */
export const AnnotationVisible: Story = {
  args: {
    data: {
      label: 'Send Welcome Email',
      plugin: 'eca_mail:send_mail',
      annotation: 'Sends a personalized welcome email to new users after registration is complete.',
      isAnnotationVisible: true,
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Node without plugin info
 */
export const NoPlugin: Story = {
  args: {
    data: {
      label: 'Custom Action',
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Long label text
 */
export const LongLabel: Story = {
  args: {
    data: {
      label: 'Send Personalized Email Notification to All Subscribed Users Based on Their Preferences',
      plugin: 'eca_mail:send_bulk_mail',
      onDelete: fn(),
      onToggleAnnotation: fn(),
    },
  },
};

/**
 * Node with quick-add button visible (unlocked node with onQuickAdd handler)
 */
export const WithQuickAdd: Story = {
  args: {
    data: {
      label: 'Send Email Notification',
      plugin: 'eca_mail:send_mail',
      locked: false,
      configured: false,
      isLocked: false,
      onDelete: fn(),
      onToggleAnnotation: fn(),
      onQuickAdd: fn(),
    },
  },
};
