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

const textFieldsForm = [
  { key: 'recipient', type: 'textfield', title: 'Recipient', description: 'Email address of the recipient', required: true, default_value: '' },
  { key: 'subject', type: 'textfield', title: 'Subject', description: 'Email subject line', required: true, default_value: '' },
  { key: 'body', type: 'textarea', title: 'Body', description: 'Email body content. Supports tokens.', required: false, default_value: '' },
];

const mixedFieldsForm = [
  { key: 'name', type: 'textfield', title: 'Name', required: true, default_value: '' },
  { key: 'email', type: 'email', title: 'Email', description: 'Contact email address', required: true, default_value: '' },
  { key: 'url', type: 'url', title: 'Website', description: 'Optional website URL', required: false, default_value: '' },
  { key: 'priority', type: 'number', title: 'Priority', description: 'Execution priority (1-100)', min: 1, max: 100, step: 1, default_value: 50 },
  { key: 'enabled', type: 'checkbox', title: 'Enabled', description: 'Enable this action', default_value: true },
  { key: 'format', type: 'select', title: 'Format', description: 'Output format', options: { plain: 'Plain Text', html: 'HTML', json: 'JSON' }, default_value: 'plain' },
  { key: 'role', type: 'radios', title: 'Target Role', options: { admin: 'Administrator', editor: 'Editor', viewer: 'Viewer' }, default_value: 'editor' },
  { key: 'tags', type: 'checkboxes', title: 'Tags', options: { important: 'Important', urgent: 'Urgent', review: 'Needs Review' }, default_value: [] },
];

const markupForm = [
  { key: 'info', type: 'markup', markup: '<p><strong>Note:</strong> This action requires the Mail module to be enabled.</p>' },
  { key: 'recipient', type: 'textfield', title: 'Recipient', required: true, default_value: '' },
];

const meta: Meta<typeof ConfigurationForm> = {
  title: 'Components/ConfigurationForm',
  component: ConfigurationForm,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story: React.ComponentType) => (
      <div style={{ width: 400, padding: 20, border: '1px solid #e0e0e0', borderRadius: 8 }}>
        <Story />
      </div>
    ),
  ],
  args: {
    form: textFieldsForm,
    configuration: {},
    onChange: fn(),
    disabled: false,
  },
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Whether the form fields are disabled',
    },
  },
};

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

/**
 * Simple text field form (email configuration)
 */
export const TextFields: Story = {};

/**
 * Mixed field types showing all supported inputs
 */
export const MixedFields: Story = {
  args: {
    form: mixedFieldsForm,
    configuration: {
      name: 'My Action',
      email: 'admin@example.com',
      priority: 75,
      enabled: true,
      format: 'html',
      role: 'editor',
    },
  },
};

/**
 * Form with markup/info field
 */
export const WithMarkup: Story = {
  args: {
    form: markupForm,
  },
};

/**
 * Disabled form (locked mode)
 */
export const Disabled: Story = {
  args: {
    disabled: true,
    configuration: {
      recipient: 'admin@example.com',
      subject: 'Notification',
      body: 'Content has been updated.',
    },
  },
};

/**
 * Empty form (no fields)
 */
export const EmptyForm: Story = {
  args: {
    form: [],
  },
};

/**
 * Null form (loading state)
 */
export const NullForm: Story = {
  args: {
    form: null,
  },
};

/**
 * Pre-filled configuration values
 */
export const PreFilled: Story = {
  args: {
    form: textFieldsForm,
    configuration: {
      recipient: 'admin@example.com',
      subject: 'New content published: [node:title]',
      body: 'A new article has been published by [current-user:display-name].',
    },
  },
};
