MOPC-Portal/src/app/(admin)/admin/dashboard-content.tsx

'use client'

import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import { Button } from '@/components/ui/button'
import {
  CircleDot,
  ClipboardList,
  Users,
  CheckCircle2,
  Calendar,
  TrendingUp,
  ArrowRight,
  Layers,
  Activity,
  AlertTriangle,
  ShieldAlert,
  Plus,
  Upload,
  UserPlus,
  FileEdit,
  LogIn,
  Send,
  Eye,
  Trash2,
  Waves,
  Clock,
  BarChart3,
  Zap,
} from 'lucide-react'
import { GeographicSummaryCard } from '@/components/charts'
import { AnimatedCard } from '@/components/shared/animated-container'
import { StatusBadge } from '@/components/shared/status-badge'
import { ProjectLogo } from '@/components/shared/project-logo'
import { getCountryName } from '@/lib/countries'
import {
  formatDateOnly,
  formatEnumLabel,
  formatRelativeTime,
  truncate,
  daysUntil,
} from '@/lib/utils'
import { motion } from 'motion/react'

type DashboardContentProps = {
  editionId: string
  sessionName: string
}

function formatEntity(entityType: string | null): string {
  if (!entityType) return 'record'
  return entityType
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/_/g, ' ')
    .toLowerCase()
}

