MOPC-Portal/src/components/applicant/competition-timeline.tsx

'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { CheckCircle2, Circle, Clock, XCircle, Trophy, Check } from 'lucide-react'
import { cn } from '@/lib/utils'

const roundStatusDisplay: Record<string, { label: string; variant: 'default' | 'secondary' }> = {
  ROUND_DRAFT: { label: 'Upcoming', variant: 'secondary' },
  ROUND_ACTIVE: { label: 'In Progress', variant: 'default' },
  ROUND_CLOSED: { label: 'Completed', variant: 'default' },
  ROUND_ARCHIVED: { label: 'Completed', variant: 'default' },
}

export function ApplicantCompetitionTimeline() {
  const { data, isLoading } = trpc.applicant.getMyCompetitionTimeline.useQuery()

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[1, 2, 3].map((i) => (
              <Skeleton key={i} className="h-20" />
            ))}
          </div>
        </CardContent>
      </Card>
    )
  }

  if (!data || data.entries.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Competition Timeline</CardTitle>
        </CardHeader>
        <CardContent className="text-center py-8">
          <Circle className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
          <p className="text-sm text-muted-foreground">No rounds available yet</p>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Competition Timeline</CardTitle>
        {data.competitionName && (
          <p className="text-sm text-muted-foreground">{data.competitionName}</p>
        )}
      </CardHeader>
      <CardContent>
        <div className="relative space-y-6">
          {/* Vertical connecting line */}
          <div className="absolute left-5 top-5 bottom-5 w-0.5 bg-border" />

          {data.entries.map((entry) => {
            const isCompleted = entry.status === 'ROUND_CLOSED' || entry.status === 'ROUND_ARCHIVED'
            const isActive = entry.status === 'ROUND_ACTIVE'
            const isRejected = entry.projectState === 'REJECTED'
            const isGrandFinale = entry.roundType === 'GRAND_FINALE'

            // Determine icon
            let Icon = Circle
            let iconBg = 'bg-muted'
            let iconColor = 'text-muted-foreground'

            if (isRejected) {
              Icon = XCircle
              iconBg = 'bg-red-50'
              iconColor = 'text-red-600'
            } else if (isGrandFinale && isCompleted) {
              Icon = Trophy
              iconBg = 'bg-yellow-50'
              iconColor = 'text-yellow-600'
            } else if (isCompleted) {
              Icon = CheckCircle2
              iconBg = 'bg-emerald-50'
              iconColor = 'text-emerald-600'
            } else if (isActive) {
              Icon = Clock
              iconBg = 'bg-brand-blue/10'
              iconColor = 'text-brand-blue'
            }

            // Project state display
            let stateLabel: string | null = null
            if (entry.projectState === 'REJECTED') {
              stateLabel = 'Not Selected'
            } else if (entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED') {
              stateLabel = 'Advanced'
            } else if (entry.projectState === 'IN_PROGRESS') {
              stateLabel = 'Under Review'
            } else if (entry.projectState === 'PENDING') {
              stateLabel = 'Pending'
            }

            const statusInfo = roundStatusDisplay[entry.status] ?? { label: 'Upcoming', variant: 'secondary' as const }

            return (
              <div key={entry.id} className="relative flex items-start gap-4">
                {/* Icon */}
                <div
                  className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full ${iconBg} shrink-0`}
                >
                  <Icon className={`h-5 w-5 ${iconColor}`} />
                </div>

                {/* Content */}
                <div className="flex-1 min-w-0 pb-6">
                  <div className="flex items-start justify-between flex-wrap gap-2 mb-2">
                    <div>
                      <h3 className="font-semibold">{entry.label}</h3>
                    </div>
                    <div className="flex items-center gap-2">
                      {stateLabel && (
                        <Badge
                          variant="outline"
                          className={
                            isRejected
                              ? 'border-red-200 text-red-700 bg-red-50'
                              : entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED'
                                ? 'border-emerald-200 text-emerald-700 bg-emerald-50'
                                : ''
                          }
                        >
                          {stateLabel}
                        </Badge>
                      )}
                      <Badge
                        variant={statusInfo.variant}
                        className={
                          isCompleted
                            ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                            : isActive
                              ? 'bg-brand-blue text-white'
                              : ''
                        }
                      >
                        {statusInfo.label}
                      </Badge>
                    </div>
                  </div>

                  {entry.windowOpenAt && entry.windowCloseAt && (
                    <div className="text-sm text-muted-foreground space-y-1">
                      <p>Opens: {new Date(entry.windowOpenAt).toLocaleDateString()}</p>
                      <p>Closes: {new Date(entry.windowCloseAt).toLocaleDateString()}</p>
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}

/**
 * Compact sidebar variant for the dashboard.
 * Animated timeline with connector indicators between dots.
 */
export function CompetitionTimelineSidebar() {
  const { data, isLoading } = trpc.applicant.getMyCompetitionTimeline.useQuery()

  if (isLoading) {
    return (
      <div className="space-y-3">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-6" />
        ))}
      </div>
    )
  }

  if (!data || data.entries.length === 0) {
    return <p className="text-sm text-muted-foreground">No rounds available</p>
  }

  // Find the index where elimination happened (first REJECTED entry)
  const eliminationIndex = data.entries.findIndex((e) => e.projectState === 'REJECTED')

  return (
    <div className="relative">
      <div className="space-y-0">
        {data.entries.map((entry, index) => {
          const isCompleted = entry.status === 'ROUND_CLOSED' || entry.status === 'ROUND_ARCHIVED'
          const isActive = entry.status === 'ROUND_ACTIVE'
          const isRejected = entry.projectState === 'REJECTED'
          const isGrandFinale = entry.roundType === 'GRAND_FINALE'
          const isPassed = entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED'
          const isLast = index === data.entries.length - 1
          // Is this entry after the elimination point?
          const isAfterElimination = eliminationIndex >= 0 && index > eliminationIndex

          // Is this the current round the project is in (regardless of round status)?
          const isCurrent = !!entry.projectState && entry.projectState !== 'PASSED' && entry.projectState !== 'COMPLETED' && entry.projectState !== 'REJECTED'

          // Determine connector segment color (no icons, just colored lines)
          let connectorColor = 'bg-border'
          if ((isPassed || isCompleted) && !isAfterElimination) connectorColor = 'bg-emerald-400'
          else if (isRejected) connectorColor = 'bg-destructive/30'

          // Dot inner content
          let dotInner: React.ReactNode = null
          let dotClasses = 'border-2 border-muted-foreground/20 bg-background'

          if (isAfterElimination) {
            dotClasses = 'border-2 border-muted/60 bg-muted/30'
          } else if (isRejected) {
            dotClasses = 'bg-destructive border-2 border-destructive'
            dotInner = <XCircle className="h-3.5 w-3.5 text-white" />
          } else if (isGrandFinale && (isCompleted || isPassed)) {
            dotClasses = 'bg-yellow-500 border-2 border-yellow-500'
            dotInner = <Trophy className="h-3.5 w-3.5 text-white" />
          } else if (isCompleted || isPassed) {
            dotClasses = 'bg-emerald-500 border-2 border-emerald-500'
            dotInner = <Check className="h-3.5 w-3.5 text-white" />
          } else if (isCurrent) {
            dotClasses = 'bg-amber-400 border-2 border-amber-400'
            dotInner = <span className="h-2.5 w-2.5 rounded-full bg-white animate-ping" style={{ animationDuration: '2s' }} />
          }

          // Status sub-label
          let statusLabel: string | null = null
          let statusColor = 'text-muted-foreground'
          if (isRejected) {
            statusLabel = 'Eliminated'
            statusColor = 'text-destructive'
          } else if (isAfterElimination) {
            statusLabel = null
          } else if (isPassed) {
            statusLabel = 'Advanced'
            statusColor = 'text-emerald-600'
          } else if (isCurrent) {
            statusLabel = 'You are here'
            statusColor = 'text-amber-600'
          }

          return (
            <div
              key={entry.id}
              className="animate-in fade-in slide-in-from-left-2 fill-mode-both"
              style={{ animationDelay: `${index * 100}ms`, animationDuration: '400ms' }}
            >
              {/* Row: dot + label */}
              <div className={cn(
                'group relative flex items-center gap-3.5 rounded-lg px-1.5 py-1.5 -mx-1.5 transition-colors duration-200 hover:bg-muted/40',
                isCurrent && 'bg-amber-50/60 hover:bg-amber-50/80',
              )}>
                {/* Dot */}
                <div
                  className={cn(
                    'relative z-10 h-7 w-7 rounded-full shrink-0 flex items-center justify-center shadow-sm transition-all duration-300',
                    isCurrent && 'ring-4 ring-amber-400/25',
                    isPassed && !isRejected && !isAfterElimination && 'ring-[3px] ring-emerald-500/15',
                    dotClasses,
                  )}
                >
                  {dotInner}
                </div>

                {/* Label */}
                <div className="flex-1 min-w-0">
                  <p
                    className={cn('text-sm leading-5 font-medium transition-colors duration-200', {
                      'text-destructive line-through decoration-destructive/40': isRejected,
                      'text-muted-foreground/40': isAfterElimination,
                      'text-foreground font-semibold': isCurrent,
                      'text-foreground': !isCurrent && !isRejected && !isAfterElimination && (isCompleted || isActive || isPassed),
                      'text-muted-foreground': !isRejected && !isAfterElimination && !isCompleted && !isActive && !isPassed,
                    })}
                  >
                    {entry.label}
                  </p>
                  {statusLabel && (
                    <p className={cn('text-xs mt-0.5 font-semibold tracking-wide uppercase', statusColor)}>{statusLabel}</p>
                  )}
                </div>
              </div>

              {/* Connector line between dots */}
              {!isLast && (
                <div className="flex items-center ml-[13px] h-5">
                  <div
                    className={cn(
                      'w-[2px] h-full rounded-full transition-all duration-500',
                      connectorColor,
                    )}
                  />
                </div>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}