'use client'

import type { ReactNode } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import useDocumentTitle from '@/hooks/use-document-title'
import { usePathname, useRouter } from '@/next/navigation'
import { consoleQuery } from '@/service/client'

type AgentDetailLayoutProps = {
  agentId: string
  children: ReactNode
}

const isNotFoundResponse = (error: unknown) => error instanceof Response && error.status === 404

export function AgentDetailLayout({ agentId, children }: AgentDetailLayoutProps) {
  const { t } = useTranslation('agentV2')
  const pathname = usePathname()
  const router = useRouter()
  const agentQuery = useQuery(
    consoleQuery.agent.byAgentId.get.queryOptions({
      input: {
        params: {
          agent_id: agentId,
        },
      },
    }),
  )
  const shouldRedirectToRoster = isNotFoundResponse(agentQuery.error)
  const section = pathname.endsWith('/access')
    ? 'access'
    : pathname.endsWith('/logs')
      ? 'logs'
      : pathname.endsWith('/monitoring')
        ? 'monitoring'
        : 'configure'
  const sectionTitle = t(($) => $[`agentDetail.sections.${section}`])
  const agentTitle = agentQuery.data?.name ?? t(($) => $['agentDetail.documentTitle'])

  useDocumentTitle(`${sectionTitle} · ${agentTitle}`)

  useEffect(() => {
    if (shouldRedirectToRoster) router.replace('/agents')
  }, [router, shouldRedirectToRoster])

  if (shouldRedirectToRoster) return null

  return (
    <div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
      <div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
    </div>
  )
}