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

import MessageBubble from '.'

const meta: Meta = {
  title: 'MessageBubble',
  parameters: { layout: 'fullscreen' },
}
export default meta

const Canvas = ({ children }: { children: React.ReactNode }) => (
  <div className="min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
    {children}
  </div>
)

const Row = ({
  label,
  align = 'start',
  children,
}: {
  label: string
  align?: 'start' | 'end'
  children: React.ReactNode
}) => (
  <div>
    <p className="mb-2 text-xs font-medium text-black/40">{label}</p>
    <div
      className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
    >
      {children}
    </div>
  </div>
)

const SHORT = 'Hey! Thanks for reaching out 👋'
const LONG =
  'Absolutely — I have a couple of slots free next week. Happy to send over the full brief and pricing so you can take a look before we lock anything in.'
const MULTILINE = 'Line one\nLine two\nLine three'

/** Design-review matrix: both variants across tail, length, and header. */
export const Gallery: StoryFn = () => (
  <Canvas>
    <Row label="Received — short" align="start">
      <MessageBubble.Received text={SHORT} className="w-fit" />
    </Row>
    <Row label="Received — with header (sender name)" align="start">
      <MessageBubble.Received
        header="Brie"
        text={LONG}
        className="w-fit max-w-[520px]"
      />
    </Row>
    <Row label="Received — no tail" align="start">
      <MessageBubble.Received text={SHORT} tail={false} className="w-fit" />
    </Row>
    <Row label="Sent — short" align="end">
      <MessageBubble.Sent text={SHORT} className="w-fit" />
    </Row>
    <Row label="Sent — long" align="end">
      <MessageBubble.Sent text={LONG} className="w-fit max-w-[520px]" />
    </Row>
    <Row label="Sent — multiline" align="end">
      <MessageBubble.Sent text={MULTILINE} className="w-fit" />
    </Row>
    <Row label="Sent — no tail" align="end">
      <MessageBubble.Sent text={SHORT} tail={false} className="w-fit" />
    </Row>
  </Canvas>
)

/**
 * Stacks bulk-reply confirmation: preview an outgoing message as the *visitor*
 * will receive it — the recipient (grey, left) treatment despite being your
 * own text.
 */
export const PreviewToRecipient: StoryFn = () => (
  <Canvas>
    <Row label="How your reply will look to the visitor" align="start">
      <MessageBubble.Received
        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
        className="w-fit max-w-[520px]"
      />
    </Row>
  </Canvas>
)

/**
 * Stacks responded-summary: preview a sent reply as it looks *to you in the
 * channel* — the sender (dark, right) treatment.
 */
export const PreviewInChannel: StoryFn = () => (
  <Canvas>
    <Row label="How your reply looks to you in the channel" align="end">
      <MessageBubble.Sent
        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
        className="w-fit max-w-[520px]"
      />
    </Row>
  </Canvas>
)