'use client'

import { useState, useMemo, useCallback } from 'react'
import { useParams } 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,
  Save,
  Loader2,
  ChevronDown,
  Play,
  Square,
  Archive,
  Layers,
  Users,
  CalendarDays,
  BarChart3,
  ClipboardList,
  Settings,
  Zap,
  Shield,
  UserPlus,
  CheckCircle2,
  AlertTriangle,
  FileText,
  Trophy,
  Clock,
  Send,
  Download,
  Plus,
  Trash2,
  ArrowRight,
  X,
} from 'lucide-react'
import { RoundConfigForm } from '@/components/admin/competition/round-config-form'
import { ProjectStatesTable } from '@/components/admin/round/project-states-table'
import { SubmissionWindowManager } from '@/components/admin/round/submission-window-manager'
import { FileRequirementsEditor } from '@/components/admin/round/file-requirements-editor'
import { FilteringDashboard } from '@/components/admin/round/filtering-dashboard'
import { CoverageReport } from '@/components/admin/assignment/coverage-report'
import { AssignmentPreviewSheet } from '@/components/admin/assignment/assignment-preview-sheet'
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'

// ── Status & type config maps ──────────────────────────────────────────────
const roundStatusConfig = {
  ROUND_DRAFT: {
    label: 'Draft',
    bgClass: 'bg-gray-100 text-gray-700',
    dotClass: 'bg-gray-500',
    description: 'Not yet active. Configure before launching.',
  },
  ROUND_ACTIVE: {
    label: 'Active',
    bgClass: 'bg-emerald-100 text-emerald-700',
    dotClass: 'bg-emerald-500 animate-pulse',
    description: 'Round is live. Projects can be processed.',
  },
  ROUND_CLOSED: {
    label: 'Closed',
    bgClass: 'bg-blue-100 text-blue-700',
    dotClass: 'bg-blue-500',
    description: 'No longer accepting changes. Results are final.',
  },
  ROUND_ARCHIVED: {
    label: 'Archived',
    bgClass: 'bg-muted text-muted-foreground',
    dotClass: 'bg-muted-foreground',
    description: 'Historical record only.',
  },
} as const

const roundTypeConfig: Record<string, { label: string; color: string; description: string }> = {
  INTAKE: { label: 'Intake', color: 'bg-gray-100 text-gray-700', description: 'Collecting applications' },
  FILTERING: { label: 'Filtering', color: 'bg-amber-100 text-amber-700', description: 'AI + manual screening' },
  EVALUATION: { label: 'Evaluation', color: 'bg-blue-100 text-blue-700', description: 'Jury evaluation & scoring' },
  SUBMISSION: { label: 'Submission', color: 'bg-purple-100 text-purple-700', description: 'Document submission' },
  MENTORING: { label: 'Mentoring', color: 'bg-teal-100 text-teal-700', description: 'Mentor-guided development' },
  LIVE_FINAL: { label: 'Live Final', color: 'bg-red-100 text-red-700', description: 'Live presentations & voting' },
  DELIBERATION: { label: 'Deliberation', color: 'bg-indigo-100 text-indigo-700', description: 'Final jury deliberation' },
}

const stateColors: Record<string, string> = {
  PENDING: 'bg-gray-400',
  IN_PROGRESS: 'bg-blue-500',
  PASSED: 'bg-green-500',
  REJECTED: 'bg-red-500',
  COMPLETED: 'bg-emerald-500',
  WITHDRAWN: 'bg-orange-400',
}

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

