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

import {
  StoryGrid,
  StoryHeading,
  StoryPage,
  StoryRow,
} from '../stories/StoryTable'
import type { AudioItem } from '../types'

import AudioAttachment from '.'

const AUDIO_SRC =
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'

const STACK_AUDIO: AudioItem[] = [
  {
    src: AUDIO_SRC,
    mimeType: 'audio/mpeg',
    filename: 'Take 1 — full mix.mp3',
  },
  {
    src: AUDIO_SRC,
    mimeType: 'audio/mpeg',
    filename: 'Take 2 — vocals isolated.mp3',
  },
  {
    src: AUDIO_SRC,
    mimeType: 'audio/mpeg',
    filename: 'Take 3 — instrumental only.mp3',
  },
]

const meta: Meta = {
  title: 'MessageAttachment/Audio',
  parameters: { layout: 'fullscreen' },
}
export default meta

const handleDismiss = () => {
  console.log('Dismissed audio attachment')
}

/**
 * Native `<audio controls>` player inside a chat bubble. The browser
 * chrome provides play / scrub / volume / kebab-menu (which already
 * includes a download), so we don't render any extra controls.
 * Composer adds an inline dismiss `×` to the right of the player.
 */
export const Single: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Audio attachment"
      description="Native browser audio chrome — play, scrub, volume, and the built-in download in the kebab menu. Composer renders an inline dismiss button next to the player."
    />
    <StoryGrid>
      <StoryRow
        label="Default"
        composer={
          <AudioAttachment.Composer
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <AudioAttachment.Sent
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
          />
        }
        received={
          <AudioAttachment.Received
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

export const SingleWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Audio with caption"
      description="Caption sits below the player, inside the same bubble."
    />
    <StoryGrid>
      <StoryRow
        label="Caption"
        composer={
          <AudioAttachment.Composer
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <AudioAttachment.Sent
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            text="Recorded this morning before training"
          />
        }
        received={
          <AudioAttachment.Received
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            text="Recorded this morning before training"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/**
 * Stacked audio attachments — multiple clips inside one bubble. Each
 * clip renders its own native `<audio controls>` player, vertically
 * stacked with a hairline separator.
 *
 * Sent + Received only — the composer surface accepts a single
 * attachment at a time.
 */
export const Stacked: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked audio"
      description="Each clip plays independently with its own native controls. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="2 clips"
        composer={
          <AudioAttachment.Composer
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            onDismiss={handleDismiss}
          />
        }
        sent={<AudioAttachment.Sent items={STACK_AUDIO.slice(0, 2)} />}
        received={<AudioAttachment.Received items={STACK_AUDIO.slice(0, 2)} />}
      />
      <StoryRow
        label="3 clips"
        composer={
          <AudioAttachment.Composer
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            onDismiss={handleDismiss}
          />
        }
        sent={<AudioAttachment.Sent items={STACK_AUDIO} />}
        received={<AudioAttachment.Received items={STACK_AUDIO} />}
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked audio with an accompanying caption.
 *  Sent + Received only — see `Stacked` for the rationale. */
export const StackedWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked audio with caption"
      description="Caption sits inside the same bubble, below the player stack. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="3 clips + caption"
        composer={
          <AudioAttachment.Composer
            src={AUDIO_SRC}
            mimeType="audio/mpeg"
            filename="Morning meditation.mp3"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <AudioAttachment.Sent
            items={STACK_AUDIO}
            text="Three takes from the studio — let me know which mix you prefer."
          />
        }
        received={
          <AudioAttachment.Received
            items={STACK_AUDIO}
            text="Three takes from the studio — let me know which mix you prefer."
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)