'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { Loader2, Mail, ArrowRightLeft, UserPlus } from 'lucide-react'
import { TransferAssignmentsDialog } from './transfer-assignments-dialog'

export type JuryProgressTableProps = {
  roundId: string
}

export function JuryProgressTable({ roundId }: JuryProgressTableProps) {
  const utils = trpc.useUtils()
  const [transferJuror, setTransferJuror] = useState<{ id: string; name: string } | null>(null)

  const { data: workload, isLoading } = trpc.analytics.getJurorWorkload.useQuery(
    { roundId },
    { refetchInterval: 15_000 },
  )

  const notifyMutation = trpc.assignment.notifySingleJurorOfAssignments.useMutation({
    onSuccess: (data) => {
      toast.success(`Notified juror of ${data.projectCount} assignment(s)`)
    },
    onError: (err) => toast.error(err.message),
  })

  const reshuffleMutation = trpc.assignment.reassignDroppedJuror.useMutation({
    onSuccess: (data) => {
      utils.assignment.listByStage.invalidate({ roundId })
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      utils.analytics.getJurorWorkload.invalidate({ roundId })
      utils.roundAssignment.unassignedQueue.invalidate({ roundId })

      if (data.failedCount > 0) {
        toast.warning(`Dropped juror and reassigned ${data.movedCount} project(s). ${data.failedCount} could not be reassigned (all remaining jurors at cap/blocked).`)
      } else {
        toast.success(`Dropped juror and reassigned ${data.movedCount} project(s) evenly across available jurors.`)
      }
    },
    onError: (err) => toast.error(err.message),
  })

  return (
    <>
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Jury Progress</CardTitle>
        <CardDescription>Evaluation completion per juror. Click the mail icon to notify an individual juror.</CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-10 w-full" />)}
          </div>
        ) : !workload || workload.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-6">
            No assignments yet
          </p>
        ) : (
          <div className="space-y-3 max-h-[350px] overflow-y-auto">
            {workload.map((juror) => {
              const pct = juror.completionRate
              const barGradient = pct === 100
                ? 'bg-gradient-to-r from-emerald-400 to-emerald-600'
                : pct >= 50
                  ? 'bg-gradient-to-r from-blue-400 to-blue-600'
                  : pct > 0
                    ? 'bg-gradient-to-r from-amber-400 to-amber-600'
                    : 'bg-gray-300'

              return (
                <div key={juror.id} className="space-y-1 hover:bg-muted/20 rounded px-1 py-0.5 -mx-1 transition-colors group">
                  <div className="flex justify-between items-center text-xs">
                    <span className="font-medium truncate max-w-[50%]">{juror.name}</span>
                    <div className="flex items-center gap-2 shrink-0">
                      <span className="text-muted-foreground tabular-nums">
                        {juror.completed}/{juror.assigned} ({pct}%)
                      </span>
                      <TooltipProvider delayDuration={200}>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-5 w-5 text-muted-foreground hover:text-foreground"
                              disabled={notifyMutation.isPending}
                              onClick={() => notifyMutation.mutate({ roundId, userId: juror.id })}
                            >
                              {notifyMutation.isPending && notifyMutation.variables?.userId === juror.id ? (
                                <Loader2 className="h-3 w-3 animate-spin" />
                              ) : (
                                <Mail className="h-3 w-3" />
                              )}
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent side="left"><p>Notify this juror of their assignments</p></TooltipContent>
                        </Tooltip>
                      </TooltipProvider>

                      <TooltipProvider delayDuration={200}>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-5 w-5 text-muted-foreground hover:text-foreground"
                              onClick={() => setTransferJuror({ id: juror.id, name: juror.name })}
                            >
                              <ArrowRightLeft className="h-3 w-3" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent side="left"><p>Transfer assignments to other jurors</p></TooltipContent>
                        </Tooltip>
                      </TooltipProvider>

                      <TooltipProvider delayDuration={200}>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-5 w-5 text-muted-foreground hover:text-destructive"
                              disabled={reshuffleMutation.isPending}
                              onClick={() => {
                                const ok = window.confirm(
                                  `Remove ${juror.name} from this jury pool and reassign all their unsubmitted projects to other jurors within their caps? Submitted evaluations will be preserved. This cannot be undone.`
                                )
                                if (!ok) return
                                reshuffleMutation.mutate({ roundId, jurorId: juror.id })
                              }}
                            >
                              {reshuffleMutation.isPending && reshuffleMutation.variables?.jurorId === juror.id ? (
                                <Loader2 className="h-3 w-3 animate-spin" />
                              ) : (
                                <UserPlus className="h-3 w-3" />
                              )}
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent side="left"><p>Drop juror + reshuffle pending projects</p></TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </div>
                  </div>
                  <div className="h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className={cn('h-full rounded-full transition-all duration-500', barGradient)}
                      style={{ width: `${pct}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>

    {transferJuror && (
      <TransferAssignmentsDialog
        roundId={roundId}
        sourceJuror={transferJuror}
        open={!!transferJuror}
        onClose={() => setTransferJuror(null)}
      />
    )}
    </>
  )
}