MOPC-App/src/app/(public)/apply/[slug]/page.tsx

'use client'

import { useParams, useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { ApplyWizardDynamic } from '@/components/forms/apply-wizard-dynamic'
import { Loader2, AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DEFAULT_WIZARD_CONFIG } from '@/types/wizard-config'
import { toast } from 'sonner'

export default function StageApplyPage() {
  const params = useParams()
  const router = useRouter()
  const slug = params.slug as string

  const { data: config, isLoading, error } = trpc.application.getConfig.useQuery(
    { slug, mode: 'stage' },
    { retry: false }
  )

  const submitMutation = trpc.application.submit.useMutation({
    onError: (error) => toast.error(error.message),
  })

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

  if (error || !config || config.mode !== 'stage') {
    return (
      <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background to-muted/30">
        <div className="text-center">
          <AlertCircle className="mx-auto h-16 w-16 text-destructive mb-4" />
          <h1 className="text-2xl font-bold mb-2">Application Not Available</h1>
          <p className="text-muted-foreground mb-6">{error?.message ?? 'Not found'}</p>
          <Button variant="outline" onClick={() => router.push('/')}>Return Home</Button>
        </div>
      </div>
    )
  }

  return (
    <ApplyWizardDynamic
      mode="stage"
      config={config.wizardConfig ?? DEFAULT_WIZARD_CONFIG}
      programName={config.program.name}
      programYear={config.program.year}
      stageId={config.stage.id}
      isOpen={config.stage.isOpen}
      submissionDeadline={config.stage.submissionEndDate}
      onSubmit={async (data) => {
        await submitMutation.mutateAsync({
          mode: 'stage',
          stageId: config.stage.id,
          data: data as any,
        })
      }}
      isSubmitting={submitMutation.isPending}
    />
  )
}