import { Loader2 } from 'lucide-react'
import { ErrorPage } from '@/components'
import { useChatController } from '@/features/chat/hooks/useChatController'
import { ChatSection } from '@/features/chat/components/ChatSection'
import { MenuSection } from '@/features/chat/components/menu/MenuSection'

// 콘텐츠 영역: 채팅 + 우측 메뉴. session_id 로 init/messages 를 적재하고 전송을 주입한다.
// 진입 로드(init/messages) 상태를 직접 그린다: 로딩 → 스피너, 실패(서버/네트워크) → ErrorPage(재시도).
export function ChatContainer({ sessionId }: { sessionId: string }) {
  const { isInitLoading, initError, refetchInit } = useChatController(sessionId)

  if (isInitLoading) {
    return (
      <div className="flex flex-1 items-center justify-center w-full">
        <Loader2 className="size-10 animate-spin text-neutral-50" aria-label="불러오는 중" />
      </div>
    )
  }

  if (initError) {
    return (
      <div className="flex flex-1 w-full">
        <ErrorPage message="채팅을 불러오는 중 오류가 발생했습니다." onRetry={refetchInit} />
      </div>
    )
  }

  return (
    <div className="flex flex-1 min-h-0 w-full">
      <ChatSection />
      <MenuSection />
    </div>
  )
}