import type { ReactNode } from 'react'
import { Fragment } from 'react'
import { cn } from '@/lib/utils'
import { Tooltip } from '../basic/tooltip'
import { Chat3Line } from '../basic/icons-inline'

const iconClass = 'w-3.5 h-3.5 shrink-0 text-text-tertiary'

export interface RelatedPromptItem {
  text: string
  prompt: string
  icon?: ReactNode
}

export interface RelatedPromptsProps {
  items: RelatedPromptItem[]
  onSelect?: (item: RelatedPromptItem) => void
  singleLineText?: boolean
  className?: string
  /** 主库可注入 useIcon('chat3')；不传则用 Chat3Line */
  defaultIcon?: ReactNode
}

export function RelatedPrompts({
  items,
  onSelect,
  singleLineText = false,
  className,
  defaultIcon,
}: RelatedPromptsProps) {
  const list = items.slice(0, 3)
  const icon = defaultIcon ?? <Chat3Line className={iconClass} />

  if (list.length === 0) return null

  return (
    <div
      className={cn(
        'flex flex-col gap-3 w-full min-w-0',
        !singleLineText && 'max-w-lg',
        className
      )}
      role="list"
      aria-label="Related prompt suggestions"
    >
      {list.map((item, index) => {
        const itemIcon = item.icon ?? icon

        const itemContent = (
          <button
            type="button"
            onClick={() => onSelect?.(item)}
            className={cn(
              'flex items-center gap-2 w-full min-w-0 text-left',
              'rounded-md px-0 py-0 min-h-0',
              'text-xs leading-xs font-normal text-text-tertiary',
              'transition-colors',
              onSelect && 'cursor-pointer hover:text-text',
              !onSelect && 'cursor-default'
            )}
            role="listitem"
          >
            <span className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
              {itemIcon}
            </span>
            <span
              className={cn(
                'min-w-0 flex-1',
                singleLineText ? 'truncate' : 'line-clamp-2'
              )}
            >
              {item.text}
            </span>
          </button>
        )

        if (singleLineText) {
          return (
            <Tooltip key={`${item.prompt}-${index}`} content={item.text} side="top">
              {itemContent}
            </Tooltip>
          )
        }

        return <Fragment key={`${item.prompt}-${index}`}>{itemContent}</Fragment>
      })}
    </div>
  )
}

RelatedPrompts.displayName = 'RelatedPrompts'
export const PromptSuggestions = RelatedPrompts
export type PromptSuggestionsProps = RelatedPromptsProps