import type { Meta, StoryObj } from '@storybook/react'
import type { ComponentType } from 'react'
import { expect, fireEvent, userEvent, waitFor, within } from 'storybook/test'
import { Svg3DPerspectiveGrid } from '@chainlink/blocks-icons'
import type { LegacyComboboxProps } from './LegacyCombobox'
import {
  LegacyCombobox,
  LegacyComboboxContent,
  LegacyComboboxTrigger,
  LegacyComboboxValue,
  OptionRow,
} from './LegacyCombobox'

type LegacyComboboxStoryProps = Omit<LegacyComboboxProps, 'children'>

type DemoOption = {
  value: string
  label: string
  src: string
}

const meta = {
  component: LegacyCombobox as ComponentType<LegacyComboboxStoryProps>,
  title: 'Form/LegacyCombobox',
  subcomponents: {
    LegacyComboboxTrigger,
    LegacyComboboxValue,
    LegacyComboboxContent,
    OptionRow,
  },
  argTypes: {
    size: {
      control: { type: 'select' },
      options: ['default', 'sm'],
      table: {
        type: { summary: 'default | sm' },
        defaultValue: { summary: 'default' },
      },
    },
    disabled: {
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    clearable: {
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'true' },
      },
    },
    placeholder: {
      control: 'text',
    },
  },
  args: {
    size: 'default',
    disabled: false,
    clearable: true,
    placeholder: 'Select network...',
  },
} satisfies Meta<LegacyComboboxStoryProps>

export default meta

const demoOptions: DemoOption[] = [
  {
    value: 'arbitrum',
    label: 'Arbitrum',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/arbitrum.svg?auto=compress%2Cformat',
  },
  {
    value: 'avalanche',
    label: 'Avalanche',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/avalanche.svg?auto=compress%2Cformat',
  },
  {
    value: 'base',
    label: 'Base',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/base.svg?auto=compress%2Cformat',
  },
  {
    value: 'ethereum',
    label: 'Ethereum',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/ethereum.svg?auto=compress%2Cformat',
  },
  {
    value: 'solana',
    label: 'Solana',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/solana.svg?auto=compress%2Cformat',
  },
  {
    value: 'polygon',
    label: 'Polygon',
    src: 'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/polygon.svg?auto=compress%2Cformat',
  },
]

type Story = StoryObj<LegacyComboboxStoryProps>

export const Default: Story = {
  render: (_args) => {
    const options = [
      { value: 'arbitrum', label: 'Arbitrum' },
      { value: 'avalanche', label: 'Avalanche' },
      { value: 'base', label: 'Base' },
      { value: 'ethereum', label: 'Ethereum' },
    ]

    return (
      <LegacyCombobox
        clearable
        disabled={false}
        placeholder="Select network..."
        size="default"
      >
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder="Select network..." />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {options.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
  parameters: {
    test: {
      dangerouslyIgnoreUnhandledErrors: true,
    },
  },
}

export const SmallSize: Story = {
  render: (_args) => {
    const options = [
      { value: 'arbitrum', label: 'Arbitrum' },
      { value: 'avalanche', label: 'Avalanche' },
      { value: 'base', label: 'Base' },
      { value: 'ethereum', label: 'Ethereum' },
    ]

    return (
      <LegacyCombobox
        clearable
        disabled={false}
        placeholder="Select network..."
        size="sm"
      >
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder="Select network..." />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {options.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
}

export const WithIcons: Story = {
  render: (_args) => {
    const options = [
      { value: 'arbitrum', label: 'Arbitrum' },
      { value: 'avalanche', label: 'Avalanche' },
      { value: 'base', label: 'Base' },
      { value: 'ethereum', label: 'Ethereum' },
    ]

    return (
      <LegacyCombobox
        clearable
        disabled={false}
        placeholder="Select network..."
        size="default"
      >
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder="Select network..." />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {options.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              <Svg3DPerspectiveGrid />
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
}

export const OpenState: Story = {
  render: (args: LegacyComboboxStoryProps, context: any) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <LegacyCombobox {...args} {...openProp}>
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder={args.placeholder} />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {demoOptions.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
  args: {},
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    const comboboxValue = canvasElement.querySelector(
      '[data-slot="combobox-value"]',
    ) as HTMLElement

    // Step 1: Search for "Solana" (menu is already open via defaultOpen)
    const searchInput = await canvas.findByPlaceholderText('Search...')
    await userEvent.type(searchInput, 'Solana')

    // Step 2: Select Solana option (menu closes)
    const solanaOption = await canvas.findByRole('option', { name: /Solana/i })
    await userEvent.click(solanaOption)

    // Verify Solana is selected (displayed in combobox-value span)
    await waitFor(
      async () => {
        await expect(comboboxValue).toHaveTextContent('Solana')
      },
      { timeout: 3000 },
    )

    // Step 3: Click the clear icon (using fireEvent to bypass pointer-events check in test)
    const clearButton = canvasElement.querySelector(
      '[data-slot="combobox-clear"]',
    ) as HTMLElement
    await fireEvent.click(clearButton)

    // Step 4: Verify there is no value (placeholder is shown)
    await waitFor(
      async () => {
        await expect(comboboxValue).toHaveTextContent('Select network...')
      },
      { timeout: 3000 },
    )

    // Step 5: Leave open for visual regression
    await userEvent.click(comboboxValue)
    await userEvent.clear(searchInput)
  },
}

export const WithImages: Story = {
  render: (args: LegacyComboboxStoryProps, context: any) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    const optionsWithIcons = demoOptions
    return (
      <LegacyCombobox {...args} {...openProp}>
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder={args.placeholder} />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {optionsWithIcons.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              <img
                className="h-6 w-6"
                width="24"
                height="24"
                src={option.src}
              />
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
  args: {},
}

export const ClearButton: Story = {
  render: (args: LegacyComboboxStoryProps) => {
    const optionsWithIcons = demoOptions
    return (
      <div className="[&_[data-slot=combobox-clear]]:pointer-events-auto [&_[data-slot=combobox-clear]]:opacity-100">
        <LegacyCombobox {...args}>
          <LegacyComboboxTrigger className="w-56">
            <LegacyComboboxValue placeholder={args.placeholder} hideText />
          </LegacyComboboxTrigger>
          <LegacyComboboxContent>
            {optionsWithIcons.map((option) => (
              <OptionRow key={option.value} value={option.value}>
                <span className="flex items-center gap-2">
                  <img width="16" height="16" src={option.src} />
                  {option.label}
                </span>
              </OptionRow>
            ))}
          </LegacyComboboxContent>
        </LegacyCombobox>
      </div>
    )
  },
  args: { value: 'ethereum' },
}

export const Disabled: Story = {
  render: (args: LegacyComboboxStoryProps) => {
    return (
      <LegacyCombobox {...args}>
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder={args.placeholder} />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {demoOptions.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
  args: { disabled: true, defaultOpen: false },
}

export const NonClearable: Story = {
  render: (args: LegacyComboboxStoryProps) => {
    return (
      <LegacyCombobox {...args}>
        <LegacyComboboxTrigger className="w-56">
          <LegacyComboboxValue placeholder={args.placeholder} />
        </LegacyComboboxTrigger>
        <LegacyComboboxContent>
          {demoOptions.map((option) => (
            <OptionRow key={option.value} value={option.value}>
              {option.label}
            </OptionRow>
          ))}
        </LegacyComboboxContent>
      </LegacyCombobox>
    )
  },
  args: { clearable: false, value: 'ethereum' },
}