function formatAction(action: string, entityType: string | null): string {
  const entity = formatEntity(entityType)
  const actionMap: Record<string, string> = {
    CREATE: `created a ${entity}`,
    UPDATE: `updated a ${entity}`,
    DELETE: `deleted a ${entity}`,
    IMPORT: `imported ${entity}s`,
    EXPORT: `exported ${entity} data`,
    REORDER: `reordered ${entity}s`,
    LOGIN: 'logged in',
    LOGIN_SUCCESS: 'logged in',
    LOGIN_FAILED: 'failed to log in',
    PASSWORD_SET: 'set their password',
    PASSWORD_CHANGED: 'changed their password',
    REQUEST_PASSWORD_RESET: 'requested a password reset',
    COMPLETE_ONBOARDING: 'completed onboarding',
    DELETE_OWN_ACCOUNT: 'deleted their account',
    EVALUATION_SUBMITTED: 'submitted an evaluation',
    COI_DECLARED: 'declared a conflict of interest',
    COI_REVIEWED: 'reviewed a COI declaration',
    REMINDERS_TRIGGERED: 'triggered evaluation reminders',
    DISCUSSION_COMMENT_ADDED: 'added a discussion comment',
    DISCUSSION_CLOSED: 'closed a discussion',
    ASSIGN: `assigned a ${entity}`,
    BULK_CREATE: `bulk created ${entity}s`,
    BULK_ASSIGN: 'bulk assigned users',
    BULK_DELETE: `bulk deleted ${entity}s`,
    BULK_UPDATE: `bulk updated ${entity}s`,
    BULK_UPDATE_STATUS: 'bulk updated statuses',
    APPLY_SUGGESTIONS: 'applied assignment suggestions',
    ASSIGN_PROJECTS_TO_ROUND: 'assigned projects to round',
    REMOVE_PROJECTS_FROM_ROUND: 'removed projects from round',
    ADVANCE_PROJECTS: 'advanced projects to next round',
    BULK_ASSIGN_TO_ROUND: 'bulk assigned to round',
    REORDER_ROUNDS: 'reordered rounds',
    STATUS_CHANGE: `changed ${entity} status`,
    UPDATE_STATUS: `updated ${entity} status`,
    ROLE_CHANGED: 'changed a user role',
    INVITE: 'invited a user',
    SEND_INVITATION: 'sent an invitation',
    BULK_SEND_INVITATIONS: 'sent bulk invitations',
    UPLOAD_FILE: 'uploaded a file',
    DELETE_FILE: 'deleted a file',
    REPLACE_FILE: 'replaced a file',
    FILE_DOWNLOADED: 'downloaded a file',
    EXECUTE_FILTERING: 'ran project filtering',
    FINALIZE_FILTERING: 'finalized filtering results',
    OVERRIDE: `overrode a ${entity} result`,
    BULK_OVERRIDE: 'bulk overrode filtering results',
    REINSTATE: 'reinstated a project',
    BULK_REINSTATE: 'bulk reinstated projects',
    AI_TAG: 'ran AI tagging',
    START_AI_TAG_JOB: 'started AI tagging job',
    EVALUATION_SUMMARY: 'generated an AI summary',
    AWARD_ELIGIBILITY: 'ran award eligibility check',
    PROJECT_TAGGING: 'ran project tagging',
    FILTERING: 'ran AI filtering',
    MENTOR_MATCHING: 'ran mentor matching',
    ADD_TAG: 'added a tag',
    REMOVE_TAG: 'removed a tag',
    BULK_CREATE_TAGS: 'bulk created tags',
    MENTOR_ASSIGN: 'assigned a mentor',
    MENTOR_UNASSIGN: 'unassigned a mentor',
    MENTOR_AUTO_ASSIGN: 'auto-assigned mentors',
    MENTOR_BULK_ASSIGN: 'bulk assigned mentors',
    CREATE_MENTOR_NOTE: 'created a mentor note',
    COMPLETE_MILESTONE: 'completed a milestone',
    SEND_MESSAGE: 'sent a message',
    CREATE_MESSAGE_TEMPLATE: 'created a message template',
    UPDATE_MESSAGE_TEMPLATE: 'updated a message template',
    DELETE_MESSAGE_TEMPLATE: 'deleted a message template',
    CREATE_WEBHOOK: 'created a webhook',
    UPDATE_WEBHOOK: 'updated a webhook',
    DELETE_WEBHOOK: 'deleted a webhook',
    TEST_WEBHOOK: 'tested a webhook',
    REGENERATE_WEBHOOK_SECRET: 'regenerated a webhook secret',
    UPDATE_SETTING: 'updated a setting',
    UPDATE_SETTINGS_BATCH: 'updated settings',
    UPDATE_NOTIFICATION_PREFERENCES: 'updated notification preferences',
    UPDATE_DIGEST_SETTINGS: 'updated digest settings',
    UPDATE_ANALYTICS_SETTINGS: 'updated analytics settings',
    UPDATE_AUDIT_SETTINGS: 'updated audit settings',
    UPDATE_LOCALIZATION_SETTINGS: 'updated localization settings',
    UPDATE_RETENTION_CONFIG: 'updated retention config',
    START_VOTING: 'started live voting',
    END_SESSION: 'ended a live voting session',
    UPDATE_SESSION_CONFIG: 'updated session config',
    CREATE_ROUND_TEMPLATE: 'created a round template',
    CREATE_ROUND_TEMPLATE_FROM_ROUND: 'saved round as template',
    UPDATE_ROUND_TEMPLATE: 'updated a round template',
    DELETE_ROUND_TEMPLATE: 'deleted a round template',
    UPDATE_EVALUATION_FORM: 'updated the evaluation form',
    GRANT_GRACE_PERIOD: 'granted a grace period',
    UPDATE_GRACE_PERIOD: 'updated a grace period',
    REVOKE_GRACE_PERIOD: 'revoked a grace period',
    BULK_GRANT_GRACE_PERIOD: 'bulk granted grace periods',
    SET_AWARD_WINNER: 'set an award winner',
    REPORT_GENERATED: 'generated a report',
    DRAFT_SUBMITTED: 'submitted a draft application',
    SUBMIT: `submitted a ${entity}`,
  }
  if (actionMap[action]) return actionMap[action]
  return action.toLowerCase().replace(/_/g, ' ')
}

function getActionIcon(action: string) {
  switch (action) {
    case 'CREATE':
    case 'BULK_CREATE':
      return <Plus className="h-3 w-3" />
    case 'UPDATE':
    case 'UPDATE_STATUS':
    case 'BULK_UPDATE':
    case 'BULK_UPDATE_STATUS':
    case 'STATUS_CHANGE':
    case 'ROLE_CHANGED':
      return <FileEdit className="h-3 w-3" />
    case 'DELETE':
    case 'BULK_DELETE':
      return <Trash2 className="h-3 w-3" />
    case 'LOGIN':
    case 'LOGIN_SUCCESS':
    case 'LOGIN_FAILED':
    case 'PASSWORD_SET':
    case 'PASSWORD_CHANGED':
    case 'COMPLETE_ONBOARDING':
      return <LogIn className="h-3 w-3" />
    case 'EXPORT':
    case 'REPORT_GENERATED':
      return <ArrowRight className="h-3 w-3" />
    case 'SUBMIT':
    case 'EVALUATION_SUBMITTED':
    case 'DRAFT_SUBMITTED':
      return <Send className="h-3 w-3" />
    case 'ASSIGN':
    case 'BULK_ASSIGN':
    case 'APPLY_SUGGESTIONS':
    case 'ASSIGN_PROJECTS_TO_ROUND':
    case 'MENTOR_ASSIGN':
    case 'MENTOR_BULK_ASSIGN':
      return <Users className="h-3 w-3" />
    case 'INVITE':
    case 'SEND_INVITATION':
    case 'BULK_SEND_INVITATIONS':
      return <UserPlus className="h-3 w-3" />
    case 'IMPORT':
      return <Upload className="h-3 w-3" />
    default:
      return <Eye className="h-3 w-3" />
  }
}

