MOPC-Portal/src/components/dashboard/pipeline-round-node.tsx

'use client'

import Link from 'next/link'
import type { Route } from 'next'
import { cn } from '@/lib/utils'
import { motion } from 'motion/react'
import {
  roundTypeConfig as sharedRoundTypeConfig,
  roundStatusConfig as sharedRoundStatusConfig,
} from '@/lib/round-config'

type PipelineRound = {
  id: string
  name: string
  slug: string
  roundType:
    | 'INTAKE'
    | 'FILTERING'
    | 'EVALUATION'
    | 'SUBMISSION'
    | 'MENTORING'
    | 'LIVE_FINAL'
    | 'DELIBERATION'
  status:
    | 'ROUND_DRAFT'
    | 'ROUND_ACTIVE'
    | 'ROUND_CLOSED'
    | 'ROUND_ARCHIVED'
  sortOrder: number
  windowOpenAt: Date | null
  windowCloseAt: Date | null
  projectStates: {
    PENDING: number
    IN_PROGRESS: number
    PASSED: number
    REJECTED: number
    COMPLETED: number
    WITHDRAWN: number
    total: number
  }
  assignmentCount: number
  evalSubmitted: number
  evalDraft: number
  evalTotal: number
  filteringPassed: number
  filteringRejected: number
  filteringFlagged: number
  filteringTotal: number
  liveSessionStatus: string | null
  deliberationCount: number
}

const roundTypeConfig = sharedRoundTypeConfig

const statusStyles: Record<string, { container: string; label: string }> = Object.fromEntries(
  Object.entries(sharedRoundStatusConfig).map(([k, v]) => [k, { container: v.pipelineContainer, label: v.label }])
)

function getMetric(round: PipelineRound): string {
  const { roundType, projectStates, filteringTotal, filteringPassed, evalTotal, evalSubmitted, assignmentCount, liveSessionStatus, deliberationCount } = round

  switch (roundType) {
    case 'INTAKE':
      return `${projectStates.total} submitted`
    case 'FILTERING':
      return filteringTotal > 0
        ? `${filteringPassed}/${filteringTotal} passed`
        : `${projectStates.total} to filter`
    case 'EVALUATION':
      return evalTotal > 0
        ? `${evalSubmitted}/${evalTotal} evaluated`
        : `${assignmentCount} assignments`
    case 'SUBMISSION':
      return `${projectStates.COMPLETED} submitted`
    case 'MENTORING':
      return `${projectStates.COMPLETED ?? 0} mentored`
    case 'LIVE_FINAL': {
      const status = liveSessionStatus
      return status ? status.charAt(0) + status.slice(1).toLowerCase() : `${projectStates.total} finalists`
    }
    case 'DELIBERATION':
      return deliberationCount > 0
        ? `${deliberationCount} sessions`
        : 'Not started'
    default:
      return `${projectStates.total} projects`
  }
}

function getProgressPct(round: PipelineRound): number | null {
  if (round.status !== 'ROUND_ACTIVE') return null

  switch (round.roundType) {
    case 'FILTERING': {
      const processed = round.filteringPassed + round.filteringRejected + round.filteringFlagged
      const total = round.projectStates.total || round.filteringTotal
      return total > 0 ? Math.round((processed / total) * 100) : 0
    }
    case 'EVALUATION':
      return round.evalTotal > 0 ? Math.round((round.evalSubmitted / round.evalTotal) * 100) : 0
    case 'SUBMISSION': {
      const total = round.projectStates.total
      return total > 0 ? Math.round((round.projectStates.COMPLETED / total) * 100) : 0
    }
    case 'MENTORING': {
      const total = round.projectStates.total
      return total > 0 ? Math.round((round.projectStates.COMPLETED / total) * 100) : 0
    }
    default:
      return null
  }
}

export function PipelineRoundNode({
  round,
  index,
}: {
  round: PipelineRound
  index: number
}) {
  const typeConfig = roundTypeConfig[round.roundType] ?? roundTypeConfig.INTAKE
  const Icon = typeConfig.icon
  const status = statusStyles[round.status] ?? statusStyles.ROUND_DRAFT
  const isActive = round.status === 'ROUND_ACTIVE'
  const isCompleted = round.status === 'ROUND_CLOSED' || round.status === 'ROUND_ARCHIVED'
  const metric = getMetric(round)
  const progressPct = getProgressPct(round)

  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: 0.1 + index * 0.06 }}
    >
      <Link
        href={`/admin/rounds/${round.id}` as Route}
        className="group block"
      >
        <div
          className={cn(
            'relative flex flex-col items-center rounded-xl border-2 transition-all hover:-translate-y-0.5 hover:shadow-md',
            isActive ? 'w-48 px-4 py-4' : 'w-40 px-3 py-3.5',
            status.container
          )}
        >
          {/* Active ping indicator */}
          {isActive && (
            <span className="absolute -right-1 -top-1 flex h-3 w-3">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
              <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500" />
            </span>
          )}

          {/* Completed check */}
          {isCompleted && (
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 text-white">
              <svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </span>
          )}

          {/* Icon */}
          <div
            className={cn(
              'flex items-center justify-center rounded-lg',
              isActive ? 'h-10 w-10' : 'h-9 w-9',
              typeConfig.iconBg
            )}
          >
            <Icon className={cn(isActive ? 'h-5 w-5' : 'h-4 w-4', typeConfig.iconColor)} />
          </div>

          {/* Name */}
          <p className="mt-2.5 text-center text-xs font-semibold leading-tight line-clamp-2 group-hover:text-foreground transition-colors">
            {round.name}
          </p>

          {/* Type label */}
          <span className="mt-1 text-[10px] font-medium text-muted-foreground/70">
            {typeConfig.label}
          </span>

          {/* Status label */}
          <span className="mt-1 text-[10px] font-semibold uppercase tracking-wider opacity-70">
            {status.label}
          </span>

          {/* Progress bar for active rounds */}
          {progressPct !== null && (
            <div className="mt-2 w-full">
              <div className="h-1.5 w-full overflow-hidden rounded-full bg-black/5">
                <motion.div
                  className="h-full rounded-full bg-blue-500"
                  initial={{ width: 0 }}
                  animate={{ width: `${progressPct}%` }}
                  transition={{ duration: 0.8, ease: 'easeOut' }}
                />
              </div>
              <p className="mt-0.5 text-center text-[10px] font-medium tabular-nums text-blue-600">
                {progressPct}%
              </p>
            </div>
          )}

          {/* Metric */}
          {progressPct === null && (
            <p className="mt-1.5 text-[11px] font-medium tabular-nums opacity-80">
              {metric}
            </p>
          )}
        </div>
      </Link>
    </motion.div>
  )
}

export type { PipelineRound }