'use client'

import type { ButtonSize } from '@/components/ui/button/config'
import type { LinkField } from '@/payload-types'
import type { ComponentProps, MouseEvent } from 'react'

import { Button } from '@/components/ui/button'
import { isExternalLink, parseLink } from '@/payload/fields/link/parse-link'
import NextLink from 'next/link'

export type LinkFieldProps = LinkField

type BaseProps = Omit<ComponentProps<typeof NextLink>, 'href'> & {
  size?: ButtonSize
}

type InternalLinkProps = BaseProps & {
  href: string | URL
  linkFieldProps?: undefined
}

type PayloadCMSLinkProps = BaseProps & {
  linkFieldProps: LinkFieldProps
  href?: string | URL
}

export type CMSLinkProps = InternalLinkProps | PayloadCMSLinkProps

const getLinkProps = (props: CMSLinkProps) => {
  const { linkFieldProps, children: incomingChildren, size = 'default', className, onNavigate: incomingOnNavigate, ...rest } = props
  const newTab = linkFieldProps?.newTab || false
  const doc = typeof linkFieldProps?.doc?.value !== 'string' ? linkFieldProps?.doc?.value ?? null : null
  const children = incomingChildren || linkFieldProps?.text || doc?.title
  const prefetch = linkFieldProps?.linkType === 'custom' && linkFieldProps.url?.startsWith('/') ? false : true

  const { url: href, isExternal } = linkFieldProps
    ? parseLink(linkFieldProps)
    : {
        url: (typeof props.href === 'string' ? props.href : String(props.href) || '#') as string,
        isExternal: isExternalLink(props.href as string)
      }
  const rel = isExternal ? 'noopener noreferrer' : undefined
  const target = newTab ? '_blank' : undefined

  const onNavigate = async (e: MouseEvent<HTMLAnchorElement>) => {
    if (typeof incomingOnNavigate === 'function') incomingOnNavigate(e)
    if (linkFieldProps?.linkType !== 'custom') return;
      /**
       * Custom links can go anywhere (e.g. /redirect-this).
       * So we need to skip default Next.js fetch behaviour
       * as cross-domain redirects will cause console.error.
       */
      e.preventDefault()
      window.location.href = href
      return
  }

  return {
    isExternal,
    prefetch,
    children,
    onNavigate,
    className,
    rel,
    target,
    size,
    ...rest,
    href
  }
}

export function Link(props: CMSLinkProps) {
  const { linkFieldProps } = props
  const appearance = linkFieldProps?.appearance || 'link'
  const { isExternal, children, className, prefetch, size, onNavigate, ...rest } = getLinkProps(props)

  if (!rest.href) return <span className={className}>{children}</span>
  if (isExternal || prefetch === false || rest.href === '#') {
    return (
      <a {...rest} className={className}>
        {children}
      </a>
    )
  }

  if (appearance === 'link' || !linkFieldProps) {
    return (
      <NextLink {...rest} onClick={onNavigate} className={className}>
        {children}
      </NextLink>
    )
  }

  // Exclude potential `as` alias from Next.js `Link` props to prevent clash with Button’s polymorphic `as` prop
  const { as: _nextAlias, ...buttonRest } = rest

  return (
    <Button as={NextLink} {...buttonRest} onClick={onNavigate} variant={appearance} size={size} className={className}>
      {children}
    </Button>
  )
}

export default Link