'use client'

import { useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { Loader2 } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { TrainerMaterialsManager } from '@/components/trainer-materials-manager'
import { useAuth } from '@/contexts/auth-context'
import { useRouter } from '@/i18n/navigation'

export default function ProfileMaterialsPage() {
  const router = useRouter()
  const t = useTranslations('auth.profile.materials')
  const { isAuthenticated, isLoading } = useAuth()

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.replace('/login?next=/profile/materials')
    }
  }, [isAuthenticated, isLoading, router])

  if (isLoading || !isAuthenticated) {
    return (
      <main className="flex min-h-[50vh] items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </main>
    )
  }

  return (
    <main>
      <PageHero
        eyebrow={t('eyebrow')}
        title={t('title')}
        description={t('description')}
      />

      <section className="section-padding">
        <div className="container-wide max-w-5xl">
          <TrainerMaterialsManager />
        </div>
      </section>
    </main>
  )
}