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

const sampleComponents = [
  {
    label: 'Send Email',
    plugin: 'eca_mail:send_mail',
    description: 'Sends an email to the specified recipients.',
    componentType: 4,
    category: 'Mail',
    provider: 'eca_mail',
    documentationUrl: null,
  },
  {
    label: 'Set Field Value',
    plugin: 'eca_content:set_field_value',
    description: 'Sets a field value on the current entity.',
    componentType: 4,
    category: 'Content',
    provider: 'eca_content',
    documentationUrl: null,
  },
  {
    label: 'Log Message',
    plugin: 'eca_log:log_message',
    description: 'Logs a message to the system log.',
    componentType: 4,
    category: 'Log',
    provider: 'eca_log',
    documentationUrl: null,
  },
  {
    label: 'User Has Role',
    plugin: 'eca_user:user_has_role',
    description: 'Checks if the user has a specific role.',
    componentType: 5,
    category: 'User',
    provider: 'eca_user',
    documentationUrl: null,
  },
  {
    label: 'Content Is Published',
    plugin: 'eca_content:is_published',
    description: 'Checks if the content entity is published.',
    componentType: 5,
    category: 'Content',
    provider: 'eca_content',
    documentationUrl: null,
  },
];

const meta: Meta<typeof ComponentPanel> = {
  title: 'Components/ComponentPanel',
  component: ComponentPanel,
  // FEATURE FLAG: Component panel stories are excluded while SHOW_COMPONENT_PANEL is disabled.
  // When enabling the feature flag in constants/featureFlags.ts, remove the includeStories line
  // below to make these stories visible in Storybook again.
  includeStories: [],
  decorators: [
    withStore({
      initialState: {
        nodes: [],
        edges: [],
      },
    }),
    (Story: React.ComponentType) => (
      <div style={{ width: 300, height: 600, border: '1px solid #e0e0e0', borderRadius: 8 }}>
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: 'centered',
  },
  args: {
    ownerComponents: {
      Actions: sampleComponents.filter(c => c.componentType === 4),
      Conditions: sampleComponents.filter(c => c.componentType === 5),
    },
    onComponentDrag: fn(),
    onComponentDragEnd: fn(),
    onConditionDragStart: fn(),
    onConditionDragEnd: fn(),
    onComponentDragStart: fn(),
    collapsed: false,
    width: 280,
    onResize: fn(),
    onToggleCollapse: fn(),
    activeTab: 'components' as const,
    onTabChange: fn(),
    forceActiveTab: null,
    isReplayMode: false,
    nodes: [],
    edges: [],
  },
  argTypes: {
    collapsed: {
      control: 'boolean',
      description: 'Whether the panel is collapsed',
    },
    width: {
      control: { type: 'range', min: 200, max: 500 },
      description: 'Panel width in pixels',
    },
    activeTab: {
      control: 'radio',
      options: ['components', 'replay'],
      description: 'Active tab selection',
    },
    isReplayMode: {
      control: 'boolean',
      description: 'Whether replay mode is active',
    },
  },
};

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

/**
 * Default component panel with actions and conditions
 */
export const Default: Story = {};

/**
 * Collapsed panel
 */
export const Collapsed: Story = {
  args: {
    collapsed: true,
  },
};

/**
 * Panel with replay tab active
 */
export const ReplayTab: Story = {
  args: {
    activeTab: 'replay' as const,
    isReplayMode: true,
  },
};

/**
 * Panel with no components
 */
export const EmptyComponents: Story = {
  args: {
    ownerComponents: {},
  },
};
