MOPC-Portal/src/components/admin/pipeline/pipeline-visualization.tsx

'use client'

import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'
import { ArrowRight } from 'lucide-react'

type StageNode = {
  id?: string
  name: string
  stageType: string
  sortOrder: number
  _count?: { projectStageStates: number }
}

type TrackLane = {
  id?: string
  name: string
  kind: string
  sortOrder: number
  stages: StageNode[]
}

type PipelineVisualizationProps = {
  tracks: TrackLane[]
  className?: string
}

const stageColors: Record<string, string> = {
  INTAKE: 'bg-blue-50 border-blue-300 text-blue-700',
  FILTER: 'bg-amber-50 border-amber-300 text-amber-700',
  EVALUATION: 'bg-purple-50 border-purple-300 text-purple-700',
  SELECTION: 'bg-rose-50 border-rose-300 text-rose-700',
  LIVE_FINAL: 'bg-emerald-50 border-emerald-300 text-emerald-700',
  RESULTS: 'bg-cyan-50 border-cyan-300 text-cyan-700',
}

const trackKindBadge: Record<string, string> = {
  MAIN: 'bg-blue-100 text-blue-700',
  AWARD: 'bg-amber-100 text-amber-700',
  SHOWCASE: 'bg-purple-100 text-purple-700',
}

export function PipelineVisualization({
  tracks,
  className,
}: PipelineVisualizationProps) {
  const sortedTracks = [...tracks].sort((a, b) => a.sortOrder - b.sortOrder)

  return (
    <div className={cn('space-y-4', className)}>
      {sortedTracks.map((track) => {
        const sortedStages = [...track.stages].sort(
          (a, b) => a.sortOrder - b.sortOrder
        )

        return (
          <Card key={track.id ?? track.name} className="p-4">
            {/* Track header */}
            <div className="flex items-center gap-2 mb-3">
              <span className="text-sm font-semibold">{track.name}</span>
              <Badge
                variant="secondary"
                className={cn(
                  'text-[10px] h-5',
                  trackKindBadge[track.kind] ?? ''
                )}
              >
                {track.kind}
              </Badge>
            </div>

            {/* Stage flow */}
            <div className="flex items-center gap-1 overflow-x-auto pb-1">
              {sortedStages.map((stage, index) => (
                <div key={stage.id ?? index} className="flex items-center gap-1 shrink-0">
                  <div
                    className={cn(
                      'flex flex-col items-center rounded-lg border px-3 py-2 min-w-[100px]',
                      stageColors[stage.stageType] ?? 'bg-gray-50 border-gray-300'
                    )}
                  >
                    <span className="text-xs font-medium text-center leading-tight">
                      {stage.name}
                    </span>
                    <span className="text-[10px] opacity-70 mt-0.5">
                      {stage.stageType.replace('_', ' ')}
                    </span>
                    {stage._count?.projectStageStates !== undefined &&
                      stage._count.projectStageStates > 0 && (
                        <Badge
                          variant="secondary"
                          className="text-[9px] h-4 px-1 mt-1"
                        >
                          {stage._count.projectStageStates}
                        </Badge>
                      )}
                  </div>
                  {index < sortedStages.length - 1 && (
                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                  )}
                </div>
              ))}
              {sortedStages.length === 0 && (
                <span className="text-xs text-muted-foreground italic">
                  No stages
                </span>
              )}
            </div>
          </Card>
        )
      })}

      {tracks.length === 0 && (
        <p className="text-sm text-muted-foreground text-center py-4">
          No tracks to visualize
        </p>
      )}
    </div>
  )
}