MOPC-App/src/app/(admin)/admin/programs/page.tsx

import { Suspense } from 'react'
import Link from 'next/link'
import type { Route } from 'next'
import { prisma } from '@/lib/prisma'

export const dynamic = 'force-dynamic'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Plus,
  MoreHorizontal,
  FolderKanban,
  Eye,
  Pencil,
  Wand2,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'

async function ProgramsContent() {
  const programs = await prisma.program.findMany({
    // Note: PROGRAM_ADMIN filtering should be handled via middleware or a separate relation
    include: {
      _count: {
        select: {
          rounds: true,
        },
      },
      rounds: {
        where: { status: 'ACTIVE' },
        select: { id: true },
      },
    },
    orderBy: { createdAt: 'desc' },
  })

  if (programs.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
          <p className="mt-2 font-medium">No programs yet</p>
          <p className="text-sm text-muted-foreground">
            Create your first program to start managing projects and rounds
          </p>
          <Button asChild className="mt-4">
            <Link href="/admin/programs/new">
              <Plus className="mr-2 h-4 w-4" />
              Create Program
            </Link>
          </Button>
        </CardContent>
      </Card>
    )
  }

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

  return (
    <>
      {/* Desktop table view */}
      <Card className="hidden md:block">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Program</TableHead>
              <TableHead>Year</TableHead>
              <TableHead>Rounds</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {programs.map((program) => (
              <TableRow key={program.id}>
                <TableCell>
                  <div>
                    <p className="font-medium">{program.name}</p>
                    {program.description && (
                      <p className="text-sm text-muted-foreground line-clamp-1">
                        {program.description}
                      </p>
                    )}
                  </div>
                </TableCell>
                <TableCell>{program.year}</TableCell>
                <TableCell>
                  <div>
                    <p>{program._count.rounds} total</p>
                    {program.rounds.length > 0 && (
                      <p className="text-sm text-muted-foreground">
                        {program.rounds.length} active
                      </p>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  <Badge variant={statusColors[program.status] || 'secondary'}>
                    {program.status}
                  </Badge>
                </TableCell>
                <TableCell>{formatDateOnly(program.createdAt)}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Actions</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem asChild>
                        <Link href={`/admin/programs/${program.id}`}>
                          <Eye className="mr-2 h-4 w-4" />
                          View Details
                        </Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem asChild>
                        <Link href={`/admin/programs/${program.id}/edit`}>
                          <Pencil className="mr-2 h-4 w-4" />
                          Edit
                        </Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem asChild>
                        <Link href={`/admin/programs/${program.id}/apply-settings` as Route}>
                          <Wand2 className="mr-2 h-4 w-4" />
                          Apply Settings
                        </Link>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

      {/* Mobile card view */}
      <div className="space-y-4 md:hidden">
        {programs.map((program) => (
          <Card key={program.id}>
            <CardHeader className="pb-3">
              <div className="flex items-start justify-between">
                <div className="space-y-1">
                  <CardTitle className="text-base">{program.name}</CardTitle>
                  <CardDescription>{program.year}</CardDescription>
                </div>
                <Badge variant={statusColors[program.status] || 'secondary'}>
                  {program.status}
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Rounds</span>
                <span>
                  {program._count.rounds} ({program.rounds.length} active)
                </span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Created</span>
                <span>{formatDateOnly(program.createdAt)}</span>
              </div>
              <div className="flex gap-2 pt-2">
                <Button variant="outline" size="sm" className="flex-1" asChild>
                  <Link href={`/admin/programs/${program.id}`}>
                    <Eye className="mr-2 h-4 w-4" />
                    View
                  </Link>
                </Button>
                <Button variant="outline" size="sm" className="flex-1" asChild>
                  <Link href={`/admin/programs/${program.id}/edit`}>
                    <Pencil className="mr-2 h-4 w-4" />
                    Edit
                  </Link>
                </Button>
                <Button variant="outline" size="sm" className="flex-1" asChild>
                  <Link href={`/admin/programs/${program.id}/apply-settings` as Route}>
                    <Wand2 className="mr-2 h-4 w-4" />
                    Apply
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </>
  )
}

function ProgramsSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="space-y-4">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="flex items-center justify-between">
              <div className="space-y-2">
                <Skeleton className="h-5 w-48" />
                <Skeleton className="h-4 w-32" />
              </div>
              <Skeleton className="h-9 w-9" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

export default function ProgramsPage() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Programs</h1>
          <p className="text-muted-foreground">
            Manage your ocean protection programs
          </p>
        </div>
        <Button asChild>
          <Link href="/admin/programs/new">
            <Plus className="mr-2 h-4 w-4" />
            New Program
          </Link>
        </Button>
      </div>

      {/* Content */}
      <Suspense fallback={<ProgramsSkeleton />}>
        <ProgramsContent />
      </Suspense>
    </div>
  )
}