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

'use client'

import Link from 'next/link'
import type { Route } from 'next'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import { format } from 'date-fns'
import {
  roundTypeConfig as sharedRoundTypeConfig,
  roundStatusConfig as sharedRoundStatusConfig,
} from '@/lib/round-config'

const roundTypeColors: Record<string, string> = Object.fromEntries(
  Object.entries(sharedRoundTypeConfig).map(([k, v]) => [k, `${v.badgeClass} ${v.cardBorder}`])
)

const roundStatusConfig: Record<string, { icon: React.ElementType; color: string }> = Object.fromEntries(
  Object.entries(sharedRoundStatusConfig).map(([k, v]) => [k, { icon: v.timelineIcon, color: v.timelineIconColor }])
)

type RoundSummary = {
  id: string
  name: string
  slug: string
  roundType: string
  status: string
  sortOrder: number
  windowOpenAt: Date | string | null
  windowCloseAt: Date | string | null
}

export function CompetitionTimeline({
  rounds,
}: {
  competitionId?: string
  rounds: RoundSummary[]
}) {
  if (rounds.length === 0) {
    return (
      <Card className="border-dashed">
        <CardContent className="py-8 text-center text-sm text-muted-foreground">
          No rounds configured yet. Add rounds to see the competition timeline.
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-base">Round Timeline</CardTitle>
      </CardHeader>
      <CardContent>
        {/* Desktop: horizontal timeline */}
        <div className="hidden md:block overflow-x-auto pb-2">
          <div className="flex items-start gap-0 min-w-max">
            {rounds.map((round, index) => {
              const statusCfg = roundStatusConfig[round.status] ?? roundStatusConfig.ROUND_DRAFT
              const StatusIcon = statusCfg.icon
              const isLast = index === rounds.length - 1

              return (
                <div key={round.id} className="flex items-start">
                  <Link
                    href={`/admin/rounds/${round.id}` as Route}
                    className="group flex flex-col items-center text-center w-32 shrink-0"
                  >
                    <div className="relative">
                      <StatusIcon className={cn('h-6 w-6', statusCfg.color)} />
                    </div>
                    <p className="mt-2 text-xs font-medium group-hover:text-primary transition-colors line-clamp-2">
                      {round.name}
                    </p>
                    <Badge
                      variant="secondary"
                      className={cn(
                        'mt-1 text-[9px]',
                        roundTypeColors[round.roundType] ?? ''
                      )}
                    >
                      {round.roundType.replace('_', ' ')}
                    </Badge>
                    {round.windowOpenAt && (
                      <p className="mt-1 text-[10px] text-muted-foreground">
                        {format(new Date(round.windowOpenAt), 'MMM d')}
                        {round.windowCloseAt && (
                          <> - {format(new Date(round.windowCloseAt), 'MMM d')}</>
                        )}
                      </p>
                    )}
                  </Link>
                  {!isLast && (
                    <div className="mt-3 h-px w-8 bg-border shrink-0" />
                  )}
                </div>
              )
            })}
          </div>
        </div>

        {/* Mobile: vertical timeline */}
        <div className="md:hidden space-y-0">
          {rounds.map((round, index) => {
            const statusCfg = roundStatusConfig[round.status] ?? roundStatusConfig.ROUND_DRAFT
            const StatusIcon = statusCfg.icon
            const isLast = index === rounds.length - 1

            return (
              <div key={round.id}>
                <Link
                  href={`/admin/rounds/${round.id}` as Route}
                  className="flex items-start gap-3 py-2 hover:bg-muted/50 rounded-md px-2 -mx-2 transition-colors"
                >
                  <div className="flex flex-col items-center shrink-0">
                    <StatusIcon className={cn('h-5 w-5', statusCfg.color)} />
                    {!isLast && <div className="w-px flex-1 bg-border mt-1 min-h-[16px]" />}
                  </div>
                  <div className="flex-1 min-w-0 pb-2">
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-medium truncate">{round.name}</p>
                      <Badge
                        variant="secondary"
                        className={cn(
                          'text-[9px] shrink-0',
                          roundTypeColors[round.roundType] ?? ''
                        )}
                      >
                        {round.roundType.replace('_', ' ')}
                      </Badge>
                    </div>
                    {round.windowOpenAt && (
                      <p className="text-[11px] text-muted-foreground mt-0.5">
                        {format(new Date(round.windowOpenAt), 'MMM d, yyyy')}
                        {round.windowCloseAt && (
                          <> - {format(new Date(round.windowCloseAt), 'MMM d, yyyy')}</>
                        )}
                      </p>
                    )}
                  </div>
                </Link>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}