import type { Meta, StoryFn } from '@storybook/react'
import type { EventComponentProps } from 'stream-chat-react'

import { CustomSystemMessage } from '.'

const meta: Meta<typeof CustomSystemMessage> = {
  title: 'CustomSystemMessage',
  component: CustomSystemMessage,
  parameters: {
    layout: 'centered',
  },
}
export default meta

const createStoryProps = (
  messageOverrides: Partial<EventComponentProps['message']>
): EventComponentProps =>
  ({
    message: {
      id: 'system-message-1',
      type: 'system',
      text: 'System message',
      created_at: new Date('2025-01-01T00:00:00.000Z'),
      ...messageOverrides,
    },
  }) as EventComponentProps

const Template: StoryFn<EventComponentProps> = (args) => (
  <div className="w-[420px] bg-white p-6">
    <CustomSystemMessage {...args} />
  </div>
)

// Per-variant stories stay in Storybook for browsing/design review but are
// individually covered by rows in AllVariants — skip in Chromatic.
const skipInChromatic = { chromatic: { disableSnapshot: true } }

export const DmAgentPaused: StoryFn<EventComponentProps> = Template.bind({})
DmAgentPaused.args = createStoryProps({
  text: 'DM Agent paused for this conversation',
  metadata: {
    custom_type: 'SYSTEM_DM_AGENT_PAUSED',
  },
})
DmAgentPaused.parameters = skipInChromatic

export const DmAgentResumed: StoryFn<EventComponentProps> = Template.bind({})
DmAgentResumed.args = createStoryProps({
  text: 'DM Agent resumed for this conversation',
  metadata: {
    custom_type: 'SYSTEM_DM_AGENT_RESUMED',
  },
})
DmAgentResumed.parameters = skipInChromatic

export const AgeSafetyBlocked: StoryFn<EventComponentProps> = Template.bind({})
AgeSafetyBlocked.args = createStoryProps({
  text: '   ',
  metadata: {
    custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED',
  },
})
AgeSafetyBlocked.parameters = skipInChromatic

export const GenericFallback: StoryFn<EventComponentProps> = Template.bind({})
GenericFallback.args = createStoryProps({
  text: 'Message activity event',
  metadata: {
    custom_type: 'MESSAGE_CHATBOT',
  },
})
GenericFallback.parameters = skipInChromatic

export const AllVariants: StoryFn = () => {
  const variants: { label: string; props: EventComponentProps }[] = [
    {
      label: 'DM Agent paused',
      props: createStoryProps({
        text: 'DM Agent paused for this conversation',
        metadata: { custom_type: 'SYSTEM_DM_AGENT_PAUSED' },
      }),
    },
    {
      label: 'DM Agent resumed',
      props: createStoryProps({
        text: 'DM Agent resumed for this conversation',
        metadata: { custom_type: 'SYSTEM_DM_AGENT_RESUMED' },
      }),
    },
    {
      label: 'Age safety blocked',
      props: createStoryProps({
        text: '   ',
        metadata: { custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED' },
      }),
    },
    {
      label: 'Generic fallback',
      props: createStoryProps({
        text: 'Message activity event',
        metadata: { custom_type: 'MESSAGE_CHATBOT' },
      }),
    },
  ]

  return (
    <div className="flex flex-col gap-4 bg-white p-6">
      {variants.map(({ label, props }) => (
        <div key={label} className="flex flex-col gap-1">
          <span className="text-xs text-stone">{label}</span>
          <div className="w-[420px]">
            <CustomSystemMessage {...props} />
          </div>
        </div>
      ))}
    </div>
  )
}