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 { Skeleton } from '@/components/ui/skeleton'
import {
  ClipboardList,
  CheckCircle2,
  Clock,
  ArrowRight,
  GitCompare,
  Zap,
  BarChart3,
  Target,
  Waves,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'
import { CountdownTimer } from '@/components/shared/countdown-timer'
import { AnimatedCard } from '@/components/shared/animated-container'
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 assignments and grace periods in parallel
  const [assignments, gracePeriods] = await Promise.all([
    prisma.assignment.findMany({
      where: { userId },
      include: {
        project: {
          select: {
            id: true,
            title: true,
            teamName: true,
            country: true,
          },
        },
        stage: {
          select: {
            id: true,
            name: true,
            status: true,
            windowOpenAt: true,
            windowCloseAt: true,
            track: {
              select: {
                pipeline: {
                  select: {
                    program: {
                      select: {
                        name: true,
                        year: true,
                      },
                    },
                  },
                },
              },
            },
          },
        },
        evaluation: {
          select: {
            id: true,
            status: true,
            submittedAt: true,
            criterionScoresJson: true,
            form: {
              select: { criteriaJson: true },
            },
          },
        },
      },
      orderBy: [
        { stage: { windowCloseAt: 'asc' } },
        { createdAt: 'asc' },
      ],
    }),
    prisma.gracePeriod.findMany({
      where: {
        userId,
        extendedUntil: { gte: new Date() },
      },
      select: {
        stageId: true,
        extendedUntil: true,
      },
    }),
  ])

  // 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 stage
  const assignmentsByStage = assignments.reduce(
    (acc, assignment) => {
      const stageId = assignment.stage.id
      if (!acc[stageId]) {
        acc[stageId] = {
          stage: assignment.stage,
          assignments: [],
        }
      }
      acc[stageId].assignments.push(assignment)
      return acc
    },
    {} as Record<string, { stage: (typeof assignments)[0]['stage']; assignments: typeof assignments }>
  )

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

  // Active stages (voting window open)
  const now = new Date()
  const activeStages = Object.values(assignmentsByStage).filter(
    ({ stage }) =>
      stage.status === 'STAGE_ACTIVE' &&
      stage.windowOpenAt &&
      stage.windowCloseAt &&
      new Date(stage.windowOpenAt) <= now &&
      new Date(stage.windowCloseAt) >= now
  )

  // Find next unevaluated assignment in an active stage
  const nextUnevaluated = assignments.find((a) => {
    const isActive =
      a.stage.status === 'STAGE_ACTIVE' &&
      a.stage.windowOpenAt &&
      a.stage.windowCloseAt &&
      new Date(a.stage.windowOpenAt) <= now &&
      new Date(a.stage.windowCloseAt) >= 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 stage remaining count
  const activeRemaining = assignments.filter((a) => {
    const isActive =
      a.stage.status === 'STAGE_ACTIVE' &&
      a.stage.windowOpenAt &&
      a.stage.windowCloseAt &&
      new Date(a.stage.windowOpenAt) <= now &&
      new Date(a.stage.windowCloseAt) >= now
    const isIncomplete = !a.evaluation || a.evaluation.status !== 'SUBMITTED'
    return isActive && isIncomplete
  }).length

  const stats = [
    {
      label: 'Total Assignments',
      value: totalAssignments,
      icon: ClipboardList,
      accentColor: 'border-l-blue-500',
      iconBg: 'bg-blue-50 dark:bg-blue-950/40',
      iconColor: 'text-blue-600 dark:text-blue-400',
    },
    {
      label: 'Completed',
      value: completedAssignments,
      icon: CheckCircle2,
      accentColor: 'border-l-emerald-500',
      iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
      iconColor: 'text-emerald-600 dark:text-emerald-400',
    },
    {
      label: 'In Progress',
      value: inProgressAssignments,
      icon: Clock,
      accentColor: 'border-l-amber-500',
      iconBg: 'bg-amber-50 dark:bg-amber-950/40',
      iconColor: 'text-amber-600 dark:text-amber-400',
    },
    {
      label: 'Pending',
      value: pendingAssignments,
      icon: Target,
      accentColor: 'border-l-slate-400',
      iconBg: 'bg-slate-50 dark:bg-slate-800/50',
      iconColor: 'text-slate-500 dark:text-slate-400',
    },
  ]

  // Zero-assignment state: compact welcome card
  if (totalAssignments === 0) {
    return (
      <AnimatedCard index={0}>
        <Card className="overflow-hidden">
          <div className="h-1 w-full bg-gradient-to-r from-brand-teal/40 via-brand-blue/40 to-brand-teal/40" />
          <CardContent className="py-8 px-6">
            <div className="flex flex-col items-center text-center mb-6">
              <div className="rounded-2xl bg-gradient-to-br from-brand-teal/10 to-brand-blue/10 p-4 mb-3 dark:from-brand-teal/20 dark:to-brand-blue/20">
                <ClipboardList className="h-8 w-8 text-brand-teal/60" />
              </div>
              <p className="text-lg font-semibold">No assignments yet</p>
              <p className="text-sm text-muted-foreground mt-1 max-w-sm">
                Your project assignments will appear here once an administrator assigns them to you.
              </p>
            </div>
            <div className="grid gap-3 sm:grid-cols-2 max-w-md mx-auto">
              <Link
                href="/jury/stages"
                className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
              >
                <div className="rounded-lg bg-blue-50 p-2 transition-colors group-hover:bg-blue-100 dark:bg-blue-950/40">
                  <ClipboardList className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="text-left">
                  <p className="font-semibold text-sm group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">All Assignments</p>
                  <p className="text-xs text-muted-foreground">View evaluations</p>
                </div>
              </Link>
              <Link
                href="/jury/stages"
                className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
              >
                <div className="rounded-lg bg-teal-50 p-2 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40">
                  <GitCompare className="h-4 w-4 text-brand-teal" />
                </div>
                <div className="text-left">
                  <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
                  <p className="text-xs text-muted-foreground">Side-by-side view</p>
                </div>
              </Link>
            </div>
          </CardContent>
        </Card>
      </AnimatedCard>
    )
  }

  return (
    <>
      {/* Hero CTA - Jump to next evaluation */}
      {nextUnevaluated && activeRemaining > 0 && (
        <AnimatedCard index={0}>
          <Card className="overflow-hidden border-0 shadow-lg">
            <div className="bg-gradient-to-r from-brand-blue to-brand-teal p-[1px] rounded-lg">
              <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5 px-6 rounded-[7px] bg-background">
                <div className="flex items-center gap-4">
                  <div className="rounded-xl bg-gradient-to-br from-brand-blue to-brand-teal p-3 shadow-sm">
                    <Zap className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <p className="font-semibold text-base">
                      {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 size="lg" className="bg-brand-blue hover:bg-brand-blue-light shadow-md">
                  <Link href={`/jury/stages/${nextUnevaluated.stage.id}/projects/${nextUnevaluated.project.id}/evaluate`}>
                    {nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardContent>
            </div>
          </Card>
        </AnimatedCard>
      )}

      {/* Stats + Overall Completion in one row */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {stats.map((stat, i) => (
          <AnimatedCard key={stat.label} index={i + 1}>
            <Card className={cn(
              'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
              stat.accentColor,
            )}>
              <CardContent className="flex items-center gap-4 py-5 px-5">
                <div className={cn('rounded-xl p-3', stat.iconBg)}>
                  <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
                </div>
                <div>
                  <p className="text-2xl font-bold tabular-nums tracking-tight">{stat.value}</p>
                  <p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>
        ))}
        {/* Overall completion as 5th stat card */}
        <AnimatedCard index={5}>
          <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="flex items-center gap-4 py-5 px-5">
              <div className="rounded-xl p-3 bg-brand-blue/10 dark:bg-brand-blue/20">
                <BarChart3 className="h-5 w-5 text-brand-blue dark:text-brand-teal" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-2xl font-bold tabular-nums tracking-tight text-brand-blue dark:text-brand-teal">
                  {completionRate.toFixed(0)}%
                </p>
                <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted/60 mt-1">
                  <div
                    className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
                    style={{ width: `${completionRate}%` }}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>
      </div>

      {/* Main content -- two column layout */}
      <div className="grid gap-4 lg:grid-cols-12">
        {/* Left column */}
        <div className="lg:col-span-7 space-y-4">
          {/* Recent Assignments */}
          <AnimatedCard index={6}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
                      <ClipboardList className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
                    </div>
                    <CardTitle className="text-lg">My Assignments</CardTitle>
                  </div>
                  <Button variant="ghost" size="sm" asChild className="text-brand-teal hover:text-brand-blue">
                    <Link href="/jury/stages">
                      View all
                      <ArrowRight className="ml-1 h-3 w-3" />
                    </Link>
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                {recentAssignments.length > 0 ? (
                  <div className="space-y-1">
                    {recentAssignments.map((assignment, idx) => {
                      const evaluation = assignment.evaluation
                      const isCompleted = evaluation?.status === 'SUBMITTED'
                      const isDraft = evaluation?.status === 'DRAFT'
                      const isVotingOpen =
                        assignment.stage.status === 'STAGE_ACTIVE' &&
                        assignment.stage.windowOpenAt &&
                        assignment.stage.windowCloseAt &&
                        new Date(assignment.stage.windowOpenAt) <= now &&
                        new Date(assignment.stage.windowCloseAt) >= now

                      return (
                        <div
                          key={assignment.id}
                          className={cn(
                            'flex items-center justify-between gap-3 py-3 px-3 -mx-3 rounded-lg transition-colors duration-150',
                            'hover:bg-muted/50',
                            idx !== recentAssignments.length - 1 && 'border-b border-border/50',
                          )}
                        >
                          <Link
                            href={`/jury/stages/${assignment.stage.id}/projects/${assignment.project.id}`}
                            className="flex-1 min-w-0 group"
                          >
                            <p className="text-sm font-medium truncate group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">
                              {assignment.project.title}
                            </p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs text-muted-foreground truncate">
                                {assignment.project.teamName}
                              </span>
                              <Badge variant="secondary" className="text-[10px] px-1.5 py-0 bg-brand-blue/5 text-brand-blue/80 dark:bg-brand-teal/10 dark:text-brand-teal/80 border-0">
                                {assignment.stage.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/stages/${assignment.stage.id}/projects/${assignment.project.id}/evaluation`}>
                                  View
                                </Link>
                              </Button>
                            ) : isVotingOpen ? (
                              <Button size="sm" asChild className="h-7 px-3 bg-brand-blue hover:bg-brand-blue-light shadow-sm">
                                <Link href={`/jury/stages/${assignment.stage.id}/projects/${assignment.project.id}/evaluate`}>
                                  {isDraft ? 'Continue' : 'Evaluate'}
                                </Link>
                              </Button>
                            ) : (
                              <Button variant="ghost" size="sm" asChild className="h-7 px-2">
                                <Link href={`/jury/stages/${assignment.stage.id}/projects/${assignment.project.id}`}>
                                  View
                                </Link>
                              </Button>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-6 text-center">
                    <div className="rounded-2xl bg-brand-teal/10 p-3 mb-2">
                      <ClipboardList className="h-6 w-6 text-brand-teal/60" />
                    </div>
                    <p className="font-medium text-sm text-muted-foreground">
                      No assignments yet
                    </p>
                    <p className="text-xs text-muted-foreground/70 mt-1 max-w-[240px]">
                      Assignments will appear here once an administrator assigns projects to you.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Quick Actions */}
          <AnimatedCard index={7}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center gap-2.5">
                  <div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
                    <Zap className="h-4 w-4 text-brand-teal" />
                  </div>
                  <CardTitle className="text-lg">Quick Actions</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-3 sm:grid-cols-2">
                  <Link
                    href="/jury/stages"
                    className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
                  >
                    <div className="rounded-xl bg-blue-50 p-3 transition-colors group-hover:bg-blue-100 dark:bg-blue-950/40 dark:group-hover:bg-blue-950/60">
                      <ClipboardList className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                    </div>
                    <div className="text-left">
                      <p className="font-semibold text-sm group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">All Assignments</p>
                      <p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p>
                    </div>
                  </Link>
                  <Link
                    href="/jury/stages"
                    className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
                  >
                    <div className="rounded-xl bg-teal-50 p-3 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40 dark:group-hover:bg-teal-950/60">
                      <GitCompare className="h-5 w-5 text-brand-teal" />
                    </div>
                    <div className="text-left">
                      <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
                      <p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
                    </div>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>
        </div>

        {/* Right column */}
        <div className="lg:col-span-5 space-y-4">
          {/* Active Stages */}
          {activeStages.length > 0 && (
            <AnimatedCard index={8}>
              <Card className="overflow-hidden">
                <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
                <CardHeader className="pb-3">
                  <div className="flex items-center gap-2.5">
                    <div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
                      <Waves className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
                    </div>
                    <div>
                      <CardTitle className="text-lg">Active Voting Stages</CardTitle>
                      <CardDescription className="mt-0.5">
                        Stages currently open for evaluation
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {activeStages.map(({ stage, assignments: stageAssignments }) => {
                    const stageCompleted = stageAssignments.filter(
                      (a) => a.evaluation?.status === 'SUBMITTED'
                    ).length
                    const stageTotal = stageAssignments.length
                    const stageProgress =
                      stageTotal > 0 ? (stageCompleted / stageTotal) * 100 : 0
                    const isAlmostDone = stageProgress >= 80
                    const deadline = graceByStage.get(stage.id) ?? (stage.windowCloseAt ? new Date(stage.windowCloseAt) : null)
                    const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000
                    const program = stage.track.pipeline.program

                    return (
                      <div
                        key={stage.id}
                        className={cn(
                          'rounded-xl border p-4 space-y-3 transition-all duration-200 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'
                            : 'border-border/60 bg-muted/20 dark:bg-muted/10'
                        )}
                      >
                        <div className="flex items-start justify-between">
                          <div>
                            <h3 className="font-semibold text-brand-blue dark:text-brand-teal">{stage.name}</h3>
                            <p className="text-xs text-muted-foreground mt-0.5">
                              {program.name} &middot; {program.year}
                            </p>
                          </div>
                          {isAlmostDone ? (
                            <Badge variant="success">Almost done</Badge>
                          ) : (
                            <Badge variant="info">Active</Badge>
                          )}
                        </div>

                        <div className="space-y-1.5">
                          <div className="flex justify-between text-sm">
                            <span className="text-muted-foreground">Progress</span>
                            <span className="font-semibold tabular-nums">
                              {stageCompleted}/{stageTotal}
                            </span>
                          </div>
                          <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted/60">
                            <div
                              className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
                              style={{ width: `${stageProgress}%` }}
                            />
                          </div>
                        </div>

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

                        <Button asChild size="sm" className="w-full bg-brand-blue hover:bg-brand-blue-light shadow-sm">
                          <Link href={`/jury/stages/${stage.id}/assignments`}>
                            View Assignments
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Link>
                        </Button>
                      </div>
                    )
                  })}
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* No active stages */}
          {activeStages.length === 0 && (
            <AnimatedCard index={8}>
              <Card>
                <CardContent className="flex flex-col items-center justify-center py-6 text-center">
                  <div className="rounded-2xl bg-brand-teal/10 p-3 mb-2 dark:bg-brand-teal/20">
                    <Clock className="h-6 w-6 text-brand-teal/70" />
                  </div>
                  <p className="font-semibold text-sm">No active voting stages</p>
                  <p className="text-xs text-muted-foreground mt-1 max-w-[220px]">
                    Check back later when a voting window opens
                  </p>
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* Completion Summary by Stage */}
          {Object.keys(assignmentsByStage).length > 0 && (
            <AnimatedCard index={9}>
              <Card>
                <CardHeader className="pb-3">
                  <div className="flex items-center gap-2.5">
                    <div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
                      <BarChart3 className="h-4 w-4 text-brand-teal" />
                    </div>
                    <CardTitle className="text-lg">Stage Summary</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {Object.values(assignmentsByStage).map(({ stage, assignments: stageAssignments }) => {
                    const done = stageAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
                    const total = stageAssignments.length
                    const pct = total > 0 ? Math.round((done / total) * 100) : 0
                    return (
                      <div key={stage.id} className="space-y-2">
                        <div className="flex items-center justify-between text-sm">
                          <span className="font-medium truncate">{stage.name}</span>
                          <div className="flex items-baseline gap-1 shrink-0 ml-2">
                            <span className="font-bold tabular-nums text-brand-blue dark:text-brand-teal">{pct}%</span>
                            <span className="text-xs text-muted-foreground">({done}/{total})</span>
                          </div>
                        </div>
                        <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted/60">
                          <div
                            className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
                            style={{ width: `${pct}%` }}
                          />
                        </div>
                      </div>
                    )
                  })}
                </CardContent>
              </Card>
            </AnimatedCard>
          )}
        </div>
      </div>
    </>
  )
}

function DashboardSkeleton() {
  return (
    <>
      {/* Stats skeleton */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <Card key={i} className="border-l-4 border-l-muted">
            <CardContent className="flex items-center gap-4 py-5 px-5">
              <Skeleton className="h-11 w-11 rounded-xl" />
              <div className="space-y-2">
                <Skeleton className="h-7 w-12" />
                <Skeleton className="h-4 w-24" />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      {/* Progress bar skeleton */}
      <Card className="overflow-hidden">
        <div className="h-1 w-full bg-muted" />
        <CardContent className="py-5 px-6">
          <div className="flex items-center justify-between mb-3">
            <Skeleton className="h-4 w-36" />
            <Skeleton className="h-7 w-16" />
          </div>
          <Skeleton className="h-3 w-full rounded-full" />
        </CardContent>
      </Card>
      {/* Two-column skeleton */}
      <div className="grid gap-6 lg:grid-cols-12">
        <div className="lg:col-span-7">
          <Card>
            <CardHeader className="pb-3">
              <Skeleton className="h-5 w-40" />
            </CardHeader>
            <CardContent className="space-y-4">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="flex items-center justify-between py-2">
                  <div className="space-y-2">
                    <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 space-y-6">
          <Card className="overflow-hidden">
            <div className="h-1 w-full bg-muted" />
            <CardHeader className="pb-3">
              <Skeleton className="h-5 w-44" />
            </CardHeader>
            <CardContent className="space-y-4">
              <Skeleton className="h-28 w-full rounded-xl" />
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-3">
              <Skeleton className="h-5 w-36" />
            </CardHeader>
            <CardContent className="space-y-4">
              {[...Array(2)].map((_, i) => (
                <div key={i} className="space-y-2">
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-2 w-full rounded-full" />
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}

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

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

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