import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '@/lib/utils'

// --- List ---

export interface ListProps extends HTMLAttributes<HTMLUListElement> {}

export const List = forwardRef<HTMLUListElement, ListProps>(
  ({ className, children, ...props }, ref) => (
    <ul
      ref={ref}
      role="list"
      className={cn('flex flex-col bg-surface', className)}
      {...props}
    >
      {children}
    </ul>
  ),
)
List.displayName = 'List'

// --- ListItem ---

export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
  icon?: ReactNode
  active?: boolean
  disabled?: boolean
  href?: string
}

export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
  ({ icon, active = false, disabled = false, href, className, children, ...props }, ref) => {
    const styles = cn(
      'flex min-h-12 items-center gap-4 px-4 py-2 transition-colors',
      active
        ? 'bg-info/12 text-info'
        : 'text-text hover:bg-text/[0.04]',
      disabled && 'pointer-events-none opacity-55',
      className,
    )

    const content = (
      <>
        {icon && (
          <span className={cn('size-6 shrink-0 [&>svg]:size-full', active ? 'text-info' : 'text-text-secondary')}>
            {icon}
          </span>
        )}
        <span className="flex-1 text-body">{children}</span>
      </>
    )

    if (href) {
      return (
        <li ref={ref} {...props}>
          <a href={href} className={styles}>{content}</a>
        </li>
      )
    }

    return (
      <li ref={ref} role="listitem" className={styles} {...props}>
        {content}
      </li>
    )
  },
)
ListItem.displayName = 'ListItem'

// --- ListSubheader ---

export interface ListSubheaderProps extends HTMLAttributes<HTMLLIElement> {}

export const ListSubheader = forwardRef<HTMLLIElement, ListSubheaderProps>(
  ({ className, children, ...props }, ref) => (
    <li
      ref={ref}
      className={cn('flex min-h-10 items-center px-4 text-small font-semibold text-text-secondary', className)}
      {...props}
    >
      {children}
    </li>
  ),
)
ListSubheader.displayName = 'ListSubheader'

// --- ListDivider ---

export interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {}

export const ListDivider = forwardRef<HTMLLIElement, ListDividerProps>(
  ({ className, ...props }, ref) => (
    <li ref={ref} role="separator" className={cn('border-t border-border', className)} {...props} />
  ),
)
ListDivider.displayName = 'ListDivider'