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

import { redirect } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { prisma } from '@/lib/prisma'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/shared/logo'
import { FileText, Calendar, ArrowRight, ExternalLink } from 'lucide-react'

export const dynamic = 'force-dynamic'

export default async function ApplyLandingPage() {
  // Get all published, public application forms
  const forms = await prisma.applicationForm.findMany({
    where: {
      status: 'PUBLISHED',
      isPublic: true,
      OR: [
        { opensAt: null },
        { opensAt: { lte: new Date() } },
      ],
      AND: [
        {
          OR: [
            { closesAt: null },
            { closesAt: { gte: new Date() } },
          ],
        },
      ],
    },
    orderBy: { createdAt: 'desc' },
    select: {
      id: true,
      name: true,
      description: true,
      publicSlug: true,
      opensAt: true,
      closesAt: true,
      steps: {
        select: { id: true },
      },
    },
  })

  // If exactly one form is available, redirect to it
  if (forms.length === 1 && forms[0].publicSlug) {
    const form = forms[0]
    const hasSteps = form.steps && form.steps.length > 0
    const url = hasSteps
      ? `/apply/${form.publicSlug}/wizard`
      : `/apply/${form.publicSlug}`
    redirect(url as Route)
  }

  // If no forms are available, show a message
  if (forms.length === 0) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-slate-900">
        <div className="container max-w-2xl py-16">
          <div className="text-center mb-12">
            <Logo variant="long" />
          </div>

          <Card>
            <CardContent className="flex flex-col items-center justify-center py-16">
              <FileText className="h-16 w-16 text-muted-foreground/30 mb-6" />
              <h1 className="text-2xl font-semibold mb-3">Applications Not Open</h1>
              <p className="text-muted-foreground text-center max-w-md">
                There are currently no open applications. Please check back later
                or visit our website for more information.
              </p>
              <Button asChild className="mt-8">
                <a href="https://monaco-opc.com" target="_blank" rel="noopener noreferrer">
                  Visit Website
                  <ExternalLink className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

  // Multiple forms available - show selection
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-slate-900">
      <div className="container max-w-4xl py-16">
        <div className="text-center mb-12">
          <Logo variant="long" />
          <h1 className="text-3xl font-bold mt-8 mb-3">Apply Now</h1>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            Select an application form below to get started.
          </p>
        </div>

        <div className="grid gap-6">
          {forms.map((form) => {
            const hasSteps = form.steps && form.steps.length > 0
            const url = hasSteps
              ? `/apply/${form.publicSlug}/wizard`
              : `/apply/${form.publicSlug}`

            return (
              <Card key={form.id} className="overflow-hidden hover:shadow-lg transition-shadow">
                <Link href={url as Route} className="block">
                  <div className="flex items-stretch">
                    <div className="flex-1 p-6">
                      <CardHeader className="p-0 pb-2">
                        <CardTitle className="flex items-center gap-2">
                          <FileText className="h-5 w-5 text-primary" />
                          {form.name}
                        </CardTitle>
                        {form.description && (
                          <CardDescription className="line-clamp-2">
                            {form.description}
                          </CardDescription>
                        )}
                      </CardHeader>

                      {(form.opensAt || form.closesAt) && (
                        <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
                          <Calendar className="h-4 w-4" />
                          {form.closesAt && (
                            <span>
                              Closes: {new Date(form.closesAt).toLocaleDateString('en-US', {
                                month: 'long',
                                day: 'numeric',
                                year: 'numeric',
                              })}
                            </span>
                          )}
                        </div>
                      )}
                    </div>

                    <div className="flex items-center px-6 bg-muted/30 border-l">
                      <Button variant="ghost" size="icon" className="rounded-full">
                        <ArrowRight className="h-5 w-5" />
                      </Button>
                    </div>
                  </div>
                </Link>
              </Card>
            )
          })}
        </div>

        <div className="text-center mt-12">
          <p className="text-sm text-muted-foreground">
            Having trouble? Contact us at{' '}
            <a href="mailto:support@monaco-opc.com" className="text-primary hover:underline">
              support@monaco-opc.com
            </a>
          </p>
        </div>
      </div>
    </div>
  )
}