export function DashboardContent({ editionId, sessionName }: DashboardContentProps) {
  const { data, isLoading, error } = trpc.dashboard.getStats.useQuery(
    { editionId },
    { enabled: !!editionId, retry: 1, refetchInterval: 30_000 }
  )

  if (isLoading) {
    return <DashboardSkeleton />
  }

  if (error) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <AlertTriangle className="h-12 w-12 text-destructive/50" />
          <p className="mt-2 font-medium">Failed to load dashboard</p>
          <p className="text-sm text-muted-foreground">
            {error.message || 'An unexpected error occurred. Please try refreshing the page.'}
          </p>
        </CardContent>
      </Card>
    )
  }

  if (!data) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <CircleDot className="h-12 w-12 text-muted-foreground/50" />
          <p className="mt-2 font-medium">Edition not found</p>
          <p className="text-sm text-muted-foreground">
            The selected edition could not be found
          </p>
        </CardContent>
      </Card>
    )
  }

  const {
    edition,
    activeRoundCount,
    totalRoundCount,
    projectCount,
    newProjectsThisWeek,
    totalJurors,
    activeJurors,
    evaluationStats,
    totalAssignments,
    recentRounds,
    latestProjects,
    categoryBreakdown,
    oceanIssueBreakdown,
    recentActivity,
    pendingCOIs,
    draftRounds,
    unassignedProjects,
  } = data

  const submittedCount =
    evaluationStats.find((e) => e.status === 'SUBMITTED')?._count || 0
  const draftCount =
    evaluationStats.find((e) => e.status === 'DRAFT')?._count || 0
  const totalEvaluations = submittedCount + draftCount
  const completionRate =
    totalEvaluations > 0 ? (submittedCount / totalEvaluations) * 100 : 0

  const invitedJurors = totalJurors - activeJurors

  const roundsWithEvalStats = recentRounds.map((round: typeof recentRounds[number]) => {
    const submitted = round.assignments.filter(
      (a: { evaluation: { status: string } | null }) => a.evaluation?.status === 'SUBMITTED'
    ).length
    const total = round._count.assignments
    const percent = total > 0 ? Math.round((submitted / total) * 100) : 0
    return { ...round, submittedEvals: submitted, totalEvals: total, evalPercent: percent }
  })

  const now = new Date()
  const deadlines: { label: string; roundName: string; date: Date }[] = []
  for (const round of recentRounds) {
    if (round.windowCloseAt && new Date(round.windowCloseAt) > now) {
      deadlines.push({
        label: 'Window closes',
        roundName: round.name,
        date: new Date(round.windowCloseAt),
      })
    }
  }
  deadlines.sort((a, b) => a.date.getTime() - b.date.getTime())
  const upcomingDeadlines = deadlines.slice(0, 4)

  const categories = categoryBreakdown
    .filter((c) => c.competitionCategory !== null)
    .map((c) => ({
      label: formatEnumLabel(c.competitionCategory!),
      count: c._count,
    }))
    .sort((a, b) => b.count - a.count)

  const issues = oceanIssueBreakdown
    .filter((i) => i.oceanIssue !== null)
    .map((i) => ({
      label: formatEnumLabel(i.oceanIssue!),
      count: i._count,
    }))
    .sort((a, b) => b.count - a.count)
    .slice(0, 5)

  const maxCategoryCount = Math.max(...categories.map((c) => c.count), 1)
  const maxIssueCount = Math.max(...issues.map((i) => i.count), 1)

  const pendingTotal = pendingCOIs + unassignedProjects + draftRounds
  const summaryParts: string[] = []
  if (activeRoundCount > 0) summaryParts.push(`${activeRoundCount} round${activeRoundCount !== 1 ? 's' : ''} active`)
  if (totalAssignments - submittedCount > 0) summaryParts.push(`${totalAssignments - submittedCount} evaluations pending`)
  if (pendingTotal > 0) summaryParts.push(`${pendingTotal} action${pendingTotal !== 1 ? 's' : ''} needed`)

  return (
    <>
      {/* ── Header Banner ── */}
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: 'easeOut' }}
        className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#053d57] via-[#0a5a7c] to-[#053d57] p-6 md:p-8"
      >
        {/* Decorative background pattern */}
        <div className="pointer-events-none absolute inset-0 opacity-[0.04]">
          <div className="absolute -right-12 -top-12 h-64 w-64 rounded-full border-[40px] border-white" />
          <div className="absolute -bottom-8 -left-8 h-48 w-48 rounded-full border-[30px] border-white" />
          <div className="absolute right-1/3 top-1/2 h-32 w-32 -translate-y-1/2 rounded-full border-[20px] border-white" />
        </div>

        <div className="relative z-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 backdrop-blur-sm">
                <Waves className="h-5 w-5 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold tracking-tight text-white md:text-2xl">
                  Welcome back, {sessionName}
                </h1>
                <p className="mt-0.5 text-sm text-white/60">
                  {edition.name} {edition.year} &mdash; Command Center
                </p>
              </div>
            </div>
            {summaryParts.length > 0 && (
              <p className="mt-3 text-sm font-medium text-white/80">
                {summaryParts.join(' \u00b7 ')}
              </p>
            )}
          </div>

          <div className="flex gap-2">
            <Link href="/admin/rounds">
              <Button size="sm" className="bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 border-white/10 border">
                <CircleDot className="mr-1.5 h-3.5 w-3.5" />
                Rounds
              </Button>
            </Link>
            <Link href="/admin/projects/new">
              <Button size="sm" className="bg-brand-red text-white hover:bg-brand-red-hover">
                <Upload className="mr-1.5 h-3.5 w-3.5" />
                Import
              </Button>
            </Link>
            <Link href="/admin/members">
              <Button size="sm" className="bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 border-white/10 border">
                <UserPlus className="mr-1.5 h-3.5 w-3.5" />
                Invite
              </Button>
            </Link>
          </div>
        </div>
      </motion.div>

      {/* ── Stats Row ── */}
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
        <AnimatedCard index={0}>
          <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="min-w-0">
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Rounds</p>
                  <p className="mt-1 text-2xl font-bold tabular-nums">{totalRoundCount}</p>
                  <p className="mt-0.5 text-xs text-brand-teal">
                    {activeRoundCount} active
                  </p>
                </div>
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-teal/10">
                  <CircleDot className="h-5 w-5 text-brand-teal" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={1}>
          <Card className="border-l-4 border-l-brand-blue transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="min-w-0">
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Projects</p>
                  <p className="mt-1 text-2xl font-bold tabular-nums">{projectCount}</p>
                  <p className="mt-0.5 text-xs text-brand-blue-light">
                    {newProjectsThisWeek > 0 ? `+${newProjectsThisWeek} this week` : 'In edition'}
                  </p>
                </div>
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-blue/10">
                  <ClipboardList className="h-5 w-5 text-brand-blue" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={2}>
          <Card className="border-l-4 border-l-violet-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="min-w-0">
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Jury</p>
                  <p className="mt-1 text-2xl font-bold tabular-nums">{totalJurors}</p>
                  <p className="mt-0.5 text-xs text-violet-600">
                    {activeJurors} active{invitedJurors > 0 && `, ${invitedJurors} pending`}
                  </p>
                </div>
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-violet-500/10">
                  <Users className="h-5 w-5 text-violet-500" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={3}>
          <Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="min-w-0">
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Evaluations</p>
                  <p className="mt-1 text-2xl font-bold tabular-nums">
                    {submittedCount}
                    <span className="text-sm font-normal text-muted-foreground">/{totalAssignments}</span>
                  </p>
                  <p className="mt-0.5 text-xs text-emerald-600">
                    {completionRate.toFixed(0)}% complete
                  </p>
                </div>
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/10">
                  <CheckCircle2 className="h-5 w-5 text-emerald-500" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={4}>
          <Card className={`border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md ${pendingTotal > 0 ? 'border-l-amber-500' : 'border-l-emerald-400'}`}>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="min-w-0">
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Pending</p>
                  <p className="mt-1 text-2xl font-bold tabular-nums">{pendingTotal}</p>
                  <p className={`mt-0.5 text-xs ${pendingTotal > 0 ? 'text-amber-600' : 'text-emerald-600'}`}>
                    {pendingTotal > 0 ? 'Actions needed' : 'All clear'}
                  </p>
                </div>
                <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${pendingTotal > 0 ? 'bg-amber-500/10' : 'bg-emerald-400/10'}`}>
                  {pendingTotal > 0
                    ? <AlertTriangle className="h-5 w-5 text-amber-500" />
                    : <CheckCircle2 className="h-5 w-5 text-emerald-400" />
                  }
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>
      </div>

      {/* ── Main Two-Column Layout ── */}
      <div className="grid gap-6 lg:grid-cols-12">

        {/* Left Column (2/3) */}
        <div className="space-y-6 lg:col-span-8">

          {/* Active Rounds */}
          <AnimatedCard index={5}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-teal/10">
                      <CircleDot className="h-4 w-4 text-brand-teal" />
                    </div>
                    <div>
                      <CardTitle className="text-base">Active Rounds</CardTitle>
                      <CardDescription className="text-xs">
                        {edition.name} &mdash; {roundsWithEvalStats.length} round{roundsWithEvalStats.length !== 1 ? 's' : ''}
                      </CardDescription>
                    </div>
                  </div>
                  <Link
                    href="/admin/rounds"
                    className="flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-brand-teal hover:text-brand-teal-light transition-colors"
                  >
                    All rounds <ArrowRight className="h-3 w-3" />
                  </Link>
                </div>
              </CardHeader>
              <CardContent>
                {roundsWithEvalStats.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-10 text-center">
                    <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted">
                      <CircleDot className="h-7 w-7 text-muted-foreground/40" />
                    </div>
                    <p className="mt-3 text-sm font-medium text-muted-foreground">
                      No rounds created yet
                    </p>
                    <Link href="/admin/rounds">
                      <Button variant="outline" size="sm" className="mt-3">
                        <Plus className="mr-1.5 h-3.5 w-3.5" />
                        Create first round
                      </Button>
                    </Link>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {roundsWithEvalStats.map((round: typeof roundsWithEvalStats[number], idx: number) => (
                      <motion.div
                        key={round.id}
                        initial={{ opacity: 0, x: -8 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.3, delay: 0.1 + idx * 0.06 }}
                      >
                        <Link
                          href={`/admin/rounds/${round.id}` as Route}
                          className="block"
                        >
                          <div className="group rounded-xl border bg-card p-4 transition-all hover:border-brand-teal/30 hover:shadow-md hover:-translate-y-0.5">
                            <div className="flex items-start justify-between gap-3">
                              <div className="flex-1 min-w-0 space-y-1">
                                <div className="flex items-center gap-2">
                                  <p className="font-semibold text-sm truncate">{round.name}</p>
                                  <StatusBadge status={round.status} />
                                </div>
                                <div className="flex items-center gap-3 text-xs text-muted-foreground">
                                  <span className="flex items-center gap-1">
                                    <ClipboardList className="h-3 w-3" />
                                    {round._count.projectRoundStates} projects
                                  </span>
                                  <span className="flex items-center gap-1">
                                    <Users className="h-3 w-3" />
                                    {round._count.assignments} assignments
                                  </span>
                                  {round.windowOpenAt && round.windowCloseAt && (
                                    <span className="hidden sm:flex items-center gap-1">
                                      <Calendar className="h-3 w-3" />
                                      {formatDateOnly(round.windowOpenAt)} &ndash; {formatDateOnly(round.windowCloseAt)}
                                    </span>
                                  )}
                                </div>
                              </div>
                              {round.totalEvals > 0 && (
                                <div className="text-right shrink-0">
                                  <p className="text-lg font-bold tabular-nums text-brand-teal">
                                    {round.evalPercent}%
                                  </p>
                                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">evaluated</p>
                                </div>
                              )}
                            </div>
                            {round.totalEvals > 0 && (
                              <div className="mt-3">
                                <Progress value={round.evalPercent} className="h-1.5" gradient />
                                <p className="mt-1 text-[11px] text-muted-foreground">
                                  {round.submittedEvals} of {round.totalEvals} evaluations submitted
                                </p>
                              </div>
                            )}
                          </div>
                        </Link>
                      </motion.div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Latest Projects */}
          <AnimatedCard index={6}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-blue/10">
                      <ClipboardList className="h-4 w-4 text-brand-blue" />
                    </div>
                    <div>
                      <CardTitle className="text-base">Recent Projects</CardTitle>
                      <CardDescription className="text-xs">Latest submissions</CardDescription>
                    </div>
                  </div>
                  <Link
                    href="/admin/projects"
                    className="flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-brand-teal hover:text-brand-teal-light transition-colors"
                  >
                    All projects <ArrowRight className="h-3 w-3" />
                  </Link>
                </div>
              </CardHeader>
              <CardContent>
                {latestProjects.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-10 text-center">
                    <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted">
                      <ClipboardList className="h-7 w-7 text-muted-foreground/40" />
                    </div>
                    <p className="mt-3 text-sm font-medium text-muted-foreground">
                      No projects submitted yet
                    </p>
                  </div>
                ) : (
                  <div className="divide-y">
                    {latestProjects.map((project, idx) => (
                      <motion.div
                        key={project.id}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.25, delay: 0.15 + idx * 0.04 }}
                      >
                        <Link
                          href={`/admin/projects/${project.id}`}
                          className="block"
                        >
                          <div className="flex items-center gap-3 py-3 px-1 transition-colors hover:bg-muted/40 rounded-lg group">
                            <ProjectLogo
                              project={project}
                              size="sm"
                              fallback="initials"
                            />
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center justify-between gap-2">
                                <p className="text-sm font-medium truncate group-hover:text-brand-blue transition-colors">
                                  {truncate(project.title, 50)}
                                </p>
                                <StatusBadge
                                  status={project.status ?? 'SUBMITTED'}
                                  size="sm"
                                  className="shrink-0"
                                />
                              </div>
                              <p className="text-xs text-muted-foreground mt-0.5">
                                {[
                                  project.teamName,
                                  project.country ? getCountryName(project.country) : null,
                                  formatDateOnly(project.submittedAt || project.createdAt),
                                ]
                                  .filter(Boolean)
                                  .join(' \u00b7 ')}
                              </p>
                            </div>
                          </div>
                        </Link>
                      </motion.div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>
        </div>

        {/* Right Column (1/3) */}
        <div className="space-y-6 lg:col-span-4">

          {/* Action Required */}
          <AnimatedCard index={7}>
            <Card className={pendingTotal > 0 ? 'border-amber-200/60' : ''}>
              <CardHeader className="pb-3">
                <div className="flex items-center gap-2.5">
                  <div className={`flex h-8 w-8 items-center justify-center rounded-lg ${pendingTotal > 0 ? 'bg-amber-500/10' : 'bg-emerald-500/10'}`}>
                    {pendingTotal > 0
                      ? <Zap className="h-4 w-4 text-amber-500" />
                      : <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                    }
                  </div>
                  <CardTitle className="text-base">
                    {pendingTotal > 0 ? 'Action Required' : 'All Clear'}
                  </CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {pendingCOIs > 0 && (
                    <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border border-amber-200/50 bg-amber-50/30 p-3 transition-all hover:bg-amber-50/60 hover:border-amber-300/60">
                      <div className="flex items-center gap-2.5">
                        <ShieldAlert className="h-4 w-4 text-amber-600" />
                        <span className="text-sm font-medium">COI declarations</span>
                      </div>
                      <Badge variant="warning" className="tabular-nums">{pendingCOIs}</Badge>
                    </Link>
                  )}
                  {unassignedProjects > 0 && (
                    <Link href="/admin/projects" className="flex items-center justify-between rounded-lg border border-orange-200/50 bg-orange-50/30 p-3 transition-all hover:bg-orange-50/60 hover:border-orange-300/60">
                      <div className="flex items-center gap-2.5">
                        <ClipboardList className="h-4 w-4 text-orange-600" />
                        <span className="text-sm font-medium">Unassigned projects</span>
                      </div>
                      <Badge variant="warning" className="tabular-nums">{unassignedProjects}</Badge>
                    </Link>
                  )}
                  {draftRounds > 0 && (
                    <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border border-blue-200/50 bg-blue-50/30 p-3 transition-all hover:bg-blue-50/60 hover:border-blue-300/60">
                      <div className="flex items-center gap-2.5">
                        <CircleDot className="h-4 w-4 text-blue-600" />
                        <span className="text-sm font-medium">Draft rounds</span>
                      </div>
                      <Badge variant="secondary" className="tabular-nums">{draftRounds}</Badge>
                    </Link>
                  )}
                  {pendingTotal === 0 && (
                    <div className="flex flex-col items-center py-6 text-center">
                      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50">
                        <CheckCircle2 className="h-6 w-6 text-emerald-500" />
                      </div>
                      <p className="mt-2 text-sm font-medium text-emerald-700">All caught up!</p>
                      <p className="text-xs text-muted-foreground">No pending actions</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Evaluation Progress */}
          <AnimatedCard index={8}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10">
                    <BarChart3 className="h-4 w-4 text-emerald-500" />
                  </div>
                  <CardTitle className="text-base">Eval Progress</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                {roundsWithEvalStats.filter((s: typeof roundsWithEvalStats[number]) => s.status !== 'ROUND_DRAFT' && s.totalEvals > 0).length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-6 text-center">
                    <BarChart3 className="h-8 w-8 text-muted-foreground/30" />
                    <p className="mt-2 text-xs text-muted-foreground">
                      No evaluations yet
                    </p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {roundsWithEvalStats
                      .filter((r: typeof roundsWithEvalStats[number]) => r.status !== 'ROUND_DRAFT' && r.totalEvals > 0)
                      .map((round: typeof roundsWithEvalStats[number]) => (
                        <div key={round.id} className="space-y-1.5">
                          <div className="flex items-center justify-between">
                            <p className="text-xs font-medium truncate mr-2">{round.name}</p>
                            <span className="text-xs font-bold tabular-nums text-brand-teal">
                              {round.evalPercent}%
                            </span>
                          </div>
                          <Progress value={round.evalPercent} className="h-1.5" gradient />
                          <p className="text-[11px] text-muted-foreground">
                            {round.submittedEvals}/{round.totalEvals} submitted
                          </p>
                        </div>
                      ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>

          {/* Upcoming Deadlines */}
          {upcomingDeadlines.length > 0 && (
            <AnimatedCard index={9}>
              <Card>
                <CardHeader className="pb-3">
                  <div className="flex items-center gap-2.5">
                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-red/10">
                      <Clock className="h-4 w-4 text-brand-red" />
                    </div>
                    <CardTitle className="text-base">Deadlines</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {upcomingDeadlines.map((deadline, i) => {
                      const days = daysUntil(deadline.date)
                      const isUrgent = days <= 7
                      return (
                        <div key={i} className="flex items-start gap-3">
                          <div className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isUrgent ? 'bg-brand-red/10' : 'bg-muted'}`}>
                            <Calendar className={`h-3.5 w-3.5 ${isUrgent ? 'text-brand-red' : 'text-muted-foreground'}`} />
                          </div>
                          <div className="min-w-0 space-y-0.5">
                            <p className="text-xs font-medium truncate">
                              {deadline.roundName}
                            </p>
                            <p className={`text-[11px] ${isUrgent ? 'text-brand-red font-semibold' : 'text-muted-foreground'}`}>
                              {formatDateOnly(deadline.date)} &middot; {days}d remaining
                            </p>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* Activity Feed */}
          <AnimatedCard index={10}>
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-blue/10">
                    <Activity className="h-4 w-4 text-brand-blue" />
                  </div>
                  <CardTitle className="text-base">Activity</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                {recentActivity.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-6 text-center">
                    <Activity className="h-8 w-8 text-muted-foreground/30" />
                    <p className="mt-2 text-xs text-muted-foreground">
                      No recent activity
                    </p>
                  </div>
                ) : (
                  <div className="relative">
                    {/* Timeline line */}
                    <div className="absolute left-[13px] top-2 bottom-2 w-px bg-border" />
                    <div className="space-y-3">
                      {recentActivity.map((log, idx) => (
                        <motion.div
                          key={log.id}
                          initial={{ opacity: 0, x: 6 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.2, delay: 0.2 + idx * 0.03 }}
                          className="relative flex items-start gap-3"
                        >
                          <div className="relative z-10 flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted">
                            {getActionIcon(log.action)}
                          </div>
                          <div className="flex-1 min-w-0 pt-0.5">
                            <p className="text-xs leading-relaxed">
                              <span className="font-semibold">{log.user?.name || 'System'}</span>
                              {' '}{formatAction(log.action, log.entityType)}
                            </p>
                            <p className="text-[11px] text-muted-foreground">
                              {formatRelativeTime(log.timestamp)}
                            </p>
                          </div>
                        </motion.div>
                      ))}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>
        </div>
      </div>

      {/* ── Bottom Full Width Section ── */}
      <div className="grid gap-6 lg:grid-cols-12">
        {/* Geographic Distribution */}
        <div className="lg:col-span-8">
          <AnimatedCard index={11}>
            <GeographicSummaryCard programId={editionId} />
          </AnimatedCard>
        </div>

        {/* Category & Issue Breakdown */}
        <div className="lg:col-span-4">
          <AnimatedCard index={12}>
            <Card className="h-full">
              <CardHeader className="pb-3">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/10">
                    <Layers className="h-4 w-4 text-violet-500" />
                  </div>
                  <CardTitle className="text-base">Categories</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                {categories.length === 0 && issues.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-8 text-center">
                    <Layers className="h-8 w-8 text-muted-foreground/30" />
                    <p className="mt-2 text-xs text-muted-foreground">
                      No category data
                    </p>
                  </div>
                ) : (
                  <div className="space-y-5">
                    {categories.length > 0 && (
                      <div className="space-y-2">
                        <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                          Competition Type
                        </p>
                        {categories.map((cat) => (
                          <div key={cat.label} className="space-y-1">
                            <div className="flex items-center justify-between text-xs">
                              <span className="truncate mr-2">{cat.label}</span>
                              <span className="font-bold tabular-nums">{cat.count}</span>
                            </div>
                            <div className="h-1.5 rounded-full bg-muted overflow-hidden">
                              <motion.div
                                className="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal"
                                initial={{ width: 0 }}
                                animate={{ width: `${(cat.count / maxCategoryCount) * 100}%` }}
                                transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                    {issues.length > 0 && (
                      <div className="space-y-2">
                        <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                          Top Issues
                        </p>
                        {issues.map((issue) => (
                          <div key={issue.label} className="space-y-1">
                            <div className="flex items-center justify-between text-xs">
                              <span className="truncate mr-2">{issue.label}</span>
                              <span className="font-bold tabular-nums">{issue.count}</span>
                            </div>
                            <div className="h-1.5 rounded-full bg-muted overflow-hidden">
                              <motion.div
                                className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-teal-light"
                                initial={{ width: 0 }}
                                animate={{ width: `${(issue.count / maxIssueCount) * 100}%` }}
                                transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>
          </AnimatedCard>
        </div>
      </div>
    </>
  )
}

function DashboardSkeleton() {
  return (
    <>
      {/* Header skeleton */}
      <Skeleton className="h-32 w-full rounded-2xl" />

      {/* Stats row skeleton */}
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
        {[...Array(5)].map((_, i) => (
          <Card key={i} className="border-l-4 border-l-muted">
            <CardContent className="p-4">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="mt-2 h-8 w-12" />
              <Skeleton className="mt-1 h-3 w-20" />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Two-column content skeleton */}
      <div className="grid gap-6 lg:grid-cols-12">
        <div className="space-y-6 lg:col-span-8">
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-32" />
              <Skeleton className="h-3 w-48" />
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {[...Array(3)].map((_, i) => (
                  <Skeleton key={i} className="h-24 w-full rounded-xl" />
                ))}
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-40" />
              <Skeleton className="h-3 w-32" />
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {[...Array(5)].map((_, i) => (
                  <Skeleton key={i} className="h-14 w-full" />
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="space-y-6 lg:col-span-4">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardHeader><Skeleton className="h-5 w-32" /></CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {[...Array(3)].map((_, j) => (
                    <Skeleton key={j} className="h-10 w-full" />
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Bottom skeleton */}
      <div className="grid gap-6 lg:grid-cols-12">
        <Skeleton className="h-[400px] w-full rounded-lg lg:col-span-8" />
        <Skeleton className="h-[400px] w-full rounded-lg lg:col-span-4" />
      </div>
    </>
  )
}