import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { useState } from 'react';
import { ScriptArguments, type ScriptArgument } from '../components/platform/ScriptArguments';

const meta = {
  title: 'Platform/ScriptArguments',
  component: ScriptArguments,
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Displays and manages script arguments as key-value pairs. Each argument has a name (key) and value input field with delete button. Includes an "Add Script Argument" button to add new entries.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    arguments: {
      control: 'object',
      description: 'Array of script arguments with id, key, and value',
    },
    onArgumentsChange: {
      action: 'argumentsChanged',
      description: 'Callback when arguments change',
    },
    keyPlaceholder: {
      control: 'text',
      description: 'Placeholder for key input',
    },
    valuePlaceholder: {
      control: 'text',
      description: 'Placeholder for value input',
    },
    addButtonLabel: {
      control: 'text',
      description: 'Label for the add button',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the component is disabled',
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes',
    },
  },
  decorators: [
    Story => (
      <div className="max-w-2xl">
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof ScriptArguments>;

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

/**
 * Default ScriptArguments with example data matching the Figma design.
 */
export const Default: Story = {
  args: {
    arguments: [
      { id: '1', key: 'port', value: '3000' },
      { id: '2', key: 'verbose', value: '' },
      { id: '3', key: 'config', value: 'production' },
    ],
    titleLabel: 'Script Arguments',
  },
};

/**
 * Empty state - no arguments yet.
 */
export const Empty: Story = {
  args: {
    arguments: [],
    titleLabel: 'Script Arguments',
  },
};

/**
 * Single argument.
 */
export const SingleArgument: Story = {
  args: {
    arguments: [{ id: '1', key: 'debug', value: 'true' }],
    titleLabel: 'Script Arguments',
  },
};

/**
 * Arguments with flags (empty values).
 */
export const WithFlags: Story = {
  args: {
    arguments: [
      { id: '1', key: '--verbose', value: '' },
      { id: '2', key: '--dry-run', value: '' },
      { id: '3', key: '--force', value: '' },
    ],
    titleLabel: 'Script Arguments',
  },
};

/**
 * Many arguments to show scrolling behavior.
 */
export const ManyArguments: Story = {
  args: {
    arguments: [
      { id: '1', key: 'host', value: 'localhost' },
      { id: '2', key: 'port', value: '8080' },
      { id: '3', key: 'database', value: 'mydb' },
      { id: '4', key: 'user', value: 'admin' },
      { id: '5', key: 'password', value: '********' },
      { id: '6', key: 'timeout', value: '30000' },
      { id: '7', key: 'retries', value: '3' },
    ],
    titleLabel: 'Script Arguments',
  },
};

/**
 * Disabled state.
 */
export const Disabled: Story = {
  args: {
    arguments: [
      { id: '1', key: 'port', value: '3000' },
      { id: '2', key: 'config', value: 'production' },
    ],
    disabled: true,
    titleLabel: 'Script Arguments',
  },
};

/**
 * Custom placeholders.
 */
export const CustomPlaceholders: Story = {
  args: {
    arguments: [{ id: '1', key: '', value: '' }],
    keyPlaceholder: 'Argument name',
    valuePlaceholder: 'Argument value',
    titleLabel: 'Script Arguments',
  },
};

/**
 * Custom add button label.
 */
export const CustomAddLabel: Story = {
  args: {
    arguments: [],
    addButtonLabel: 'Add New Parameter',
    titleLabel: 'Script Arguments',
  },
};

/**
 * Interactive example with state management.
 */
export const Interactive: Story = {
  args: {
    arguments: [],
    titleLabel: 'Script Arguments',
  },
  render: function InteractiveStory() {
    const [args, setArgs] = useState<ScriptArgument[]>([
      { id: '1', key: 'port', value: '3000' },
      { id: '2', key: 'verbose', value: '' },
      { id: '3', key: 'config', value: 'production' },
    ]);

    return (
      <div className="flex flex-col gap-4">
        <ScriptArguments arguments={args} onArgumentsChange={setArgs} titleLabel="Script Arguments" />
        <div className="rounded-[6px] border border-[#3a3a3a] bg-[#1a1a1a] p-4">
          <p className="mb-2 text-sm text-ods-text-secondary">Current State:</p>
          <pre className="overflow-auto text-xs text-ods-text-primary">{JSON.stringify(args, null, 2)}</pre>
        </div>
      </div>
    );
  },
};

/**
 * Long values that may need truncation.
 */
export const LongValues: Story = {
  args: {
    arguments: [
      {
        id: '1',
        key: 'connection-string',
        value: 'mongodb+srv://user:password@cluster0.mongodb.net/database?retryWrites=true&w=majority',
      },
      {
        id: '2',
        key: 'api-endpoint',
        value: 'https://api.example.com/v1/very/long/endpoint/path',
      },
    ],
    titleLabel: 'Script Arguments',
  },
};