'use client'

import { Suspense, use, useState, useEffect } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { cn } from '@/lib/utils'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Progress } from '@/components/ui/progress'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Input } from '@/components/ui/input'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  ArrowLeft,
  Users,
  FileText,
  CheckCircle2,
  Clock,
  AlertCircle,
  Sparkles,
  Loader2,
  Plus,
  Trash2,
  RefreshCw,
  UserPlus,
  Cpu,
  Brain,
  Search,
  ChevronsUpDown,
  Check,
  X,
} from 'lucide-react'
import { toast } from 'sonner'

// Suggestion type for both algorithm and AI suggestions
interface Suggestion {
  userId: string
  jurorName: string
  projectId: string
  projectTitle: string
  score: number
  reasoning: string[]
}

// Reusable table component for displaying suggestions
function SuggestionsTable({
  suggestions,
  selectedSuggestions,
  onToggle,
  onSelectAll,
  onApply,
  isApplying,
}: {
  suggestions: Suggestion[]
  selectedSuggestions: Set<string>
  onToggle: (key: string) => void
  onSelectAll: () => void
  onApply: () => void
  isApplying: boolean
}) {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Checkbox
            checked={selectedSuggestions.size === suggestions.length && suggestions.length > 0}
            onCheckedChange={onSelectAll}
          />
          <span className="text-sm text-muted-foreground">
            {selectedSuggestions.size} of {suggestions.length} selected
          </span>
        </div>
        <Button
          onClick={onApply}
          disabled={selectedSuggestions.size === 0 || isApplying}
        >
          {isApplying ? (
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          ) : (
            <Plus className="mr-2 h-4 w-4" />
          )}
          Apply Selected ({selectedSuggestions.size})
        </Button>
      </div>

      <div className="rounded-lg border max-h-[400px] overflow-y-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12"></TableHead>
              <TableHead>Juror</TableHead>
              <TableHead>Project</TableHead>
              <TableHead>Score</TableHead>
              <TableHead>Reasoning</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {suggestions.map((suggestion) => {
              const key = `${suggestion.userId}-${suggestion.projectId}`
              const isSelected = selectedSuggestions.has(key)

              return (
                <TableRow
                  key={key}
                  className={isSelected ? 'bg-muted/50' : ''}
                >
                  <TableCell>
                    <Checkbox
                      checked={isSelected}
                      onCheckedChange={() => onToggle(key)}
                    />
                  </TableCell>
                  <TableCell className="font-medium">
                    {suggestion.jurorName}
                  </TableCell>
                  <TableCell>
                    {suggestion.projectTitle}
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        suggestion.score >= 60
                          ? 'default'
                          : suggestion.score >= 40
                            ? 'secondary'
                            : 'outline'
                      }
                    >
                      {suggestion.score.toFixed(0)}
                    </Badge>
                  </TableCell>
                  <TableCell className="max-w-xs">
                    <ul className="text-xs text-muted-foreground">
                      {suggestion.reasoning.map((r, i) => (
                        <li key={i}>{r}</li>
                      ))}
                    </ul>
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}

interface PageProps {
  params: Promise<{ id: string }>
}

function AssignmentManagementContent({ roundId }: { roundId: string }) {
  const [selectedSuggestions, setSelectedSuggestions] = useState<Set<string>>(new Set())
  const [manualOpen, setManualOpen] = useState(false)
  const [selectedJuror, setSelectedJuror] = useState<string>('')
  const [jurorPopoverOpen, setJurorPopoverOpen] = useState(false)
  const [projectSearch, setProjectSearch] = useState('')
  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(new Set())
  const [activeTab, setActiveTab] = useState<'algorithm' | 'ai'>('algorithm')
  const [activeJobId, setActiveJobId] = useState<string | null>(null)

  const { data: round, isLoading: loadingRound } = trpc.round.get.useQuery({ id: roundId })
  const { data: assignments, isLoading: loadingAssignments } = trpc.assignment.listByRound.useQuery({ roundId })
  const { data: stats, isLoading: loadingStats } = trpc.assignment.getStats.useQuery({ roundId })
  const { data: isAIAvailable } = trpc.assignment.isAIAvailable.useQuery()

  // Always fetch latest AI job to check for existing results
  const { data: latestJob, refetch: refetchLatestJob } = trpc.assignment.getLatestAIAssignmentJob.useQuery(
    { roundId }
  )

  // Poll for job status when there's an active job
  const { data: jobStatus } = trpc.assignment.getAIAssignmentJobStatus.useQuery(
    { jobId: activeJobId! },
    {
      enabled: !!activeJobId,
      refetchInterval: activeJobId ? 2000 : false,
    }
  )

  // Start AI assignment job mutation
  const startAIJob = trpc.assignment.startAIAssignmentJob.useMutation()

  const isAIJobRunning = jobStatus?.status === 'RUNNING' || jobStatus?.status === 'PENDING'
  const aiJobProgressPercent = jobStatus?.totalBatches
    ? Math.round((jobStatus.currentBatch / jobStatus.totalBatches) * 100)
    : 0

  // Check if there's a completed AI job with stored suggestions
  const hasStoredAISuggestions = latestJob?.status === 'COMPLETED' && latestJob?.suggestionsCount > 0

  // Algorithmic suggestions (always fetch for algorithm tab)
  const { data: algorithmicSuggestions, isLoading: loadingAlgorithmic, refetch: refetchAlgorithmic } = trpc.assignment.getSuggestions.useQuery(
    { roundId },
    { enabled: !!round }
  )

  // AI-powered suggestions - fetch if there are stored results OR if AI tab is active
  const { data: aiSuggestionsRaw, isLoading: loadingAI, refetch: refetchAI } = trpc.assignment.getAISuggestions.useQuery(
    { roundId, useAI: true },
    {
      enabled: !!round && (hasStoredAISuggestions || activeTab === 'ai') && !isAIJobRunning,
      staleTime: Infinity, // Never consider stale (only refetch manually)
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    }
  )

  // Set active job from latest job on load
  useEffect(() => {
    if (latestJob && (latestJob.status === 'RUNNING' || latestJob.status === 'PENDING')) {
      setActiveJobId(latestJob.id)
      setActiveTab('ai') // Switch to AI tab if a job is running
    }
  }, [latestJob])

  // Handle job completion
  useEffect(() => {
    if (jobStatus?.status === 'COMPLETED') {
      toast.success(
        `AI Assignment complete: ${jobStatus.suggestionsCount} suggestions generated${jobStatus.fallbackUsed ? ' (using fallback algorithm)' : ''}`
      )
      setActiveJobId(null)
      refetchLatestJob()
      refetchAI()
    } else if (jobStatus?.status === 'FAILED') {
      toast.error(`AI Assignment failed: ${jobStatus.errorMessage || 'Unknown error'}`)
      setActiveJobId(null)
      refetchLatestJob()
    }
  }, [jobStatus?.status, jobStatus?.suggestionsCount, jobStatus?.fallbackUsed, jobStatus?.errorMessage, refetchLatestJob, refetchAI])

  const handleStartAIJob = async () => {
    try {
      setActiveTab('ai') // Switch to AI tab when starting
      const result = await startAIJob.mutateAsync({ roundId })
      setActiveJobId(result.jobId)
      toast.info('AI Assignment job started. Progress will update automatically.')
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : 'Failed to start AI assignment'
      )
    }
  }

  // Normalize AI suggestions to match algorithmic format
  const aiSuggestions = aiSuggestionsRaw?.suggestions?.map((s) => ({
    userId: s.jurorId,
    jurorName: s.jurorName,
    projectId: s.projectId,
    projectTitle: s.projectTitle,
    score: Math.round(s.confidenceScore * 100),
    reasoning: [s.reasoning],
  })) ?? []

  // Use the appropriate suggestions based on active tab
  const currentSuggestions = activeTab === 'ai' ? aiSuggestions : (algorithmicSuggestions ?? [])
  const isLoadingCurrentSuggestions = activeTab === 'ai' ? (loadingAI || isAIJobRunning) : loadingAlgorithmic

  // Get available jurors for manual assignment
  const { data: availableJurors } = trpc.user.getJuryMembers.useQuery(
    { roundId },
    { enabled: manualOpen }
  )

  // Get projects in this round for manual assignment
  const { data: roundProjects } = trpc.project.list.useQuery(
    { roundId, perPage: 500 },
    { enabled: manualOpen }
  )

  const utils = trpc.useUtils()

  const deleteAssignment = trpc.assignment.delete.useMutation({
    onSuccess: () => {
      utils.assignment.listByRound.invalidate({ roundId })
      utils.assignment.getStats.invalidate({ roundId })
    },
  })

  const applySuggestions = trpc.assignment.applySuggestions.useMutation({
    onSuccess: () => {
      utils.assignment.listByRound.invalidate({ roundId })
      utils.assignment.getStats.invalidate({ roundId })
      utils.assignment.getSuggestions.invalidate({ roundId })
      utils.assignment.getAISuggestions.invalidate({ roundId })
      setSelectedSuggestions(new Set())
    },
  })

  const createAssignment = trpc.assignment.create.useMutation({
    onSuccess: () => {
      utils.assignment.listByRound.invalidate({ roundId })
      utils.assignment.getStats.invalidate({ roundId })
      utils.assignment.getSuggestions.invalidate({ roundId })
    },
    onError: (error) => {
      toast.error(error.message || 'Failed to create assignment')
    },
  })

  const [bulkAssigning, setBulkAssigning] = useState(false)

  const handleBulkAssign = async () => {
    if (!selectedJuror || selectedProjects.size === 0) {
      toast.error('Please select a juror and at least one project')
      return
    }
    setBulkAssigning(true)
    let successCount = 0
    let errorCount = 0
    for (const projectId of selectedProjects) {
      try {
        await createAssignment.mutateAsync({
          userId: selectedJuror,
          projectId,
          roundId,
        })
        successCount++
      } catch {
        errorCount++
      }
    }
    setBulkAssigning(false)
    setSelectedProjects(new Set())
    if (successCount > 0) {
      toast.success(`${successCount} assignment${successCount > 1 ? 's' : ''} created successfully`)
    }
    if (errorCount > 0) {
      toast.error(`${errorCount} assignment${errorCount > 1 ? 's' : ''} failed`)
    }
    utils.assignment.listByRound.invalidate({ roundId })
    utils.assignment.getStats.invalidate({ roundId })
    utils.assignment.getSuggestions.invalidate({ roundId })
  }

  if (loadingRound || loadingAssignments) {
    return <AssignmentsSkeleton />
  }

  if (!round) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <AlertCircle className="h-12 w-12 text-destructive/50" />
          <p className="mt-2 font-medium">Round Not Found</p>
          <Button asChild className="mt-4">
            <Link href="/admin/rounds">Back to Rounds</Link>
          </Button>
        </CardContent>
      </Card>
    )
  }

  const handleToggleSuggestion = (key: string) => {
    setSelectedSuggestions((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(key)) {
        newSet.delete(key)
      } else {
        newSet.add(key)
      }
      return newSet
    })
  }

  const handleSelectAllSuggestions = () => {
    if (currentSuggestions) {
      if (selectedSuggestions.size === currentSuggestions.length) {
        setSelectedSuggestions(new Set())
      } else {
        setSelectedSuggestions(
          new Set(currentSuggestions.map((s) => `${s.userId}-${s.projectId}`))
        )
      }
    }
  }

  const handleApplySelected = async () => {
    if (!currentSuggestions) return

    const selected = currentSuggestions.filter((s) =>
      selectedSuggestions.has(`${s.userId}-${s.projectId}`)
    )

    await applySuggestions.mutateAsync({
      roundId,
      assignments: selected.map((s) => ({
        userId: s.userId,
        projectId: s.projectId,
        reasoning: s.reasoning.join('; '),
      })),
    })
  }

  // Group assignments by project
  const assignmentsByProject = assignments?.reduce((acc, assignment) => {
    const projectId = assignment.project.id
    if (!acc[projectId]) {
      acc[projectId] = {
        project: assignment.project,
        assignments: [],
      }
    }
    acc[projectId].assignments.push(assignment)
    return acc
  }, {} as Record<string, { project: (typeof assignments)[0]['project'], assignments: typeof assignments }>) || {}

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href={`/admin/rounds/${roundId}`}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Round
          </Link>
        </Button>
      </div>

      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="space-y-1">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Link href={`/admin/programs/${round.program.id}`} className="hover:underline">
              {round.program.name}
            </Link>
            <span>/</span>
            <Link href={`/admin/rounds/${roundId}`} className="hover:underline">
              {round.name}
            </Link>
          </div>
          <h1 className="text-2xl font-semibold tracking-tight">
            Manage Judge Assignments
          </h1>
        </div>

        {/* Manual Assignment Toggle */}
        <Button
          variant={manualOpen ? 'secondary' : 'default'}
          onClick={() => {
            setManualOpen(!manualOpen)
            if (!manualOpen) {
              setSelectedJuror('')
              setSelectedProjects(new Set())
              setProjectSearch('')
            }
          }}
        >
          {manualOpen ? (
            <>
              <X className="mr-2 h-4 w-4" />
              Close
            </>
          ) : (
            <>
              <UserPlus className="mr-2 h-4 w-4" />
              Manual Assignment
            </>
          )}
        </Button>
      </div>

      {/* Inline Manual Assignment Section */}
      {manualOpen && (
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg flex items-center gap-2">
                <UserPlus className="h-5 w-5" />
                Manual Assignment
              </CardTitle>
              <Button variant="ghost" size="sm" onClick={() => setManualOpen(false)}>
                <X className="h-4 w-4" />
              </Button>
            </div>
            <CardDescription>
              Select a jury member, then pick projects to assign
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-5">
            {/* Step 1: Juror Picker */}
            <div className="space-y-2">
              <Label className="text-sm font-semibold">Step 1: Select Jury Member</Label>
              <Popover open={jurorPopoverOpen} onOpenChange={setJurorPopoverOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={jurorPopoverOpen}
                    className="w-full justify-between font-normal"
                  >
                    {selectedJuror && availableJurors ? (
                      (() => {
                        const juror = availableJurors.find(j => j.id === selectedJuror)
                        if (!juror) return 'Select a jury member...'
                        const maxAllowed = juror.maxAssignments ?? 10
                        return (
                          <span className="flex items-center gap-2">
                            <span>{juror.name || juror.email}</span>
                            <Badge variant="secondary" className="text-xs">
                              {juror.currentAssignments}/{maxAllowed} assigned
                            </Badge>
                          </span>
                        )
                      })()
                    ) : (
                      'Select a jury member...'
                    )}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[400px] p-0" align="start">
                  <Command>
                    <CommandInput placeholder="Search jurors..." />
                    <CommandList>
                      <CommandEmpty>No jurors found.</CommandEmpty>
                      <CommandGroup>
                        {availableJurors?.map((juror) => {
                          const maxAllowed = juror.maxAssignments ?? 10
                          const isFull = juror.currentAssignments >= maxAllowed
                          return (
                            <CommandItem
                              key={juror.id}
                              value={`${juror.name || ''} ${juror.email}`}
                              onSelect={() => {
                                setSelectedJuror(juror.id === selectedJuror ? '' : juror.id)
                                setSelectedProjects(new Set())
                                setJurorPopoverOpen(false)
                              }}
                              disabled={isFull}
                              className={isFull ? 'opacity-50' : ''}
                            >
                              <Check
                                className={cn(
                                  'mr-2 h-4 w-4',
                                  selectedJuror === juror.id ? 'opacity-100' : 'opacity-0'
                                )}
                              />
                              <div className="flex items-center justify-between w-full">
                                <div className="min-w-0">
                                  <p className="text-sm font-medium truncate">{juror.name || juror.email}</p>
                                  {juror.name && (
                                    <p className="text-xs text-muted-foreground truncate">{juror.email}</p>
                                  )}
                                </div>
                                <Badge variant={isFull ? 'destructive' : 'secondary'} className="text-xs ml-2 shrink-0">
                                  {juror.currentAssignments}/{maxAllowed}
                                  {isFull && ' Full'}
                                </Badge>
                              </div>
                            </CommandItem>
                          )
                        })}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

            {/* Step 2: Project Multi-Select */}
            <div className="space-y-2">
              <Label className="text-sm font-semibold">Step 2: Select Projects</Label>
              {!selectedJuror ? (
                <p className="text-sm text-muted-foreground py-4 text-center">
                  Select a jury member first to see available projects
                </p>
              ) : (
                <>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="Search projects..."
                      value={projectSearch}
                      onChange={(e) => setProjectSearch(e.target.value)}
                      className="pl-9"
                    />
                  </div>
                  {(() => {
                    const projects = roundProjects?.projects ?? []
                    const filtered = projects.filter(p =>
                      p.title.toLowerCase().includes(projectSearch.toLowerCase())
                    )
                    const unassignedToJuror = filtered.filter(p =>
                      !assignments?.some(a => a.userId === selectedJuror && a.projectId === p.id)
                    )
                    const allUnassignedSelected = unassignedToJuror.length > 0 &&
                      unassignedToJuror.every(p => selectedProjects.has(p.id))

                    return (
                      <>
                        <div className="flex items-center gap-2 py-1">
                          <Checkbox
                            checked={allUnassignedSelected}
                            onCheckedChange={() => {
                              if (allUnassignedSelected) {
                                setSelectedProjects(new Set())
                              } else {
                                setSelectedProjects(new Set(unassignedToJuror.map(p => p.id)))
                              }
                            }}
                          />
                          <span className="text-sm text-muted-foreground">
                            Select all unassigned ({unassignedToJuror.length})
                          </span>
                        </div>
                        <ScrollArea className="h-[280px] rounded-lg border">
                          <div className="divide-y">
                            {filtered.map((project) => {
                              const assignmentCount = assignments?.filter(a => a.projectId === project.id).length ?? 0
                              const isAlreadyAssigned = assignments?.some(
                                a => a.userId === selectedJuror && a.projectId === project.id
                              )
                              const isFullCoverage = assignmentCount >= round.requiredReviews
                              const isChecked = selectedProjects.has(project.id)

                              return (
                                <div
                                  key={project.id}
                                  className={cn(
                                    'flex items-center gap-3 px-3 py-2.5 transition-colors',
                                    isAlreadyAssigned ? 'opacity-40 bg-muted/30' : 'hover:bg-muted/50',
                                    isChecked && !isAlreadyAssigned && 'bg-blue-50/50 dark:bg-blue-950/20',
                                  )}
                                >
                                  <Checkbox
                                    checked={isChecked}
                                    disabled={!!isAlreadyAssigned}
                                    onCheckedChange={() => {
                                      setSelectedProjects(prev => {
                                        const next = new Set(prev)
                                        if (next.has(project.id)) {
                                          next.delete(project.id)
                                        } else {
                                          next.add(project.id)
                                        }
                                        return next
                                      })
                                    }}
                                  />
                                  <span className={cn(
                                    'flex-1 text-sm truncate',
                                    isAlreadyAssigned && 'line-through'
                                  )}>
                                    {project.title}
                                  </span>
                                  <Badge
                                    variant={isFullCoverage ? 'default' : 'outline'}
                                    className={cn(
                                      'text-xs shrink-0',
                                      isFullCoverage && 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400 border-0',
                                      isAlreadyAssigned && 'bg-muted text-muted-foreground border-0'
                                    )}
                                  >
                                    {isAlreadyAssigned ? (
                                      <>
                                        <Check className="mr-1 h-3 w-3" />
                                        Assigned
                                      </>
                                    ) : isFullCoverage ? (
                                      <>
                                        <CheckCircle2 className="mr-1 h-3 w-3" />
                                        {assignmentCount}/{round.requiredReviews}
                                      </>
                                    ) : (
                                      `${assignmentCount}/${round.requiredReviews} reviewers`
                                    )}
                                  </Badge>
                                </div>
                              )
                            })}
                            {filtered.length === 0 && (
                              <div className="py-6 text-center text-sm text-muted-foreground">
                                No projects match your search
                              </div>
                            )}
                          </div>
                        </ScrollArea>
                      </>
                    )
                  })()}
                </>
              )}
            </div>

            {/* Assign Button */}
            {selectedJuror && selectedProjects.size > 0 && (
              <Button
                onClick={handleBulkAssign}
                disabled={bulkAssigning}
                className="w-full"
                size="lg"
              >
                {bulkAssigning ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Plus className="mr-2 h-4 w-4" />
                )}
                Assign {selectedProjects.size} Project{selectedProjects.size > 1 ? 's' : ''}
                {availableJurors && (() => {
                  const juror = availableJurors.find(j => j.id === selectedJuror)
                  return juror ? ` to ${juror.name || juror.email}` : ''
                })()}
              </Button>
            )}
          </CardContent>
        </Card>
      )}

      {/* Stats */}
      {stats && (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Judge Assignments</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.totalAssignments}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Completed</CardTitle>
              <CheckCircle2 className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.completedAssignments}</div>
              <p className="text-xs text-muted-foreground">
                {stats.completionPercentage}% complete
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Projects Covered</CardTitle>
              <FileText className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {stats.projectsWithFullCoverage}/{stats.totalProjects}
              </div>
              <p className="text-xs text-muted-foreground">
                {stats.coveragePercentage}% have {round.requiredReviews}+ reviews
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.juryMembersAssigned}</div>
              <p className="text-xs text-muted-foreground">assigned to projects</p>
            </CardContent>
          </Card>
        </div>
      )}

      {/* Coverage Progress */}
      {stats && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Project Coverage</CardTitle>
            <CardDescription>
              {stats.projectsWithFullCoverage} of {stats.totalProjects} projects have
              at least {round.requiredReviews} reviewers assigned
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Progress value={stats.coveragePercentage} className="h-3" />
          </CardContent>
        </Card>
      )}

      {/* Smart Suggestions with Tabs */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-amber-500" />
            Smart Assignment Suggestions
          </CardTitle>
          <CardDescription>
            Get assignment recommendations using algorithmic matching or AI-powered analysis
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={(v) => {
            setActiveTab(v as 'algorithm' | 'ai')
            setSelectedSuggestions(new Set())
          }}>
            <div className="flex items-center justify-between mb-4">
              <TabsList>
                <TabsTrigger value="algorithm" className="gap-2">
                  <Cpu className="h-4 w-4" />
                  Algorithm
                  {algorithmicSuggestions && algorithmicSuggestions.length > 0 && (
                    <Badge variant="secondary" className="ml-1 text-xs">
                      {algorithmicSuggestions.length}
                    </Badge>
                  )}
                </TabsTrigger>
                <TabsTrigger value="ai" className="gap-2" disabled={!isAIAvailable && !hasStoredAISuggestions}>
                  <Brain className="h-4 w-4" />
                  AI Powered
                  {aiSuggestions.length > 0 && (
                    <Badge variant="secondary" className="ml-1 text-xs">
                      {aiSuggestions.length}
                    </Badge>
                  )}
                  {isAIJobRunning && (
                    <Loader2 className="h-3 w-3 animate-spin ml-1" />
                  )}
                </TabsTrigger>
              </TabsList>

              {/* Tab-specific actions */}
              {activeTab === 'algorithm' ? (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => refetchAlgorithmic()}
                  disabled={loadingAlgorithmic}
                >
                  <RefreshCw className={`mr-2 h-4 w-4 ${loadingAlgorithmic ? 'animate-spin' : ''}`} />
                  Refresh
                </Button>
              ) : (
                <div className="flex items-center gap-2">
                  {!isAIJobRunning && (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={handleStartAIJob}
                      disabled={startAIJob.isPending || !isAIAvailable}
                      title={!isAIAvailable ? 'OpenAI API key not configured' : hasStoredAISuggestions ? 'Run AI analysis again' : 'Start AI analysis'}
                    >
                      {startAIJob.isPending ? (
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      ) : (
                        <RefreshCw className="mr-2 h-4 w-4" />
                      )}
                      {hasStoredAISuggestions ? 'Re-analyze' : 'Start Analysis'}
                    </Button>
                  )}
                </div>
              )}
            </div>

            {/* Algorithm Tab Content */}
            <TabsContent value="algorithm" className="mt-0">
              <div className="text-sm text-muted-foreground mb-4">
                Algorithmic recommendations based on tag matching and workload balance
              </div>
              {loadingAlgorithmic ? (
                <div className="flex items-center justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : algorithmicSuggestions && algorithmicSuggestions.length > 0 ? (
                <SuggestionsTable
                  suggestions={algorithmicSuggestions}
                  selectedSuggestions={selectedSuggestions}
                  onToggle={handleToggleSuggestion}
                  onSelectAll={handleSelectAllSuggestions}
                  onApply={handleApplySelected}
                  isApplying={applySuggestions.isPending}
                />
              ) : (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <CheckCircle2 className="h-12 w-12 text-green-500/50" />
                  <p className="mt-2 font-medium">All projects are covered!</p>
                  <p className="text-sm text-muted-foreground">
                    No additional assignments are needed at this time
                  </p>
                </div>
              )}
            </TabsContent>

            {/* AI Tab Content */}
            <TabsContent value="ai" className="mt-0">
              <div className="text-sm text-muted-foreground mb-4">
                GPT-powered recommendations analyzing project descriptions and judge expertise
              </div>

              {/* AI Job Progress Indicator */}
              {isAIJobRunning && jobStatus && (
                <div className="mb-4 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900">
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <Loader2 className="h-5 w-5 animate-spin text-blue-600" />
                      <div className="flex-1">
                        <p className="font-medium text-blue-900 dark:text-blue-100">
                          AI Assignment Analysis in Progress
                        </p>
                        <p className="text-sm text-blue-700 dark:text-blue-300">
                          Processing {jobStatus.totalProjects} projects in {jobStatus.totalBatches} batches
                        </p>
                      </div>
                      <Badge variant="outline" className="border-blue-300 text-blue-700">
                        <Clock className="mr-1 h-3 w-3" />
                        Batch {jobStatus.currentBatch} of {jobStatus.totalBatches}
                      </Badge>
                    </div>
                    <div className="space-y-1">
                      <div className="flex justify-between text-sm">
                        <span className="text-blue-700 dark:text-blue-300">
                          {jobStatus.processedCount} of {jobStatus.totalProjects} projects processed
                        </span>
                        <span className="font-medium text-blue-900 dark:text-blue-100">
                          {aiJobProgressPercent}%
                        </span>
                      </div>
                      <Progress value={aiJobProgressPercent} className="h-2" />
                    </div>
                  </div>
                </div>
              )}

              {isAIJobRunning ? null : loadingAI ? (
                <div className="flex items-center justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : aiSuggestions.length > 0 ? (
                <SuggestionsTable
                  suggestions={aiSuggestions}
                  selectedSuggestions={selectedSuggestions}
                  onToggle={handleToggleSuggestion}
                  onSelectAll={handleSelectAllSuggestions}
                  onApply={handleApplySelected}
                  isApplying={applySuggestions.isPending}
                />
              ) : !hasStoredAISuggestions ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <Brain className="h-12 w-12 text-muted-foreground/50" />
                  <p className="mt-2 font-medium">No AI analysis yet</p>
                  <p className="text-sm text-muted-foreground mb-4">
                    Click &quot;Start Analysis&quot; to generate AI-powered suggestions
                  </p>
                  <Button
                    onClick={handleStartAIJob}
                    disabled={startAIJob.isPending || !isAIAvailable}
                  >
                    {startAIJob.isPending ? (
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    ) : (
                      <Brain className="mr-2 h-4 w-4" />
                    )}
                    Start AI Analysis
                  </Button>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <CheckCircle2 className="h-12 w-12 text-green-500/50" />
                  <p className="mt-2 font-medium">All projects are covered!</p>
                  <p className="text-sm text-muted-foreground">
                    No additional assignments are needed at this time
                  </p>
                </div>
              )}
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

      {/* Current Judge Assignments */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Current Judge Assignments</CardTitle>
          <CardDescription>
            View and manage existing project-to-judge assignments
          </CardDescription>
        </CardHeader>
        <CardContent>
          {Object.keys(assignmentsByProject).length > 0 ? (
            <div className="space-y-6">
              {Object.entries(assignmentsByProject).map(
                ([projectId, { project, assignments: projectAssignments }]) => (
                  <div key={projectId} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">{project.title}</p>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="text-xs">
                            {projectAssignments.length} reviewer
                            {projectAssignments.length !== 1 ? 's' : ''}
                          </Badge>
                          {projectAssignments.length >= round.requiredReviews && (
                            <Badge variant="secondary" className="text-xs">
                              <CheckCircle2 className="mr-1 h-3 w-3" />
                              Full coverage
                            </Badge>
                          )}
                        </div>
                      </div>
                    </div>

                    <div className="pl-4 border-l-2 border-muted space-y-2">
                      {projectAssignments.map((assignment) => (
                        <div
                          key={assignment.id}
                          className="flex items-center justify-between py-1"
                        >
                          <div className="flex items-center gap-2">
                            <span className="text-sm">
                              {assignment.user.name || assignment.user.email}
                            </span>
                            {assignment.evaluation?.status === 'SUBMITTED' ? (
                              <Badge variant="default" className="text-xs">
                                <CheckCircle2 className="mr-1 h-3 w-3" />
                                Submitted
                              </Badge>
                            ) : assignment.evaluation?.status === 'DRAFT' ? (
                              <Badge variant="secondary" className="text-xs">
                                <Clock className="mr-1 h-3 w-3" />
                                In Progress
                              </Badge>
                            ) : (
                              <Badge variant="outline" className="text-xs">
                                Pending
                              </Badge>
                            )}
                          </div>

                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button
                                variant="ghost"
                                size="sm"
                                disabled={
                                  assignment.evaluation?.status === 'SUBMITTED'
                                }
                              >
                                <Trash2 className="h-4 w-4 text-destructive" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>
                                  Remove Assignment?
                                </AlertDialogTitle>
                                <AlertDialogDescription>
                                  This will remove {assignment.user.name || assignment.user.email} from
                                  evaluating this project. This action cannot be
                                  undone.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction
                                  onClick={() =>
                                    deleteAssignment.mutate({ id: assignment.id })
                                  }
                                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                >
                                  Remove
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </div>
                      ))}
                    </div>
                  </div>
                )
              )}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <Users className="h-12 w-12 text-muted-foreground/50" />
              <p className="mt-2 font-medium">No Judge Assignments Yet</p>
              <p className="text-sm text-muted-foreground">
                Use the smart suggestions above or manually assign judges to
                projects
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

function AssignmentsSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-9 w-36" />

      <div className="space-y-1">
        <Skeleton className="h-4 w-48" />
        <Skeleton className="h-8 w-64" />
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <Card key={i}>
            <CardHeader className="pb-2">
              <Skeleton className="h-4 w-32" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16" />
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-48" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-3 w-full" />
        </CardContent>
      </Card>
    </div>
  )
}

export default function AssignmentManagementPage({ params }: PageProps) {
  const { id } = use(params)

  return (
    <Suspense fallback={<AssignmentsSkeleton />}>
      <AssignmentManagementContent roundId={id} />
    </Suspense>
  )
}