import type { Meta, StoryObj } from '@storybook/react'
import { TextLink, TextLinkArrow } from './TextLink'

/** Mock Next.js Link for illustrative purposes */
const NextLink = ({
  children,
  className,
  ...props
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
  <a className={className} {...props}>
    {children}
  </a>
)

const meta = {
  title: 'Navigation/TextLink',
  component: TextLink,
  argTypes: {
    href: {
      description: 'The URL the link points to.',
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
    arrow: {
      description: 'Adds an arrow icon to the link.',
      control: { type: 'select' },
      options: [undefined, 'left', 'right', 'external'],
      table: {
        type: { summary: "'left' | 'right' | 'external'" },
        defaultValue: { summary: 'undefined' },
      },
    },
    external: {
      description:
        'When true, adds rel="noopener noreferrer" for security. Use for links to external sites.',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    newTab: {
      description: 'When true, opens the link in a new tab (target="_blank").',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    asChild: {
      description:
        'When true, uses Radix Slot to merge props with child element. Mutually exclusive with renderLink.',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    children: {
      description: 'The content of the link.',
      control: 'text',
      table: {
        type: { summary: 'React.ReactNode' },
      },
    },
  },
  args: {
    href: '/example',
    children: 'Click me',
    arrow: undefined,
    external: false,
    newTab: false,
  },
} satisfies Meta<typeof TextLink>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => <TextLink href="/dashboard">Dashboard</TextLink>,
}

export const WithArrow: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Shows the built-in arrow variants for backward navigation, forward navigation, and external destinations.',
      },
    },
  },
  render: (_args) => (
    <div className="flex flex-col gap-4">
      <TextLink href="/back" arrow="left">
        Left arrow
      </TextLink>
      <TextLink href="/next" arrow="right">
        Right arrow
      </TextLink>
      <TextLink href="https://chain.link" arrow="external" external newTab>
        External arrow
      </TextLink>
    </div>
  ),
}

export const ExternalWithArrow: Story = {
  render: (_args) => (
    <TextLink href="https://chain.link" arrow="external" external newTab>
      Chainlink
    </TextLink>
  ),
}

export const WithAsChild: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Use `asChild` to preserve TextLink styling and arrow behavior while delegating the underlying anchor element to another router link component.',
      },
    },
  },
  render: (_args) => (
    <div className="flex flex-col gap-4">
      <TextLink href="/path" arrow="right" asChild>
        <NextLink href="/path">Internal link with Right Arrow</NextLink>
      </TextLink>
    </div>
  ),
}

export const WithCustomArrowColor: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Use `TextLinkArrow` when the arrow needs different styling from the surrounding link text.',
      },
    },
  },
  render: (args) => (
    <TextLink {...args}>
      Visit Chainlink
      <TextLinkArrow arrow="external" className="text-muted-foreground" />
    </TextLink>
  ),
}

export const WithCustomColor: Story = {
  render: (_args) => (
    <TextLink
      className="text-muted-foreground"
      href="https://chain.link"
      external
      newTab
    >
      Visit Chainlink
      <TextLinkArrow arrow="right" />
    </TextLink>
  ),
  args: {
    href: 'https://chain.link',
    children: 'Visit Chainlink',
    external: true,
    newTab: true,
    arrow: undefined,
  },
}

export const WithRenderLink: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Use `renderLink` when a routing library needs to own the rendered anchor element without switching to `asChild` composition.',
      },
    },
  },
  render: (_args) => (
    <>
      <div className="flex flex-col gap-4">
        <TextLink
          href="/dashboard"
          arrow="right"
          renderLink={(props) => <NextLink {...props} />}
        >
          Dashboard with renderLink
        </TextLink>
      </div>
      <div className="flex flex-col gap-4">
        <TextLink
          href="/dashboard"
          arrow="external"
          className="text-muted-foreground"
          renderLink={(props) => <a {...props} />}
        >
          Dashboard with renderLink
        </TextLink>
      </div>
    </>
  ),
}