'use client'

import { useState, useMemo } from 'react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { toast } from 'sonner'
import { cn } from '@/lib/utils'
import {
  Plus,
  Calendar,
  Settings,
  Users,
  FileBox,
  Save,
  Loader2,
  Trophy,
  ArrowRight,
} from 'lucide-react'
import { useEdition } from '@/contexts/edition-context'
import {
  roundTypeConfig,
  roundStatusConfig,
  awardStatusConfig,
  ROUND_TYPE_OPTIONS,
} from '@/lib/round-config'

// ─── Constants (derived from shared config) ──────────────────────────────────

const ROUND_TYPES = ROUND_TYPE_OPTIONS

const ROUND_TYPE_COLORS: Record<string, { dot: string; bg: string; text: string; border: string }> = Object.fromEntries(
  Object.entries(roundTypeConfig).map(([k, v]) => [k, { dot: v.dotColor, bg: v.cardBg, text: v.cardText, border: v.cardBorder }])
)

const ROUND_STATUS_STYLES: Record<string, { color: string; label: string; pulse?: boolean }> = Object.fromEntries(
  Object.entries(roundStatusConfig).map(([k, v]) => [k, { color: v.dotColor, label: v.label, pulse: v.pulse }])
)

const AWARD_STATUS_COLORS: Record<string, string> = Object.fromEntries(
  Object.entries(awardStatusConfig).map(([k, v]) => [k, v.color])
)

// ─── Types ───────────────────────────────────────────────────────────────────

type RoundWithStats = {
  id: string
  name: string
  slug: string
  roundType: string
  status: string
  sortOrder: number
  windowOpenAt: string | null
  windowCloseAt: string | null
  specialAwardId: string | null
  juryGroup: { id: string; name: string } | null
  _count: { projectRoundStates: number; assignments: number }
}

type SpecialAwardItem = {
  id: string
  name: string
  status: string
  evaluationRoundId: string | null
  eligibilityMode: string
  _count: { eligibilities: number; jurors: number; votes: number }
  winnerProject: { id: string; title: string; teamName: string | null } | null
}

// ─── Main Page ───────────────────────────────────────────────────────────────

