'use client'

import { Users } from 'lucide-react'
import { trpc } from '@/lib/trpc/client'
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

export type RoundUnassignedQueueProps = {
  roundId: string
  requiredReviews?: number
  onAssignUnassigned?: () => void
}

export function RoundUnassignedQueue({ roundId, requiredReviews = 3, onAssignUnassigned }: RoundUnassignedQueueProps) {
  const { data: unassigned, isLoading } = trpc.roundAssignment.unassignedQueue.useQuery(
    { roundId, requiredReviews },
    { refetchInterval: 15_000 },
  )

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium">Unassigned Projects</p>
          <p className="text-xs text-muted-foreground">Projects with fewer than {requiredReviews} jury assignments</p>
        </div>
        {unassigned && unassigned.length > 0 && onAssignUnassigned && (
          <Button size="sm" variant="outline" onClick={onAssignUnassigned}>
            <Users className="h-3.5 w-3.5 mr-1.5" />
            Assign to Jurors
          </Button>
        )}
      </div>
      <div>
        {isLoading ? (
          <div className="space-y-2">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
          </div>
        ) : unassigned && unassigned.length > 0 ? (
          <div className="space-y-2 max-h-[400px] overflow-y-auto">
            {unassigned.map((project: any) => (
              <div
                key={project.id}
                className={cn(
                  'flex justify-between items-center p-3 border rounded-md hover:bg-muted/30 transition-colors',
                  (project.assignmentCount || 0) === 0 && 'border-l-4 border-l-red-500',
                )}
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium truncate">{project.title}</p>
                  <p className="text-xs text-muted-foreground">
                    {project.category === 'STARTUP'
                      ? 'Startup'
                      : project.category === 'BUSINESS_CONCEPT'
                        ? 'Business Concept'
                        : 'No category'}
                    {project.teamName && ` \u00b7 ${project.teamName}`}
                  </p>
                </div>
                <Badge variant="outline" className={cn(
                  'text-xs shrink-0 ml-3',
                  (project.assignmentCount || 0) === 0
                    ? 'bg-red-50 text-red-700 border-red-200'
                    : 'bg-amber-50 text-amber-700 border-amber-200',
                )}>
                  {project.assignmentCount || 0} / {requiredReviews}
                </Badge>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-muted-foreground text-center py-6">
            All projects have sufficient assignments
          </p>
        )}
      </div>
    </div>
  )
}