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

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

import VideoAttachment from '.'

// Sourced from `.storybook/public/` so we share the same assets used by
// the LockedAttachment stories.
const VIDEO_SRC = '/video-source.mp4'
const VIDEO_POSTER = '/video-thumbnail.jpg'

const STACK_VIDEOS: VideoItem[] = [
  {
    src: VIDEO_SRC,
    poster: VIDEO_POSTER,
    mimeType: 'video/mp4',
  },
  {
    src: VIDEO_SRC,
    poster: VIDEO_POSTER,
    mimeType: 'video/mp4',
  },
  {
    src: VIDEO_SRC,
    poster: VIDEO_POSTER,
    mimeType: 'video/mp4',
  },
  {
    src: VIDEO_SRC,
    poster: VIDEO_POSTER,
    mimeType: 'video/mp4',
  },
]

/**
 * Nine clips — four tiles plus a `+5` scrim on the bottom-right. The cap
 * on the creator surface is 10 attachments, so the reachable badge range
 * is `+1` … `+6`; this is real production state, not defensive UI.
 */
const OVERFLOW_VIDEOS: VideoItem[] = Array.from({ length: 9 }, () => ({
  src: VIDEO_SRC,
  poster: VIDEO_POSTER,
  mimeType: 'video/mp4',
}))

/**
 * Solid-colour poster at an exact intrinsic size. The single-video card
 * measures `naturalWidth / naturalHeight` off the decoded poster, so the
 * aspect row needs posters whose ratio is declared rather than inherited
 * from whatever photo happens to sit in `.storybook/public/`.
 */
const aspectPoster = (width: number, height: number): string =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="#3f6b8f"/></svg>`
  )}`

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

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

/**
 * Single video — the bubble shows the poster with a play overlay.
 * Clicking opens the full-viewport `VideoViewer` with native controls
 * (play / pause / seek / fullscreen / volume / download).
 */
export const Single: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Single video"
      description="Click any bubble to open the full-screen video viewer with the browser's native controls (play / pause / seek / fullscreen / volume / download)."
    />
    <StoryGrid>
      <StoryRow
        label="Default"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
          />
        }
      />
      <StoryRow
        label="No poster"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            mimeType="video/mp4"
            filename="video-source.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            mimeType="video/mp4"
            filename="video-source.mp4"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Single video with an accompanying caption. Sent + Received only —
 *  composer captions live in the message input, not the attachment
 *  preview. */
export const SingleWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Single video with caption"
      description="Caption renders inside the same bubble, below the video poster. Composer column is intentionally blank — composer captions live in the message input."
    />
    <StoryGrid>
      <StoryRow
        label="Short caption"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            text="Here is the video"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            text="Here is the video"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked video attachments. Sent + Received only — the composer
 *  surface accepts a single video at a time. */
