MOPC-App/src/app/(observer)/observer/page.tsx

import type { Metadata } from 'next'
import { Suspense } from 'react'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'

export const metadata: Metadata = { title: 'Observer Dashboard' }
export const dynamic = 'force-dynamic'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import {
  FolderKanban,
  ClipboardList,
  Users,
  CheckCircle2,
  Eye,
  BarChart3,
} from 'lucide-react'
import { cn, formatDateOnly } from '@/lib/utils'

async function ObserverDashboardContent() {
  const [
    programCount,
    activeRoundCount,
    projectCount,
    jurorCount,
    evaluationStats,
    recentRounds,
    evaluationScores,
  ] = await Promise.all([
    prisma.program.count(),
    prisma.round.count({ where: { status: 'ACTIVE' } }),
    prisma.project.count(),
    prisma.user.count({ where: { role: 'JURY_MEMBER', status: 'ACTIVE' } }),
    prisma.evaluation.groupBy({
      by: ['status'],
      _count: true,
    }),
    prisma.round.findMany({
      orderBy: { createdAt: 'desc' },
      take: 5,
      include: {
        program: { select: { name: true, year: true } },
        _count: {
          select: {
            projects: true,
            assignments: true,
          },
        },
        assignments: {
          select: {
            evaluation: { select: { status: true } },
          },
        },
      },
    }),
    prisma.evaluation.findMany({
      where: { status: 'SUBMITTED', globalScore: { not: null } },
      select: { globalScore: true },
    }),
  ])

  const submittedCount =
    evaluationStats.find((e) => e.status === 'SUBMITTED')?._count || 0
  const draftCount =
    evaluationStats.find((e) => e.status === 'DRAFT')?._count || 0
  const totalEvaluations = submittedCount + draftCount
  const completionRate =
    totalEvaluations > 0 ? (submittedCount / totalEvaluations) * 100 : 0

  // Score distribution computation
  const scores = evaluationScores.map(e => e.globalScore!).filter(s => s != null)
  const buckets = [
    { label: '9-10', min: 9, max: 10, color: 'bg-green-500' },
    { label: '7-8', min: 7, max: 8.99, color: 'bg-emerald-400' },
    { label: '5-6', min: 5, max: 6.99, color: 'bg-amber-400' },
    { label: '3-4', min: 3, max: 4.99, color: 'bg-orange-400' },
    { label: '1-2', min: 1, max: 2.99, color: 'bg-red-400' },
  ]
  const maxCount = Math.max(...buckets.map(b => scores.filter(s => s >= b.min && s <= b.max).length), 1)
  const scoreDistribution = buckets.map(b => {
    const count = scores.filter(s => s >= b.min && s <= b.max).length
    return { ...b, count, percentage: (count / maxCount) * 100 }
  })

  return (
    <>
      {/* Observer Notice */}
      <div className="rounded-lg border-2 border-blue-300 bg-blue-50 px-4 py-3">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
            <Eye className="h-4 w-4 text-blue-600" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <p className="font-semibold text-blue-900">Observer Mode</p>
              <Badge variant="outline" className="border-blue-300 text-blue-700 text-xs">
                Read-Only
              </Badge>
            </div>
            <p className="text-sm text-blue-700">
              You have read-only access to view platform statistics and reports.
            </p>
          </div>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="transition-all hover:shadow-md">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Programs</CardTitle>
            <FolderKanban className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{programCount}</div>
            <p className="text-xs text-muted-foreground">
              {activeRoundCount} active round{activeRoundCount !== 1 ? 's' : ''}
            </p>
          </CardContent>
        </Card>

        <Card className="transition-all hover:shadow-md">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Projects</CardTitle>
            <ClipboardList className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{projectCount}</div>
            <p className="text-xs text-muted-foreground">Across all rounds</p>
          </CardContent>
        </Card>

        <Card className="transition-all hover:shadow-md">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{jurorCount}</div>
            <p className="text-xs text-muted-foreground">Active members</p>
          </CardContent>
        </Card>

        <Card className="transition-all hover:shadow-md">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{submittedCount}</div>
            <div className="mt-2">
              <Progress value={completionRate} className="h-2" />
              <p className="mt-1 text-xs text-muted-foreground">
                {completionRate.toFixed(0)}% completion rate
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Recent Rounds */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Rounds</CardTitle>
          <CardDescription>Overview of the latest voting rounds</CardDescription>
        </CardHeader>
        <CardContent>
          {recentRounds.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">
                No rounds created yet
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {recentRounds.map((round) => (
                <div
                  key={round.id}
                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
                >
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <p className="font-medium">{round.name}</p>
                      <Badge
                        variant={
                          round.status === 'ACTIVE'
                            ? 'default'
                            : round.status === 'CLOSED'
                              ? 'secondary'
                              : 'outline'
                        }
                      >
                        {round.status}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {round.program.year} Edition
                    </p>
                  </div>
                  <div className="text-right text-sm">
                    <p>{round._count.projects} projects</p>
                    <p className="text-muted-foreground">
                      {round._count.assignments} assignments
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Score Distribution */}
      <Card>
        <CardHeader>
          <CardTitle>Score Distribution</CardTitle>
          <CardDescription>Distribution of global scores across all evaluations</CardDescription>
        </CardHeader>
        <CardContent>
          {scoreDistribution.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">No completed evaluations yet</p>
            </div>
          ) : (
            <div className="space-y-2">
              {scoreDistribution.map((bucket) => (
                <div key={bucket.label} className="flex items-center gap-3">
                  <span className="text-sm w-16 text-right tabular-nums">{bucket.label}</span>
                  <div className="flex-1 h-6 bg-muted rounded-full overflow-hidden">
                    <div
                      className={cn('h-full rounded-full transition-all', bucket.color)}
                      style={{ width: `${bucket.percentage}%` }}
                    />
                  </div>
                  <span className="text-sm tabular-nums w-8">{bucket.count}</span>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Jury Completion by Round */}
      <Card>
        <CardHeader>
          <CardTitle>Jury Completion by Round</CardTitle>
          <CardDescription>Evaluation completion rate per round</CardDescription>
        </CardHeader>
        <CardContent>
          {recentRounds.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">No rounds available</p>
            </div>
          ) : (
            <div className="space-y-4">
              {recentRounds.map((round) => {
                const submittedInRound = round.assignments.filter(a => a.evaluation?.status === 'SUBMITTED').length
                const totalAssignments = round.assignments.length
                const percent = totalAssignments > 0 ? Math.round((submittedInRound / totalAssignments) * 100) : 0
                return (
                  <div key={round.id} className="space-y-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-medium">{round.name}</span>
                        <Badge variant={round.status === 'ACTIVE' ? 'default' : 'secondary'}>{round.status}</Badge>
                      </div>
                      <span className="text-sm font-semibold tabular-nums">{percent}%</span>
                    </div>
                    <Progress value={percent} className="h-2" />
                    <p className="text-xs text-muted-foreground">{submittedInRound} of {totalAssignments} evaluations submitted</p>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>
    </>
  )
}

function DashboardSkeleton() {
  return (
    <>
      <Skeleton className="h-20 w-full" />
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <Card key={i}>
            <CardHeader className="space-y-0 pb-2">
              <Skeleton className="h-4 w-20" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16" />
              <Skeleton className="mt-2 h-3 w-24" />
            </CardContent>
          </Card>
        ))}
      </div>
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-4 w-48" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[...Array(3)].map((_, i) => (
              <Skeleton key={i} className="h-20 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    </>
  )
}

export default async function ObserverDashboardPage() {
  const session = await auth()

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">
          Welcome, {session?.user?.name || 'Observer'}
        </p>
      </div>

      {/* Content */}
      <Suspense fallback={<DashboardSkeleton />}>
        <ObserverDashboardContent />
      </Suspense>
    </div>
  )
}