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

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

export const metadata: Metadata = { title: 'Jury Dashboard' }
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 { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import { Separator } from '@/components/ui/separator'
import {
  ClipboardList,
  CheckCircle2,
  Clock,
  AlertCircle,
  ArrowRight,
  GitCompare,
  Zap,
  BarChart3,
  Target,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'
import { CountdownTimer } from '@/components/shared/countdown-timer'
import { cn } from '@/lib/utils'

function getGreeting(): string {
  const hour = new Date().getHours()
  if (hour < 12) return 'Good morning'
  if (hour < 18) return 'Good afternoon'
  return 'Good evening'
}

async function JuryDashboardContent() {
  const session = await auth()
  const userId = session?.user?.id

  if (!userId) {
    return null
  }

  // Get all assignments for this jury member
  const assignments = await prisma.assignment.findMany({
    where: { userId },
    include: {
      project: {
        select: {
          id: true,
          title: true,
          teamName: true,
          country: true,
        },
      },
      round: {
        select: {
          id: true,
          name: true,
          status: true,
          votingStartAt: true,
          votingEndAt: true,
          program: {
            select: {
              name: true,
              year: true,
            },
          },
        },
      },
      evaluation: {
        select: {
          id: true,
          status: true,
          submittedAt: true,
          criterionScoresJson: true,
          form: {
            select: { criteriaJson: true },
          },
        },
      },
    },
    orderBy: [
      { round: { votingEndAt: 'asc' } },
      { createdAt: 'asc' },
    ],
  })

  // Calculate stats
  const totalAssignments = assignments.length
  const completedAssignments = assignments.filter(
    (a) => a.evaluation?.status === 'SUBMITTED'
  ).length
  const inProgressAssignments = assignments.filter(
    (a) => a.evaluation?.status === 'DRAFT'
  ).length
  const pendingAssignments =
    totalAssignments - completedAssignments - inProgressAssignments

  const completionRate =
    totalAssignments > 0 ? (completedAssignments / totalAssignments) * 100 : 0

  // Group assignments by round
  const assignmentsByRound = assignments.reduce(
    (acc, assignment) => {
      const roundId = assignment.round.id
      if (!acc[roundId]) {
        acc[roundId] = {
          round: assignment.round,
          assignments: [],
        }
      }
      acc[roundId].assignments.push(assignment)
      return acc
    },
    {} as Record<string, { round: (typeof assignments)[0]['round']; assignments: typeof assignments }>
  )

  // Get grace periods for this user
  const gracePeriods = await prisma.gracePeriod.findMany({
    where: {
      userId,
      extendedUntil: { gte: new Date() },
    },
    select: {
      roundId: true,
      extendedUntil: true,
    },
  })

  const graceByRound = new Map<string, Date>()
  for (const gp of gracePeriods) {
    const existing = graceByRound.get(gp.roundId)
    if (!existing || gp.extendedUntil > existing) {
      graceByRound.set(gp.roundId, gp.extendedUntil)
    }
  }

  // Active rounds (voting window open)
  const now = new Date()
  const activeRounds = Object.values(assignmentsByRound).filter(
    ({ round }) =>
      round.status === 'ACTIVE' &&
      round.votingStartAt &&
      round.votingEndAt &&
      new Date(round.votingStartAt) <= now &&
      new Date(round.votingEndAt) >= now
  )

  // Find next unevaluated assignment in an active round
  const nextUnevaluated = assignments.find((a) => {
    const isActive =
      a.round.status === 'ACTIVE' &&
      a.round.votingStartAt &&
      a.round.votingEndAt &&
      new Date(a.round.votingStartAt) <= now &&
      new Date(a.round.votingEndAt) >= now
    const isIncomplete = !a.evaluation || a.evaluation.status === 'NOT_STARTED' || a.evaluation.status === 'DRAFT'
    return isActive && isIncomplete
  })

  // Recent assignments for the quick list (latest 5)
  const recentAssignments = assignments.slice(0, 6)

  // Get active round remaining count
  const activeRemaining = assignments.filter((a) => {
    const isActive =
      a.round.status === 'ACTIVE' &&
      a.round.votingStartAt &&
      a.round.votingEndAt &&
      new Date(a.round.votingStartAt) <= now &&
      new Date(a.round.votingEndAt) >= now
    const isIncomplete = !a.evaluation || a.evaluation.status !== 'SUBMITTED'
    return isActive && isIncomplete
  }).length

  const stats = [
    {
      label: 'Total Assignments',
      value: totalAssignments,
      icon: ClipboardList,
      iconBg: 'bg-blue-100 dark:bg-blue-900/30',
      iconColor: 'text-blue-600 dark:text-blue-400',
    },
    {
      label: 'Completed',
      value: completedAssignments,
      icon: CheckCircle2,
      iconBg: 'bg-green-100 dark:bg-green-900/30',
      iconColor: 'text-green-600 dark:text-green-400',
    },
    {
      label: 'In Progress',
      value: inProgressAssignments,
      icon: Clock,
      iconBg: 'bg-amber-100 dark:bg-amber-900/30',
      iconColor: 'text-amber-600 dark:text-amber-400',
    },
    {
      label: 'Pending',
      value: pendingAssignments,
      icon: Target,
      iconBg: 'bg-slate-100 dark:bg-slate-800',
      iconColor: 'text-slate-500',
    },
  ]

  return (
    <>
      {/* Hero CTA - Jump to next evaluation */}
      {nextUnevaluated && activeRemaining > 0 && (
        <Card className="border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5">
          <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5">
            <div className="flex items-center gap-3">
              <div className="rounded-full bg-primary/10 p-2.5">
                <Zap className="h-5 w-5 text-primary" />
              </div>
              <div>
                <p className="font-semibold">
                  {activeRemaining} evaluation{activeRemaining > 1 ? 's' : ''} remaining
                </p>
                <p className="text-sm text-muted-foreground">
                  Continue with &quot;{nextUnevaluated.project.title}&quot;
                </p>
              </div>
            </div>
            <Button asChild>
              <Link href={`/jury/projects/${nextUnevaluated.project.id}/evaluate`}>
                {nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Stats */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.label} className="transition-all hover:shadow-md">
            <CardContent className="flex items-center gap-4 py-4">
              <div className={cn('rounded-full p-2.5', stat.iconBg)}>
                <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
              </div>
              <div>
                <p className="text-2xl font-bold tabular-nums">{stat.value}</p>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Overall Progress */}
      <Card>
        <CardContent className="py-4">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-2">
              <BarChart3 className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">Overall Completion</span>
            </div>
            <span className="text-sm font-semibold tabular-nums">
              {completedAssignments}/{totalAssignments} ({completionRate.toFixed(0)}%)
            </span>
          </div>
          <Progress value={completionRate} className="h-2.5" />
        </CardContent>
      </Card>

      {/* Main content — two column layout */}
      <div className="grid gap-6 lg:grid-cols-12">
        {/* Left column */}
        <div className="lg:col-span-7 space-y-6">
          {/* Recent Assignments */}
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg">My Assignments</CardTitle>
                <Button variant="ghost" size="sm" asChild>
                  <Link href="/jury/assignments">
                    View all
                    <ArrowRight className="ml-1 h-3 w-3" />
                  </Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {recentAssignments.length > 0 ? (
                <div className="divide-y">
                  {recentAssignments.map((assignment) => {
                    const evaluation = assignment.evaluation
                    const isCompleted = evaluation?.status === 'SUBMITTED'
                    const isDraft = evaluation?.status === 'DRAFT'
                    const isVotingOpen =
                      assignment.round.status === 'ACTIVE' &&
                      assignment.round.votingStartAt &&
                      assignment.round.votingEndAt &&
                      new Date(assignment.round.votingStartAt) <= now &&
                      new Date(assignment.round.votingEndAt) >= now

                    return (
                      <div
                        key={assignment.id}
                        className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
                      >
                        <Link
                          href={`/jury/projects/${assignment.project.id}`}
                          className="flex-1 min-w-0 group"
                        >
                          <p className="text-sm font-medium truncate group-hover:text-primary group-hover:underline transition-colors">
                            {assignment.project.title}
                          </p>
                          <div className="flex items-center gap-2 mt-0.5">
                            <span className="text-xs text-muted-foreground truncate">
                              {assignment.project.teamName}
                            </span>
                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
                              {assignment.round.name}
                            </Badge>
                          </div>
                        </Link>
                        <div className="flex items-center gap-2 shrink-0">
                          {isCompleted ? (
                            <Badge variant="success" className="text-xs">
                              <CheckCircle2 className="mr-1 h-3 w-3" />
                              Done
                            </Badge>
                          ) : isDraft ? (
                            <Badge variant="warning" className="text-xs">
                              <Clock className="mr-1 h-3 w-3" />
                              Draft
                            </Badge>
                          ) : (
                            <Badge variant="secondary" className="text-xs">Pending</Badge>
                          )}
                          {isCompleted ? (
                            <Button variant="ghost" size="sm" asChild className="h-7 px-2">
                              <Link href={`/jury/projects/${assignment.project.id}/evaluation`}>
                                View
                              </Link>
                            </Button>
                          ) : isVotingOpen ? (
                            <Button size="sm" asChild className="h-7 px-2">
                              <Link href={`/jury/projects/${assignment.project.id}/evaluate`}>
                                {isDraft ? 'Continue' : 'Evaluate'}
                              </Link>
                            </Button>
                          ) : (
                            <Button variant="ghost" size="sm" asChild className="h-7 px-2">
                              <Link href={`/jury/projects/${assignment.project.id}`}>
                                View
                              </Link>
                            </Button>
                          )}
                        </div>
                      </div>
                    )
                  })}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <ClipboardList className="h-10 w-10 text-muted-foreground/30" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No assignments yet
                  </p>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Quick Actions */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-lg">Quick Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-3 sm:grid-cols-2">
                <Button variant="outline" className="justify-start h-auto py-3" asChild>
                  <Link href="/jury/assignments">
                    <ClipboardList className="mr-2 h-4 w-4 text-muted-foreground" />
                    <div className="text-left">
                      <p className="font-medium">All Assignments</p>
                      <p className="text-xs text-muted-foreground">View and manage evaluations</p>
                    </div>
                  </Link>
                </Button>
                <Button variant="outline" className="justify-start h-auto py-3" asChild>
                  <Link href="/jury/compare">
                    <GitCompare className="mr-2 h-4 w-4 text-muted-foreground" />
                    <div className="text-left">
                      <p className="font-medium">Compare Projects</p>
                      <p className="text-xs text-muted-foreground">Side-by-side comparison</p>
                    </div>
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right column */}
        <div className="lg:col-span-5 space-y-6">
          {/* Active Rounds */}
          {activeRounds.length > 0 && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-lg">Active Voting Rounds</CardTitle>
                <CardDescription>
                  Rounds currently open for evaluation
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {activeRounds.map(({ round, assignments: roundAssignments }) => {
                  const roundCompleted = roundAssignments.filter(
                    (a) => a.evaluation?.status === 'SUBMITTED'
                  ).length
                  const roundTotal = roundAssignments.length
                  const roundProgress =
                    roundTotal > 0 ? (roundCompleted / roundTotal) * 100 : 0
                  const isAlmostDone = roundProgress >= 80
                  const deadline = graceByRound.get(round.id) ?? (round.votingEndAt ? new Date(round.votingEndAt) : null)
                  const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000

                  return (
                    <div
                      key={round.id}
                      className={cn(
                        'rounded-lg border p-4 space-y-3 transition-all hover:-translate-y-0.5 hover:shadow-md',
                        isUrgent && 'border-red-200 bg-red-50/50 dark:border-red-900 dark:bg-red-950/20'
                      )}
                    >
                      <div className="flex items-start justify-between">
                        <div>
                          <h3 className="font-medium">{round.name}</h3>
                          <p className="text-xs text-muted-foreground">
                            {round.program.name} &middot; {round.program.year}
                          </p>
                        </div>
                        {isAlmostDone ? (
                          <Badge variant="success">Almost done</Badge>
                        ) : (
                          <Badge variant="default">Active</Badge>
                        )}
                      </div>

                      <div className="space-y-1">
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">Progress</span>
                          <span className="font-medium tabular-nums">
                            {roundCompleted}/{roundTotal}
                          </span>
                        </div>
                        <Progress value={roundProgress} className="h-2" />
                      </div>

                      {deadline && (
                        <div className="flex items-center gap-2 flex-wrap">
                          <CountdownTimer
                            deadline={deadline}
                            label="Deadline:"
                          />
                          {round.votingEndAt && (
                            <span className="text-xs text-muted-foreground">
                              ({formatDateOnly(round.votingEndAt)})
                            </span>
                          )}
                        </div>
                      )}

                      <Button asChild size="sm" className="w-full">
                        <Link href={`/jury/assignments?round=${round.id}`}>
                          View Assignments
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </div>
                  )
                })}
              </CardContent>
            </Card>
          )}

          {/* No active rounds */}
          {activeRounds.length === 0 && totalAssignments > 0 && (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-8 text-center">
                <div className="rounded-full bg-muted p-3 mb-3">
                  <Clock className="h-6 w-6 text-muted-foreground" />
                </div>
                <p className="font-medium">No active voting rounds</p>
                <p className="text-sm text-muted-foreground mt-1">
                  Check back later when a voting window opens
                </p>
              </CardContent>
            </Card>
          )}

          {/* Completion Summary by Round */}
          {Object.keys(assignmentsByRound).length > 0 && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-lg">Round Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {Object.values(assignmentsByRound).map(({ round, assignments: roundAssignments }) => {
                  const done = roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
                  const total = roundAssignments.length
                  const pct = total > 0 ? Math.round((done / total) * 100) : 0
                  return (
                    <div key={round.id} className="space-y-1.5">
                      <div className="flex items-center justify-between text-sm">
                        <span className="font-medium truncate">{round.name}</span>
                        <span className="text-muted-foreground tabular-nums shrink-0 ml-2">
                          {done}/{total} ({pct}%)
                        </span>
                      </div>
                      <Progress value={pct} className="h-1.5" />
                    </div>
                  )
                })}
              </CardContent>
            </Card>
          )}
        </div>
      </div>

      {/* No assignments at all */}
      {totalAssignments === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <div className="rounded-full bg-muted p-4 mb-4">
              <ClipboardList className="h-8 w-8 text-muted-foreground" />
            </div>
            <p className="text-lg font-medium">No assignments yet</p>
            <p className="text-sm text-muted-foreground mt-1 max-w-sm">
              You&apos;ll see your project assignments here once they&apos;re assigned to you by an administrator.
            </p>
          </CardContent>
        </Card>
      )}
    </>
  )
}

function DashboardSkeleton() {
  return (
    <>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <Card key={i}>
            <CardContent className="flex items-center gap-4 py-4">
              <Skeleton className="h-10 w-10 rounded-full" />
              <div className="space-y-2">
                <Skeleton className="h-6 w-12" />
                <Skeleton className="h-4 w-20" />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      <Card>
        <CardContent className="py-4">
          <Skeleton className="h-2.5 w-full" />
        </CardContent>
      </Card>
      <div className="grid gap-6 lg:grid-cols-12">
        <div className="lg:col-span-7">
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-32" />
            </CardHeader>
            <CardContent className="space-y-4">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="space-y-1.5">
                    <Skeleton className="h-4 w-48" />
                    <Skeleton className="h-3 w-32" />
                  </div>
                  <Skeleton className="h-7 w-20" />
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
        <div className="lg:col-span-5">
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-40" />
            </CardHeader>
            <CardContent className="space-y-4">
              <Skeleton className="h-24 w-full rounded-lg" />
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}

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

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">
          {getGreeting()}, {session?.user?.name || 'Juror'}
        </h1>
        <p className="text-muted-foreground">
          Here&apos;s an overview of your evaluation progress
        </p>
      </div>

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