export const Stacked: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked videos"
      description="Each tile shows its own poster + play overlay. Click any tile to open the viewer at that index. Composer column is intentionally blank — the composer accepts a single video at a time."
    />
    <StoryGrid>
      <StoryRow
        label="2 clips"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            items={STACK_VIDEOS.slice(0, 2)}
            filename="clips"
          />
        }
        received={
          <VideoAttachment.Received
            items={STACK_VIDEOS.slice(0, 2)}
            filename="clips"
          />
        }
      />
      <StoryRow
        label="3 clips"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            items={STACK_VIDEOS.slice(0, 3)}
            filename="clips"
          />
        }
        received={
          <VideoAttachment.Received
            items={STACK_VIDEOS.slice(0, 3)}
            filename="clips"
          />
        }
      />
      <StoryRow
        label="4 clips"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={<VideoAttachment.Sent items={STACK_VIDEOS} filename="clips" />}
        received={
          <VideoAttachment.Received items={STACK_VIDEOS} filename="clips" />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked videos with an accompanying caption.
 *  Sent + Received only — see `Stacked` for the rationale. */
export const StackedWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked videos with caption"
      description="Caption sits inside the same bubble, below the stack. Composer column is intentionally blank — the composer accepts a single video at a time."
    />
    <StoryGrid>
      <StoryRow
        label="3 clips + caption"
        composer={
          <VideoAttachment.Composer
            src={VIDEO_SRC}
            poster={VIDEO_POSTER}
            mimeType="video/mp4"
            filename="video-source.mp4"
            onDismiss={handleDismiss}
          />
        }
        sent={
          <VideoAttachment.Sent
            items={STACK_VIDEOS.slice(0, 3)}
            filename="clips"
            text="Three takes — pick your favorite"
          />
        }
        received={
          <VideoAttachment.Received
            items={STACK_VIDEOS.slice(0, 3)}
            filename="clips"
            text="Three takes — pick your favorite"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked videos past the 4-tile grid — the last visible tile trades
 *  its play badge for the `+N` count scrim. */
export const Overflow: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked videos with overflow"
      description="`+N` counts the clips beyond the four shown (total − visible), and the overflow tile drops its play badge — the scrim is the affordance. Activating it opens the viewer on the 4th clip; the carousel still spans every item, not just the visible four."
    />
    <StoryGrid>
      <StoryRow
        label="5 clips (+1)"
        sent={
          <VideoAttachment.Sent
            items={OVERFLOW_VIDEOS.slice(0, 5)}
            filename="clips"
          />
        }
        received={
          <VideoAttachment.Received
            items={OVERFLOW_VIDEOS.slice(0, 5)}
            filename="clips"
          />
        }
      />
      <StoryRow
        label="9 clips (+5)"
        sent={<VideoAttachment.Sent items={OVERFLOW_VIDEOS} filename="clips" />}
        received={
          <VideoAttachment.Received items={OVERFLOW_VIDEOS} filename="clips" />
        }
      />
      <StoryRow
        label="9 clips + caption"
        sent={
          <VideoAttachment.Sent
            items={OVERFLOW_VIDEOS}
            filename="clips"
            text="Nine takes — the last tile shows how many are hiding"
          />
        }
        received={
          <VideoAttachment.Received
            items={OVERFLOW_VIDEOS}
            filename="clips"
            text="Nine takes — the last tile shows how many are hiding"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Single-video cards size themselves to the poster's own aspect, clamped
 *  to `[4/5, 16/9]` so one portrait clip can't dominate the thread. */
export const SingleAspect: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Single video — source aspect"
      description="Card width is fixed at 330px; height follows the poster's intrinsic ratio, clamped to [4/5, 16/9]. The 21:9 row proves the wide clamp and the 9:16 row the tall one — both land on the same box as the 16:9 and 4/5 limits respectively."
    />
    <StoryGrid>
      <StoryRow
        label="16:9 (1.78)"
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={aspectPoster(1920, 1080)}
            mimeType="video/mp4"
            filename="landscape.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={aspectPoster(1920, 1080)}
            mimeType="video/mp4"
            filename="landscape.mp4"
          />
        }
      />
      <StoryRow
        label="4:3 (1.33)"
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={aspectPoster(1440, 1080)}
            mimeType="video/mp4"
            filename="classic.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={aspectPoster(1440, 1080)}
            mimeType="video/mp4"
            filename="classic.mp4"
          />
        }
      />
      <StoryRow
        label="9:16 → clamped to 4:5"
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={aspectPoster(1080, 1920)}
            mimeType="video/mp4"
            filename="portrait.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={aspectPoster(1080, 1920)}
            mimeType="video/mp4"
            filename="portrait.mp4"
          />
        }
      />
      <StoryRow
        label="21:9 → clamped to 16:9"
        sent={
          <VideoAttachment.Sent
            src={VIDEO_SRC}
            poster={aspectPoster(2560, 1080)}
            mimeType="video/mp4"
            filename="ultrawide.mp4"
          />
        }
        received={
          <VideoAttachment.Received
            src={VIDEO_SRC}
            poster={aspectPoster(2560, 1080)}
            mimeType="video/mp4"
            filename="ultrawide.mp4"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)