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

import { MockChatProviderWithChannels } from '../../stories/mocks'
import type { ChannelPreviewProps } from '../../types'

import { ChannelList } from '.'

type ComponentProps = React.ComponentProps<typeof ChannelList>

// ChannelList renders a list of mocked channels driven by MockChatProvider —
// useful as a browsable Storybook fixture but the snapshot reflects the mock
// fixture rather than any reusable component contract. Skip the whole story
// file in Chromatic; per-channel-row visuals are covered by CustomChannelPreview.
const meta: Meta<ComponentProps> = {
  title: 'ChannelList',
  component: ChannelList,
  parameters: {
    layout: 'fullscreen',
    chromatic: { disableSnapshot: true },
  },
  decorators: [
    (Story) => (
      <MockChatProviderWithChannels>
        <Story />
      </MockChatProviderWithChannels>
    ),
  ],
}
export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="h-screen w-full md:w-[360px] bg-chalk">
      <ChannelList {...args} />
    </div>
  )
}

const HostChannelPreview: React.FC<ChannelPreviewProps> = ({
  channel,
  onChannelSelect,
  selectedChannel,
  unread,
}) => {
  const participant = Object.values(channel?.state?.members || {}).find(
    (member) => member.user?.id !== channel?._client?.userID
  )
  const isSelected = selectedChannel?.id === channel?.id

  return (
    <button
      type="button"
      onClick={() => onChannelSelect(channel)}
      className="mx-3 mt-3 block w-[calc(100%-1.5rem)] rounded-[20px] border border-[#e0dfdb] bg-white p-4 text-left shadow-[0_4px_16px_rgba(0,0,0,0.06)]"
    >
      <div className="flex items-center justify-between">
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-[#191918]">
            {participant?.user?.name ?? 'Unknown visitor'}
          </p>
          <p className="mt-1 line-clamp-1 text-xs text-[#717070]">
            Host-owned channel preview
            {isSelected ? ' (selected)' : ''}
          </p>
        </div>
        {Boolean(unread) && (
          <span className="ml-3 rounded-full bg-[#7f22fe] px-2 py-1 text-xs font-medium text-white">
            {unread}
          </span>
        )}
      </div>
    </button>
  )
}

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {
  filters: { type: 'messaging' },
  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
}

export const WithSelection: StoryFn<ComponentProps> = Template.bind({})
WithSelection.args = {
  filters: { type: 'messaging' },
  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
}

export const CustomChannelPreview: StoryFn<ComponentProps> = Template.bind({})
CustomChannelPreview.args = {
  filters: { type: 'messaging' },
  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
  channelPreview: HostChannelPreview,
}