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

import AttachmentCard, { AttachmentThumbnail } from '.'

type ComponentProps = React.ComponentProps<typeof AttachmentCard>

const meta: Meta<ComponentProps> = {
  title: 'AttachmentCard',
  component: AttachmentCard,
  parameters: { layout: 'centered' },
  argTypes: {
    variant: { control: { type: 'inline-radio' }, options: ['light', 'dark'] },
  },
}
export default meta

const IMAGE_URL = '/image-thumbnail.jpg'

const Template: StoryFn<ComponentProps> = (args) => <AttachmentCard {...args} />

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

export const LightImage: StoryFn<ComponentProps> = Template.bind({})
LightImage.args = {
  variant: 'light',
  title: 'sunset.jpg',
  mimeType: 'image/jpeg',
  detail: '2.4 MB',
  thumbnail: (
    <AttachmentThumbnail
      mimeType="image/jpeg"
      sourceUrl={IMAGE_URL}
      title="sunset"
      variant="light"
    />
  ),
}
LightImage.parameters = skipInChromatic

export const DarkImage: StoryFn<ComponentProps> = Template.bind({})
DarkImage.args = {
  variant: 'dark',
  title: 'sunset.jpg',
  mimeType: 'image/jpeg',
  detail: '2.4 MB',
  thumbnail: (
    <AttachmentThumbnail
      mimeType="image/jpeg"
      sourceUrl={IMAGE_URL}
      title="sunset"
      variant="dark"
    />
  ),
}
DarkImage.parameters = skipInChromatic

export const PdfPlaceholder: StoryFn<ComponentProps> = Template.bind({})
PdfPlaceholder.args = {
  variant: 'light',
  title: 'invoice.pdf',
  mimeType: 'application/pdf',
  detail: '120 KB',
  thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
}
PdfPlaceholder.parameters = skipInChromatic

export const AudioPosterOnly: StoryFn<ComponentProps> = Template.bind({})
AudioPosterOnly.args = {
  variant: 'dark',
  title: 'voice-memo.m4a',
  mimeType: 'audio/m4a',
  detail: '0:42',
  thumbnail: (
    <AttachmentThumbnail
      mimeType="audio/m4a"
      thumbnailUrl={IMAGE_URL}
      title="voice memo"
      variant="dark"
    />
  ),
}
AudioPosterOnly.parameters = skipInChromatic

export const UntitledDark: StoryFn<ComponentProps> = Template.bind({})
UntitledDark.args = {
  variant: 'dark',
  mimeType: 'image/png',
  detail: '1.1 MB',
  thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
}
UntitledDark.parameters = skipInChromatic

export const WithTopBadges: StoryFn<ComponentProps> = Template.bind({})
WithTopBadges.args = {
  variant: 'light',
  title: 'receipt.pdf',
  mimeType: 'application/pdf',
  detail: 'Paid',
  thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
  topLeft: (
    <span className="rounded-full bg-black/80 px-2 py-0.5 text-xs font-medium text-white">
      Locked
    </span>
  ),
  topRight: (
    <span className="rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-black">
      $5.00
    </span>
  ),
}
WithTopBadges.parameters = skipInChromatic

export const AllVariants: StoryFn = () => {
  const cards: { label: string; props: ComponentProps }[] = [
    {
      label: 'Light image',
      props: {
        variant: 'light',
        title: 'sunset.jpg',
        mimeType: 'image/jpeg',
        detail: '2.4 MB',
        thumbnail: (
          <AttachmentThumbnail
            mimeType="image/jpeg"
            sourceUrl={IMAGE_URL}
            title="sunset"
            variant="light"
          />
        ),
      },
    },
    {
      label: 'Dark image',
      props: {
        variant: 'dark',
        title: 'sunset.jpg',
        mimeType: 'image/jpeg',
        detail: '2.4 MB',
        thumbnail: (
          <AttachmentThumbnail
            mimeType="image/jpeg"
            sourceUrl={IMAGE_URL}
            title="sunset"
            variant="dark"
          />
        ),
      },
    },
    {
      label: 'Contained image (dark)',
      props: {
        variant: 'dark',
        title: 'portrait.jpg',
        mimeType: 'image/jpeg',
        detail: '1.8 MB',
        thumbnail: (
          <AttachmentThumbnail
            mimeType="image/jpeg"
            sourceUrl={IMAGE_URL}
            title="portrait"
            variant="dark"
            containedImage
          />
        ),
      },
    },
    {
      label: 'Contained image (light)',
      props: {
        variant: 'light',
        title: 'portrait.jpg',
        mimeType: 'image/jpeg',
        detail: '1.8 MB',
        thumbnail: (
          <AttachmentThumbnail
            mimeType="image/jpeg"
            sourceUrl={IMAGE_URL}
            title="portrait"
            variant="light"
            containedImage
          />
        ),
      },
    },
    {
      label: 'PDF placeholder',
      props: {
        variant: 'light',
        title: 'invoice.pdf',
        mimeType: 'application/pdf',
        detail: '120 KB',
        thumbnail: (
          <AttachmentThumbnail mimeType="application/pdf" variant="light" />
        ),
      },
    },
    {
      label: 'Audio poster',
      props: {
        variant: 'dark',
        title: 'voice-memo.m4a',
        mimeType: 'audio/m4a',
        detail: '0:42',
        thumbnail: (
          <AttachmentThumbnail
            mimeType="audio/m4a"
            thumbnailUrl={IMAGE_URL}
            title="voice memo"
            variant="dark"
          />
        ),
      },
    },
    {
      label: 'Untitled (dark)',
      props: {
        variant: 'dark',
        mimeType: 'image/png',
        detail: '1.1 MB',
        thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
      },
    },
    {
      label: 'With top badges',
      props: {
        variant: 'light',
        title: 'receipt.pdf',
        mimeType: 'application/pdf',
        detail: 'Paid',
        thumbnail: (
          <AttachmentThumbnail mimeType="application/pdf" variant="light" />
        ),
        topLeft: (
          <span className="rounded-full bg-black/80 px-2 py-0.5 text-xs font-medium text-white">
            Locked
          </span>
        ),
        topRight: (
          <span className="rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-black">
            $5.00
          </span>
        ),
      },
    },
  ]

  return (
    <div className="grid grid-cols-2 gap-6 p-6">
      {cards.map(({ label, props }) => (
        <div key={label} className="flex flex-col gap-2">
          <span className="text-xs text-stone">{label}</span>
          <AttachmentCard {...props} />
        </div>
      ))}
    </div>
  )
}