'use client'

import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
import { useParams, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  ArrowLeft,
  ArrowRightLeft,
  Save,
  Loader2,
  ChevronDown,
  ChevronRight,
  Play,
  Square,
  Archive,
  Layers,
  Users,
  CalendarDays,
  BarChart3,
  ClipboardList,
  Settings,
  Zap,
  Shield,
  Mail,
  Shuffle,
  UserPlus,
  CheckCircle2,
  AlertTriangle,
  Trophy,
  Download,
  Plus,
  Trash2,
  ArrowRight,
  RotateCcw,
} from 'lucide-react'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { RoundConfigForm } from '@/components/admin/competition/round-config-form'
import { ProjectStatesTable } from '@/components/admin/round/project-states-table'
// SubmissionWindowManager removed — round dates + file requirements in Config are sufficient
import { FileRequirementsEditor } from '@/components/admin/round/file-requirements-editor'
import { FilteringDashboard } from '@/components/admin/round/filtering-dashboard'
import { RankingDashboard } from '@/components/admin/round/ranking-dashboard'
import { CoverageReport } from '@/components/admin/assignment/coverage-report'
import { AssignmentPreviewSheet } from '@/components/admin/assignment/assignment-preview-sheet'
import { AnimatedCard } from '@/components/shared/animated-container'
import { DateTimePicker } from '@/components/ui/datetime-picker'
import { AddMemberDialog } from '@/components/admin/jury/add-member-dialog'
import { motion } from 'motion/react'
import {
  roundTypeConfig as sharedRoundTypeConfig,
  roundStatusConfig as sharedRoundStatusConfig,
  projectStateConfig,
} from '@/lib/round-config'
import { InlineMemberCap } from '@/components/admin/jury/inline-member-cap'
import { RoundUnassignedQueue } from '@/components/admin/assignment/round-unassigned-queue'
import { JuryProgressTable } from '@/components/admin/assignment/jury-progress-table'
import { TransferAssignmentsDialog } from '@/components/admin/assignment/transfer-assignments-dialog'
import { ReassignmentHistory } from '@/components/admin/assignment/reassignment-history'
import { ScoreDistribution } from '@/components/admin/round/score-distribution'
import { SendRemindersButton } from '@/components/admin/assignment/send-reminders-button'
import { NotifyJurorsButton } from '@/components/admin/assignment/notify-jurors-button'
import { ExportEvaluationsDialog } from '@/components/admin/round/export-evaluations-dialog'
import { IndividualAssignmentsTable } from '@/components/admin/assignment/individual-assignments-table'
import { AdvanceProjectsDialog } from '@/components/admin/round/advance-projects-dialog'
import { AIRecommendationsDisplay } from '@/components/admin/round/ai-recommendations-display'
import { EvaluationCriteriaEditor } from '@/components/admin/round/evaluation-criteria-editor'
import { COIReviewSection } from '@/components/admin/assignment/coi-review-section'
import { ConfigSectionHeader } from '@/components/admin/rounds/config/config-section-header'
import { AdvancementSummaryCard } from '@/components/admin/round/advancement-summary-card'

// ── Helpers ────────────────────────────────────────────────────────────────

function getRelativeTime(date: Date): string {
  const now = new Date()
  const diffMs = date.getTime() - now.getTime()
  const absDiffMs = Math.abs(diffMs)
  const minutes = Math.floor(absDiffMs / 60_000)
  const hours = Math.floor(absDiffMs / 3_600_000)
  const days = Math.floor(absDiffMs / 86_400_000)

  const label = days > 0 ? `${days}d` : hours > 0 ? `${hours}h` : `${minutes}m`
  return diffMs > 0 ? `in ${label}` : `${label} ago`
}

// ── Status & type config maps (from shared lib) ────────────────────────────
const roundStatusConfig = sharedRoundStatusConfig
const roundTypeConfig = sharedRoundTypeConfig
const stateColors: Record<string, string> = Object.fromEntries(
  Object.entries(projectStateConfig).map(([k, v]) => [k, v.bg])
)

// ═══════════════════════════════════════════════════════════════════════════
// Main Page Component
// ═══════════════════════════════════════════════════════════════════════════

