import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import { MessagingShell } from '../components/MessagingShell'
import { MessagingProvider } from '../providers/MessagingProvider'

import { createMockMessagingClient } from './createMockMessagingClient'

/**
 * Exercises the real MessagingProvider → MessagingShell → ChannelView stack
 * against an injected mock client (the `dev:mock-messaging` path). Use this to
 * visually verify send-echo, which the unit tests can't cover because they stub
 * stream-chat-react.
 */
const meta: Meta = {
  title: 'testing/createMockMessagingClient',
  parameters: { layout: 'fullscreen', chromatic: { disableSnapshot: true } },
}
export default meta

const currentUser = { id: 'viewer-1', name: 'You' }
const participant = {
  id: 'creator-1',
  name: 'Ava Creator',
  image: 'https://i.pravatar.cc/150?img=5',
}

const Template: StoryFn = () => {
  const [mock] = React.useState(() =>
    createMockMessagingClient({
      currentUser,
      participant,
      messages: [
        {
          id: 'w1',
          from: 'them',
          text: 'Welcome! Thanks for reaching out 👋',
          metadata: { custom_type: 'MESSAGE_WELCOME' },
        },
        {
          id: 'l1',
          from: 'them',
          text: 'Check out my latest drop:',
          attachments: [
            {
              type: 'image',
              og_scrape_url: 'https://tr.ee/example',
              title: 'My latest drop',
              text: 'Limited edition',
              image_url: 'https://picsum.photos/seed/mockdrop/560/360',
            },
          ],
        },
        { id: 'm1', from: 'me', text: 'Love it — just grabbed one!' },
      ],
      onSend: (text) => `Thanks for saying "${text}"! 🎉`,
    })
  )

  return (
    <MessagingProvider client={mock.client} user={null}>
      <div className="h-screen w-full bg-[#FBFAF9]">
        <MessagingShell initialParticipantFilter={mock.participantFilterId} />
      </div>
    </MessagingProvider>
  )
}

export const Default: StoryFn = Template.bind({})
Default.parameters = {
  docs: {
    description: {
      story:
        'Seeded direct conversation rendered through the real shell. Type a message and send it — the mock echoes a canned reply (send-echo).',
    },
  },
}