import { useNavigate, useSearchParams, Navigate } from 'react-router'
import { List } from 'lucide-react'
import { cn, interactive } from '@/lib'
import { MainLayout, MainHeaderBar } from '@/layouts'
import { ChatContainer, ItemSection, RemainingTime } from '@/features/chat'
import { SidebarFooter } from '@/features/auth'

export function ChatPage() {
  const [searchParams] = useSearchParams()
  const sessionId = searchParams.get('session_id') ?? ''

  // session_id 없이 진입하면 목록으로 되돌린다.
  if (!sessionId) return <Navigate to="/list" replace />

  return (
    <MainLayout
      sidebarWidth="chat"
      scrollX
      logoAction={<ListNavButton />}
      sidebar={<Sidebar />}
      header={
        <MainHeaderBar className="px-[140px]">
          <RemainingTime />
        </MainHeaderBar>
      }
    >
      <ChatContainer sessionId={sessionId} />
    </MainLayout>
  )
}

function ListNavButton() {
  const navigate = useNavigate()
  return (
    <button
      type="button"
      aria-label="목록으로 이동"
      onClick={() => navigate('/list')}
      className={cn('text-foreground', interactive)}
    >
      <List size={24} />
    </button>
  )
}

function Sidebar() {
  return (
    <>
      <ItemSection />
      <SidebarFooter />
    </>
  )
}

export default ChatPage