MOPC-Portal/src/components/admin/round/project-states-table.tsx

'use client'

import { useState, useCallback, useMemo } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Loader2,
  MoreHorizontal,
  ArrowRight,
  XCircle,
  CheckCircle2,
  Clock,
  Play,
  LogOut,
  Layers,
  Trash2,
  Plus,
  Search,
  ExternalLink,
} from 'lucide-react'
import Link from 'next/link'
import type { Route } from 'next'

const PROJECT_STATES = ['PENDING', 'IN_PROGRESS', 'PASSED', 'REJECTED', 'COMPLETED', 'WITHDRAWN'] as const
type ProjectState = (typeof PROJECT_STATES)[number]

const stateConfig: Record<ProjectState, { label: string; color: string; icon: React.ElementType }> = {
  PENDING: { label: 'Pending', color: 'bg-gray-100 text-gray-700 border-gray-200', icon: Clock },
  IN_PROGRESS: { label: 'In Progress', color: 'bg-blue-100 text-blue-700 border-blue-200', icon: Play },
  PASSED: { label: 'Passed', color: 'bg-green-100 text-green-700 border-green-200', icon: CheckCircle2 },
  REJECTED: { label: 'Rejected', color: 'bg-red-100 text-red-700 border-red-200', icon: XCircle },
  COMPLETED: { label: 'Completed', color: 'bg-emerald-100 text-emerald-700 border-emerald-200', icon: CheckCircle2 },
  WITHDRAWN: { label: 'Withdrawn', color: 'bg-orange-100 text-orange-700 border-orange-200', icon: LogOut },
}

type ProjectStatesTableProps = {
  competitionId: string
  roundId: string
}

