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

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

import PdfAttachment from '.'

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

const STACK_PDFS: PdfItem[] = [
  { src: PDF_SRC, filename: 'ESOP-summary.pdf', fileSize: 388_658 },
  { src: PDF_SRC, filename: 'Vesting-schedule.pdf', fileSize: 142_336 },
  { src: PDF_SRC, filename: 'Cap-table-snapshot.pdf', fileSize: 96_021 },
  { src: PDF_SRC, filename: 'Board-resolution.pdf', fileSize: 24_580 },
]

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

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

/**
 * Compact PDF row inside a chat bubble — icon + filename + `EXT · SIZE`.
 * Composer / Sent / Received are all interactive: clicking opens the
 * built-in `PdfViewer` (full-viewport iframe + filename + download).
 */
export const Single: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="PDF attachment"
      description="Click any bubble to open the full-viewport PDF viewer with built-in download."
    />
    <StoryGrid>
      <StoryRow
        label="Default"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
          />
        }
        received={
          <PdfAttachment.Received
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
          />
        }
      />
      <StoryRow
        label="Long filename"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
            fileSize={1_240_000}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            src={PDF_SRC}
            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
            fileSize={1_240_000}
          />
        }
        received={
          <PdfAttachment.Received
            src={PDF_SRC}
            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
            fileSize={1_240_000}
          />
        }
      />
      <StoryRow
        label="No file size"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="contract.pdf"
            onDismiss={handleDismiss}
          />
        }
        sent={<PdfAttachment.Sent src={PDF_SRC} filename="contract.pdf" />}
        received={
          <PdfAttachment.Received src={PDF_SRC} filename="contract.pdf" />
        }
      />
    </StoryGrid>
  </StoryPage>
)

export const SingleWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="PDF with caption"
      description="Caption sits inside the same bubble, below the file row — matches the mobile chat 'Here is the file' screenshot."
    />
    <StoryGrid>
      <StoryRow
        label="Caption"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            text="Here is the file"
          />
        }
        received={
          <PdfAttachment.Received
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            text="Here is the file"
          />
        }
      />
      <StoryRow
        label="Long caption"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            text="Sharing the latest ESOP summary — let me know if you need any sections clarified before we sign."
          />
        }
        received={
          <PdfAttachment.Received
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            text="Sharing the latest ESOP summary — let me know if you need any sections clarified before we sign."
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)

/**
 * Stacked PDF attachments — multiple PDFs in one bubble. Each row is
 * its own tappable target that opens the `PdfViewer` for that file.
 *
 * Sent + Received only — the composer surface accepts a single
 * attachment at a time (the user picks files one at a time inside the
 * file picker, so the composer preview lives outside this scenario).
 */
export const Stacked: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked PDFs"
      description="Each row is its own tappable target; clicking opens that PDF in the viewer. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="2 PDFs"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={<PdfAttachment.Sent items={STACK_PDFS.slice(0, 2)} />}
        received={<PdfAttachment.Received items={STACK_PDFS.slice(0, 2)} />}
      />
      <StoryRow
        label="3 PDFs"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={<PdfAttachment.Sent items={STACK_PDFS.slice(0, 3)} />}
        received={<PdfAttachment.Received items={STACK_PDFS.slice(0, 3)} />}
      />
      <StoryRow
        label="4 PDFs"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={<PdfAttachment.Sent items={STACK_PDFS} />}
        received={<PdfAttachment.Received items={STACK_PDFS} />}
      />
    </StoryGrid>
  </StoryPage>
)

/** Stacked PDFs with an accompanying caption.
 *  Sent + Received only — see `Stacked` for the rationale. */
export const StackedWithText: StoryFn = () => (
  <StoryPage>
    <StoryHeading
      title="Stacked PDFs with caption"
      description="Caption sits inside the same bubble, below the file list. Composer column is intentionally blank — the composer accepts a single attachment at a time."
    />
    <StoryGrid>
      <StoryRow
        label="3 PDFs + caption"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            items={STACK_PDFS.slice(0, 3)}
            text="Here are the docs from the call — review when you can"
          />
        }
        received={
          <PdfAttachment.Received
            items={STACK_PDFS.slice(0, 3)}
            text="Here are the docs from the call — review when you can"
          />
        }
      />
      <StoryRow
        label="4 PDFs + caption"
        composer={
          <PdfAttachment.Composer
            src={PDF_SRC}
            filename="ESOP-summary.pdf"
            fileSize={388_658}
            onDismiss={handleDismiss}
          />
        }
        sent={
          <PdfAttachment.Sent
            items={STACK_PDFS}
            text="Full ESOP package + the cap table snapshot for tonight's meeting."
          />
        }
        received={
          <PdfAttachment.Received
            items={STACK_PDFS}
            text="Full ESOP package + the cap table snapshot for tonight's meeting."
          />
        }
      />
    </StoryGrid>
  </StoryPage>
)