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

import { ErrorMessageDisplay } from '../components/chat/error-message-display';

/**
 * Inline error card for `error` message segments — mono uppercase title
 * with an alert icon; optional details expand under the chevron.
 * `type` tints the icon: error (red) / warning (yellow) / info (grey).
 */

const plainDecorator = (Story: React.ComponentType) => (
  <div style={{ maxWidth: 640, background: 'var(--color-bg)' }} className="p-4">
    <Story />
  </div>
);

const meta = {
  title: 'Chat/ErrorMessageDisplay',
  component: ErrorMessageDisplay,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Renders an `error` message segment — collapsed mono title row, expandable details. Icon tint follows type: error / warning / info.',
      },
    },
  },
  decorators: [plainDecorator],
} satisfies Meta<typeof ErrorMessageDisplay>;

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

/** Error with expandable details. */
export const WithDetails: Story = {
  args: {
    title: 'Tool execution failed',
    details:
      'run_script exited with code 1: brew not found on this endpoint. Install Homebrew first or use the direct .dmg fallback.',
  },
};

/** Title only — no chevron, row is not clickable. */
export const TitleOnly: Story = {
  args: { title: 'Stream disconnected — retrying' },
};

/** Warning tint. */
export const Warning: Story = {
  args: {
    type: 'warning',
    title: 'Approval expired',
    details: 'The approval request timed out after 15 minutes and was cancelled automatically.',
  },
};

/** Info tint. */
export const Info: Story = {
  args: {
    type: 'info',
    title: 'Session resumed',
    details: 'Reconnected to the stream; missed chunks were replayed from history.',
  },
};