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

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

import FileAttachment from '.'

const FILE_SRC = 'https://www.w3.org/WAI/WCAG21/wcag21.pdf'

const STACK_FILES: FileItem[] = [
  {
    src: FILE_SRC,
    filename: 'workout-plan.zip',
    mimeType: 'application/zip',
    fileSize: 2_457_600,
  },
  {
    src: FILE_SRC,
    filename: 'Q4-revenue.xlsx',
    mimeType:
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    fileSize: 146_432,
  },
  {
    src: FILE_SRC,
    filename: 'brand-guidelines-2026.zip',
    mimeType: 'application/zip',
    fileSize: 11_500_000,
  },
  {
    src: FILE_SRC,
    filename: 'meeting-notes.docx',
    mimeType:
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    fileSize: 28_672,
  },
]

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

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

/**
 * Compact file row inside a chat bubble — typed icon + filename +
 * `EXT · SIZE` — with a download icon in the trailing slot. Clicking
 * any state (Composer / Sent / Received) downloads the asset.
 */
export const Single: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="File attachment"
      description="Click any bubble to download. Trailing icon hints at the download action."
    />
    <StoryGrid>
      <StoryRow
        label="Generic"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <FileAttachment.Sent
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
          />
        }
        received={
          <FileAttachment.Received
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
          />
        }
      />
      <StoryRow
        label="Spreadsheet"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="Q4-revenue.xlsx"
            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            fileSize={146_432}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <FileAttachment.Sent
            src={FILE_SRC}
            filename="Q4-revenue.xlsx"
            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            fileSize={146_432}
          />
        }
        received={
          <FileAttachment.Received
            src={FILE_SRC}
            filename="Q4-revenue.xlsx"
            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            fileSize={146_432}
          />
        }
      />
      <StoryRow
        label="Long filename"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
            mimeType="application/zip"
            fileSize={11_500_000}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <FileAttachment.Sent
            src={FILE_SRC}
            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
            mimeType="application/zip"
            fileSize={11_500_000}
          />
        }
        received={
          <FileAttachment.Received
            src={FILE_SRC}
            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
            mimeType="application/zip"
            fileSize={11_500_000}
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

export const SingleWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="File with caption"
      description="Caption sits inside the same bubble below the file row."
    />
    <StoryGrid>
      <StoryRow
        label="Caption"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <FileAttachment.Sent
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            text="Here is the file"
          />
        }
        received={
          <FileAttachment.Received
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            text="Here is the file"
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/**
 * Stacked file attachments — multiple files inside one bubble. Each
 * row has its own download trigger, and rows are separated by an 8px
 * gap to match stacked PDF / Audio.
 *
 * Sent + Received only — the composer surface accepts a single
 * attachment at a time.
 */
export const Stacked: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked files"
      description="Each row downloads independently. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="2 files"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            onDismiss={handleDismiss}
          />
        }
        sent={<FileAttachment.Sent items={STACK_FILES.slice(0, 2)} />}
        received={<FileAttachment.Received items={STACK_FILES.slice(0, 2)} />}
      />
      <StoryRow
        label="3 files"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            onDismiss={handleDismiss}
          />
        }
        sent={<FileAttachment.Sent items={STACK_FILES.slice(0, 3)} />}
        received={<FileAttachment.Received items={STACK_FILES.slice(0, 3)} />}
      />
      <StoryRow
        label="4 files"
        composer={
          <FileAttachment.Composer
            src={FILE_SRC}
            filename="workout-plan.zip"
            mimeType="application/zip"
            fileSize={2_457_600}
            onDismiss={handleDismiss}
          />
        }
        sent={<FileAttachment.Sent items={STACK_FILES} />}
        received={<FileAttachment.Received items={STACK_FILES} />}
      />
    </StoryGrid>
  </StoryPage>
)

/**
 * Bubble grouping — mirrors the corner-flattening stream-chat-react
 * applies to text bubbles in a same-author run. The four positions
 * (`single` / `first` / `middle` / `end`) flatten the corners that
 * face the previous / next bubble in the cluster, so a `MessageAttachment`
 * sitting inside a thread visually merges with the surrounding text
 * bubbles instead of floating as its own ungrouped pill.
 *
 * Stack the four positions vertically with `gap-[2px]` to see them
 * snap into a single visual run — the same gap stream uses between
 * grouped messages.
 */
export const Grouping: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Bubble grouping"
      description="Pass `groupPosition='single' | 'first' | 'middle' | 'end'` (or use `bubbleGroupPositionFromStream({ firstOfGroup, endOfGroup, groupedByUser })`) to make the attachment join a same-author message run. Sender bubbles flatten the corners on their right edge; receiver bubbles mirror onto the left."
    />
    <StoryGrid>
      <StoryRow
        label="single"
        sent={
          <FileAttachment.Sent {...STACK_FILES[0]} groupPosition="single" />
        }
        received={
          <FileAttachment.Received {...STACK_FILES[0]} groupPosition="single" />
        }
      />
      <StoryRow
        label="run of 3"
        sent={
          <div className="flex flex-col gap-[2px]">
            <FileAttachment.Sent {...STACK_FILES[0]} groupPosition="first" />
            <FileAttachment.Sent {...STACK_FILES[1]} groupPosition="middle" />
            <FileAttachment.Sent {...STACK_FILES[2]} groupPosition="end" />
          </div>
        }
        received={
          <div className="flex flex-col gap-[2px]">
            <FileAttachment.Received
              {...STACK_FILES[0]}
              groupPosition="first"
            />
            <FileAttachment.Received
              {...STACK_FILES[1]}
              groupPosition="middle"
            />
            <FileAttachment.Received {...STACK_FILES[2]} groupPosition="end" />
          </div>
        }
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked files with an accompanying caption.
 *  Sent + Received only — see `Stacked` for the rationale. */
export const StackedWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked files with caption"
      description="Caption sits inside the same bubble, below the file stack. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="3 files + caption"
        sent={
          <FileAttachment.Sent
            items={STACK_FILES.slice(0, 3)}
            text="Here are the deliverables — let me know if anything's missing."
          />
        }
        received={
          <FileAttachment.Received
            items={STACK_FILES.slice(0, 3)}
            text="Here are the deliverables — let me know if anything's missing."
          />
        }
      />
      <StoryRow
        label="4 files + caption"
        sent={
          <FileAttachment.Sent
            items={STACK_FILES}
            text="Final pass for review."
          />
        }
        received={
          <FileAttachment.Received
            items={STACK_FILES}
            text="Final pass for review."
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)