export default function RoundDetailPage() {
  const params = useParams()
  const roundId = params.roundId as string

  const [config, setConfig] = useState<Record<string, unknown>>({})
  const [hasChanges, setHasChanges] = useState(false)
  const [activeTab, setActiveTab] = useState('overview')
  const [previewSheetOpen, setPreviewSheetOpen] = useState(false)
  const [exportOpen, setExportOpen] = useState(false)
  const [advanceDialogOpen, setAdvanceDialogOpen] = useState(false)

  const utils = trpc.useUtils()

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

  const competitionId = round?.competitionId ?? ''

  const { data: juryGroups } = trpc.juryGroup.list.useQuery(
    { competitionId },
    { enabled: !!competitionId },
  )
  const { data: fileRequirements } = trpc.file.listRequirements.useQuery({ roundId })

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

  // Sync config from server when not dirty
  if (round && !hasChanges) {
    const roundConfig = (round.configJson as Record<string, unknown>) ?? {}
    if (JSON.stringify(roundConfig) !== JSON.stringify(config)) {
      setConfig(roundConfig)
    }
  }

  // ── Mutations ──────────────────────────────────────────────────────────
  const updateMutation = trpc.round.update.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round configuration saved')
      setHasChanges(false)
    },
    onError: (err) => 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')
    },
    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 })
      toast.success('Jury group updated')
    },
    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 })
      toast.success(`Advanced ${data.advancedCount} project(s) to ${data.targetRoundName}`)
      setAdvanceDialogOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

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

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

  const handleSave = useCallback(() => {
    updateMutation.mutate({ id: roundId, configJson: config })
  }, [roundId, config, updateMutation])

  // ── Computed values ────────────────────────────────────────────────────
  const projectCount = 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 = juryGroup?.members?.length ?? 0

  const isFiltering = round?.roundType === 'FILTERING'
  const isEvaluation = round?.roundType === 'EVALUATION'

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

  // ── Loading state ──────────────────────────────────────────────────────
  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <Skeleton className="h-8 w-8" />
          <div className="space-y-2">
            <Skeleton className="h-7 w-64" />
            <Skeleton className="h-4 w-40" />
          </div>
        </div>
        <div className="grid gap-3 grid-cols-2 sm:grid-cols-4">
          {[1, 2, 3, 4].map((i) => <Skeleton key={i} className="h-24" />)}
        </div>
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-96 w-full" />
      </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',
    },
    ...((isEvaluation || isFiltering)
      ? [{
          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,
    },
    {
      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 ===== */}
      <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={'/admin/rounds' as Route} className="mt-1 shrink-0">
            <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Back to rounds">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="text-xl font-bold tracking-tight truncate">{round.name}</h1>
              <Badge variant="secondary" className={cn('text-xs shrink-0', typeCfg.color)}>
                {typeCfg.label}
              </Badge>

              {/* Status dropdown */}
              <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',
                      statusCfg.bgClass,
                      'hover:opacity-80',
                    )}
                  >
                    <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' && (
                    <DropdownMenuItem
                      onClick={() => activateMutation.mutate({ roundId })}
                      disabled={isTransitioning}
                    >
                      <Play className="h-4 w-4 mr-2 text-emerald-600" />
                      Activate Round
                    </DropdownMenuItem>
                  )}
                  {status === 'ROUND_ACTIVE' && (
                    <DropdownMenuItem
                      onClick={() => closeMutation.mutate({ roundId })}
                      disabled={isTransitioning}
                    >
                      <Square className="h-4 w-4 mr-2 text-blue-600" />
                      Close Round
                    </DropdownMenuItem>
                  )}
                  {status === 'ROUND_CLOSED' && (
                    <>
                      <DropdownMenuItem
                        onClick={() => activateMutation.mutate({ roundId })}
                        disabled={isTransitioning}
                      >
                        <Play className="h-4 w-4 mr-2 text-emerald-600" />
                        Reactivate Round
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem
                        onClick={() => archiveMutation.mutate({ roundId })}
                        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>
            </div>
            <p className="text-sm text-muted-foreground mt-0.5">{typeCfg.description}</p>
          </div>
        </div>

        {/* Action buttons */}
        <div className="flex items-center gap-2 shrink-0 flex-wrap">
          {hasChanges && (
            <Button size="sm" onClick={handleSave} disabled={updateMutation.isPending}>
              {updateMutation.isPending ? (
                <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
              ) : (
                <Save className="h-4 w-4 mr-1.5" />
              )}
              Save Config
            </Button>
          )}
          <Link href={poolLink}>
            <Button variant="outline" size="sm">
              <Layers className="h-4 w-4 mr-1.5" />
              Project Pool
            </Button>
          </Link>
        </div>
      </div>

      {/* ===== STATS BAR ===== */}
      <div className="grid gap-3 grid-cols-2 sm:grid-cols-4">
        {/* Projects */}
        <Card>
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Layers className="h-4 w-4 text-blue-500" />
                <span className="text-sm font-medium">Projects</span>
              </div>
            </div>
            <p className="text-2xl font-bold mt-1">{projectCount}</p>
            <div className="flex flex-wrap gap-1.5 mt-1.5">
              {Object.entries(stateCounts).map(([state, count]) => (
                <span key={state} className="text-[10px] text-muted-foreground">
                  {String(count)} {state.toLowerCase().replace('_', ' ')}
                </span>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Jury (with inline group selector) */}
        <Card>
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 mb-1" data-jury-select>
              <Users className="h-4 w-4 text-purple-500" />
              <span className="text-sm font-medium">Jury</span>
            </div>
            {juryGroups && juryGroups.length > 0 ? (
              <Select
                value={round.juryGroupId ?? '__none__'}
                onValueChange={(value) => {
                  assignJuryMutation.mutate({
                    id: roundId,
                    juryGroupId: value === '__none__' ? null : value,
                  })
                }}
                disabled={assignJuryMutation.isPending}
              >
                <SelectTrigger className="h-8 text-xs mt-1">
                  <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>
            ) : juryGroup ? (
              <>
                <p className="text-2xl font-bold mt-1">{juryMemberCount}</p>
                <p className="text-xs text-muted-foreground truncate">{juryGroup.name}</p>
              </>
            ) : (
              <>
                <p className="text-2xl font-bold mt-1 text-muted-foreground">&mdash;</p>
                <p className="text-xs text-muted-foreground">No jury groups yet</p>
              </>
            )}
          </CardContent>
        </Card>

        {/* Window */}
        <Card>
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2">
              <CalendarDays className="h-4 w-4 text-emerald-500" />
              <span className="text-sm font-medium">Window</span>
            </div>
            {round.windowOpenAt || round.windowCloseAt ? (
              <>
                <p className="text-sm font-bold mt-1">
                  {round.windowOpenAt
                    ? new Date(round.windowOpenAt).toLocaleDateString()
                    : 'No start'}
                </p>
                <p className="text-xs text-muted-foreground">
                  {round.windowCloseAt
                    ? `Closes ${new Date(round.windowCloseAt).toLocaleDateString()}`
                    : 'No deadline'}
                </p>
              </>
            ) : (
              <>
                <p className="text-2xl font-bold mt-1 text-muted-foreground">&mdash;</p>
                <p className="text-xs text-muted-foreground">No dates set</p>
              </>
            )}
          </CardContent>
        </Card>

        {/* Advancement */}
        <Card>
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2">
              <BarChart3 className="h-4 w-4 text-amber-500" />
              <span className="text-sm font-medium">Advancement</span>
            </div>
            {round.advancementRules && round.advancementRules.length > 0 ? (
              <>
                <p className="text-2xl font-bold mt-1">{round.advancementRules.length}</p>
                <p className="text-xs text-muted-foreground">
                  {round.advancementRules.map((r: any) => r.ruleType.replace('_', ' ').toLowerCase()).join(', ')}
                </p>
              </>
            ) : (
              <>
                <p className="text-2xl font-bold mt-1 text-muted-foreground">&mdash;</p>
                <p className="text-xs text-muted-foreground">Admin selection</p>
              </>
            )}
          </CardContent>
        </Card>
      </div>

      {/* ===== TABS ===== */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="w-full sm:w-auto overflow-x-auto">
          <TabsTrigger value="overview">
            <Zap className="h-3.5 w-3.5 mr-1.5" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="projects">
            <Layers className="h-3.5 w-3.5 mr-1.5" />
            Projects
          </TabsTrigger>
          {isFiltering && (
            <TabsTrigger value="filtering">
              <Shield className="h-3.5 w-3.5 mr-1.5" />
              Filtering
            </TabsTrigger>
          )}
          {isEvaluation && (
            <TabsTrigger value="assignments">
              <ClipboardList className="h-3.5 w-3.5 mr-1.5" />
              Assignments
            </TabsTrigger>
          )}
          <TabsTrigger value="config">
            <Settings className="h-3.5 w-3.5 mr-1.5" />
            Config
          </TabsTrigger>
          <TabsTrigger value="windows">
            <Clock className="h-3.5 w-3.5 mr-1.5" />
            Submissions
          </TabsTrigger>
          <TabsTrigger value="awards">
            <Trophy className="h-3.5 w-3.5 mr-1.5" />
            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>

        {/* ═══════════ OVERVIEW TAB ═══════════ */}
        <TabsContent value="overview" className="space-y-6">
          {/* Readiness Checklist */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-base">Readiness Checklist</CardTitle>
                  <CardDescription>
                    {readyCount}/{readinessItems.length} items ready
                  </CardDescription>
                </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-muted-foreground')}>
                        {item.label}
                      </p>
                      <p className="text-xs text-muted-foreground">{item.detail}</p>
                    </div>
                    {item.action && (
                      <Link href={item.action}>
                        <Button variant="outline" size="sm" className="shrink-0 text-xs">
                          {item.actionLabel}
                        </Button>
                      </Link>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Quick Actions */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Quick Actions</CardTitle>
              <CardDescription>Common operations for this round</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {/* Status transitions */}
                {status === 'ROUND_DRAFT' && (
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <button className="flex items-start gap-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors 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 hover:bg-muted/50 transition-colors 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>
                )}

                {/* Assign projects */}
                <Link href={poolLink}>
                  <button className="flex items-start gap-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors text-left w-full">
                    <Layers className="h-5 w-5 text-blue-600 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>

                {/* Filtering specific */}
                {isFiltering && (
                  <button
                    onClick={() => setActiveTab('filtering')}
                    className="flex items-start gap-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors text-left"
                  >
                    <Shield className="h-5 w-5 text-amber-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>
                )}

                {/* Jury assignment for evaluation/filtering */}
                {(isEvaluation || isFiltering) && !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 hover:bg-muted/50 transition-colors text-left border-amber-200 bg-amber-50/50"
                  >
                    <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:bg-muted/50 transition-colors text-left"
                  >
                    <ClipboardList className="h-5 w-5 text-blue-600 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>
                )}

                {/* View projects */}
                <button
                  onClick={() => setActiveTab('projects')}
                  className="flex items-start gap-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors text-left"
                >
                  <BarChart3 className="h-5 w-5 text-purple-600 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 (shown when PASSED > 0) */}
                {passedCount > 0 && (
                  <button
                    onClick={() => setAdvanceDialogOpen(true)}
                    className="flex items-start gap-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors text-left border-green-200 bg-green-50/50"
                  >
                    <ArrowRight className="h-5 w-5 text-green-600 mt-0.5 shrink-0" />
                    <div>
                      <p className="text-sm font-medium">Advance Projects</p>
                      <p className="text-xs text-muted-foreground mt-0.5">
                        Move {passedCount} passed project(s) to the next round
                      </p>
                    </div>
                  </button>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Advance Projects Confirmation Dialog */}
          <AlertDialog open={advanceDialogOpen} onOpenChange={setAdvanceDialogOpen}>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Advance {passedCount} project(s)?</AlertDialogTitle>
                <AlertDialogDescription>
                  All projects with PASSED status in this round will be moved to the next round.
                  This action creates new entries in the next round and marks current entries as completed.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => advanceMutation.mutate({ roundId })}
                  disabled={advanceMutation.isPending}
                >
                  {advanceMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                  Advance Projects
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>

          {/* Round Info + Project Breakdown */}
          <div className="grid gap-4 sm:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm">Round Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Type</span>
                  <Badge variant="secondary" className={cn('text-xs', typeCfg.color)}>{typeCfg.label}</Badge>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Status</span>
                  <span className="font-medium">{statusCfg.label}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Sort Order</span>
                  <span className="font-medium font-mono">{round.sortOrder}</span>
                </div>
                {round.purposeKey && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Purpose</span>
                    <span className="font-medium">{round.purposeKey}</span>
                  </div>
                )}
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Jury Group</span>
                  <span className="font-medium">
                    {juryGroup ? juryGroup.name : '\u2014'}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Opens</span>
                  <span className="font-medium">
                    {round.windowOpenAt ? new Date(round.windowOpenAt).toLocaleString() : '\u2014'}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Closes</span>
                  <span className="font-medium">
                    {round.windowCloseAt ? new Date(round.windowCloseAt).toLocaleString() : '\u2014'}
                  </span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-sm">Project Breakdown</CardTitle>
              </CardHeader>
              <CardContent>
                {projectCount === 0 ? (
                  <p className="text-sm text-muted-foreground py-4 text-center">
                    No projects assigned yet
                  </p>
                ) : (
                  <div className="space-y-2">
                    {['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">
                            <span className="text-muted-foreground capitalize">{state.toLowerCase().replace('_', ' ')}</span>
                            <span className="font-medium">{count} ({pct}%)</span>
                          </div>
                          <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                            <div
                              className={cn('h-full rounded-full transition-all', stateColors[state])}
                              style={{ width: `${pct}%` }}
                            />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )}
              </CardContent>
            </Card>
          </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>
        )}

        {/* ═══════════ ASSIGNMENTS TAB (Evaluation rounds) ═══════════ */}
        {isEvaluation && (
          <TabsContent value="assignments" className="space-y-6">
            {/* Coverage Report */}
            <CoverageReport roundId={roundId} />

            {/* Generate Assignments */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">Assignment Generation</CardTitle>
                    <CardDescription>
                      AI-suggested jury-to-project assignments based on expertise and workload
                    </CardDescription>
                  </div>
                  <Button
                    size="sm"
                    onClick={() => setPreviewSheetOpen(true)}
                    disabled={projectCount === 0 || !juryGroup}
                  >
                    <Zap className="h-4 w-4 mr-1.5" />
                    Generate Assignments
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                {!juryGroup && (
                  <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" />
                    Assign a jury group first before generating assignments.
                  </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 && (
                  <p className="text-sm text-muted-foreground">
                    Click &quot;Generate Assignments&quot; to preview AI-suggested assignments.
                    You can review and execute them from the preview sheet.
                  </p>
                )}
              </CardContent>
            </Card>

            {/* Jury Progress + Score Distribution */}
            <div className="grid gap-4 lg:grid-cols-2">
              <JuryProgressTable roundId={roundId} />
              <ScoreDistribution roundId={roundId} />
            </div>

            {/* Actions: Send Reminders + Export */}
            <div className="flex flex-wrap items-center gap-3">
              <SendRemindersButton roundId={roundId} />
              <Button variant="outline" size="sm" onClick={() => setExportOpen(true)}>
                <Download className="h-4 w-4 mr-1.5" />
                Export Evaluations
              </Button>
            </div>

            {/* Individual Assignments Table */}
            <IndividualAssignmentsTable roundId={roundId} />

            {/* Unassigned Queue */}
            <RoundUnassignedQueue roundId={roundId} />

            {/* Assignment Preview Sheet */}
            <AssignmentPreviewSheet
              roundId={roundId}
              open={previewSheetOpen}
              onOpenChange={setPreviewSheetOpen}
            />

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

        {/* ═══════════ CONFIG TAB ═══════════ */}
        <TabsContent value="config" className="space-y-6">
          {/* General Round Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">General Settings</CardTitle>
              <CardDescription>Settings that apply to this round regardless of type</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <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>
            </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 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Document Requirements</CardTitle>
              <CardDescription>
                Files applicants must submit for this round
                {round.windowCloseAt && (
                  <> &mdash; due by {new Date(round.windowCloseAt).toLocaleDateString()}</>
                )}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <FileRequirementsEditor
                roundId={roundId}
                windowOpenAt={round.windowOpenAt}
                windowCloseAt={round.windowCloseAt}
              />
            </CardContent>
          </Card>
        </TabsContent>

        {/* ═══════════ SUBMISSION WINDOWS TAB ═══════════ */}
        <TabsContent value="windows" className="space-y-4">
          <SubmissionWindowManager competitionId={competitionId} roundId={roundId} />
        </TabsContent>

        {/* ═══════════ AWARDS TAB ═══════════ */}
        <TabsContent value="awards" className="space-y-4">
          <Card>
            <CardContent className="p-6">
              {roundAwards.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  <Trophy className="h-8 w-8 mx-auto mb-2 opacity-40" />
                  <p className="text-sm">No awards linked to this round</p>
                  <p className="text-xs mt-1">
                    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
                    const autoTagRules = award.autoTagRulesJson as { rules?: unknown[] } | null
                    const ruleCount = autoTagRules?.rules?.length || 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 p-4 transition-all hover:bg-muted/50 hover:shadow-sm">
                          <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">{ruleCount}</div>
                              <div className="text-xs">{ruleCount === 1 ? 'rule' : 'rules'}</div>
                            </div>
                            <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>
    </div>
  )
}

// ═══════════════════════════════════════════════════════════════════════════
// Sub-components
// ═══════════════════════════════════════════════════════════════════════════

// ── Unassigned projects queue ────────────────────────────────────────────

function RoundUnassignedQueue({ roundId }: { roundId: string }) {
  const { data: unassigned, isLoading } = trpc.roundAssignment.unassignedQueue.useQuery(
    { roundId, requiredReviews: 3 },
  )

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Unassigned Projects</CardTitle>
        <CardDescription>Projects with fewer than 3 jury assignments</CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-2">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
          </div>
        ) : unassigned && unassigned.length > 0 ? (
          <div className="space-y-2 max-h-[400px] overflow-y-auto">
            {unassigned.map((project: any) => (
              <div
                key={project.id}
                className="flex justify-between items-center p-3 border rounded-md hover:bg-muted/30"
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium truncate">{project.title}</p>
                  <p className="text-xs text-muted-foreground">
                    {project.competitionCategory || 'No category'}
                    {project.teamName && ` \u00b7 ${project.teamName}`}
                  </p>
                </div>
                <Badge variant="outline" className={cn(
                  'text-xs shrink-0 ml-3',
                  (project.assignmentCount || 0) === 0
                    ? 'bg-red-50 text-red-700 border-red-200'
                    : 'bg-amber-50 text-amber-700 border-amber-200',
                )}>
                  {project.assignmentCount || 0} / 3
                </Badge>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-muted-foreground text-center py-6">
            All projects have sufficient assignments
          </p>
        )}
      </CardContent>
    </Card>
  )
}

// ── Jury Progress Table ──────────────────────────────────────────────────

function JuryProgressTable({ roundId }: { roundId: string }) {
  const { data: workload, isLoading } = trpc.analytics.getJurorWorkload.useQuery({ roundId })

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

              return (
                <div key={juror.id} className="space-y-1">
                  <div className="flex justify-between text-xs">
                    <span className="font-medium truncate max-w-[60%]">{juror.name}</span>
                    <span className="text-muted-foreground shrink-0">
                      {juror.completed}/{juror.assigned} ({pct}%)
                    </span>
                  </div>
                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                    <div
                      className={cn('h-full rounded-full transition-all', barColor)}
                      style={{ width: `${pct}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// ── Score Distribution ───────────────────────────────────────────────────

function ScoreDistribution({ roundId }: { roundId: string }) {
  const { data: dist, isLoading } = trpc.analytics.getRoundScoreDistribution.useQuery({ roundId })

  const maxCount = useMemo(() =>
    dist ? Math.max(...dist.globalDistribution.map((b) => b.count), 1) : 1,
  [dist])

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Score Distribution</CardTitle>
        <CardDescription>
          {dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex items-end gap-1 h-32">
            {Array.from({ length: 10 }).map((_, i) => <Skeleton key={i} className="flex-1 h-full" />)}
          </div>
        ) : !dist || dist.totalEvaluations === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-6">
            No evaluations submitted yet
          </p>
        ) : (
          <div className="flex items-end gap-1 h-32">
            {dist.globalDistribution.map((bucket) => {
              const heightPct = (bucket.count / maxCount) * 100
              return (
                <div key={bucket.score} className="flex-1 flex flex-col items-center gap-1">
                  <span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
                  <div className="w-full relative rounded-t" style={{ height: `${Math.max(heightPct, 2)}%` }}>
                    <div className={cn(
                      'absolute inset-0 rounded-t transition-all',
                      bucket.score <= 3 ? 'bg-red-400' :
                      bucket.score <= 6 ? 'bg-amber-400' :
                      'bg-emerald-400',
                    )} />
                  </div>
                  <span className="text-[10px] text-muted-foreground">{bucket.score}</span>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// ── Send Reminders Button ────────────────────────────────────────────────

function SendRemindersButton({ roundId }: { roundId: string }) {
  const [open, setOpen] = useState(false)
  const mutation = trpc.evaluation.triggerReminders.useMutation({
    onSuccess: (data) => {
      toast.success(`Sent ${data.sent} reminder(s)`)
      setOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
        <Send className="h-4 w-4 mr-1.5" />
        Send Reminders
      </Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Send evaluation reminders?</AlertDialogTitle>
            <AlertDialogDescription>
              This will send reminder emails to all jurors who have incomplete evaluations for this round.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => mutation.mutate({ roundId })}
              disabled={mutation.isPending}
            >
              {mutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
              Send Reminders
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

// ── Export Evaluations Dialog ─────────────────────────────────────────────

function ExportEvaluationsDialog({
  roundId,
  open,
  onOpenChange,
}: {
  roundId: string
  open: boolean
  onOpenChange: (open: boolean) => void
}) {
  const [exportData, setExportData] = useState<any>(undefined)
  const [isLoadingExport, setIsLoadingExport] = useState(false)
  const utils = trpc.useUtils()

  const handleRequestData = async () => {
    setIsLoadingExport(true)
    try {
      const data = await utils.export.evaluations.fetch({ roundId, includeDetails: true })
      setExportData(data)
      return data
    } finally {
      setIsLoadingExport(false)
    }
  }

  return (
    <CsvExportDialog
      open={open}
      onOpenChange={onOpenChange}
      exportData={exportData}
      isLoading={isLoadingExport}
      filename={`evaluations-${roundId}`}
      onRequestData={handleRequestData}
    />
  )
}

// ── Individual Assignments Table ─────────────────────────────────────────

function IndividualAssignmentsTable({ roundId }: { roundId: string }) {
  const [addDialogOpen, setAddDialogOpen] = useState(false)
  const [newUserId, setNewUserId] = useState('')
  const [newProjectId, setNewProjectId] = useState('')

  const utils = trpc.useUtils()
  const { data: assignments, isLoading } = trpc.assignment.listByStage.useQuery({ roundId })

  const deleteMutation = trpc.assignment.delete.useMutation({
    onSuccess: () => {
      utils.assignment.listByStage.invalidate({ roundId })
      toast.success('Assignment removed')
    },
    onError: (err) => toast.error(err.message),
  })

  const createMutation = trpc.assignment.create.useMutation({
    onSuccess: () => {
      utils.assignment.listByStage.invalidate({ roundId })
      toast.success('Assignment created')
      setAddDialogOpen(false)
      setNewUserId('')
      setNewProjectId('')
    },
    onError: (err) => toast.error(err.message),
  })

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-base">All Assignments</CardTitle>
            <CardDescription>
              {assignments?.length ?? 0} individual jury-project assignments
            </CardDescription>
          </div>
          <Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
            <Plus className="h-4 w-4 mr-1.5" />
            Add
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-2">
            {[1, 2, 3, 4, 5].map((i) => <Skeleton key={i} className="h-12 w-full" />)}
          </div>
        ) : !assignments || assignments.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-6">
            No assignments yet. Generate assignments or add one manually.
          </p>
        ) : (
          <div className="space-y-1 max-h-[500px] overflow-y-auto">
            <div className="grid grid-cols-[1fr_1fr_100px_60px] gap-2 text-xs text-muted-foreground font-medium px-3 py-2 sticky top-0 bg-background border-b">
              <span>Juror</span>
              <span>Project</span>
              <span>Status</span>
              <span />
            </div>
            {assignments.map((a: any) => (
              <div
                key={a.id}
                className="grid grid-cols-[1fr_1fr_100px_60px] gap-2 items-center px-3 py-2 rounded-md hover:bg-muted/30 text-sm"
              >
                <span className="truncate">{a.user?.name || a.user?.email || 'Unknown'}</span>
                <span className="truncate text-muted-foreground">{a.project?.title || 'Unknown'}</span>
                <Badge
                  variant="outline"
                  className={cn(
                    'text-[10px] justify-center',
                    a.evaluation?.status === 'SUBMITTED'
                      ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                      : a.evaluation?.status === 'IN_PROGRESS'
                        ? 'bg-blue-50 text-blue-700 border-blue-200'
                        : 'bg-gray-50 text-gray-600 border-gray-200',
                  )}
                >
                  {a.evaluation?.status || 'PENDING'}
                </Badge>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7"
                  onClick={() => deleteMutation.mutate({ id: a.id })}
                  disabled={deleteMutation.isPending}
                >
                  <Trash2 className="h-3.5 w-3.5 text-muted-foreground hover:text-red-500" />
                </Button>
              </div>
            ))}
          </div>
        )}
      </CardContent>

      {/* Add Assignment Dialog */}
      <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Assignment</DialogTitle>
            <DialogDescription>
              Manually assign a juror to evaluate a project
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label className="text-sm">Juror User ID</Label>
              <Input
                placeholder="Enter jury member user ID..."
                value={newUserId}
                onChange={(e) => setNewUserId(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label className="text-sm">Project ID</Label>
              <Input
                placeholder="Enter project ID..."
                value={newProjectId}
                onChange={(e) => setNewProjectId(e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAddDialogOpen(false)}>Cancel</Button>
            <Button
              onClick={() => createMutation.mutate({
                userId: newUserId,
                projectId: newProjectId,
                roundId,
              })}
              disabled={!newUserId || !newProjectId || createMutation.isPending}
            >
              {createMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
              Create Assignment
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}

// ── Evaluation Criteria Editor ───────────────────────────────────────────

function EvaluationCriteriaEditor({ roundId }: { roundId: string }) {
  const [editing, setEditing] = useState(false)
  const [criteria, setCriteria] = useState<Array<{
    id: string; label: string; description?: string; weight?: number; minScore?: number; maxScore?: number
  }>>([])

  const utils = trpc.useUtils()
  const { data: form, isLoading } = trpc.evaluation.getForm.useQuery({ roundId })

  const upsertMutation = trpc.evaluation.upsertForm.useMutation({
    onSuccess: () => {
      utils.evaluation.getForm.invalidate({ roundId })
      toast.success('Evaluation criteria saved')
      setEditing(false)
    },
    onError: (err) => toast.error(err.message),
  })

  // Sync from server
  if (form && !editing) {
    const serverCriteria = form.criteriaJson ?? []
    if (JSON.stringify(serverCriteria) !== JSON.stringify(criteria)) {
      setCriteria(serverCriteria)
    }
  }

  const handleAdd = () => {
    setCriteria([...criteria, {
      id: `c-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
      label: '',
      description: '',
      weight: 1,
      minScore: 0,
      maxScore: 10,
    }])
    setEditing(true)
  }

  const handleRemove = (id: string) => {
    setCriteria(criteria.filter((c) => c.id !== id))
  }

  const handleChange = (id: string, field: string, value: string | number) => {
    setCriteria(criteria.map((c) =>
      c.id === id ? { ...c, [field]: value } : c,
    ))
    setEditing(true)
  }

  const handleSave = () => {
    const validCriteria = criteria.filter((c) => c.label.trim())
    if (validCriteria.length === 0) {
      toast.error('Add at least one criterion')
      return
    }
    upsertMutation.mutate({ roundId, criteria: validCriteria })
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-base">Evaluation Criteria</CardTitle>
            <CardDescription>
              {form ? `Version ${form.version} \u2014 ${form.criteriaJson.length} criteria` : 'No criteria defined yet'}
            </CardDescription>
          </div>
          <div className="flex items-center gap-2">
            {editing && (
              <Button size="sm" variant="outline" onClick={() => {
                setEditing(false)
                if (form) setCriteria(form.criteriaJson)
              }}>
                Cancel
              </Button>
            )}
            {editing ? (
              <Button size="sm" onClick={handleSave} disabled={upsertMutation.isPending}>
                {upsertMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                Save Criteria
              </Button>
            ) : (
              <Button size="sm" variant="outline" onClick={handleAdd}>
                <Plus className="h-4 w-4 mr-1.5" />
                Add Criterion
              </Button>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
          </div>
        ) : criteria.length === 0 ? (
          <div className="text-center py-6 text-muted-foreground">
            <FileText className="h-8 w-8 mx-auto mb-2 opacity-40" />
            <p className="text-sm">No evaluation criteria defined</p>
            <p className="text-xs mt-1">Add criteria that jurors will use to score projects</p>
          </div>
        ) : (
          <div className="space-y-3">
            {criteria.map((c, idx) => (
              <div key={c.id} className="flex gap-3 items-start p-3 border rounded-lg bg-muted/20">
                <span className="text-xs text-muted-foreground font-mono mt-2.5 shrink-0 w-5 text-center">
                  {idx + 1}
                </span>
                <div className="flex-1 space-y-2">
                  <Input
                    placeholder="Criterion label (e.g., Innovation)"
                    value={c.label}
                    onChange={(e) => handleChange(c.id, 'label', e.target.value)}
                    className="h-8 text-sm"
                  />
                  <Input
                    placeholder="Description (optional)"
                    value={c.description || ''}
                    onChange={(e) => handleChange(c.id, 'description', e.target.value)}
                    className="h-7 text-xs"
                  />
                  <div className="flex gap-2">
                    <div className="flex-1">
                      <Label className="text-[10px] text-muted-foreground">Weight</Label>
                      <Input
                        type="number"
                        min={0}
                        max={100}
                        value={c.weight ?? 1}
                        onChange={(e) => handleChange(c.id, 'weight', Number(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                    <div className="flex-1">
                      <Label className="text-[10px] text-muted-foreground">Min Score</Label>
                      <Input
                        type="number"
                        min={0}
                        value={c.minScore ?? 0}
                        onChange={(e) => handleChange(c.id, 'minScore', Number(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                    <div className="flex-1">
                      <Label className="text-[10px] text-muted-foreground">Max Score</Label>
                      <Input
                        type="number"
                        min={1}
                        value={c.maxScore ?? 10}
                        onChange={(e) => handleChange(c.id, 'maxScore', Number(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 mt-1 shrink-0"
                  onClick={() => { handleRemove(c.id); setEditing(true) }}
                >
                  <X className="h-3.5 w-3.5 text-muted-foreground hover:text-red-500" />
                </Button>
              </div>
            ))}
            {!editing && (
              <Button variant="outline" size="sm" className="w-full" onClick={handleAdd}>
                <Plus className="h-4 w-4 mr-1.5" />
                Add Criterion
              </Button>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}