import { useRef, useEffect, useState, useCallback } from 'react'

type Status = 'submitted' | 'streaming' | 'ready' | 'error'

interface UseMessagesOptions {
  status: Status
}

export function useMessages({ status }: UseMessagesOptions) {
  const [hasSentMessage, setHasSentMessage] = useState(false)
  const [isAtBottom, setIsAtBottom] = useState(true)
  
  const messagesContainerRef = useRef<HTMLDivElement>(null)
  const messagesEndRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (status === 'submitted' || status === 'streaming') {
      setHasSentMessage(true)
    }
  }, [status])

  useEffect(() => {
    const container = messagesContainerRef.current
    if (!container) return

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = container
      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
      setIsAtBottom(distanceFromBottom <= 100)
    }

    handleScroll()
    container.addEventListener('scroll', handleScroll)
    return () => container.removeEventListener('scroll', handleScroll)
  }, [])

  const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
    messagesEndRef.current?.scrollIntoView({ behavior })
  }, [])

  useEffect(() => {
    if (status === 'ready' || status === 'submitted') {
      scrollToBottom('auto')
    }
  }, [status, scrollToBottom])

  return {
    containerRef: messagesContainerRef,
    endRef: messagesEndRef,
    isAtBottom,
    scrollToBottom,
    hasSentMessage,
  }
}