export default function RoundsPage() {
  const { currentEdition } = useEdition()
  const programId = currentEdition?.id
  const utils = trpc.useUtils()

  const [addRoundOpen, setAddRoundOpen] = useState(false)
  const [roundForm, setRoundForm] = useState({ name: '', roundType: '', competitionId: '' })
  const [settingsOpen, setSettingsOpen] = useState(false)
  const [competitionEdits, setCompetitionEdits] = useState<Record<string, unknown>>({})
  const [editingCompId, setEditingCompId] = useState<string | null>(null)
  const [filterType, setFilterType] = useState<string>('all')
  const [selectedCompId, setSelectedCompId] = useState<string | null>(null)

  const { data: competitions, isLoading } = trpc.competition.list.useQuery(
    { programId: programId! },
    { enabled: !!programId, refetchInterval: 30_000 }
  )

  // Auto-select first competition, or use the user's selection
  const comp = competitions?.find((c: any) => c.id === selectedCompId) ?? competitions?.[0]

  const { data: compDetail, isLoading: isLoadingDetail } = trpc.competition.getById.useQuery(
    { id: comp?.id! },
    { enabled: !!comp?.id, refetchInterval: 30_000 }
  )

  const { data: awards } = trpc.specialAward.list.useQuery(
    { programId: programId! },
    { enabled: !!programId }
  )

  const createRoundMutation = trpc.round.create.useMutation({
    onSuccess: () => {
      utils.competition.list.invalidate()
      utils.competition.getById.invalidate()
      toast.success('Round created')
      setAddRoundOpen(false)
      setRoundForm({ name: '', roundType: '', competitionId: '' })
    },
    onError: (err) => toast.error(err.message),
  })

  const updateCompMutation = trpc.competition.update.useMutation({
    onSuccess: () => {
      utils.competition.list.invalidate()
      utils.competition.getById.invalidate()
      toast.success('Settings saved')
      setEditingCompId(null)
      setCompetitionEdits({})
      setSettingsOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  // Split rounds into main pipeline (no specialAwardId) and award tracks
  const mainRounds = useMemo(() => {
    const all = (compDetail?.rounds ?? []) as RoundWithStats[]
    const main = all.filter((r) => !r.specialAwardId)
    return filterType === 'all' ? main : main.filter((r) => r.roundType === filterType)
  }, [compDetail?.rounds, filterType])

  // Group award-track rounds by their specialAwardId, paired with the award metadata
  const awardTrackGroups = useMemo(() => {
    const allRounds = (compDetail?.rounds ?? []) as RoundWithStats[]
    const awardRounds = allRounds.filter((r) => r.specialAwardId)
    const groups = new Map<string, { award: SpecialAwardItem; rounds: RoundWithStats[] }>()

    for (const round of awardRounds) {
      const awardId = round.specialAwardId!
      if (!groups.has(awardId)) {
        const award = ((awards ?? []) as SpecialAwardItem[]).find((a) => a.id === awardId)
        if (!award) continue
        groups.set(awardId, { award, rounds: [] })
      }
      groups.get(awardId)!.rounds.push(round)
    }
    return Array.from(groups.values())
  }, [compDetail?.rounds, awards])

  const floatingAwards = useMemo(() => {
    // Awards that have no evaluationRoundId AND no rounds linked via specialAwardId
    const awardIdsWithRounds = new Set(
      ((compDetail?.rounds ?? []) as RoundWithStats[])
        .filter((r) => r.specialAwardId)
        .map((r) => r.specialAwardId!)
    )
    return ((awards ?? []) as SpecialAwardItem[]).filter(
      (a) => !a.evaluationRoundId && !awardIdsWithRounds.has(a.id)
    )
  }, [awards, compDetail?.rounds])

  const handleCreateRound = () => {
    if (!roundForm.name.trim() || !roundForm.roundType || !comp) {
      toast.error('All fields are required')
      return
    }
    const slug = roundForm.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
    const nextOrder = (compDetail?.rounds ?? []).length
    createRoundMutation.mutate({
      competitionId: comp.id,
      name: roundForm.name.trim(),
      slug,
      roundType: roundForm.roundType as any,
      sortOrder: nextOrder,
    })
  }

  const startEditSettings = () => {
    if (!comp) return
    setEditingCompId(comp.id)
    setCompetitionEdits({
      name: comp.name,
      categoryMode: (comp as any).categoryMode,
      startupFinalistCount: (comp as any).startupFinalistCount,
      conceptFinalistCount: (comp as any).conceptFinalistCount,
      notifyOnDeadlineApproach: (comp as any).notifyOnDeadlineApproach,
    })
    setSettingsOpen(true)
  }

  const saveSettings = () => {
    if (!editingCompId) return
    updateCompMutation.mutate({ id: editingCompId, ...competitionEdits } as any)
  }

  // ─── No edition ──────────────────────────────────────────────────────────

  if (!programId) {
    return (
      <div className="space-y-6">
        <h1 className="text-xl font-bold">Rounds</h1>
        <div className="flex flex-col items-center justify-center py-16 text-center border-2 border-dashed rounded-lg">
          <Calendar className="h-10 w-10 text-muted-foreground/40 mb-3" />
          <p className="font-medium text-sm">No Edition Selected</p>
          <p className="text-xs text-muted-foreground">Select an edition from the sidebar</p>
        </div>
      </div>
    )
  }

  // ─── Loading ─────────────────────────────────────────────────────────────

  if (isLoading || isLoadingDetail) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-9 w-28" />
        </div>
        <Skeleton className="h-10 w-full" />
        <div className="space-y-1">
          {[1, 2, 3, 4, 5].map((i) => (
            <Skeleton key={i} className="h-14 w-full" />
          ))}
        </div>
      </div>
    )
  }

  // ─── No competition ──────────────────────────────────────────────────────

  if (!comp) {
    return (
      <div className="space-y-6">
        <h1 className="text-2xl font-bold tracking-tight text-[#053d57]">Competition Pipeline</h1>
        <div className="flex flex-col items-center justify-center py-20 text-center border-2 border-dashed rounded-lg">
          <div className="rounded-full bg-[#053d57]/5 p-5 mb-4">
            <Trophy className="h-10 w-10 text-[#053d57]/60" />
          </div>
          <h3 className="text-lg font-semibold text-[#053d57] mb-1">No Competition Configured</h3>
          <p className="text-sm text-muted-foreground max-w-sm mb-5">
            Create a program edition to start building the evaluation pipeline.
          </p>
          <Link href={'/admin/programs' as Route}>
            <Button className="bg-[#de0f1e] hover:bg-[#de0f1e]/90">
              <Plus className="h-4 w-4 mr-2" />
              Manage Editions
            </Button>
          </Link>
        </div>
      </div>
    )
  }

  // ─── Main Render ─────────────────────────────────────────────────────────

  const activeFilter = filterType !== 'all'
  const totalProjects = (compDetail as any)?.distinctProjectCount ?? 0
  const allRounds = (compDetail?.rounds ?? []) as RoundWithStats[]
  const allMainRounds = allRounds.filter((r) => !r.specialAwardId)
  const awardRoundCount = allRounds.length - allMainRounds.length
  const totalAssignments = allRounds.reduce((s, r) => s + r._count.assignments, 0)
  const activeRound = allMainRounds.find((r) => r.status === 'ROUND_ACTIVE')

  return (
    <TooltipProvider delayDuration={200}>
      <div className="space-y-5">
        {/* Competition selector (when multiple exist) */}
        {competitions && competitions.length > 1 && (
          <Select value={comp.id} onValueChange={setSelectedCompId}>
            <SelectTrigger className="w-[280px] mb-4">
              <SelectValue placeholder="Select competition" />
            </SelectTrigger>
            <SelectContent>
              {competitions.map((c: any) => (
                <SelectItem key={c.id} value={c.id}>
                  {c.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}

        {/* ── Header Bar ──────────────────────────────────────────────── */}
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-bold tracking-tight text-[#053d57] truncate">
                {comp.name}
              </h1>
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    onClick={startEditSettings}
                    className="shrink-0 p-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-[#053d57]"
                  >
                    <Settings className="h-4 w-4" />
                  </button>
                </TooltipTrigger>
                <TooltipContent>Competition settings</TooltipContent>
              </Tooltip>
            </div>
            <div className="flex items-center gap-4 mt-1 text-sm text-muted-foreground">
              <span>{allMainRounds.length} rounds{awardRoundCount > 0 ? ` + ${awardRoundCount} award` : ''}</span>
              <span className="text-muted-foreground/30">|</span>
              <span>{totalProjects} projects</span>
              <span className="text-muted-foreground/30">|</span>
              <span>{totalAssignments} assignments</span>
              {activeRound && (
                <>
                  <span className="text-muted-foreground/30">|</span>
                  <span className="flex items-center gap-1.5 text-emerald-600 font-medium">
                    <span className="relative flex h-2 w-2">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
                      <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
                    </span>
                    {activeRound.name}
                  </span>
                </>
              )}
              {awardTrackGroups.length > 0 && (
                <>
                  <span className="text-muted-foreground/30">|</span>
                  <span className="flex items-center gap-1">
                    <Trophy className="h-3.5 w-3.5" />
                    {awardTrackGroups.length} award {awardTrackGroups.length === 1 ? 'track' : 'tracks'}
                  </span>
                </>
              )}
            </div>
          </div>
          <Button
            size="sm"
            onClick={() => setAddRoundOpen(true)}
            className="bg-[#de0f1e] hover:bg-[#de0f1e]/90 shrink-0"
          >
            <Plus className="h-3.5 w-3.5 mr-1.5" />
            Add Round
          </Button>
        </div>

        {/* ── Filter Pills ────────────────────────────────────────────── */}
        <div className="flex items-center gap-1.5 flex-wrap">
          <button
            onClick={() => setFilterType('all')}
            className={cn(
              'px-3 py-1 text-xs font-medium rounded-full border transition-colors',
              filterType === 'all'
                ? 'bg-[#053d57] text-white border-[#053d57]'
                : 'bg-white text-muted-foreground border-border hover:border-[#053d57]/30'
            )}
          >
            All
          </button>
          {ROUND_TYPES.map((rt) => {
            const colors = ROUND_TYPE_COLORS[rt.value]
            const isActive = filterType === rt.value
            return (
              <button
                key={rt.value}
                onClick={() => setFilterType(isActive ? 'all' : rt.value)}
                className={cn(
                  'px-3 py-1 text-xs font-medium rounded-full border transition-colors flex items-center gap-1.5',
                  isActive
                    ? `${colors.bg} ${colors.text} ${colors.border}`
                    : 'bg-white text-muted-foreground border-border hover:border-[#053d57]/30'
                )}
              >
                <span
                  className="h-2 w-2 rounded-full shrink-0"
                  style={{ backgroundColor: colors.dot }}
                />
                {rt.label}
              </button>
            )
          })}
        </div>

        {/* ── Pipeline View ───────────────────────────────────────────── */}
        {mainRounds.length === 0 && awardTrackGroups.length === 0 ? (
          <div className="py-16 text-center border-2 border-dashed rounded-lg">
            <FileBox className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
            <p className="text-sm text-muted-foreground">
              {activeFilter ? 'No rounds match this filter.' : 'No rounds yet. Add one to start building the pipeline.'}
            </p>
          </div>
        ) : (
          <div className="space-y-6">
            {/* ── Main Competition Pipeline ───────────────────────── */}
            {mainRounds.length > 0 && (
              <div className="relative">
                {mainRounds.map((round, index) => (
                  <RoundRow
                    key={round.id}
                    round={round}
                    isLast={index === mainRounds.length - 1}
                  />
                ))}
              </div>
            )}

            {/* ── Award Track Sections ────────────────────────────── */}
            {awardTrackGroups.map(({ award, rounds: awardRounds }) => {
              const isExclusive = award.eligibilityMode === 'SEPARATE_POOL'
              const eligible = award._count.eligibilities
              const statusColor = AWARD_STATUS_COLORS[award.status] ?? 'text-gray-500'

              return (
                <div
                  key={award.id}
                  className="rounded-lg border border-amber-200/80 bg-amber-50/30 overflow-hidden"
                >
                  {/* Award track header */}
                  <Link href={`/admin/awards/${award.id}` as Route}>
                    <div className="group flex items-center gap-3 px-4 py-3 border-b border-amber-200/60 hover:bg-amber-50/60 transition-colors cursor-pointer">
                      <div className="flex items-center justify-center h-8 w-8 rounded-full bg-amber-100 shrink-0">
                        <Trophy className="h-4 w-4 text-amber-600" />
                      </div>
                      <div className="min-w-0 flex-1">
                        <h3 className="text-sm font-semibold text-[#053d57] group-hover:text-[#de0f1e] transition-colors truncate">
                          {award.name}
                        </h3>
                        <div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
                          <span>{eligible} projects</span>
                          <span className="text-muted-foreground/30">&middot;</span>
                          <span className={cn(
                            'text-[10px] font-semibold uppercase tracking-wide px-1.5 py-px rounded',
                            isExclusive
                              ? 'bg-red-100 text-red-600'
                              : 'bg-blue-100 text-blue-600'
                          )}>
                            {isExclusive ? 'Exclusive pool' : 'Parallel'}
                          </span>
                          <span className="text-muted-foreground/30">&middot;</span>
                          <span className={statusColor}>
                            {award.status.replace('_', ' ')}
                          </span>
                        </div>
                      </div>
                      <ArrowRight className="h-4 w-4 text-muted-foreground/30 group-hover:text-[#de0f1e]/60 transition-colors shrink-0" />
                    </div>
                  </Link>

                  {/* Award track rounds */}
                  <div className="px-4 py-2">
                    {awardRounds.map((round, index) => (
                      <RoundRow
                        key={round.id}
                        round={round}
                        isLast={index === awardRounds.length - 1}
                      />
                    ))}
                  </div>
                </div>
              )
            })}

            {/* Floating awards (no linked rounds) */}
            {floatingAwards.length > 0 && (
              <div className="pt-2 border-t border-dashed">
                <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-2 pl-10">
                  Unlinked Awards
                </p>
                <div className="flex flex-wrap gap-2 pl-10">
                  {floatingAwards.map((award) => (
                    <AwardNode key={award.id} award={award} />
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {/* ── Settings Panel (Collapsible) ─────────────────────────── */}
        <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle className="text-[#053d57]">Competition Settings</DialogTitle>
              <DialogDescription>
                Configure competition parameters for {comp.name}.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5 sm:col-span-2">
                <Label className="text-xs font-medium">Competition Name</Label>
                <Input
                  value={(competitionEdits.name as string) ?? ''}
                  onChange={(e) => setCompetitionEdits({ ...competitionEdits, name: e.target.value })}
                  className="h-9"
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Category Mode</Label>
                <Input
                  value={(competitionEdits.categoryMode as string) ?? ''}
                  onChange={(e) => setCompetitionEdits({ ...competitionEdits, categoryMode: e.target.value })}
                  className="h-9"
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Startup Finalists</Label>
                <Input
                  type="number"
                  min={1}
                  className="h-9"
                  value={(competitionEdits.startupFinalistCount as number) ?? 10}
                  onChange={(e) => setCompetitionEdits({ ...competitionEdits, startupFinalistCount: parseInt(e.target.value, 10) || 10 })}
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Concept Finalists</Label>
                <Input
                  type="number"
                  min={1}
                  className="h-9"
                  value={(competitionEdits.conceptFinalistCount as number) ?? 10}
                  onChange={(e) => setCompetitionEdits({ ...competitionEdits, conceptFinalistCount: parseInt(e.target.value, 10) || 10 })}
                />
              </div>
              <div className="flex items-center gap-3 sm:col-span-2 pt-1">
                <Switch
                  checked={(competitionEdits.notifyOnDeadlineApproach as boolean) ?? false}
                  onCheckedChange={(v) => setCompetitionEdits({ ...competitionEdits, notifyOnDeadlineApproach: v })}
                />
                <Label className="text-xs font-medium">Deadline Reminders</Label>
              </div>
            </div>
            <DialogFooter className="gap-2">
              <Button variant="outline" size="sm" onClick={() => setSettingsOpen(false)}>
                Cancel
              </Button>
              <Button
                size="sm"
                onClick={saveSettings}
                disabled={updateCompMutation.isPending}
                className="bg-[#de0f1e] hover:bg-[#de0f1e]/90"
              >
                {updateCompMutation.isPending ? (
                  <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                ) : (
                  <Save className="h-3.5 w-3.5 mr-1.5" />
                )}
                Save
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* ── Add Round Dialog ─────────────────────────────────────── */}
        <Dialog open={addRoundOpen} onOpenChange={setAddRoundOpen}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Add Round</DialogTitle>
              <DialogDescription>
                Add a new round to the pipeline.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Round Name *</Label>
                <Input
                  placeholder="e.g. Initial Screening"
                  value={roundForm.name}
                  onChange={(e) => setRoundForm({ ...roundForm, name: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Round Type *</Label>
                <Select
                  value={roundForm.roundType}
                  onValueChange={(v) => setRoundForm({ ...roundForm, roundType: v })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    {ROUND_TYPES.map((rt) => {
                      const colors = ROUND_TYPE_COLORS[rt.value]
                      return (
                        <SelectItem key={rt.value} value={rt.value}>
                          <span className="flex items-center gap-2">
                            <span
                              className="h-2 w-2 rounded-full shrink-0"
                              style={{ backgroundColor: colors.dot }}
                            />
                            {rt.label}
                          </span>
                        </SelectItem>
                      )
                    })}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <DialogFooter className="gap-2">
              <Button variant="outline" size="sm" onClick={() => setAddRoundOpen(false)}>Cancel</Button>
              <Button
                size="sm"
                onClick={handleCreateRound}
                disabled={createRoundMutation.isPending}
                className="bg-[#de0f1e] hover:bg-[#de0f1e]/90"
              >
                {createRoundMutation.isPending ? 'Creating...' : 'Create Round'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </TooltipProvider>
  )
}

// ─── Round Row ───────────────────────────────────────────────────────────────

function RoundRow({ round, isLast }: { round: RoundWithStats; isLast: boolean }) {
  const typeColors = ROUND_TYPE_COLORS[round.roundType] ?? ROUND_TYPE_COLORS.INTAKE
  const statusStyle = ROUND_STATUS_STYLES[round.status] ?? ROUND_STATUS_STYLES.ROUND_DRAFT
  const projectCount = round._count.projectRoundStates
  const assignmentCount = round._count.assignments

  return (
    <div className="flex">
      {/* Left: pipeline track */}
      <div className="flex flex-col items-center shrink-0 w-10">
        {/* Spacer to vertically center dot with the round card (py-2.5 + half line height) */}
        <div className="h-[18px] shrink-0" />
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="relative z-10 flex items-center justify-center">
              <div
                className="h-3.5 w-3.5 rounded-full border-2 border-white shadow-sm"
                style={{ backgroundColor: statusStyle.color }}
              />
              {statusStyle.pulse && (
                <div
                  className="absolute h-3.5 w-3.5 rounded-full animate-ping opacity-40"
                  style={{ backgroundColor: statusStyle.color }}
                />
              )}
            </div>
          </TooltipTrigger>
          <TooltipContent side="left" className="text-xs">
            {statusStyle.label}
          </TooltipContent>
        </Tooltip>
        {!isLast && (
          <div className="w-px flex-1 min-h-[8px] bg-border" />
        )}
      </div>

      {/* Right: round content */}
      <div className="flex-1 min-w-0 pb-2">
        <Link
          href={`/admin/rounds/${round.id}` as Route}
          className="block"
        >
          <div
            className={cn(
              'group flex items-center gap-3 px-3 py-2.5 rounded-md border-l-[3px] cursor-pointer transition-all',
              'bg-white hover:bg-gray-50/80 hover:shadow-sm',
            )}
            style={{ borderLeftColor: typeColors.dot }}
          >
            <span className={cn(
              'text-[10px] font-semibold uppercase tracking-wider shrink-0 w-[88px]',
              typeColors.text
            )}>
              {round.roundType.replace('_', ' ')}
            </span>

            <span className="text-sm font-semibold text-[#053d57] truncate group-hover:text-[#de0f1e] transition-colors min-w-0 flex-1">
              {round.name}
            </span>

            <div className="hidden sm:flex items-center gap-3 text-xs text-muted-foreground shrink-0">
              {round.juryGroup && (
                <span className="flex items-center gap-1 max-w-[120px]">
                  <Users className="h-3 w-3 shrink-0" />
                  <span className="truncate">{round.juryGroup.name}</span>
                </span>
              )}
              <span className="flex items-center gap-1">
                <FileBox className="h-3 w-3 shrink-0" />
                {projectCount}
              </span>
              {assignmentCount > 0 && (
                <span className="tabular-nums">{assignmentCount} asgn</span>
              )}
              {(round.windowOpenAt || round.windowCloseAt) && (
                <span className="flex items-center gap-1 tabular-nums">
                  <Calendar className="h-3 w-3 shrink-0" />
                  {round.windowOpenAt
                    ? new Date(round.windowOpenAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })
                    : ''}
                  {round.windowOpenAt && round.windowCloseAt ? ' \u2013 ' : ''}
                  {round.windowCloseAt
                    ? new Date(round.windowCloseAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })
                    : ''}
                </span>
              )}
            </div>

            <Badge
              variant="outline"
              className="text-[10px] px-1.5 py-0 h-5 font-medium shrink-0 hidden md:inline-flex"
              style={{ color: statusStyle.color, borderColor: statusStyle.color + '40' }}
            >
              {statusStyle.label}
            </Badge>

            <ArrowRight className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-[#de0f1e]/60 transition-colors shrink-0" />
          </div>
        </Link>
      </div>
    </div>
  )
}

// ─── Award Node ──────────────────────────────────────────────────────────────

function AwardNode({ award }: { award: SpecialAwardItem }) {
  const statusColor = AWARD_STATUS_COLORS[award.status] ?? 'text-gray-500'
  const isExclusive = award.eligibilityMode === 'SEPARATE_POOL'
  const eligible = award._count.eligibilities
  const hasWinner = !!award.winnerProject

  return (
    <TooltipProvider delayDuration={150}>
      <Tooltip>
        <TooltipTrigger asChild>
          <Link href={`/admin/awards/${award.id}` as Route}>
            <div className={cn(
              'flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border text-xs cursor-pointer transition-all',
              'bg-amber-50/60 border-amber-200/80 hover:border-amber-400 hover:shadow-sm',
              hasWinner && 'bg-emerald-50/60 border-emerald-200/80 hover:border-emerald-400',
            )}>
              <Trophy className={cn('h-3 w-3 shrink-0', hasWinner ? 'text-emerald-600' : 'text-amber-500')} />
              <span className="font-medium text-[#053d57] truncate max-w-[140px]">
                {award.name}
              </span>
              {eligible > 0 && (
                <span className="text-muted-foreground tabular-nums">{eligible}</span>
              )}
              <span className={cn(
                'text-[9px] font-semibold uppercase tracking-wide px-1 py-px rounded',
                isExclusive
                  ? 'bg-red-100 text-red-600'
                  : 'bg-blue-100 text-blue-600'
              )}>
                {isExclusive ? 'Excl' : 'Par'}
              </span>
            </div>
          </Link>
        </TooltipTrigger>
        <TooltipContent className="max-w-xs text-xs">
          <p className="font-semibold">{award.name}</p>
          <p className="text-muted-foreground mt-0.5">
            {isExclusive ? 'Exclusive pool (projects leave main track)' : 'Parallel (projects stay in main track)'}
          </p>
          <p className="mt-1">
            {eligible} eligible &middot; {award._count.jurors} jurors &middot; {award._count.votes} votes
          </p>
          {hasWinner && (
            <p className="text-emerald-600 font-medium mt-1">
              Winner: {award.winnerProject!.title}
            </p>
          )}
          <p className={cn('mt-1', statusColor)}>
            Status: {award.status.replace('_', ' ')}
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