export function ProjectStatesTable({ competitionId, roundId }: ProjectStatesTableProps) {
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [stateFilter, setStateFilter] = useState<string>('ALL')
  const [searchQuery, setSearchQuery] = useState('')
  const [batchDialogOpen, setBatchDialogOpen] = useState(false)
  const [batchNewState, setBatchNewState] = useState<ProjectState>('PASSED')
  const [removeConfirmId, setRemoveConfirmId] = useState<string | null>(null)
  const [batchRemoveOpen, setBatchRemoveOpen] = useState(false)
  const [quickAddOpen, setQuickAddOpen] = useState(false)

  const utils = trpc.useUtils()

  const poolLink = `/admin/projects/pool?roundId=${roundId}&competitionId=${competitionId}` as Route

  const { data: projectStates, isLoading } = trpc.roundEngine.getProjectStates.useQuery(
    { roundId },
    { refetchInterval: 15_000 },
  )

  const transitionMutation = trpc.roundEngine.transitionProject.useMutation({
    onSuccess: () => {
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      toast.success('Project state updated')
    },
    onError: (err) => toast.error(err.message),
  })

  const batchTransitionMutation = trpc.roundEngine.batchTransition.useMutation({
    onSuccess: (data) => {
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      setSelectedIds(new Set())
      setBatchDialogOpen(false)
      toast.success(`${data.succeeded.length} projects updated${data.failed.length > 0 ? `, ${data.failed.length} failed` : ''}`)
    },
    onError: (err) => toast.error(err.message),
  })

  const removeMutation = trpc.roundEngine.removeFromRound.useMutation({
    onSuccess: (data) => {
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      setRemoveConfirmId(null)
      toast.success(`Removed from ${data.removedFromRounds} round(s)`)
    },
    onError: (err) => toast.error(err.message),
  })

  const batchRemoveMutation = trpc.roundEngine.batchRemoveFromRound.useMutation({
    onSuccess: (data) => {
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      setSelectedIds(new Set())
      setBatchRemoveOpen(false)
      toast.success(`${data.removedCount} project(s) removed from this round and later rounds`)
    },
    onError: (err) => toast.error(err.message),
  })

  const handleTransition = (projectId: string, newState: ProjectState) => {
    transitionMutation.mutate({ projectId, roundId, newState })
  }

  const handleBatchTransition = () => {
    batchTransitionMutation.mutate({
      projectIds: Array.from(selectedIds),
      roundId,
      newState: batchNewState,
    })
  }

  const toggleSelect = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  // Apply state filter first, then search filter
  const filtered = useMemo(() => {
    let result = projectStates ?? []
    if (stateFilter !== 'ALL') {
      result = result.filter((ps: any) => ps.state === stateFilter)
    }
    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase()
      result = result.filter((ps: any) =>
        (ps.project?.title || '').toLowerCase().includes(q) ||
        (ps.project?.teamName || '').toLowerCase().includes(q)
      )
    }
    return result
  }, [projectStates, stateFilter, searchQuery])

  const toggleSelectAll = useCallback(() => {
    const ids = filtered.map((ps: any) => ps.projectId)
    const allSelected = ids.length > 0 && ids.every((id: string) => selectedIds.has(id))
    if (allSelected) {
      setSelectedIds((prev) => {
        const next = new Set(prev)
        ids.forEach((id: string) => next.delete(id))
        return next
      })
    } else {
      setSelectedIds((prev) => {
        const next = new Set(prev)
        ids.forEach((id: string) => next.add(id))
        return next
      })
    }
  }, [filtered, selectedIds])

  // State counts
  const counts = projectStates?.reduce((acc: Record<string, number>, ps: any) => {
    acc[ps.state] = (acc[ps.state] || 0) + 1
    return acc
  }, {} as Record<string, number>) ?? {}

  if (isLoading) {
    return (
      <div className="space-y-3">
        <Skeleton className="h-10 w-full" />
        {[1, 2, 3, 4, 5].map((i) => (
          <Skeleton key={i} className="h-14 w-full" />
        ))}
      </div>
    )
  }

  if (!projectStates || projectStates.length === 0) {
    return (
      <Card>
        <CardContent className="py-12">
          <div className="flex flex-col items-center justify-center text-center">
            <div className="rounded-full bg-muted p-4 mb-4">
              <Layers className="h-8 w-8 text-muted-foreground" />
            </div>
            <p className="text-sm font-medium">No Projects in This Round</p>
            <p className="text-xs text-muted-foreground mt-1 max-w-sm">
              Assign projects from the Project Pool to this round to get started.
            </p>
            <Link href={poolLink}>
              <Button size="sm" className="mt-4">
                <Plus className="h-4 w-4 mr-1.5" />
                Go to Project Pool
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-4">
      {/* Top bar: search + filters + add buttons */}
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div className="flex items-center gap-3 flex-1 min-w-0">
          <div className="relative w-64">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
            <Input
              placeholder="Search projects..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-8 h-8 text-sm"
            />
          </div>
          <div className="flex flex-wrap gap-1.5">
            <button
              onClick={() => { setStateFilter('ALL'); setSelectedIds(new Set()) }}
              className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
                stateFilter === 'ALL'
                  ? 'bg-foreground text-background border-foreground'
                  : 'bg-muted text-muted-foreground border-transparent hover:border-border'
              }`}
            >
              All ({projectStates.length})
            </button>
            {PROJECT_STATES.map((state) => {
              const count = counts[state] || 0
              if (count === 0) return null
              const cfg = stateConfig[state]
              return (
                <button
                  key={state}
                  onClick={() => { setStateFilter(state); setSelectedIds(new Set()) }}
                  className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
                    stateFilter === state
                      ? cfg.color + ' border-current'
                      : 'bg-muted text-muted-foreground border-transparent hover:border-border'
                  }`}
                >
                  {cfg.label} ({count})
                </button>
              )
            })}
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button size="sm" variant="outline" onClick={() => { setQuickAddOpen(true) }}>
            <Plus className="h-4 w-4 mr-1.5" />
            Quick Add
          </Button>
          <Link href={poolLink}>
            <Button size="sm" variant="outline">
              <Plus className="h-4 w-4 mr-1.5" />
              Add from Pool
            </Button>
          </Link>
        </div>
      </div>

      {/* Search results count */}
      {searchQuery.trim() && (
        <p className="text-xs text-muted-foreground">
          Showing {filtered.length} of {projectStates.length} projects matching &quot;{searchQuery}&quot;
        </p>
      )}

      {/* Bulk actions bar */}
      {selectedIds.size > 0 && (
        <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 border">
          <span className="text-sm font-medium">{selectedIds.size} selected</span>
          <div className="flex items-center gap-2 ml-auto">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setBatchDialogOpen(true)}
            >
              <ArrowRight className="h-3.5 w-3.5 mr-1.5" />
              Change State
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="text-destructive border-destructive/30 hover:bg-destructive/10"
              onClick={() => setBatchRemoveOpen(true)}
            >
              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
              Remove from Round
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSelectedIds(new Set())}
            >
              Clear
            </Button>
          </div>
        </div>
      )}

      {/* Table */}
      <div className="border rounded-lg overflow-hidden">
        {/* Header */}
        <div className="grid grid-cols-[40px_1fr_140px_120px_100px_48px] gap-2 px-4 py-2.5 bg-muted/40 text-xs font-medium text-muted-foreground border-b">
          <div>
            <Checkbox
              checked={filtered.length > 0 && filtered.every((ps: any) => selectedIds.has(ps.projectId))}
              onCheckedChange={toggleSelectAll}
            />
          </div>
          <div>Project</div>
          <div>Category</div>
          <div>State</div>
          <div>Entered</div>
          <div />
        </div>

        {/* Rows */}
        {filtered.map((ps: any) => {
          const cfg = stateConfig[ps.state as ProjectState] || stateConfig.PENDING
          const StateIcon = cfg.icon
          return (
            <div
              key={ps.id}
              className="grid grid-cols-[40px_1fr_140px_120px_100px_48px] gap-2 px-4 py-3 items-center border-b last:border-b-0 hover:bg-muted/30 text-sm"
            >
              <div>
                <Checkbox
                  checked={selectedIds.has(ps.projectId)}
                  onCheckedChange={() => toggleSelect(ps.projectId)}
                />
              </div>
              <div className="min-w-0">
                <Link
                  href={`/admin/projects/${ps.projectId}` as Route}
                  className="font-medium truncate block hover:underline text-foreground"
                >
                  {ps.project?.title || 'Unknown'}
                </Link>
                <p className="text-xs text-muted-foreground truncate">{ps.project?.teamName}</p>
              </div>
              <div>
                <Badge variant="outline" className="text-xs">
                  {ps.project?.competitionCategory || '—'}
                </Badge>
              </div>
              <div>
                <Badge variant="outline" className={`text-xs ${cfg.color}`}>
                  <StateIcon className="h-3 w-3 mr-1" />
                  {cfg.label}
                </Badge>
              </div>
              <div className="text-xs text-muted-foreground">
                {ps.enteredAt ? new Date(ps.enteredAt).toLocaleDateString() : '—'}
              </div>
              <div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-7 w-7">
                      <MoreHorizontal className="h-3.5 w-3.5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem asChild>
                      <Link href={`/admin/projects/${ps.projectId}` as Route}>
                        <ExternalLink className="h-3.5 w-3.5 mr-2" />
                        View Project
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    {PROJECT_STATES.filter((s) => s !== ps.state).map((state) => {
                      const sCfg = stateConfig[state]
                      return (
                        <DropdownMenuItem
                          key={state}
                          onClick={() => handleTransition(ps.projectId, state)}
                          disabled={transitionMutation.isPending}
                        >
                          <sCfg.icon className="h-3.5 w-3.5 mr-2" />
                          Move to {sCfg.label}
                        </DropdownMenuItem>
                      )
                    })}
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                      onClick={() => setRemoveConfirmId(ps.projectId)}
                      className="text-destructive focus:text-destructive"
                    >
                      <Trash2 className="h-3.5 w-3.5 mr-2" />
                      Remove from Round
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          )
        })}

        {filtered.length === 0 && searchQuery.trim() && (
          <div className="px-4 py-8 text-center text-sm text-muted-foreground">
            No projects match &quot;{searchQuery}&quot;
          </div>
        )}
      </div>

      {/* Quick Add Dialog */}
      <QuickAddDialog
        open={quickAddOpen}
        onOpenChange={setQuickAddOpen}
        roundId={roundId}
        competitionId={competitionId}
        onAssigned={() => {
          utils.roundEngine.getProjectStates.invalidate({ roundId })
        }}
      />

      {/* Single Remove Confirmation */}
      <AlertDialog open={!!removeConfirmId} onOpenChange={(open) => { if (!open) setRemoveConfirmId(null) }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remove project from this round?</AlertDialogTitle>
            <AlertDialogDescription>
              The project will be removed from this round and all subsequent rounds.
              It will remain in any prior rounds it was already assigned to.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (removeConfirmId) {
                  removeMutation.mutate({ projectId: removeConfirmId, roundId })
                }
              }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={removeMutation.isPending}
            >
              {removeMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              Remove
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Batch Remove Confirmation */}
      <AlertDialog open={batchRemoveOpen} onOpenChange={setBatchRemoveOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remove {selectedIds.size} projects from this round?</AlertDialogTitle>
            <AlertDialogDescription>
              These projects will be removed from this round and all subsequent rounds in the competition.
              They will remain in any prior rounds they were already assigned to.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                batchRemoveMutation.mutate({
                  projectIds: Array.from(selectedIds),
                  roundId,
                })
              }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={batchRemoveMutation.isPending}
            >
              {batchRemoveMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              Remove {selectedIds.size} Projects
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Batch Transition Dialog */}
      <Dialog open={batchDialogOpen} onOpenChange={setBatchDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Change State for {selectedIds.size} Projects</DialogTitle>
            <DialogDescription>
              All selected projects will be moved to the new state.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <label className="text-sm font-medium">New State</label>
            <Select value={batchNewState} onValueChange={(v) => setBatchNewState(v as ProjectState)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {PROJECT_STATES.map((state) => (
                  <SelectItem key={state} value={state}>
                    {stateConfig[state].label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setBatchDialogOpen(false)}>Cancel</Button>
            <Button
              onClick={handleBatchTransition}
              disabled={batchTransitionMutation.isPending}
            >
              {batchTransitionMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              Update {selectedIds.size} Projects
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

/**
 * Quick Add Dialog — inline search + assign projects to this round without leaving the page.
 */
function QuickAddDialog({
  open,
  onOpenChange,
  roundId,
  competitionId,
  onAssigned,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  roundId: string
  competitionId: string
  onAssigned: () => void
}) {
  const [search, setSearch] = useState('')
  const [addingIds, setAddingIds] = useState<Set<string>>(new Set())

  // Get the competition to find programId
  const { data: competition } = trpc.competition.getById.useQuery(
    { id: competitionId },
    { enabled: open && !!competitionId },
  )

  const programId = (competition as any)?.programId || ''

  const { data: poolResults, isLoading } = trpc.projectPool.listUnassigned.useQuery(
    {
      programId,
      excludeRoundId: roundId,
      search: search.trim() || undefined,
      perPage: 10,
    },
    { enabled: open && !!programId },
  )

  const assignMutation = trpc.projectPool.assignToRound.useMutation({
    onSuccess: (data) => {
      toast.success(`Added to round`)
      onAssigned()
      // Remove from addingIds
      setAddingIds(new Set())
    },
    onError: (err) => toast.error(err.message),
  })

  const handleQuickAssign = (projectId: string) => {
    setAddingIds((prev) => new Set(prev).add(projectId))
    assignMutation.mutate({ projectIds: [projectId], roundId })
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Quick Add Projects</DialogTitle>
          <DialogDescription>
            Search and assign projects to this round without leaving the page.
          </DialogDescription>
        </DialogHeader>

        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <Input
            placeholder="Search by project title or team..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-8"
            autoFocus
          />
        </div>

        <div className="max-h-[320px] overflow-y-auto space-y-1">
          {isLoading && (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
            </div>
          )}

          {!isLoading && poolResults?.projects.length === 0 && (
            <p className="text-sm text-muted-foreground text-center py-8">
              {search.trim() ? `No projects found matching "${search}"` : 'No unassigned projects available'}
            </p>
          )}

          {poolResults?.projects.map((project: any) => (
            <div
              key={project.id}
              className="flex items-center justify-between gap-3 p-2.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border"
            >
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium truncate">{project.title}</p>
                <p className="text-xs text-muted-foreground truncate">
                  {project.teamName}
                  {project.competitionCategory && (
                    <> &middot; {project.competitionCategory}</>
                  )}
                </p>
              </div>
              <Button
                size="sm"
                variant="outline"
                className="shrink-0"
                disabled={assignMutation.isPending && addingIds.has(project.id)}
                onClick={() => handleQuickAssign(project.id)}
              >
                {assignMutation.isPending && addingIds.has(project.id) ? (
                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
                ) : (
                  <>
                    <Plus className="h-3.5 w-3.5 mr-1" />
                    Add
                  </>
                )}
              </Button>
            </div>
          ))}
        </div>

        {poolResults && poolResults.total > 10 && (
          <p className="text-xs text-muted-foreground text-center">
            Showing 10 of {poolResults.total} &mdash; refine your search for more specific results
          </p>
        )}
      </DialogContent>
    </Dialog>
  )
}