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

import { now } from '../../stories/decorators/storyTime'

import { MessageTag } from './MessageTag'

type ComponentProps = React.ComponentProps<typeof MessageTag>

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

interface MockMessageOptions {
  metadata?: {
    custom_type?: 'MESSAGE_CHATBOT' | 'MESSAGE_PAID'
    amount_text?: string
  }
  text?: string
}

const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
  ({
    id: 'msg-1',
    text: options?.text ?? 'Hello world',
    type: 'regular',
    created_at: now(),
    updated_at: now(),
    metadata: options?.metadata,
  }) as LocalMessage

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12">
      <MessageTag {...args} />
    </div>
  )
}

// Per-variant stories stay in Storybook for browsing/design review but are
// individually covered by rows in AllVariants — skip in Chromatic to keep
// the variant matrix as the single snapshot source of truth.
const skipInChromatic = { chromatic: { disableSnapshot: true } }

export const ChatbotReceiverText: StoryFn<ComponentProps> = Template.bind({})
ChatbotReceiverText.args = {
  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
}
ChatbotReceiverText.parameters = skipInChromatic

export const ChatbotSenderText: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12">
      <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
        <MessageTag {...args} />
      </div>
    </div>
  )
}
ChatbotSenderText.args = {
  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
  isMyMessage: true,
}
ChatbotSenderText.parameters = skipInChromatic

export const ChatbotSenderAttachment: StoryFn<ComponentProps> = Template.bind(
  {}
)
ChatbotSenderAttachment.args = {
  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
  isMyMessage: true,
  hasAttachment: true,
}
ChatbotSenderAttachment.parameters = skipInChromatic

export const Paid: StoryFn<ComponentProps> = Template.bind({})
Paid.args = {
  message: createMockMessage({
    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
  }),
}
Paid.parameters = skipInChromatic

export const NoTag: StoryFn<ComponentProps> = Template.bind({})
NoTag.args = {
  message: createMockMessage(),
}
NoTag.parameters = skipInChromatic

export const AllVariants: StoryFn = () => {
  return (
    <div className="p-12 flex flex-col gap-4">
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Chatbot (receiver):</span>
        <MessageTag
          message={createMockMessage({
            metadata: { custom_type: 'MESSAGE_CHATBOT' },
          })}
        />
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Chatbot (sender):</span>
        <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
          <MessageTag
            message={createMockMessage({
              metadata: { custom_type: 'MESSAGE_CHATBOT' },
            })}
            isMyMessage
          />
        </div>
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Chatbot (attachment):</span>
        <div className="w-[280px]">
          <MessageTag
            message={createMockMessage({
              metadata: { custom_type: 'MESSAGE_CHATBOT' },
            })}
            isMyMessage
            hasAttachment
          />
        </div>
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Paid:</span>
        <MessageTag
          message={createMockMessage({
            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
          })}
        />
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">No tag:</span>
        <MessageTag message={createMockMessage()} />
        <span className="text-xs text-stone">(renders nothing)</span>
      </div>
    </div>
  )
}
// AllVariants is the single Chromatic snapshot for message tags: the per-variant
// stories above are skipped (kept for local browsing + controls) and this grid is
// the visual-regression guard — one snapshot covering every tag layout at once.
AllVariants.parameters = { chromatic: { disableSnapshot: false } }