MOPC-Portal/src/app/(admin)/admin/programs/[id]/page.tsx

import { notFound } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { api } from '@/lib/trpc/server'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { ArrowLeft, Pencil, Plus } from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'

interface ProgramDetailPageProps {
  params: Promise<{ id: string }>
}

const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive'> = {
  DRAFT: 'secondary',
  ACTIVE: 'default',
  CLOSED: 'success',
  ARCHIVED: 'secondary',
}

export default async function ProgramDetailPage({ params }: ProgramDetailPageProps) {
  const { id } = await params
  const caller = await api()

  let program
  try {
    program = await caller.program.get({ id })
  } catch {
    notFound()
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/admin/programs">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-2xl font-bold">{program.name}</h1>
              <Badge variant={statusColors[program.status] || 'secondary'}>
                {program.status}
              </Badge>
            </div>
            <p className="text-muted-foreground">
              {program.year} Edition
            </p>
          </div>
        </div>
        <Button variant="outline" asChild>
          <Link href={`/admin/programs/${id}/edit`}>
            <Pencil className="mr-2 h-4 w-4" />
            Edit
          </Link>
        </Button>
      </div>

      {program.description && (
        <Card>
          <CardHeader>
            <CardTitle>Description</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground">{program.description}</p>
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Rounds</CardTitle>
            <CardDescription>
              Competition rounds for this program
            </CardDescription>
          </div>
          <Button asChild>
            <Link href={`/admin/competitions?programId=${id}` as Route}>
              <Plus className="mr-2 h-4 w-4" />
              Manage Competitions
            </Link>
          </Button>
        </CardHeader>
        <CardContent>
          {(program.stages as Array<{ id: string; name: string; status: string; _count: { projects: number; assignments: number }; createdAt?: Date }>).length === 0 ? (
            <div className="py-8 text-center text-muted-foreground">
              No rounds created yet. Set up a competition to get started.
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Round</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Projects</TableHead>
                  <TableHead>Assignments</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {(program.stages as Array<{ id: string; name: string; status: string; _count: { projects: number; assignments: number } }>).map((stage) => (
                  <TableRow key={stage.id}>
                    <TableCell>
                      <span className="font-medium">
                        {stage.name}
                      </span>
                    </TableCell>
                    <TableCell>
                      <Badge variant={statusColors[stage.status] || 'secondary'}>
                        {stage.status}
                      </Badge>
                    </TableCell>
                    <TableCell>{stage._count.projects}</TableCell>
                    <TableCell>{stage._count.assignments}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}