export default function RoundDetailPage() {
  const params = useParams()
  const roundId = params.roundId as string
  const searchParams = useSearchParams()
  const backUrl = searchParams.get('from')

  const [config, setConfig] = useState<Record<string, unknown>>({})
  const [autosaveStatus, setAutosaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [activeTab, setActiveTab] = useState('overview')
  const [previewSheetOpen, setPreviewSheetOpen] = useState(false)

  // AI assignment generation (lifted to page level so it persists when sheet closes)
  const aiAssignmentMutation = trpc.roundAssignment.aiPreview.useMutation({
    onSuccess: () => {
      toast.success('AI assignments ready!', {
        action: {
          label: 'Review',
          onClick: () => setPreviewSheetOpen(true),
        },
        duration: 10000,
      })
    },
    onError: (err) => {
      toast.error(`AI generation failed: ${err.message}`, { duration: 15000 })
      console.error('[AI Assignment]', err)
    },
  })
  const [exportOpen, setExportOpen] = useState(false)
  const [advanceDialogOpen, setAdvanceDialogOpen] = useState(false)
  const [aiRecommendations, setAiRecommendations] = useState<{
    STARTUP: Array<{ projectId: string; rank: number; score: number; category: string; strengths: string[]; concerns: string[]; recommendation: string }>
    BUSINESS_CONCEPT: Array<{ projectId: string; rank: number; score: number; category: string; strengths: string[]; concerns: string[]; recommendation: string }>
  } | null>(null)
  const [shortlistDialogOpen, setShortlistDialogOpen] = useState(false)
  const [createJuryOpen, setCreateJuryOpen] = useState(false)
  const [newJuryName, setNewJuryName] = useState('')
  const [addMemberOpen, setAddMemberOpen] = useState(false)
  const [closeAndAdvance, setCloseAndAdvance] = useState(false)
  const [editingName, setEditingName] = useState(false)
  const [nameValue, setNameValue] = useState('')
  const nameInputRef = useRef<HTMLInputElement>(null)
  const [statusConfirmAction, setStatusConfirmAction] = useState<'activate' | 'close' | 'reopen' | 'archive' | null>(null)
  const [coverageOpen, setCoverageOpen] = useState(false)

  const utils = trpc.useUtils()

  // ── Core data queries ──────────────────────────────────────────────────
  const { data: round, isLoading } = trpc.round.getById.useQuery(
    { id: roundId },
    { refetchInterval: 15_000, refetchOnWindowFocus: true },
  )
  const { data: projectStates } = trpc.roundEngine.getProjectStates.useQuery(
    { roundId },
    { refetchInterval: 10_000, refetchOnWindowFocus: true },
  )

  const competitionId = round?.competitionId ?? ''

  const { data: juryGroups } = trpc.juryGroup.list.useQuery(
    { competitionId },
    { enabled: !!competitionId, refetchInterval: 30_000, refetchOnWindowFocus: true },
  )
  const { data: fileRequirements } = trpc.file.listRequirements.useQuery(
    { roundId },
    { refetchInterval: 15_000, refetchOnWindowFocus: true },
  )

  // Fetch awards linked to this round
  const { data: competition } = trpc.competition.getById.useQuery(
    { id: competitionId },
    { enabled: !!competitionId, refetchInterval: 60_000 },
  )
  const programId = competition?.programId
  const { data: awards } = trpc.specialAward.list.useQuery(
    { programId: programId! },
    { enabled: !!programId, refetchInterval: 60_000 },
  )
  const roundAwards = awards?.filter((a) => a.evaluationRoundId === roundId) ?? []

  // Jury workload (for assignments tab coverage auto-open logic)
  const { data: juryWorkload } = trpc.analytics.getJurorWorkload.useQuery(
    { roundId },
    { enabled: round?.roundType === 'EVALUATION', refetchInterval: 15_000 },
  )

  // Filtering results stats (only for FILTERING rounds)
  const { data: filteringStats } = trpc.filtering.getResultStats.useQuery(
    { roundId },
    { enabled: round?.roundType === 'FILTERING', refetchInterval: 5_000 },
  )

  // Initialize config from server on load; re-sync after saves
  const serverConfig = useMemo(() => (round?.configJson as Record<string, unknown>) ?? {}, [round?.configJson])
  const configInitialized = useRef(false)
  const savingRef = useRef(false)

  // Sync local config with server: on initial load AND whenever serverConfig
  // changes after a save completes (so Zod-applied defaults get picked up)
  useEffect(() => {
    if (!round) return
    if (!configInitialized.current) {
      configInitialized.current = true
      setConfig(serverConfig)
    } else if (!savingRef.current) {
      // Server changed (e.g. after save invalidation) — re-sync
      setConfig(serverConfig)
    }
  }, [serverConfig, round])

  const hasUnsavedConfig = useMemo(
    () => configInitialized.current && JSON.stringify(config) !== JSON.stringify(serverConfig),
    [config, serverConfig],
  )

  // Auto-open coverage section when no assignments exist yet
  useEffect(() => {
    if (juryWorkload && juryWorkload.length === 0) {
      setCoverageOpen(true)
    }
  }, [juryWorkload])

  // ── Mutations ──────────────────────────────────────────────────────────
  const updateMutation = trpc.round.update.useMutation({
    onSuccess: () => {
      savingRef.current = false
      utils.round.getById.invalidate({ id: roundId })
      setAutosaveStatus('saved')
      setTimeout(() => setAutosaveStatus('idle'), 2000)
    },
    onError: (err) => {
      savingRef.current = false
      setAutosaveStatus('error')
      toast.error(err.message)
    },
  })

  const activateMutation = trpc.roundEngine.activate.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round activated')
    },
    onError: (err) => toast.error(err.message),
  })

  const closeMutation = trpc.roundEngine.close.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round closed')
      if (closeAndAdvance) {
        setCloseAndAdvance(false)
        // Small delay to let cache invalidation complete before opening dialog
        setTimeout(() => setAdvanceDialogOpen(true), 300)
      }
    },
    onError: (err) => {
      setCloseAndAdvance(false)
      toast.error(err.message)
    },
  })

  const reopenMutation = trpc.roundEngine.reopen.useMutation({
    onSuccess: (data) => {
      utils.round.getById.invalidate({ id: roundId })
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      const msg = data.pausedRounds?.length
        ? `Round reopened. Paused: ${data.pausedRounds.join(', ')}`
        : 'Round reopened'
      toast.success(msg)
    },
    onError: (err) => toast.error(err.message),
  })

  const archiveMutation = trpc.roundEngine.archive.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round archived')
    },
    onError: (err) => toast.error(err.message),
  })

  const assignJuryMutation = trpc.round.update.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      utils.juryGroup.list.invalidate({ competitionId })
      toast.success('Jury group updated')
    },
    onError: (err) => toast.error(err.message),
  })

  // Jury group detail query (for the assigned group)
  const juryGroupId = round?.juryGroupId ?? ''
  const { data: juryGroupDetail } = trpc.juryGroup.getById.useQuery(
    { id: juryGroupId },
    { enabled: !!juryGroupId, refetchInterval: 10_000 },
  )

  const createJuryMutation = trpc.juryGroup.create.useMutation({
    onSuccess: (newGroup) => {
      utils.juryGroup.list.invalidate({ competitionId })
      // Auto-assign the new jury group to this round
      assignJuryMutation.mutate({ id: roundId, juryGroupId: newGroup.id })
      toast.success(`Jury "${newGroup.name}" created and assigned`)
      setCreateJuryOpen(false)
      setNewJuryName('')
    },
    onError: (err) => toast.error(err.message),
  })

  const deleteJuryMutation = trpc.juryGroup.delete.useMutation({
    onSuccess: (result) => {
      utils.juryGroup.list.invalidate({ competitionId })
      utils.round.getById.invalidate({ id: roundId })
      toast.success(`Jury "${result.name}" deleted`)
    },
    onError: (err) => toast.error(err.message),
  })

  const removeJuryMemberMutation = trpc.juryGroup.removeMember.useMutation({
    onSuccess: () => {
      if (juryGroupId) utils.juryGroup.getById.invalidate({ id: juryGroupId })
      toast.success('Member removed')
    },
    onError: (err) => toast.error(err.message),
  })

  const updateJuryMemberMutation = trpc.juryGroup.updateMember.useMutation({
    onSuccess: () => {
      if (juryGroupId) utils.juryGroup.getById.invalidate({ id: juryGroupId })
      toast.success('Cap updated')
    },
    onError: (err) => toast.error(err.message),
  })

  // Jury member quick actions (same as in JuryProgressTable)
  const [memberTransferJuror, setMemberTransferJuror] = useState<{ id: string; name: string } | null>(null)

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

  const redistributeMemberMutation = trpc.assignment.redistributeJurorAssignments.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(`Reassigned ${data.movedCount} project(s). ${data.failedCount} could not be reassigned.`)
      } else {
        toast.success(`Reassigned ${data.movedCount} project(s) to other jurors.`)
      }
    },
    onError: (err) => toast.error(err.message),
  })

  const reshuffleMemberMutation = 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.`)
      } else {
        toast.success(`Dropped juror and reassigned ${data.movedCount} project(s) evenly across available jurors.`)
      }
    },
    onError: (err) => toast.error(err.message),
  })

  const advanceMutation = trpc.round.advanceProjects.useMutation({
    onSuccess: (data) => {
      utils.round.getById.invalidate({ id: roundId })
      utils.roundEngine.getProjectStates.invalidate({ roundId })
      const msg = data.autoPassedCount
        ? `Passed ${data.autoPassedCount} and advanced ${data.advancedCount} project(s) to ${data.targetRoundName}`
        : `Advanced ${data.advancedCount} project(s) to ${data.targetRoundName}`
      toast.success(msg)
      setAdvanceDialogOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  const shortlistMutation = trpc.round.generateAIRecommendations.useMutation({
    onSuccess: (data) => {
      if (data.success) {
        setAiRecommendations(data.recommendations)
        toast.success(
          `AI recommendations generated: ${data.recommendations.STARTUP.length} startups, ${data.recommendations.BUSINESS_CONCEPT.length} concepts` +
          (data.tokensUsed ? ` (${data.tokensUsed} tokens)` : ''),
        )
      } else {
        toast.error(data.errors?.join('; ') || 'AI shortlist failed')
      }
      setShortlistDialogOpen(false)
    },
    onError: (err) => {
      toast.error(err.message)
      setShortlistDialogOpen(false)
    },
  })

  const isTransitioning = activateMutation.isPending || closeMutation.isPending || reopenMutation.isPending || archiveMutation.isPending

  const handleConfigChange = useCallback((newConfig: Record<string, unknown>) => {
    setConfig(newConfig)
  }, [])

  const saveConfig = useCallback(() => {
    savingRef.current = true
    setAutosaveStatus('saving')
    updateMutation.mutate({ id: roundId, configJson: config })
  }, [config, roundId, updateMutation])

  // ── Auto-save: debounce config changes and save automatically ────────
  const configJson = JSON.stringify(config)
  const serverJson = JSON.stringify(serverConfig)
  useEffect(() => {
    if (!configInitialized.current) return
    if (configJson === serverJson) return

    const timer = setTimeout(() => {
      savingRef.current = true
      setAutosaveStatus('saving')
      updateMutation.mutate({ id: roundId, configJson: config })
    }, 800)

    return () => clearTimeout(timer)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [configJson])

  // ── Computed values ────────────────────────────────────────────────────
  const projectCount = projectStates?.length ?? round?._count?.projectRoundStates ?? 0
  const stateCounts = useMemo(() =>
    projectStates?.reduce((acc: Record<string, number>, ps: any) => {
      acc[ps.state] = (acc[ps.state] || 0) + 1
      return acc
    }, {} as Record<string, number>) ?? {},
  [projectStates])
  const passedCount = stateCounts['PASSED'] ?? 0
  const juryGroup = round?.juryGroup
  const juryMemberCount = juryGroupDetail?.members?.length ?? 0

  const isFiltering = round?.roundType === 'FILTERING'
  const isEvaluation = round?.roundType === 'EVALUATION'
  const hasJury = ['EVALUATION', 'LIVE_FINAL', 'DELIBERATION'].includes(round?.roundType ?? '')
  const hasAwards = hasJury
  const isSimpleAdvance = ['INTAKE', 'SUBMISSION', 'MENTORING'].includes(round?.roundType ?? '')

  const poolLink = `/admin/projects?hasAssign=false&round=${roundId}` as Route

  // ── Loading state ──────────────────────────────────────────────────────
  if (isLoading) {
    return (
      <div className="space-y-6">
        {/* Header skeleton — dark gradient placeholder */}
        <div className="rounded-xl bg-gradient-to-r from-[#053d57]/20 to-[#0a5a7c]/20 p-6 animate-pulse">
          <div className="flex items-center gap-3">
            <Skeleton className="h-8 w-8 rounded bg-white/20" />
            <div className="space-y-2">
              <Skeleton className="h-7 w-64 bg-white/20" />
              <Skeleton className="h-4 w-40 bg-white/20" />
            </div>
          </div>
        </div>
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-96 w-full rounded-lg" />
      </div>
    )
  }

  if (!round) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <Link href={'/admin/rounds' as Route}>
            <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Back">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-xl font-bold">Round Not Found</h1>
            <p className="text-sm text-muted-foreground">This round does not exist.</p>
          </div>
        </div>
      </div>
    )
  }

  const status = round.status as keyof typeof roundStatusConfig
  const statusCfg = roundStatusConfig[status] || roundStatusConfig.ROUND_DRAFT
  const typeCfg = roundTypeConfig[round.roundType] || roundTypeConfig.INTAKE

  // ── Readiness checklist ────────────────────────────────────────────────
  const readinessItems = [
    {
      label: 'Projects assigned',
      ready: projectCount > 0,
      detail: projectCount > 0 ? `${projectCount} projects` : 'No projects yet',
      action: projectCount === 0 ? poolLink : undefined,
      actionLabel: 'Assign Projects',
    },
    ...(hasJury
      ? [{
          label: 'Jury group set',
          ready: !!juryGroup,
          detail: juryGroup ? `${juryGroup.name} (${juryMemberCount} members)` : 'No jury group assigned',
          action: undefined as Route | undefined,
          actionLabel: undefined as string | undefined,
        }]
      : []),
    {
      label: 'Dates configured',
      ready: !!round.windowOpenAt && !!round.windowCloseAt,
      detail:
        round.windowOpenAt && round.windowCloseAt
          ? `${new Date(round.windowOpenAt).toLocaleDateString()} \u2014 ${new Date(round.windowCloseAt).toLocaleDateString()}`
          : 'No dates set \u2014 configure in Config tab',
      action: undefined as Route | undefined,
      actionLabel: undefined as string | undefined,
    },
    ...((isEvaluation && !(config.requireDocumentUpload as boolean))
      ? []
      : [{
          label: 'File requirements set',
          ready: (fileRequirements?.length ?? 0) > 0,
          detail:
            (fileRequirements?.length ?? 0) > 0
              ? `${fileRequirements?.length} requirement(s)`
              : 'No file requirements \u2014 configure in Config tab',
          action: undefined as Route | undefined,
          actionLabel: undefined as string | undefined,
        }]),
  ]
  const readyCount = readinessItems.filter((i) => i.ready).length

  // ═════════════════════════════════════════════════════════════════════════
  // Render
  // ═════════════════════════════════════════════════════════════════════════

  return (
    <div className="space-y-6">
      {/* ===== HEADER — Dark Blue gradient banner ===== */}
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: 'easeOut' }}
        className="rounded-xl bg-gradient-to-r from-[#053d57] to-[#0a5a7c] p-5 sm:p-6 text-white shadow-lg"
      >
        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex items-start gap-3 min-w-0">
            <Link href={(backUrl ?? (round.specialAwardId ? `/admin/awards/${round.specialAwardId}` : '/admin/rounds')) as Route} className="mt-0.5 shrink-0">
              <Button variant="ghost" size="sm" className="h-8 text-white/80 hover:text-white hover:bg-white/10 gap-1.5" aria-label={round.specialAwardId ? 'Back to Award' : 'Back to rounds'}>
                <ArrowLeft className="h-4 w-4" />
                <span className="text-xs hidden sm:inline">{round.specialAwardId ? 'Back to Award' : 'Back to Rounds'}</span>
              </Button>
            </Link>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2.5">
                {/* 4.6 Inline-editable round name */}
                {editingName ? (
                  <Input
                    ref={nameInputRef}
                    value={nameValue}
                    onChange={(e) => setNameValue(e.target.value)}
                    onBlur={() => {
                      const trimmed = nameValue.trim()
                      if (trimmed && trimmed !== round.name) {
                        updateMutation.mutate({ id: roundId, name: trimmed })
                      }
                      setEditingName(false)
                    }}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        (e.target as HTMLInputElement).blur()
                      }
                      if (e.key === 'Escape') {
                        setNameValue(round.name)
                        setEditingName(false)
                      }
                    }}
                    className="text-xl font-bold tracking-tight bg-white/10 border-white/30 text-white h-8 w-64"
                    autoFocus
                  />
                ) : (
                  <button
                    type="button"
                    className="text-xl font-bold tracking-tight truncate hover:bg-white/10 rounded px-1 -mx-1 transition-colors cursor-text"
                    onClick={() => {
                      setNameValue(round.name)
                      setEditingName(true)
                      setTimeout(() => nameInputRef.current?.focus(), 0)
                    }}
                    title="Click to edit round name"
                  >
                    {round.name}
                  </button>
                )}
                <Badge variant="secondary" className="text-xs shrink-0 bg-white/15 text-white border-white/20 hover:bg-white/20">
                  {typeCfg.label}
                </Badge>

                {/* Status dropdown with confirmation dialogs (4.1) */}
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <button
                              className={cn(
                                'inline-flex items-center gap-1.5 text-[11px] font-medium px-2.5 py-1 rounded-full transition-colors shrink-0',
                                'bg-white/15 text-white hover:bg-white/25',
                              )}
                            >
                              <span className={cn('h-1.5 w-1.5 rounded-full', statusCfg.dotClass)} />
                              {statusCfg.label}
                              <ChevronDown className="h-3 w-3" />
                            </button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="start">
                            {status === 'ROUND_DRAFT' && (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <span>
                                      <DropdownMenuItem
                                        onClick={() => setStatusConfirmAction('activate')}
                                        disabled={isTransitioning || readyCount < readinessItems.length}
                                      >
                                        <Play className="h-4 w-4 mr-2 text-emerald-600" />
                                        Activate Round
                                        {readyCount < readinessItems.length && (
                                          <span className="ml-auto text-[10px] text-muted-foreground">
                                            {readyCount}/{readinessItems.length}
                                          </span>
                                        )}
                                      </DropdownMenuItem>
                                    </span>
                                  </TooltipTrigger>
                                  {readyCount < readinessItems.length && (
                                    <TooltipContent side="right" className="max-w-xs">
                                      <p className="text-xs font-medium mb-1">Not ready to activate:</p>
                                      <ul className="space-y-0.5">
                                        {readinessItems.filter((i) => !i.ready).map((item) => (
                                          <li key={item.label} className="text-xs">&bull; {item.label}</li>
                                        ))}
                                      </ul>
                                    </TooltipContent>
                                  )}
                                </Tooltip>
                              </TooltipProvider>
                            )}
                            {status === 'ROUND_ACTIVE' && (
                              <DropdownMenuItem
                                onClick={() => setStatusConfirmAction('close')}
                                disabled={isTransitioning}
                              >
                                <Square className="h-4 w-4 mr-2 text-blue-600" />
                                Close Round
                              </DropdownMenuItem>
                            )}
                            {status === 'ROUND_CLOSED' && (
                              <>
                                <DropdownMenuItem
                                  onClick={() => setStatusConfirmAction('reopen')}
                                  disabled={isTransitioning}
                                >
                                  <Play className="h-4 w-4 mr-2 text-emerald-600" />
                                  Reopen Round
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem
                                  onClick={() => setStatusConfirmAction('archive')}
                                  disabled={isTransitioning}
                                >
                                  <Archive className="h-4 w-4 mr-2" />
                                  Archive Round
                                </DropdownMenuItem>
                              </>
                            )}
                            {isTransitioning && (
                              <div className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
                                <Loader2 className="h-3 w-3 animate-spin" />
                                Updating...
                              </div>
                            )}
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </span>
                    </TooltipTrigger>
                    <TooltipContent side="bottom">
                      <p>{statusCfg.description}</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>

                {/* Status change confirmation dialog (4.1) */}
                <AlertDialog open={!!statusConfirmAction} onOpenChange={(open) => { if (!open) setStatusConfirmAction(null) }}>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>
                        {statusConfirmAction === 'activate' && 'Activate this round?'}
                        {statusConfirmAction === 'close' && 'Close this round?'}
                        {statusConfirmAction === 'reopen' && 'Reopen this round?'}
                        {statusConfirmAction === 'archive' && 'Archive this round?'}
                      </AlertDialogTitle>
                      <AlertDialogDescription>
                        {statusConfirmAction === 'activate' && (
                          <>
                            The round will go live. Projects can be processed and jury members will be able to see their assignments.
                            {readyCount < readinessItems.length && (
                              <span className="block mt-2 text-amber-600">
                                Warning: {readinessItems.length - readyCount} readiness item(s) not yet complete ({readinessItems.filter((i) => !i.ready).map((i) => i.label).join(', ')}).
                              </span>
                            )}
                          </>
                        )}
                        {statusConfirmAction === 'close' && 'No further changes will be accepted. You can reactivate later if needed.'}
                        {statusConfirmAction === 'reopen' && 'The round will become active again. Any rounds after this one that are currently active will be paused automatically.'}
                        {statusConfirmAction === 'archive' && 'The round will be archived. It will only be available as a historical record.'}
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction
                        onClick={() => {
                          if (statusConfirmAction === 'activate') activateMutation.mutate({ roundId })
                          else if (statusConfirmAction === 'close') closeMutation.mutate({ roundId })
                          else if (statusConfirmAction === 'reopen') reopenMutation.mutate({ roundId })
                          else if (statusConfirmAction === 'archive') archiveMutation.mutate({ roundId })
                          setStatusConfirmAction(null)
                        }}
                      >
                        {statusConfirmAction === 'activate' && 'Activate'}
                        {statusConfirmAction === 'close' && 'Close Round'}
                        {statusConfirmAction === 'reopen' && 'Reopen'}
                        {statusConfirmAction === 'archive' && 'Archive'}
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
              <p className="text-sm text-white/60 mt-1">{typeCfg.description}</p>
              {(round.windowOpenAt || round.windowCloseAt) && (
                <div className="flex items-center gap-1.5 text-white/60 text-xs mt-1">
                  <CalendarDays className="h-3 w-3" />
                  {round.windowOpenAt ? new Date(round.windowOpenAt).toLocaleDateString() : 'No start'}
                  {' \u2014 '}
                  {round.windowCloseAt ? new Date(round.windowCloseAt).toLocaleDateString() : 'No deadline'}
                  {(() => {
                    const now = new Date()
                    const openAt = round.windowOpenAt ? new Date(round.windowOpenAt) : null
                    const closeAt = round.windowCloseAt ? new Date(round.windowCloseAt) : null
                    if (openAt && now < openAt) {
                      return <span className="text-[#80c4dc] font-medium ml-1">Opens {getRelativeTime(openAt)}</span>
                    }
                    if (closeAt && now < closeAt) {
                      return <span className="text-amber-300 font-medium ml-1">Closes {getRelativeTime(closeAt)}</span>
                    }
                    if (closeAt && now >= closeAt) {
                      return <span className="text-white/40 ml-1">Closed {getRelativeTime(closeAt)}</span>
                    }
                    return null
                  })()}
                </div>
              )}
            </div>
          </div>

          {/* Action buttons */}
          <div className="flex items-center gap-2 shrink-0 flex-wrap">
            {autosaveStatus === 'saved' && (
              <span className="flex items-center gap-1.5 text-xs text-emerald-300">
                <CheckCircle2 className="h-3.5 w-3.5" />
                Saved
              </span>
            )}
            <Link href={poolLink}>
              <Button variant="outline" size="sm" className="border-white/40 bg-white/15 text-white hover:bg-white/30 hover:text-white">
                <Layers className="h-4 w-4 mr-1.5" />
                Project Pool
              </Button>
            </Link>
          </div>
        </div>
      </motion.div>

      {/* ===== TABS — Underline style ===== */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <div className="border-b overflow-x-auto">
          <TabsList className="bg-transparent h-auto p-0 gap-0 w-full sm:w-auto">
            {[
              { value: 'overview', label: 'Overview', icon: Zap },
              { value: 'projects', label: 'Projects', icon: Layers },
              ...(isFiltering ? [{ value: 'filtering', label: 'Filtering', icon: Shield }] : []),
              ...(isEvaluation ? [{ value: 'assignments', label: 'Assignments & Jury', icon: ClipboardList }] : []),
              ...(isEvaluation ? [{ value: 'ranking', label: 'Ranking', icon: BarChart3 }] : []),
              ...(hasJury && !isEvaluation ? [{ value: 'jury', label: 'Jury', icon: Users }] : []),
              { value: 'config', label: 'Config', icon: Settings },
              ...(hasAwards ? [{ value: 'awards', label: 'Awards', icon: Trophy }] : []),
            ].map((tab) => (
              <TabsTrigger
                key={tab.value}
                value={tab.value}
                className={cn(
                  'relative rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium transition-all',
                  'data-[state=active]:border-b-[#de0f1e] data-[state=active]:text-[#053d57] data-[state=active]:font-semibold data-[state=active]:shadow-none',
                  'text-muted-foreground hover:text-foreground',
                  'bg-transparent data-[state=active]:bg-transparent',
                )}
              >
                <tab.icon className={cn('h-3.5 w-3.5 mr-1.5', activeTab === tab.value ? 'text-[#557f8c]' : '')} />
                {tab.label}
                {tab.value === 'awards' && roundAwards.length > 0 && (
                  <Badge variant="secondary" className="ml-1.5 h-5 min-w-5 text-[10px] px-1.5 bg-[#de0f1e] text-white">
                    {roundAwards.length}
                  </Badge>
                )}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>

        {/* ═══════════ OVERVIEW TAB ═══════════ */}
        <TabsContent value="overview" className="space-y-6">
          {/* Readiness Checklist with Progress Ring */}
          <AnimatedCard index={0}>
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    {/* SVG Progress Ring */}
                    <div className="relative h-14 w-14 shrink-0">
                      <svg className="h-14 w-14 -rotate-90" viewBox="0 0 56 56">
                        <circle cx="28" cy="28" r="24" fill="none" stroke="currentColor" strokeWidth="3" className="text-muted/30" />
                        <circle
                          cx="28" cy="28" r="24" fill="none"
                          strokeWidth="3" strokeLinecap="round"
                          stroke={readyCount === readinessItems.length ? '#10b981' : '#de0f1e'}
                          strokeDasharray={`${(readyCount / readinessItems.length) * 150.8} 150.8`}
                          className="transition-all duration-700"
                        />
                      </svg>
                      <span className="absolute inset-0 flex items-center justify-center text-xs font-bold">
                        {readyCount}/{readinessItems.length}
                      </span>
                    </div>
                    <div>
                      <CardTitle className="text-base">Launch Readiness</CardTitle>
                      <CardDescription>
                        {readyCount === readinessItems.length
                          ? 'All checks passed — ready to go'
                          : `${readinessItems.length - readyCount} item(s) remaining`}
                      </CardDescription>
                    </div>
                  </div>
                  <Badge
                    variant={readyCount === readinessItems.length ? 'default' : 'secondary'}
                    className={cn(
                      'text-xs',
                      readyCount === readinessItems.length
                        ? 'bg-emerald-100 text-emerald-700'
                        : 'bg-amber-100 text-amber-700',
                    )}
                  >
                    {readyCount === readinessItems.length ? 'Ready' : 'Incomplete'}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {readinessItems.map((item) => (
                    <div key={item.label} className="flex items-start gap-3">
                      {item.ready ? (
                        <CheckCircle2 className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                      ) : (
                        <AlertTriangle className="h-4 w-4 text-amber-500 mt-0.5 shrink-0" />
                      )}
                      <div className="flex-1 min-w-0">
                        <p className={cn('text-sm font-medium', item.ready && 'text-emerald-600 opacity-80')}>
                          {item.label}
                        </p>
                        <p className="text-xs text-muted-foreground">{item.detail}</p>
                      </div>
                      {item.action && (
                        <Link href={item.action}>
                          <Button size="sm" className="shrink-0 text-xs bg-[#de0f1e] hover:bg-[#c00d1a] text-white">
                            {item.actionLabel}
                          </Button>
                        </Link>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Advancement Votes Summary — only for EVALUATION rounds */}
          {isEvaluation && (
            <AnimatedCard index={1}>
              <AdvancementSummaryCard roundId={roundId} />
            </AnimatedCard>
          )}

          {/* Filtering Results Summary — only for FILTERING rounds with results */}
          {isFiltering && filteringStats && filteringStats.total > 0 && (
            <AnimatedCard index={1}>
              <Card className="border-l-4 border-l-purple-500">
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="rounded-full bg-purple-50 p-2">
                        <Shield className="h-5 w-5 text-purple-600" />
                      </div>
                      <div>
                        <CardTitle className="text-base">Filtering Results</CardTitle>
                        <CardDescription>
                          {filteringStats.total} projects evaluated
                        </CardDescription>
                      </div>
                    </div>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => setActiveTab('filtering')}
                    >
                      View Details
                      <ArrowRight className="h-3.5 w-3.5 ml-1.5" />
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-3 gap-4 mb-4">
                    <div className="text-center p-3 rounded-lg bg-emerald-50">
                      <p className="text-2xl font-bold text-emerald-700">{filteringStats.passed}</p>
                      <p className="text-xs text-emerald-600 font-medium">Passed</p>
                    </div>
                    <div className="text-center p-3 rounded-lg bg-red-50">
                      <p className="text-2xl font-bold text-red-700">{filteringStats.filteredOut}</p>
                      <p className="text-xs text-red-600 font-medium">Filtered Out</p>
                    </div>
                    <div className="text-center p-3 rounded-lg bg-amber-50">
                      <p className="text-2xl font-bold text-amber-700">{filteringStats.flagged}</p>
                      <p className="text-xs text-amber-600 font-medium">Flagged</p>
                    </div>
                  </div>
                  {/* Progress bar showing pass rate */}
                  <div className="space-y-1.5">
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <span>Pass rate</span>
                      <span>{Math.round((filteringStats.passed / filteringStats.total) * 100)}%</span>
                    </div>
                    <div className="h-2.5 rounded-full bg-muted overflow-hidden flex">
                      <div
                        className="bg-emerald-500 transition-all duration-500"
                        style={{ width: `${(filteringStats.passed / filteringStats.total) * 100}%` }}
                      />
                      <div
                        className="bg-red-400 transition-all duration-500"
                        style={{ width: `${(filteringStats.filteredOut / filteringStats.total) * 100}%` }}
                      />
                      <div
                        className="bg-amber-400 transition-all duration-500"
                        style={{ width: `${(filteringStats.flagged / filteringStats.total) * 100}%` }}
                      />
                    </div>
                    {filteringStats.overridden > 0 && (
                      <p className="text-xs text-muted-foreground">
                        {filteringStats.overridden} result(s) manually overridden
                      </p>
                    )}
                  </div>
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* Quick Actions — Grouped & styled */}
          <AnimatedCard index={2}>
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Quick Actions</CardTitle>
                <CardDescription>Common operations for this round</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Round Control Group */}
                {(status === 'ROUND_DRAFT' || status === 'ROUND_ACTIVE' || status === 'ROUND_CLOSED') && (
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">Round Control</p>
                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                      {status === 'ROUND_DRAFT' && (
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <button className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-emerald-500 hover:-translate-y-0.5 hover:shadow-md transition-all text-left">
                              <Play className="h-5 w-5 text-emerald-600 mt-0.5 shrink-0" />
                              <div>
                                <p className="text-sm font-medium">Activate Round</p>
                                <p className="text-xs text-muted-foreground mt-0.5">
                                  Start this round and allow project processing
                                </p>
                              </div>
                            </button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Activate this round?</AlertDialogTitle>
                              <AlertDialogDescription>
                                The round will go live. Projects can be processed and jury members will be able to see their assignments.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction onClick={() => activateMutation.mutate({ roundId })}>
                                Activate
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      )}

                      {status === 'ROUND_ACTIVE' && (
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <button className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-blue-500 hover:-translate-y-0.5 hover:shadow-md transition-all text-left">
                              <Square className="h-5 w-5 text-blue-600 mt-0.5 shrink-0" />
                              <div>
                                <p className="text-sm font-medium">Close Round</p>
                                <p className="text-xs text-muted-foreground mt-0.5">
                                  Stop accepting changes and finalize results
                                </p>
                              </div>
                            </button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Close this round?</AlertDialogTitle>
                              <AlertDialogDescription>
                                No further changes will be accepted. You can reactivate later if needed.
                                {projectCount > 0 && (
                                  <span className="block mt-2">
                                    {projectCount} projects are currently in this round.
                                  </span>
                                )}
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction onClick={() => closeMutation.mutate({ roundId })}>
                                Close Round
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      )}

                      {status === 'ROUND_CLOSED' && (
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <button className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-amber-500 bg-amber-50/30 hover:-translate-y-0.5 hover:shadow-md transition-all text-left">
                              <RotateCcw className="h-5 w-5 text-amber-600 mt-0.5 shrink-0" />
                              <div>
                                <p className="text-sm font-medium">Reopen Round</p>
                                <p className="text-xs text-muted-foreground mt-0.5">
                                  Reactivate this round. Any subsequent active rounds will be paused.
                                </p>
                              </div>
                            </button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Reopen this round?</AlertDialogTitle>
                              <AlertDialogDescription>
                                The round will become active again. Any rounds after this one that are currently active will be paused (closed) automatically.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction onClick={() => reopenMutation.mutate({ roundId })}>
                                Reopen
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      )}
                    </div>
                  </div>
                )}

                {/* Project Management Group */}
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">Project Management</p>
                  <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    <Link href={poolLink}>
                      <button className="flex items-start gap-3 p-4 rounded-lg border hover:-translate-y-0.5 hover:shadow-md transition-all text-left w-full">
                        <Layers className="h-5 w-5 text-[#557f8c] mt-0.5 shrink-0" />
                        <div>
                          <p className="text-sm font-medium">Assign Projects</p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            Add projects from the pool to this round
                          </p>
                        </div>
                      </button>
                    </Link>

                    <button
                      onClick={() => setActiveTab('projects')}
                      className="flex items-start gap-3 p-4 rounded-lg border hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                    >
                      <BarChart3 className="h-5 w-5 text-[#557f8c] mt-0.5 shrink-0" />
                      <div>
                        <p className="text-sm font-medium">Manage Projects</p>
                        <p className="text-xs text-muted-foreground mt-0.5">
                          View, filter, and transition project states
                        </p>
                      </div>
                    </button>

                    {/* Advance projects (always visible when projects exist) */}
                    {projectCount > 0 && (
                      <button
                        onClick={() => (isSimpleAdvance || passedCount > 0)
                          ? setAdvanceDialogOpen(true)
                          : toast.info('Mark projects as "Passed" first in the Projects tab')}
                        className={cn(
                          'flex items-start gap-3 p-4 rounded-lg border hover:-translate-y-0.5 hover:shadow-md transition-all text-left',
                          (isSimpleAdvance || passedCount > 0)
                            ? 'border-l-4 border-l-emerald-500 bg-emerald-50/30'
                            : 'border-dashed opacity-60',
                        )}
                      >
                        <ArrowRight className={cn('h-5 w-5 mt-0.5 shrink-0', (isSimpleAdvance || passedCount > 0) ? 'text-emerald-600' : 'text-muted-foreground')} />
                        <div>
                          <p className="text-sm font-medium">Advance Projects</p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            {isSimpleAdvance
                              ? `Advance all ${projectCount} project(s) to the next round`
                              : passedCount > 0
                                ? `Move ${passedCount} passed project(s) to the next round`
                                : 'Mark projects as "Passed" first, then advance'}
                          </p>
                        </div>
                        <Badge className="ml-auto shrink-0 bg-emerald-100 text-emerald-700 text-[10px]">{isSimpleAdvance ? projectCount : passedCount}</Badge>
                      </button>
                    )}

                    {/* Close & Advance (active rounds with passed projects) */}
                    {status === 'ROUND_ACTIVE' && passedCount > 0 && (
                      <button
                        onClick={() => {
                          setCloseAndAdvance(true)
                          closeMutation.mutate({ roundId })
                        }}
                        disabled={isTransitioning}
                        className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-purple-500 bg-purple-50/30 hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                      >
                        <Square className="h-5 w-5 text-purple-600 mt-0.5 shrink-0" />
                        <div>
                          <p className="text-sm font-medium">Close & Advance</p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            Close this round and advance {passedCount} passed project(s) to the next round
                          </p>
                        </div>
                      </button>
                    )}

                    {/* Jury assignment for rounds that use jury */}
                    {hasJury && !juryGroup && (
                      <button
                        onClick={() => {
                          const el = document.querySelector('[data-jury-select]')
                          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
                        }}
                        className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-amber-500 bg-amber-50/30 hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                      >
                        <UserPlus className="h-5 w-5 text-amber-600 mt-0.5 shrink-0" />
                        <div>
                          <p className="text-sm font-medium">Assign Jury Group</p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            No jury group assigned. Select one in the Jury card above.
                          </p>
                        </div>
                      </button>
                    )}

                    {/* Evaluation: manage assignments */}
                    {isEvaluation && (
                      <button
                        onClick={() => setActiveTab('assignments')}
                        className="flex items-start gap-3 p-4 rounded-lg border hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                      >
                        <ClipboardList className="h-5 w-5 text-[#557f8c] mt-0.5 shrink-0" />
                        <div>
                          <p className="text-sm font-medium">Manage Assignments</p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            Generate and review jury-project assignments
                          </p>
                        </div>
                      </button>
                    )}
                  </div>
                </div>

                {/* AI Tools Group */}
                {((isFiltering || isEvaluation) && projectCount > 0) && (
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">AI Tools</p>
                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                      {isFiltering && (
                        <button
                          onClick={() => setActiveTab('filtering')}
                          className="flex items-start gap-3 p-4 rounded-lg border bg-gradient-to-br from-purple-50/50 to-blue-50/50 hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                        >
                          <Shield className="h-5 w-5 text-purple-600 mt-0.5 shrink-0" />
                          <div>
                            <p className="text-sm font-medium">Run AI Filtering</p>
                            <p className="text-xs text-muted-foreground mt-0.5">
                              Screen projects with AI and manual review
                            </p>
                          </div>
                        </button>
                      )}

                      <button
                        onClick={() => setShortlistDialogOpen(true)}
                        className="flex items-start gap-3 p-4 rounded-lg border bg-gradient-to-br from-purple-50/50 to-blue-50/50 hover:-translate-y-0.5 hover:shadow-md transition-all text-left"
                        disabled={shortlistMutation.isPending}
                      >
                        <Zap className="h-5 w-5 text-purple-600 mt-0.5 shrink-0" />
                        <div>
                          <p className="text-sm font-medium">
                            {shortlistMutation.isPending ? 'Generating...' : 'AI Recommendations'}
                          </p>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            Generate ranked shortlist per category using AI analysis
                          </p>
                        </div>
                      </button>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Advance Projects Dialog */}
          <AdvanceProjectsDialog
            open={advanceDialogOpen}
            onOpenChange={setAdvanceDialogOpen}
            roundId={roundId}
            roundType={round?.roundType}
            projectStates={projectStates}
            config={config}
            advanceMutation={advanceMutation}
            competitionRounds={competition?.rounds?.map((r: any) => ({
              id: r.id,
              name: r.name,
              sortOrder: r.sortOrder,
              roundType: r.roundType,
            }))}
            currentSortOrder={round?.sortOrder}
          />

          {/* AI Shortlist Confirmation Dialog */}
          <AlertDialog open={shortlistDialogOpen} onOpenChange={setShortlistDialogOpen}>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Generate AI Recommendations?</AlertDialogTitle>
                <AlertDialogDescription>
                  The AI will analyze all project evaluations and generate a ranked shortlist
                  for each category independently.
                  {config.startupAdvanceCount ? (
                    <span className="block mt-1">
                      Startup target: top {String(config.startupAdvanceCount)}
                    </span>
                  ) : null}
                  {config.conceptAdvanceCount ? (
                    <span className="block">
                      Business Concept target: top {String(config.conceptAdvanceCount)}
                    </span>
                  ) : null}
                  {config.aiParseFiles ? (
                    <span className="block mt-1 text-amber-600">
                      Document parsing is enabled — the AI will read uploaded file contents.
                    </span>
                  ) : null}
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => shortlistMutation.mutate({ roundId })}
                  disabled={shortlistMutation.isPending}
                >
                  {shortlistMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                  Generate
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>

          {/* AI Recommendations Display */}
          {aiRecommendations && (
            <AIRecommendationsDisplay
              recommendations={aiRecommendations}
              projectStates={projectStates}
              roundId={roundId}
              onClear={() => setAiRecommendations(null)}
              onApplied={() => {
                setAiRecommendations(null)
                utils.roundEngine.getProjectStates.invalidate({ roundId })
              }}
            />
          )}

          {/* Round Info + Project Breakdown */}
          <div className="grid gap-4 sm:grid-cols-2">
            <AnimatedCard index={2}>
              <Card>
                <CardHeader>
                  <CardTitle className="text-sm">Round Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-0 text-sm">
                  {[
                    { label: 'Type', value: <Badge variant="secondary" className={cn('text-xs', typeCfg.badgeClass)}>{typeCfg.label}</Badge> },
                    { label: 'Status', value: <span className="font-medium">{statusCfg.label}</span> },
                    { label: 'Position', value: <span className="font-medium">{`Round ${(round.sortOrder ?? 0) + 1}${competition?.rounds ? ` of ${competition.rounds.length}` : ''}`}</span> },
                    ...(round.purposeKey ? [{ label: 'Purpose', value: <span className="font-medium">{round.purposeKey}</span> }] : []),
                    { label: 'Jury Group', value: <span className="font-medium">{juryGroup ? juryGroup.name : '\u2014'}</span> },
                    { label: 'Opens', value: <span className="font-medium">{round.windowOpenAt ? new Date(round.windowOpenAt).toLocaleString() : '\u2014'}</span> },
                    { label: 'Closes', value: <span className="font-medium">{round.windowCloseAt ? new Date(round.windowCloseAt).toLocaleString() : '\u2014'}</span> },
                  ].map((row, i) => (
                    <div key={row.label} className={cn('flex justify-between items-center py-2.5', i > 0 && 'border-t border-dotted border-muted')}>
                      <span className="text-muted-foreground">{row.label}</span>
                      {row.value}
                    </div>
                  ))}
                </CardContent>
              </Card>
            </AnimatedCard>

            <AnimatedCard index={3}>
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-sm">Project Breakdown</CardTitle>
                    {projectCount > 0 && (
                      <span className="text-xs font-mono text-muted-foreground">{projectCount} total</span>
                    )}
                  </div>
                </CardHeader>
                <CardContent>
                  {projectCount === 0 ? (
                    <p className="text-sm text-muted-foreground py-4 text-center">
                      No projects assigned yet
                    </p>
                  ) : (
                    <div className="space-y-3">
                      {['PENDING', 'IN_PROGRESS', 'PASSED', 'REJECTED', 'COMPLETED', 'WITHDRAWN'].map((state) => {
                        const count = stateCounts[state] || 0
                        if (count === 0) return null
                        const pct = ((count / projectCount) * 100).toFixed(0)
                        return (
                          <div key={state}>
                            <div className="flex justify-between text-xs mb-1.5">
                              <span className="text-muted-foreground capitalize font-medium">{state.toLowerCase().replace('_', ' ')}</span>
                              <span className="font-bold tabular-nums">{count} <span className="font-normal text-muted-foreground">({pct}%)</span></span>
                            </div>
                            <div className="h-2 bg-muted rounded-full overflow-hidden">
                              <div
                                className={cn('h-full rounded-full transition-all duration-500', stateColors[state])}
                                style={{ width: `${pct}%` }}
                              />
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  )}
                </CardContent>
              </Card>
            </AnimatedCard>
          </div>
        </TabsContent>

        {/* ═══════════ PROJECTS TAB ═══════════ */}
        <TabsContent value="projects" className="space-y-4">
          <ProjectStatesTable competitionId={competitionId} roundId={roundId} />
        </TabsContent>

        {/* ═══════════ FILTERING TAB ═══════════ */}
        {isFiltering && (
          <TabsContent value="filtering" className="space-y-4">
            <FilteringDashboard competitionId={competitionId} roundId={roundId} />
          </TabsContent>
        )}

        {/* ═══════════ JURY TAB (non-EVALUATION jury rounds: LIVE_FINAL, DELIBERATION) ═══════════ */}
        {hasJury && !isEvaluation && (
        <TabsContent value="jury" className="space-y-6">

          {/* Members list (only if a jury group is assigned) */}
          {juryGroupDetail && (
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">
                      Members &mdash; {juryGroupDetail.name}
                    </CardTitle>
                    <CardDescription>
                      {juryGroupDetail.members.length} member{juryGroupDetail.members.length !== 1 ? 's' : ''}
                    </CardDescription>
                  </div>
                  <Button size="sm" onClick={() => setAddMemberOpen(true)}>
                    <UserPlus className="h-4 w-4 mr-1.5" />
                    Add Member
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                {juryGroupDetail.members.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-10 text-center">
                    <div className="rounded-full bg-muted p-4 mb-4">
                      <UserPlus className="h-8 w-8 text-muted-foreground" />
                    </div>
                    <p className="text-sm font-medium">No Members Yet</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      Add jury members to start assigning projects for evaluation.
                    </p>
                    <Button size="sm" variant="outline" className="mt-4" onClick={() => setAddMemberOpen(true)}>
                      <UserPlus className="h-4 w-4 mr-1.5" />
                      Add First Member
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-1">
                    {juryGroupDetail.members.map((member: any, idx: number) => (
                      <div
                        key={member.id}
                        className={cn(
                          'flex items-center justify-between py-2.5 px-3 rounded-md transition-colors',
                          idx % 2 === 1 && 'bg-muted/30',
                        )}
                      >
                        <div className="min-w-0 flex-1">
                          <p className="text-sm font-medium truncate">
                            {member.user.name || 'Unnamed User'}
                          </p>
                          <p className="text-xs text-muted-foreground truncate">{member.user.email}</p>
                        </div>
                        <div className="flex items-center gap-2 shrink-0">
                          <InlineMemberCap
                            memberId={member.id}
                            currentValue={member.maxAssignmentsOverride as number | null}
                            roundId={roundId}
                            jurorUserId={member.userId}
                            onSave={(val) => updateJuryMemberMutation.mutate({
                              id: member.id,
                              maxAssignmentsOverride: val,
                            })}
                          />
                          <TooltipProvider delayDuration={200}>
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
                                  disabled={notifyMemberMutation.isPending}
                                  onClick={() => notifyMemberMutation.mutate({ roundId, userId: member.userId })}
                                >
                                  {notifyMemberMutation.isPending && notifyMemberMutation.variables?.userId === member.userId ? (
                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                  ) : (
                                    <Mail className="h-3.5 w-3.5" />
                                  )}
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent side="left"><p>Notify juror of assignments</p></TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                          <TooltipProvider delayDuration={200}>
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
                                  disabled={redistributeMemberMutation.isPending}
                                  onClick={() => {
                                    const ok = window.confirm(
                                      `Reassign all pending projects from ${member.user.name || member.user.email} to other available jurors? The juror will remain in the group but lose unsubmitted assignments.`
                                    )
                                    if (!ok) return
                                    redistributeMemberMutation.mutate({ roundId, jurorId: member.userId })
                                  }}
                                >
                                  {redistributeMemberMutation.isPending && redistributeMemberMutation.variables?.jurorId === member.userId ? (
                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                  ) : (
                                    <Shuffle className="h-3.5 w-3.5" />
                                  )}
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent side="left"><p>Reassign all pending projects to other jurors</p></TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                          <TooltipProvider delayDuration={200}>
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
                                  onClick={() => setMemberTransferJuror({ id: member.userId, name: member.user.name || member.user.email })}
                                >
                                  <ArrowRightLeft className="h-3.5 w-3.5" />
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent side="left"><p>Transfer specific assignments to other jurors</p></TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                          <TooltipProvider delayDuration={200}>
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-7 w-7 text-muted-foreground hover:text-destructive"
                                  disabled={reshuffleMemberMutation.isPending}
                                  onClick={() => {
                                    const ok = window.confirm(
                                      `Remove ${member.user.name || member.user.email} from this jury pool and reassign all their unsubmitted projects to other jurors? Submitted evaluations will be preserved. This cannot be undone.`
                                    )
                                    if (!ok) return
                                    reshuffleMemberMutation.mutate({ roundId, jurorId: member.userId })
                                  }}
                                >
                                  {reshuffleMemberMutation.isPending && reshuffleMemberMutation.variables?.jurorId === member.userId ? (
                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                  ) : (
                                    <UserPlus className="h-3.5 w-3.5" />
                                  )}
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent side="left"><p>Drop juror & reshuffle pending projects</p></TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7 text-destructive hover:text-destructive shrink-0"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Remove member?</AlertDialogTitle>
                              <AlertDialogDescription>
                                Remove {member.user.name || member.user.email} from {juryGroupDetail.name}?
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction
                                onClick={() => removeJuryMemberMutation.mutate({ id: member.id })}
                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                              >
                                Remove
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          )}

          {/* Jury Group Selector (at bottom for non-evaluation jury rounds) */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-base">Jury Group</CardTitle>
                  <CardDescription>
                    Select or create a jury group for this round
                  </CardDescription>
                </div>
                <div className="flex items-center gap-2">
                  <Button size="sm" variant="outline" onClick={() => setCreateJuryOpen(true)}>
                    <Plus className="h-4 w-4 mr-1.5" />
                    New Jury
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              {juryGroups && juryGroups.length > 0 ? (
                <div className="space-y-4">
                  <Select
                    value={round.juryGroupId ?? '__none__'}
                    onValueChange={(value) => {
                      assignJuryMutation.mutate({
                        id: roundId,
                        juryGroupId: value === '__none__' ? null : value,
                      })
                    }}
                    disabled={assignJuryMutation.isPending}
                  >
                    <SelectTrigger className="w-full sm:w-80">
                      <SelectValue placeholder="Select jury group..." />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">No jury assigned</SelectItem>
                      {juryGroups.map((jg: any) => (
                        <SelectItem key={jg.id} value={jg.id}>
                          {jg.name} ({jg._count?.members ?? 0} members)
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>

                  {round.juryGroupId && (
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive">
                          <Trash2 className="h-4 w-4 mr-1.5" />
                          Delete &quot;{juryGroup?.name}&quot;
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Delete jury group?</AlertDialogTitle>
                          <AlertDialogDescription>
                            This will permanently delete &quot;{juryGroup?.name}&quot; and remove all its members.
                            Rounds using this jury group will be unlinked. This action cannot be undone.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => deleteJuryMutation.mutate({ id: round.juryGroupId! })}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            disabled={deleteJuryMutation.isPending}
                          >
                            {deleteJuryMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                            Delete Jury
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  )}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-10 text-center">
                  <div className="rounded-full bg-purple-50 p-4 mb-4">
                    <Users className="h-8 w-8 text-purple-400" />
                  </div>
                  <p className="text-sm font-medium">No Jury Groups</p>
                  <p className="text-xs text-muted-foreground mt-1 max-w-sm">
                    Create a jury group to assign members who will evaluate projects in this round.
                  </p>
                  <Button size="sm" className="mt-4" onClick={() => setCreateJuryOpen(true)}>
                    <Plus className="h-4 w-4 mr-1.5" />
                    Create First Jury
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>

        </TabsContent>
        )}

        {/* ═══════════ ASSIGNMENTS TAB (Evaluation rounds — includes Jury section) ═══════════ */}
        {isEvaluation && (
          <TabsContent value="assignments" className="space-y-6">

            {/* 1. Jury Members & Progress (merged) */}
            {!round?.juryGroupId ? (
              <Card>
                <CardContent className="py-8 text-center">
                  <p className="text-sm text-muted-foreground">Select a jury group below to get started.</p>
                </CardContent>
              </Card>
            ) : (
              <JuryProgressTable
                roundId={roundId}
                members={juryGroupDetail?.members.map((m: any) => ({
                  id: m.id,
                  userId: m.userId,
                  name: m.user.name || 'Unnamed',
                  email: m.user.email,
                  maxAssignmentsOverride: m.maxAssignmentsOverride as number | null,
                }))}
                onSaveCap={(id, val) => updateJuryMemberMutation.mutate({ id, maxAssignmentsOverride: val })}
                onRemoveMember={(id) => removeJuryMemberMutation.mutate({ id })}
                onAddMember={() => setAddMemberOpen(true)}
              />
            )}

            {/* 2. Score Distribution (full-width) */}
            <ScoreDistribution roundId={roundId} />

            {/* 3. Reassignment History (always open) */}
            <ReassignmentHistory roundId={roundId} />

            {/* ── Remaining content only shown when jury group is assigned ── */}
            {round?.juryGroupId && (
            <>

            {/* 4. Assignments */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">Assignments</CardTitle>
                    <CardDescription>Individual jury-project assignments and actions</CardDescription>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <SendRemindersButton roundId={roundId} />
                    <NotifyJurorsButton roundId={roundId} />
                    <Button variant="outline" size="sm" onClick={() => setExportOpen(true)}>
                      <Download className="h-4 w-4 mr-1.5" />
                      Export
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <IndividualAssignmentsTable roundId={roundId} projectStates={projectStates} />
              </CardContent>
            </Card>

            {/* 5. Monitoring — COI + Unassigned Queue */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Monitoring</CardTitle>
                <CardDescription>Conflict of interest declarations and unassigned projects</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <COIReviewSection roundId={roundId} />
                <RoundUnassignedQueue roundId={roundId} requiredReviews={(config.requiredReviewsPerProject as number) || 3} />
              </CardContent>
            </Card>

            {/* 6. Coverage & Generation (collapsible, default collapsed when assignments exist) */}
            <Card>
              <CardHeader
                className="cursor-pointer select-none"
                onClick={() => setCoverageOpen((o) => !o)}
              >
                <CardTitle className="text-base flex items-center gap-2">
                  Coverage &amp; Generation
                  <ChevronRight className={cn('h-4 w-4 ml-auto transition-transform', coverageOpen && 'rotate-90')} />
                </CardTitle>
                <CardDescription>Assignment coverage overview and AI generation</CardDescription>
              </CardHeader>
              {coverageOpen && (
                <CardContent className="space-y-6">
                  <CoverageReport roundId={roundId} requiredReviews={(config.requiredReviewsPerProject as number) || 3} />

                  {/* Generate Assignments */}
                  <div className={cn('rounded-lg border p-4 space-y-3', aiAssignmentMutation.isPending && 'border-violet-300 bg-violet-50/30')}>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium flex items-center gap-2">
                          Assignment Generation
                          {aiAssignmentMutation.isPending && (
                            <Badge variant="outline" className="gap-1.5 text-violet-600 border-violet-300 animate-pulse">
                              <Loader2 className="h-3 w-3 animate-spin" />
                              AI generating...
                            </Badge>
                          )}
                          {aiAssignmentMutation.data && !aiAssignmentMutation.isPending && (
                            <Badge variant="outline" className="gap-1 text-emerald-600 border-emerald-300">
                              <CheckCircle2 className="h-3 w-3" />
                              {aiAssignmentMutation.data.stats.assignmentsGenerated} ready
                            </Badge>
                          )}
                        </p>
                        <p className="text-xs text-muted-foreground mt-0.5">
                          AI-suggested jury-to-project assignments based on expertise and workload
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        {aiAssignmentMutation.data && !aiAssignmentMutation.isPending && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => setPreviewSheetOpen(true)}
                          >
                            Review Assignments
                          </Button>
                        )}
                        <Button
                          size="sm"
                          onClick={() => {
                            aiAssignmentMutation.mutate({
                              roundId,
                              requiredReviews: (config.requiredReviewsPerProject as number) || 3,
                            })
                          }}
                          disabled={projectCount === 0 || !juryGroup || aiAssignmentMutation.isPending}
                        >
                          {aiAssignmentMutation.isPending ? (
                            <>
                              <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
                              Generating...
                            </>
                          ) : (
                            <>
                              <Zap className="h-4 w-4 mr-1.5" />
                              {aiAssignmentMutation.data ? 'Regenerate' : 'Generate with AI'}
                            </>
                          )}
                        </Button>
                      </div>
                    </div>
                    {projectCount === 0 && (
                      <div className="flex items-center gap-2 p-3 rounded-lg bg-amber-50 border border-amber-200 text-sm text-amber-800">
                        <AlertTriangle className="h-4 w-4 shrink-0" />
                        Add projects to this round first.
                      </div>
                    )}
                    {juryGroup && projectCount > 0 && !aiAssignmentMutation.isPending && !aiAssignmentMutation.data && (
                      <p className="text-sm text-muted-foreground">
                        Click &quot;Generate with AI&quot; to create assignments using GPT analysis of juror expertise, project descriptions, and documents. Or open the preview to use the algorithm instead.
                      </p>
                    )}
                    {aiAssignmentMutation.isPending && (
                      <div className="flex items-center gap-3 p-3 rounded-lg bg-violet-50 border border-violet-200 dark:bg-violet-950/20 dark:border-violet-800">
                        <div className="relative">
                          <div className="h-8 w-8 rounded-full border-2 border-violet-300 border-t-violet-600 animate-spin" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-violet-800 dark:text-violet-200">AI is analyzing projects and jurors...</p>
                          <p className="text-xs text-violet-600 dark:text-violet-400">
                            Matching expertise, reviewing bios, and balancing workloads
                          </p>
                        </div>
                      </div>
                    )}
                    {aiAssignmentMutation.error && !aiAssignmentMutation.isPending && (
                      <div className="flex items-center gap-3 p-3 rounded-lg bg-red-50 border border-red-200 dark:bg-red-950/20 dark:border-red-800">
                        <AlertTriangle className="h-5 w-5 text-red-600 shrink-0" />
                        <div className="flex-1">
                          <p className="text-sm font-medium text-red-800 dark:text-red-200">
                            AI generation failed
                          </p>
                          <p className="text-xs text-red-600 dark:text-red-400">
                            {aiAssignmentMutation.error.message}
                          </p>
                        </div>
                      </div>
                    )}
                    {aiAssignmentMutation.data && !aiAssignmentMutation.isPending && (
                      <div className="flex items-center gap-3 p-3 rounded-lg bg-emerald-50 border border-emerald-200 dark:bg-emerald-950/20 dark:border-emerald-800">
                        <CheckCircle2 className="h-5 w-5 text-emerald-600 shrink-0" />
                        <div className="flex-1">
                          <p className="text-sm font-medium text-emerald-800 dark:text-emerald-200">
                            {aiAssignmentMutation.data.stats.assignmentsGenerated} assignments generated
                          </p>
                          <p className="text-xs text-emerald-600 dark:text-emerald-400">
                            {aiAssignmentMutation.data.stats.totalJurors} jurors, {aiAssignmentMutation.data.stats.totalProjects} projects
                            {aiAssignmentMutation.data.fallbackUsed && ' (algorithm fallback)'}
                          </p>
                        </div>
                        <Button size="sm" variant="outline" onClick={() => setPreviewSheetOpen(true)}>
                          Review &amp; Execute
                        </Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              )}
            </Card>

            {/* 7. Jury Group (at bottom) */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">Jury Group</CardTitle>
                    <CardDescription>
                      Select or create a jury group for this round
                    </CardDescription>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button size="sm" variant="outline" onClick={() => setCreateJuryOpen(true)}>
                      <Plus className="h-4 w-4 mr-1.5" />
                      New Jury
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                {juryGroups && juryGroups.length > 0 ? (
                  <div className="space-y-4">
                    <Select
                      value={round.juryGroupId ?? '__none__'}
                      onValueChange={(value) => {
                        assignJuryMutation.mutate({
                          id: roundId,
                          juryGroupId: value === '__none__' ? null : value,
                        })
                      }}
                      disabled={assignJuryMutation.isPending}
                    >
                      <SelectTrigger className="w-full sm:w-80">
                        <SelectValue placeholder="Select jury group..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="__none__">No jury assigned</SelectItem>
                        {juryGroups.map((jg: any) => (
                          <SelectItem key={jg.id} value={jg.id}>
                            {jg.name} ({jg._count?.members ?? 0} members)
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    {round.juryGroupId && (
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive">
                            <Trash2 className="h-4 w-4 mr-1.5" />
                            Delete &quot;{juryGroup?.name}&quot;
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete jury group?</AlertDialogTitle>
                            <AlertDialogDescription>
                              This will permanently delete &quot;{juryGroup?.name}&quot; and remove all its members.
                              Rounds using this jury group will be unlinked. This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => deleteJuryMutation.mutate({ id: round.juryGroupId! })}
                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                              disabled={deleteJuryMutation.isPending}
                            >
                              {deleteJuryMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                              Delete Jury
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    )}
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-10 text-center">
                    <div className="rounded-full bg-purple-50 p-4 mb-4">
                      <Users className="h-8 w-8 text-purple-400" />
                    </div>
                    <p className="text-sm font-medium">No Jury Groups</p>
                    <p className="text-xs text-muted-foreground mt-1 max-w-sm">
                      Create a jury group to assign members who will evaluate projects in this round.
                    </p>
                    <Button size="sm" className="mt-4" onClick={() => setCreateJuryOpen(true)}>
                      <Plus className="h-4 w-4 mr-1.5" />
                      Create First Jury
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Assignment Preview Sheet */}
            <AssignmentPreviewSheet
              roundId={roundId}
              open={previewSheetOpen}
              onOpenChange={setPreviewSheetOpen}
              requiredReviews={(config.requiredReviewsPerProject as number) || 3}
              aiResult={aiAssignmentMutation.data ?? null}
              isAIGenerating={aiAssignmentMutation.isPending}
              onGenerateAI={() => aiAssignmentMutation.mutate({
                roundId,
                requiredReviews: (config.requiredReviewsPerProject as number) || 3,
              })}
              onResetAI={() => aiAssignmentMutation.reset()}
            />

            {/* CSV Export Dialog */}
            <ExportEvaluationsDialog roundId={roundId} open={exportOpen} onOpenChange={setExportOpen} />
            </>
            )}
          </TabsContent>
        )}

        {/* ═══════════ RANKING TAB (EVALUATION rounds) ═══════════ */}
        {isEvaluation && (
          <TabsContent value="ranking" className="space-y-4">
            <RankingDashboard competitionId={competitionId} roundId={roundId} />
          </TabsContent>
        )}

        {/* ═══════════ CONFIG TAB ═══════════ */}
        <TabsContent value="config" className="space-y-6">
          {/* Round Dates */}
          <Card>
            <CardHeader className="border-b">
              <ConfigSectionHeader
                title="Round Dates"
                description="When this round starts and ends. Defines the active period for document uploads and evaluations."
                status={round.windowOpenAt && round.windowCloseAt ? 'complete' : 'error'}
                summary={
                  round.windowOpenAt && round.windowCloseAt
                    ? `${new Date(round.windowOpenAt).toLocaleDateString()} — ${new Date(round.windowCloseAt).toLocaleDateString()}`
                    : undefined
                }
              />
            </CardHeader>
            <CardContent className="pt-4">
              {!round.windowOpenAt && !round.windowCloseAt && (
                <div className="mb-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2">
                  <p className="text-xs text-amber-700">Dates not set — this round cannot be activated without dates.</p>
                </div>
              )}
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Start Date</Label>
                  <DateTimePicker
                    value={round.windowOpenAt ? new Date(round.windowOpenAt) : null}
                    onChange={(date) => updateMutation.mutate({ id: roundId, windowOpenAt: date }, { onSuccess: () => toast.success('Dates saved') })}
                    placeholder="Select start date & time"
                    clearable
                  />
                </div>
                <div className="space-y-2">
                  <Label>End Date</Label>
                  <DateTimePicker
                    value={round.windowCloseAt ? new Date(round.windowCloseAt) : null}
                    onChange={(date) => updateMutation.mutate({ id: roundId, windowCloseAt: date }, { onSuccess: () => toast.success('Dates saved') })}
                    placeholder="Select end date & time"
                    clearable
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* General Round Settings */}
          <Card>
            <CardHeader className="border-b">
              <ConfigSectionHeader
                title="General Settings"
                description="Settings that apply to this round regardless of type"
                status={
                  isEvaluation && !(config.startupAdvanceCount as number) && !(config.conceptAdvanceCount as number)
                    ? 'warning'
                    : 'complete'
                }
                summary={
                  (config.startupAdvanceCount as number) || (config.conceptAdvanceCount as number)
                    ? `Target: ${config.startupAdvanceCount ?? 0} startup, ${config.conceptAdvanceCount ?? 0} concept`
                    : undefined
                }
              />
            </CardHeader>
            <CardContent className="space-y-0 pt-0">
              <div className="flex items-center justify-between p-4 rounded-md">
                <div className="space-y-0.5">
                  <Label htmlFor="notify-on-entry" className="text-sm font-medium">
                    Notify on round entry
                  </Label>
                  <p className="text-xs text-muted-foreground">
                    Send an automated email to project applicants when their project enters this round
                  </p>
                </div>
                <Switch
                  id="notify-on-entry"
                  checked={!!config.notifyOnEntry}
                  onCheckedChange={(checked) => {
                    handleConfigChange({ ...config, notifyOnEntry: checked })
                  }}
                />
              </div>

              <div className="flex items-center justify-between p-4 rounded-md bg-muted/30">
                <div className="space-y-0.5">
                  <Label htmlFor="notify-on-advance" className="text-sm font-medium">
                    Notify on advance
                  </Label>
                  <p className="text-xs text-muted-foreground">
                    Send an email to project applicants when their project advances from this round to the next
                  </p>
                </div>
                <Switch
                  id="notify-on-advance"
                  checked={!!config.notifyOnAdvance}
                  onCheckedChange={(checked) => {
                    handleConfigChange({ ...config, notifyOnAdvance: checked })
                  }}
                />
              </div>

              <div className="border-t mt-2 pt-4 px-4 pb-2 bg-[#053d57]/[0.03] rounded-b-lg -mx-6 -mb-6 p-6">
                <Label className="text-sm font-medium">Advancement Targets</Label>
                {isEvaluation && !(config.startupAdvanceCount as number) && !(config.conceptAdvanceCount as number) && (
                  <div className="mt-2 mb-1 rounded-md border border-amber-200 bg-amber-50 px-3 py-2">
                    <p className="text-xs text-amber-700">Advancement targets not configured — all passed projects will be eligible to advance.</p>
                  </div>
                )}
                <p className="text-xs text-muted-foreground mb-3">
                  Target number of projects per category to advance from this round
                </p>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1.5">
                    <Label htmlFor="startup-advance-count" className="text-xs text-muted-foreground">
                      Startup Projects
                    </Label>
                    <Input
                      id="startup-advance-count"
                      type="number"
                      min={0}
                      className="h-9"
                      placeholder="No limit"
                      value={(config.startupAdvanceCount as number) ?? ''}
                      onChange={(e) => {
                        const val = e.target.value ? parseInt(e.target.value, 10) : undefined
                        handleConfigChange({ ...config, startupAdvanceCount: val })
                      }}
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label htmlFor="concept-advance-count" className="text-xs text-muted-foreground">
                      Concept Projects
                    </Label>
                    <Input
                      id="concept-advance-count"
                      type="number"
                      min={0}
                      className="h-9"
                      placeholder="No limit"
                      value={(config.conceptAdvanceCount as number) ?? ''}
                      onChange={(e) => {
                        const val = e.target.value ? parseInt(e.target.value, 10) : undefined
                        handleConfigChange({ ...config, conceptAdvanceCount: val })
                      }}
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Round-type-specific config */}
          <RoundConfigForm
            roundType={round.roundType}
            config={config}
            onChange={handleConfigChange}
            juryGroups={juryGroups?.map((jg: any) => ({ id: jg.id, name: jg.name }))}
          />

          {/* Evaluation Criteria Editor (EVALUATION rounds only) */}
          {isEvaluation && <EvaluationCriteriaEditor roundId={roundId} />}

          {/* Document Requirements — hidden for EVALUATION rounds unless requireDocumentUpload is on */}
          {(!isEvaluation || !!(config.requireDocumentUpload as boolean)) && (
            <Card>
              <CardHeader>
                <ConfigSectionHeader
                  title="Document Requirements"
                  description={
                    `Files applicants must submit for this round` +
                    (round.windowCloseAt ? ` — due by ${new Date(round.windowCloseAt).toLocaleDateString()}` : '')
                  }
                  status={(fileRequirements?.length ?? 0) > 0 ? 'complete' : 'warning'}
                  summary={
                    (fileRequirements?.length ?? 0) > 0
                      ? `${fileRequirements?.length} requirement(s)`
                      : undefined
                  }
                />
              </CardHeader>
              <CardContent>
                <FileRequirementsEditor
                  roundId={roundId}
                  windowOpenAt={round.windowOpenAt}
                  windowCloseAt={round.windowCloseAt}
                />
              </CardContent>
            </Card>
          )}
        </TabsContent>

        {/* ═══════════ AWARDS TAB ═══════════ */}
        {hasAwards && (
        <TabsContent value="awards" className="space-y-4">
          <Card>
            <CardContent className="p-6">
              {roundAwards.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                  <div className="rounded-full bg-[#de0f1e]/10 p-4 w-fit mx-auto mb-4">
                    <Trophy className="h-8 w-8 text-[#de0f1e]/60" />
                  </div>
                  <p className="text-sm font-medium text-foreground">No Awards Linked</p>
                  <p className="text-xs mt-1 max-w-sm mx-auto">
                    Create an award and set this round as its evaluation round to see it here
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {roundAwards.map((award) => {
                    const eligibleCount = award._count?.eligibilities || 0

                    return (
                      <Link
                        key={award.id}
                        href={`/admin/awards/${award.id}` as Route}
                        className="block"
                      >
                        <div className="flex items-start justify-between gap-4 rounded-lg border border-l-4 border-l-[#de0f1e] p-4 transition-all hover:shadow-md hover:-translate-y-0.5">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              <h3 className="font-medium truncate">{award.name}</h3>
                              <Badge
                                variant={
                                  award.eligibilityMode === 'SEPARATE_POOL'
                                    ? 'default'
                                    : 'secondary'
                                }
                                className="shrink-0"
                              >
                                {award.eligibilityMode === 'SEPARATE_POOL'
                                  ? 'Separate Pool'
                                  : 'Stay in Main'}
                              </Badge>
                            </div>
                            {award.description && (
                              <p className="text-sm text-muted-foreground line-clamp-1">
                                {award.description}
                              </p>
                            )}
                          </div>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground shrink-0">
                            <div className="text-right">
                              <div className="font-medium text-foreground">{eligibleCount}</div>
                              <div className="text-xs">eligible</div>
                            </div>
                          </div>
                        </div>
                      </Link>
                    )
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
        )}
      </Tabs>

      {/* ── Page-level dialogs (shared between jury/assignments tabs) ── */}
      <Dialog open={createJuryOpen} onOpenChange={setCreateJuryOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Create Jury Group</DialogTitle>
            <DialogDescription>
              Create a new jury group for this competition. It will be automatically assigned to this round.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Name</label>
              <Input
                placeholder="e.g. Round 1 Jury, Expert Panel, Final Jury"
                value={newJuryName}
                onChange={(e) => setNewJuryName(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && newJuryName.trim()) {
                    createJuryMutation.mutate({
                      competitionId,
                      name: newJuryName.trim(),
                      slug: newJuryName.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''),
                    })
                  }
                }}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateJuryOpen(false)}>Cancel</Button>
            <Button
              onClick={() => {
                createJuryMutation.mutate({
                  competitionId,
                  name: newJuryName.trim(),
                  slug: newJuryName.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''),
                })
              }}
              disabled={createJuryMutation.isPending || !newJuryName.trim()}
            >
              {createJuryMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
              Create
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {juryGroupId && (
        <AddMemberDialog
          juryGroupId={juryGroupId}
          open={addMemberOpen}
          onOpenChange={(open) => {
            setAddMemberOpen(open)
            if (!open) utils.juryGroup.getById.invalidate({ id: juryGroupId })
          }}
        />
      )}

      {/* Autosave error bar — only shows when save fails */}
      {autosaveStatus === 'error' && (
        <div className="fixed bottom-0 left-0 right-0 z-50 border-t bg-red-50 dark:bg-red-950/50 shadow-[0_-4px_12px_rgba(0,0,0,0.1)]">
          <div className="container flex items-center justify-between py-3 px-4 max-w-5xl mx-auto">
            <div className="flex items-center gap-2 text-sm text-red-700 dark:text-red-300">
              <AlertTriangle className="h-4 w-4" />
              <span>Auto-save failed</span>
            </div>
            <Button
              size="sm"
              onClick={saveConfig}
              disabled={updateMutation.isPending}
              className="bg-[#de0f1e] hover:bg-[#c00d1a] text-white"
            >
              {updateMutation.isPending ? (
                <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />Retrying...</>
              ) : (
                <><Save className="h-3.5 w-3.5 mr-1.5" />Retry Save</>
              )}
            </Button>
          </div>
        </div>
      )}

      {memberTransferJuror && (
        <TransferAssignmentsDialog
          roundId={roundId}
          sourceJuror={memberTransferJuror}
          open={!!memberTransferJuror}
          onClose={() => setMemberTransferJuror(null)}
        />
      )}
    </div>
  )
}