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 { Label } from '@/components/ui/label'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ScrollArea } from '@/components/ui/scroll-area'
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 [addProjectOpen, setAddProjectOpen] = 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={() => { setAddProjectOpen(true) }}>
            <Plus className="h-4 w-4 mr-1.5" />
            Add Project
          </Button>
        </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_160px_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>Country</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_160px_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 className="text-xs text-muted-foreground truncate">
                {ps.project?.country || '—'}
              </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 (legacy, kept for empty state) */}
      <QuickAddDialog
        open={quickAddOpen}
        onOpenChange={setQuickAddOpen}
        roundId={roundId}
        competitionId={competitionId}
        onAssigned={() => {
          utils.roundEngine.getProjectStates.invalidate({ roundId })
        }}
      />

      {/* Add Project Dialog (Create New + From Pool) */}
      <AddProjectDialog
        open={addProjectOpen}
        onOpenChange={setAddProjectOpen}
        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>
  )
}

/**
 * Add Project Dialog — two tabs: "Create New" and "From Pool".
 * Create New: form to create a project and assign it directly to the round.
 * From Pool: search existing projects not yet in this round and assign them.
 */
function AddProjectDialog({
  open,
  onOpenChange,
  roundId,
  competitionId,
  onAssigned,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  roundId: string
  competitionId: string
  onAssigned: () => void
}) {
  const [activeTab, setActiveTab] = useState<'create' | 'pool'>('create')

  // ── Create New tab state ──
  const [title, setTitle] = useState('')
  const [teamName, setTeamName] = useState('')
  const [description, setDescription] = useState('')
  const [country, setCountry] = useState('')
  const [category, setCategory] = useState<string>('')

  // ── From Pool tab state ──
  const [poolSearch, setPoolSearch] = useState('')
  const [selectedPoolIds, setSelectedPoolIds] = useState<Set<string>>(new Set())

  const utils = trpc.useUtils()

  // Get the competition to find programId (for pool search)
  const { data: competition } = trpc.competition.getById.useQuery(
    { id: competitionId },
    { enabled: open && !!competitionId },
  )
  const programId = (competition as any)?.programId || ''

  // Pool query
  const { data: poolResults, isLoading: poolLoading } = trpc.projectPool.listUnassigned.useQuery(
    {
      programId,
      excludeRoundId: roundId,
      search: poolSearch.trim() || undefined,
      perPage: 50,
    },
    { enabled: open && activeTab === 'pool' && !!programId },
  )

  // Create mutation
  const createMutation = trpc.project.createAndAssignToRound.useMutation({
    onSuccess: () => {
      toast.success('Project created and added to round')
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      onAssigned()
      resetAndClose()
    },
    onError: (err) => toast.error(err.message),
  })

  // Assign from pool mutation
  const assignMutation = trpc.projectPool.assignToRound.useMutation({
    onSuccess: (data) => {
      toast.success(`${data.assignedCount} project(s) added to round`)
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      onAssigned()
      resetAndClose()
    },
    onError: (err) => toast.error(err.message),
  })

  const resetAndClose = () => {
    setTitle('')
    setTeamName('')
    setDescription('')
    setCountry('')
    setCategory('')
    setPoolSearch('')
    setSelectedPoolIds(new Set())
    onOpenChange(false)
  }

  const handleCreate = () => {
    if (!title.trim()) return
    createMutation.mutate({
      title: title.trim(),
      teamName: teamName.trim() || undefined,
      description: description.trim() || undefined,
      country: country.trim() || undefined,
      competitionCategory: category === 'STARTUP' || category === 'BUSINESS_CONCEPT' ? category : undefined,
      roundId,
    })
  }

  const handleAssignFromPool = () => {
    if (selectedPoolIds.size === 0) return
    assignMutation.mutate({
      projectIds: Array.from(selectedPoolIds),
      roundId,
    })
  }

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

  const isMutating = createMutation.isPending || assignMutation.isPending

  return (
    <Dialog open={open} onOpenChange={(isOpen) => {
      if (!isOpen) resetAndClose()
      else onOpenChange(true)
    }}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Add Project to Round</DialogTitle>
          <DialogDescription>
            Create a new project or select existing ones to add to this round.
          </DialogDescription>
        </DialogHeader>

        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'create' | 'pool')}>
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="create">Create New</TabsTrigger>
            <TabsTrigger value="pool">From Pool</TabsTrigger>
          </TabsList>

          {/* ── Create New Tab ── */}
          <TabsContent value="create" className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="add-project-title">Title *</Label>
              <Input
                id="add-project-title"
                placeholder="Project title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="add-project-team">Team Name</Label>
              <Input
                id="add-project-team"
                placeholder="Team or organization name"
                value={teamName}
                onChange={(e) => setTeamName(e.target.value)}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="add-project-country">Country</Label>
                <Input
                  id="add-project-country"
                  placeholder="e.g. France"
                  value={country}
                  onChange={(e) => setCountry(e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label>Category</Label>
                <Select value={category} onValueChange={setCategory}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="STARTUP">Startup</SelectItem>
                    <SelectItem value="BUSINESS_CONCEPT">Business Concept</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="add-project-desc">Description</Label>
              <Input
                id="add-project-desc"
                placeholder="Brief description (optional)"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={resetAndClose}>Cancel</Button>
              <Button
                onClick={handleCreate}
                disabled={!title.trim() || isMutating}
              >
                {createMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                Create & Add to Round
              </Button>
            </DialogFooter>
          </TabsContent>

          {/* ── From Pool Tab ── */}
          <TabsContent value="pool" className="space-y-4 mt-4">
            <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={poolSearch}
                onChange={(e) => setPoolSearch(e.target.value)}
                className="pl-8"
              />
            </div>

            <ScrollArea className="h-[320px] rounded-md border">
              <div className="p-2 space-y-0.5">
                {poolLoading && (
                  <div className="flex items-center justify-center py-8">
                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                  </div>
                )}

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

                {poolResults?.projects.map((project: any) => {
                  const isSelected = selectedPoolIds.has(project.id)
                  return (
                    <label
                      key={project.id}
                      className={`flex items-center gap-3 rounded-md px-2.5 py-2 text-sm cursor-pointer transition-colors ${
                        isSelected ? 'bg-accent' : 'hover:bg-muted/50'
                      }`}
                    >
                      <Checkbox
                        checked={isSelected}
                        onCheckedChange={() => togglePoolProject(project.id)}
                      />
                      <div className="flex flex-1 items-center justify-between min-w-0">
                        <div className="min-w-0">
                          <p className="text-sm font-medium truncate">{project.title}</p>
                          <p className="text-xs text-muted-foreground truncate">
                            {project.teamName}
                            {project.country && <> &middot; {project.country}</>}
                          </p>
                        </div>
                        {project.competitionCategory && (
                          <Badge variant="outline" className="text-[10px] ml-2 shrink-0">
                            {project.competitionCategory === 'STARTUP' ? 'Startup' : 'Concept'}
                          </Badge>
                        )}
                      </div>
                    </label>
                  )
                })}
              </div>
            </ScrollArea>

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

            <DialogFooter>
              <Button variant="outline" onClick={resetAndClose}>Cancel</Button>
              <Button
                onClick={handleAssignFromPool}
                disabled={selectedPoolIds.size === 0 || isMutating}
              >
                {assignMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                {selectedPoolIds.size <= 1
                  ? 'Add to Round'
                  : `Add ${selectedPoolIds.size} Projects to Round`
                }
              </Button>
            </DialogFooter>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}