'use client'

import { Slot } from '@radix-ui/react-slot'
import type * as React from 'react'
import { useActiveNavigation } from '../../hooks'
import { NavTabs, NavTabsList, NavTabsTrigger } from './NavTabs'

export type NavigationLink = {
  href: string
  name: string
}

type SimpleRenderLink = (args: {
  href: string
  children: React.ReactNode
}) => React.ReactElement

export type HeaderNavTabsProps = {
  /**
   * Current pathname (e.g., from useRouter().asPath or useLocation().pathname)
   */
  path?: string
  /**
   * Array of navigation links
   */
  links: NavigationLink[]
  /**
   * Custom link component renderer. Defaults to a regular anchor tag.
   * Only needs href and children - props are automatically merged by Slot.
   */
  renderLink?: SimpleRenderLink
  /**
   * Additional className for the NavTabs root
   */
  className?: string
  /**
   * Offset for the indicator in pixels. Defaults to 34.
   */
  indicatorOffset?: number
}

/**
 * A composed navigation tabs component that automatically handles path-to-tab mapping
 * and renders links using the provided renderLink function.
 *
 * @example
 * ```tsx
 * // Next.js usage
 * const router = useRouter()
 *
 * <HeaderNavTabs
 *   path={router.asPath}
 *   links={[
 *     { href: '/', name: 'Home' },
 *     { href: '/feeds', name: 'Feeds' },
 *     { href: '/streams', name: 'Streams' }
 *   ]}
 *   renderLink={({ href, children, ...props }) => (
 *     <Link href={href} {...props}>{children}</Link>
 *   )}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // React Router usage
 * const location = useLocation()
 *
 * <HeaderNavTabs
 *   path={location.pathname}
 *   links={[
 *     { href: '/', name: 'Home' },
 *     { href: '/feeds', name: 'Feeds' }
 *   ]}
 *   renderLink={({ href, children, ...props }) => (
 *     <NavLink to={href} {...props}>{children}</NavLink>
 *   )}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Default anchor tag usage
 * <HeaderNavTabs
 *   path="/feeds"
 *   links={[
 *     { href: '/', name: 'Home' },
 *     { href: '/feeds', name: 'Feeds' }
 *   ]}
 * />
 * ```
 */
type HeaderNavTabsPropsWithRef = HeaderNavTabsProps & {
  ref?: React.Ref<React.ElementRef<typeof NavTabs>>
}

export const HeaderNavTabs = ({
  path,
  links,
  renderLink,
  className,
  indicatorOffset = 35,
  ref,
  ...props
}: HeaderNavTabsPropsWithRef) => {
  const { activeItem, setActiveItem } = useActiveNavigation(path, links)

  const DefaultLink: SimpleRenderLink = ({ href, children }) => (
    <a href={href}>{children}</a>
  )
  const LinkComponent = renderLink ?? DefaultLink
  return (
    <NavTabs
      ref={ref}
      value={activeItem}
      onValueChange={setActiveItem}
      className={className}
      {...props}
    >
      <NavTabsList indicatorOffset={indicatorOffset}>
        {links.map((link) => {
          const linkEl = LinkComponent({
            href: link.href,
            children: link.name,
          })
          return (
            <NavTabsTrigger key={link.href} value={link.href} asChild>
              <Slot>{linkEl}</Slot>
            </NavTabsTrigger>
          )
        })}
      </NavTabsList>
    </NavTabs>
  )
}

HeaderNavTabs.displayName = 'HeaderNavTabs'