import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useRequireActivated } from '@/features/auth/guards'
import { SupportTicketList } from '@/features/support/SupportTicketList'

export const Route = createFileRoute('/support')({
  component: SupportPage,
  // Ссылка из Telegram-уведомления об изменении статуса тикета ведёт на этот же роут с
  // ?ticket=<id> — отдельного роута на конкретный тикет нет, он открывается диалогом поверх списка.
  validateSearch: (search: Record<string, unknown>): { ticket?: string } => ({
    ticket: typeof search.ticket === 'string' ? search.ticket : undefined,
  }),
})

function SupportPage() {
  const { t } = useTranslation()
  const { isReady } = useRequireActivated()

  if (!isReady) return null

  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-10">
      <h1 className="text-2xl font-semibold tracking-tight">{t('nav.support')}</h1>
      <SupportTicketList />
    </div>
  )
}