'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Loader2 } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { AdminQuestionnaireManager } from '@/components/admin-questionnaire-manager'
import { useAuth } from '@/contexts/auth-context'

export default function AdminQuestionnairesPage() {
  const router = useRouter()
  const { isAuthenticated, isLoading } = useAuth()

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.replace('/login?next=/admin/questionnaires')
    }
  }, [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="Admin Portal"
        title="Course Questionnaires"
        description="Create questionnaires for each training programme. Participants complete them on the course page and receive an automatic score."
      />

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