MOPC-Portal/src/components/layouts/jury-nav.tsx

'use client'

import { BookOpen, Home, Trophy, Layers } from 'lucide-react'
import { RoleNav, type NavItem, type RoleNavUser } from '@/components/layouts/role-nav'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'

interface JuryNavProps {
  user: RoleNavUser
}

function RemainingBadge() {
  const { data: assignments } = trpc.assignment.myAssignments.useQuery(
    {},
    { refetchInterval: 60000 }
  )

  if (!assignments) return null

  const now = new Date()
  const remaining = (assignments as Array<{
    stage: { status: string; windowOpenAt: Date | null; windowCloseAt: Date | null } | null
    evaluation: { status: string } | null
  }>).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

  if (remaining === 0) return null

  return (
    <Badge variant="secondary" className="text-xs font-medium">
      {remaining} remaining
    </Badge>
  )
}

export function JuryNav({ user }: JuryNavProps) {
  const navigation: NavItem[] = [
    {
      name: 'Dashboard',
      href: '/jury',
      icon: Home,
    },
    {
      name: 'Stages',
      href: '/jury/stages',
      icon: Layers,
    },
    {
      name: 'Awards',
      href: '/jury/awards',
      icon: Trophy,
    },
    {
      name: 'Learning Hub',
      href: '/jury/learning',
      icon: BookOpen,
    },
  ]

  return (
    <RoleNav
      navigation={navigation}
      roleName="Jury"
      user={user}
      basePath="/jury"
      statusBadge={<RemainingBadge />}
    />
  )
}