import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useRequireAuth } from '@/features/auth/guards'
import { AppsCatalog } from '@/features/apps/AppsCatalog'

export const Route = createFileRoute('/instructions')({ component: InstructionsPage })

function InstructionsPage() {
  const { t } = useTranslation()
  const { isReady } = useRequireAuth()

  if (!isReady) return null

  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-6 py-10">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">{t('instructions.title')}</h1>
        <p className="mt-1 text-sm text-muted-foreground">{t('instructions.intro')}</p>
      </div>

      <ol className="flex flex-col gap-2 text-sm">
        <li>1. {t('instructions.step1')}</li>
        <li>2. {t('instructions.step2')}</li>
        <li>3. {t('instructions.step3')}</li>
      </ol>

      <div>
        <h2 className="mb-3 text-lg font-semibold tracking-tight">{t('instructions.appsTitle')}</h2>
        <AppsCatalog />
      </div>
    </div>
  )
}