import { type Meta, type StoryObj } from '@storybook/react-vite'
import React from 'react'

import { DocsTemplate } from '../../../.storybook'
import PrimaryTableCell from './PrimaryTableCell'

const meta: Meta<typeof PrimaryTableCell> = {
  title: 'Components/Tables/Components/PrimaryTableCell',
  component: PrimaryTableCell,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate description='This component should always be shown in the first column of a table. It displays the product image, product name, ASIN, marketplace name and seller info. The product name and image are to be linked to the product details page. The Marketplace name is an external link (shown in blue) and will redirect users to the marketplace URL.' />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof PrimaryTableCell>

// Common test data
const LONG_PRODUCT_TITLE =
  'Product name that has a very long title that just keeps going until you hit the character limit'

const COMMON_MARKETPLACES = [
  { name: 'Amazon', link: 'https://www.amazon.com' },
  { name: 'Amazon EU', link: 'https://www.amazon.co.uk' },
  { name: 'eBay', link: 'https://www.ebay.com' },
  { name: 'Walmart', link: 'https://www.walmart.com' },
  { name: 'Target', link: 'https://www.target.com' },
  { name: 'Best Buy', link: 'https://www.bestbuy.com' },
  { name: 'Newegg', link: 'https://www.newegg.com' },
  { name: 'Etsy', link: 'https://www.etsy.com' },
]

const MIXED_LINK_MARKETPLACES = [
  { name: 'Amazon', link: 'https://www.amazon.com' },
  { name: 'Amazon EU', link: 'https://www.amazon.co.uk' },
  { name: 'eBay', link: '' }, // No link
  { name: 'Walmart', link: 'https://www.walmart.com' },
  { name: 'Target', link: '' }, // No link
  { name: 'Best Buy', link: 'https://www.bestbuy.com' },
  { name: 'Local Store', link: '' }, // No link
]

const MANY_TAGS = Array(14).fill({ children: 'green', color: 'green' })

const Template: Story = {
  render: (args) => <PrimaryTableCell {...args} />,
}

const baseConfig = {
  title: 'Product Name',
  uniqId: { id: '10001-A', idLabel: 'ASIN', idName: 'asin' },
  imageProps: {
    alt: 'Pattern Logo',
    style: { maxWidth: '40px' },
    url: 'https://m.media-amazon.com/images/I/41ZRl6RXeTS._SL75_.jpg',
  },
  soldBy: { threepn: true, iserve: true },
  sortBy: { prop: 'name', order: 'asc' as const },
  tags: [
    { children: 'blue', color: 'blue' as const },
    { children: 'yellow', color: 'yellow' as const },
    { children: 'red', color: 'red' as const },
    { children: 'purple', color: 'purple' as const },
  ],
}

// === BASIC STORIES ===
export const PrimaryCell: Story = {
  ...Template,
  args: baseConfig,
}

export const WithLongTitle: Story = {
  ...Template,
  args: {
    ...baseConfig,
    title: LONG_PRODUCT_TITLE,
    titleTrimTextLimit: 45,
    tags: undefined,
  },
}

export const WithDescription: Story = {
  ...Template,
  args: {
    ...baseConfig,
    description: LONG_PRODUCT_TITLE,
  },
}

export const WithManyTags: Story = {
  ...Template,
  args: {
    ...baseConfig,
    tags: [
      { children: 'blue', color: 'blue' },
      { children: 'yellow', color: 'yellow' },
      { children: 'red', color: 'red' },
      { children: 'purple', color: 'purple' },
      ...MANY_TAGS,
    ],
  },
}

// === LEGACY MARKETPLACE STORIES ===
export const LegacySingleMarketplace: Story = {
  ...Template,
  args: {
    ...baseConfig,
    marketplaceNames: 'eBay',
    soldBy: { iserve: true },
    tags: undefined,
  },
}

export const LegacyWithExternalLink: Story = {
  ...Template,
  args: {
    ...baseConfig,
    marketplaceNames: 'Amazon',
    externalLink: 'https://www.amazon.com',
    productLink: 'https://library.pattern.com/',
    routerComponent: 'a',
    routerProp: 'href',
    tags: undefined,
  },
}

export const MultipleMarketplaces: Story = {
  ...Template,
  args: {
    ...baseConfig,
    marketplaces: COMMON_MARKETPLACES.slice(0, 3),
    soldBy: { threepn: true, iserve: false },
    tags: [
      { children: 'multi-marketplace', color: 'blue' },
      { children: 'global', color: 'green' },
    ],
  },
}

export const ManyMarketplacesWithTooltip: Story = {
  ...Template,
  args: {
    ...baseConfig,
    marketplaces: COMMON_MARKETPLACES,
    soldBy: { threepn: true, iserve: false },
    tags: [
      { children: 'many-marketplaces', color: 'purple' },
      { children: 'tooltip-demo', color: 'orange' },
    ],
  },
}

export const MarketplacesMixedLinks: Story = {
  ...Template,
  args: {
    ...baseConfig,
    marketplaces: MIXED_LINK_MARKETPLACES,
    soldBy: { iserve: true, threepn: false },
    tags: [
      { children: 'mixed-links', color: 'red' },
      { children: 'ui-demo', color: 'yellow' },
    ],
  },
}

export const CopyIDButton: Story = {
  ...Template,
  args: {
    ...baseConfig,
    uniqId: {
      ...baseConfig.uniqId,
      enableCopyIdButton: true,
    },
  },
}