import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import type React from 'react';

import { ToolExecutionDisplay } from '../components/chat/tool-execution-display';
import type { ToolExecutionData } from '../components/chat/types';

const executingMessage: ToolExecutionData = {
  type: 'EXECUTING_TOOL',
  integratedToolType: 'OPENFRAME_RMM',
  toolFunction: 'run_script',
  parameters: {
    RunAsUser: 'False',
    timeoutSeconds: 60,
  },
};

const executedSuccessMessage: ToolExecutionData = {
  type: 'EXECUTED_TOOL',
  integratedToolType: 'OPENFRAME_RMM',
  toolFunction: 'run_script',
  parameters: {
    RunAsUser: 'False',
    timeoutSeconds: 60,
  },
  result: `pid  | name           | path                          | cmdline
4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`,
  success: true,
};

const executedFailureMessage: ToolExecutionData = {
  type: 'EXECUTED_TOOL',
  integratedToolType: 'FLEET_MDM',
  toolFunction: 'deploy_profile',
  parameters: {
    profileId: 'wifi-corp-2024',
    targetGroup: 'engineering',
  },
  result: 'Error: Profile deployment failed - device group not found',
  success: false,
};

const constrainedDecorator = (width?: number) =>
  // Named function expression: Storybook renders decorators as components, so
  // the name is what shows up in the React tree instead of `Anonymous`.
  function ConstrainedDecorator(Story: React.ComponentType) {
    return (
      <div
        style={{
          maxWidth: width ?? 400,
          background: 'var(--color-bg)',
        }}
      >
        <Story />
      </div>
    );
  };

const meta = {
  title: 'Chat/Admin/ToolExecutionDisplay',
  component: ToolExecutionDisplay,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Displays tool execution status in the chat — collapsed preview with expand to full details including parameters and result. Click the card to toggle.',
      },
    },
  },
} satisfies Meta<typeof ToolExecutionDisplay>;

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

/**
 * Collapsed view while tool is executing — shows spinner and 2-line preview.
 */
export const CollapsedExecuting: Story = {
  args: {
    message: executingMessage,
  },
  decorators: [constrainedDecorator()],
};

/**
 * Collapsed view after successful execution — shows green check.
 */
export const CollapsedSuccess: Story = {
  args: {
    message: executedSuccessMessage,
  },
  decorators: [constrainedDecorator()],
};

/**
 * Collapsed view after failed execution — shows red error icon.
 */
export const CollapsedFailure: Story = {
  args: {
    message: executedFailureMessage,
  },
  decorators: [constrainedDecorator()],
};