import { useMemo } from 'react'
import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '@/lib/utils'
import { motion } from 'framer-motion'

export interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
  text?: string
  textClassName?: string
  shimmer?: boolean
  shimmerDuration?: number
  shimmerSpread?: number
  /** 主库可注入 Lottie 等自定义动画；不传则用 CSS 三点脉动 */
  loader?: ReactNode
}

/** 默认：CSS 三点脉动，无 Lottie 依赖 */
function DefaultLoader() {
  return (
    <span className="relative block w-5 h-5 shrink-0 flex items-center justify-center" aria-hidden>
      <style>{`
        .thinking-dots span { animation: thinking-dot 1.4s ease-in-out infinite both; }
        .thinking-dots span:nth-child(1) { animation-delay: 0s; }
        .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
        .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes thinking-dot {
          0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
          40% { transform: scale(1); opacity: 1; }
        }
      `}</style>
      <span className="thinking-dots inline-flex gap-0.5">
        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
      </span>
    </span>
  )
}

export function ThinkingIndicator({
  text = 'Spark is Thinking...',
  textClassName,
  shimmer = true,
  shimmerDuration = 2,
  shimmerSpread = 2,
  className,
  loader,
  ...props
}: ThinkingIndicatorProps) {
  const dynamicSpread = useMemo(() => {
    const textToUse = text || ''
    return textToUse.length * shimmerSpread
  }, [text, shimmerSpread])

  const loaderContent = loader ?? <DefaultLoader />

  return (
    <div
      className={cn('inline-flex items-center gap-1.5 max-w-full', className)}
      {...props}
    >
      <span className="shrink-0 -translate-x-0.5" aria-hidden>
        {loaderContent}
      </span>
      <div className="flex-1 min-w-0 flex items-center">
        {shimmer ? (
          <motion.span
            className={cn(
              'text-sm leading-sm relative inline-block bg-clip-text text-transparent',
              'bg-[length:250%_100%,auto] bg-no-repeat truncate',
              textClassName
            )}
            style={{
              backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-secondary), var(--color-text-secondary))`,
            }}
            initial={{ backgroundPosition: '100% center' }}
            animate={{ backgroundPosition: '0% center' }}
            transition={{ repeat: Infinity, duration: shimmerDuration, ease: 'linear' }}
          >
            {text}
          </motion.span>
        ) : (
          <span className={cn('text-sm leading-sm text-text-secondary truncate', textClassName)}>
            {text}
          </span>
        )}
      </div>
    </div>
  )
}

ThinkingIndicator.displayName = 'ThinkingIndicator'