'use client'

import Link from 'next/link'
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,
} 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'

type DashboardContentProps = {
  editionId: string
  sessionName: string
}

function formatAction(action: string, entityType: string | null): string {
  const entity = entityType?.toLowerCase() || 'record'
  const actionMap: Record<string, string> = {
    CREATE: `created a ${entity}`,
    UPDATE: `updated a ${entity}`,
    DELETE: `deleted a ${entity}`,
    LOGIN: 'logged in',
    EXPORT: `exported ${entity} data`,
    SUBMIT: `submitted an ${entity}`,
    ASSIGN: `assigned a ${entity}`,
    INVITE: `invited a user`,
    STATUS_CHANGE: `changed ${entity} status`,
    BULK_UPDATE: `bulk updated ${entity}s`,
    IMPORT: `imported ${entity}s`,
  }
  return actionMap[action] || `${action.toLowerCase()} ${entity}`
}

function getActionIcon(action: string) {
  switch (action) {
    case 'CREATE': return <Plus className="h-3.5 w-3.5" />
    case 'UPDATE': return <FileEdit className="h-3.5 w-3.5" />
    case 'DELETE': return <Trash2 className="h-3.5 w-3.5" />
    case 'LOGIN': return <LogIn className="h-3.5 w-3.5" />
    case 'EXPORT': return <ArrowRight className="h-3.5 w-3.5" />
    case 'SUBMIT': return <Send className="h-3.5 w-3.5" />
    case 'ASSIGN': return <Users className="h-3.5 w-3.5" />
    case 'INVITE': return <UserPlus className="h-3.5 w-3.5" />
    default: return <Eye className="h-3.5 w-3.5" />
  }
}

export function DashboardContent({ editionId, sessionName }: DashboardContentProps) {
  const { data, isLoading } = trpc.dashboard.getStats.useQuery(
    { editionId },
    { enabled: !!editionId }
  )

  if (isLoading) {
    return <DashboardSkeleton />
  }

  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

  // Compute per-round eval stats
  const roundsWithEvalStats = recentRounds.map((round) => {
    const submitted = round.assignments.filter(
      (a) => 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 }
  })

  // Upcoming deadlines from rounds
  const now = new Date()
  const deadlines: { label: string; roundName: string; date: Date }[] = []
  for (const round of recentRounds) {
    if (round.votingEndAt && new Date(round.votingEndAt) > now) {
      deadlines.push({
        label: 'Voting closes',
        roundName: round.name,
        date: new Date(round.votingEndAt),
      })
    }
    if (round.submissionEndDate && new Date(round.submissionEndDate) > now) {
      deadlines.push({
        label: 'Submissions close',
        roundName: round.name,
        date: new Date(round.submissionEndDate),
      })
    }
  }
  deadlines.sort((a, b) => a.date.getTime() - b.date.getTime())
  const upcomingDeadlines = deadlines.slice(0, 4)

  // Category/issue bars
  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)

  return (
    <>
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">
          Welcome back, {sessionName} &mdash; {edition.name} {edition.year}
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <AnimatedCard index={0}>
          <Card className="transition-all hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Rounds</CardTitle>
              <CircleDot className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalRoundCount}</div>
              <p className="text-xs text-muted-foreground">
                {activeRoundCount} active round{activeRoundCount !== 1 ? 's' : ''}
              </p>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={1}>
          <Card className="transition-all hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Projects</CardTitle>
              <ClipboardList className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{projectCount}</div>
              <p className="text-xs text-muted-foreground">
                {newProjectsThisWeek > 0
                  ? `${newProjectsThisWeek} new this week`
                  : 'In this edition'}
              </p>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={2}>
          <Card className="transition-all hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalJurors}</div>
              <p className="text-xs text-muted-foreground">
                {activeJurors} active{invitedJurors > 0 && `, ${invitedJurors} invited`}
              </p>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={3}>
          <Card className="transition-all hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
              <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {submittedCount}
                {totalAssignments > 0 && (
                  <span className="text-sm font-normal text-muted-foreground">
                    {' '}/ {totalAssignments}
                  </span>
                )}
              </div>
              <div className="mt-2">
                <Progress value={completionRate} className="h-2" />
                <p className="mt-1 text-xs text-muted-foreground">
                  {completionRate.toFixed(0)}% completion rate
                </p>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>
      </div>

      {/* Quick Actions */}
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" size="sm" asChild>
          <Link href="/admin/rounds/new">
            <Plus className="mr-1.5 h-3.5 w-3.5" />
            New Round
          </Link>
        </Button>
        <Button variant="outline" size="sm" asChild>
          <Link href="/admin/projects/new">
            <Upload className="mr-1.5 h-3.5 w-3.5" />
            Import Projects
          </Link>
        </Button>
        <Button variant="outline" size="sm" asChild>
          <Link href="/admin/members">
            <UserPlus className="mr-1.5 h-3.5 w-3.5" />
            Invite Jury
          </Link>
        </Button>
      </div>

      {/* Two-Column Content */}
      <div className="grid gap-6 lg:grid-cols-12">
        {/* Left Column */}
        <div className="space-y-6 lg:col-span-7">
          {/* Rounds Card (enhanced) */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Rounds</CardTitle>
                  <CardDescription>
                    Voting rounds in {edition.name}
                  </CardDescription>
                </div>
                <Link
                  href="/admin/rounds"
                  className="flex items-center gap-1 text-sm font-medium text-primary hover:underline"
                >
                  View all <ArrowRight className="h-3.5 w-3.5" />
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              {roundsWithEvalStats.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <CircleDot className="h-12 w-12 text-muted-foreground/50" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No rounds created yet
                  </p>
                  <Link
                    href="/admin/rounds/new"
                    className="mt-4 text-sm font-medium text-primary hover:underline"
                  >
                    Create your first round
                  </Link>
                </div>
              ) : (
                <div className="space-y-3">
                  {roundsWithEvalStats.map((round) => (
                    <Link
                      key={round.id}
                      href={`/admin/rounds/${round.id}`}
                      className="block"
                    >
                      <div className="rounded-lg border p-4 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md">
                        <div className="flex items-start justify-between gap-2">
                          <div className="space-y-1.5 flex-1 min-w-0">
                            <div className="flex items-center gap-2">
                              <p className="font-medium">{round.name}</p>
                              <StatusBadge status={round.status} />
                            </div>
                            <p className="text-sm text-muted-foreground">
                              {round._count.projects} projects &middot; {round._count.assignments} assignments
                              {round.totalEvals > 0 && (
                                <> &middot; {round.evalPercent}% evaluated</>
                              )}
                            </p>
                            {round.votingStartAt && round.votingEndAt && (
                              <p className="text-xs text-muted-foreground">
                                Voting: {formatDateOnly(round.votingStartAt)} &ndash; {formatDateOnly(round.votingEndAt)}
                              </p>
                            )}
                          </div>
                        </div>
                        {round.totalEvals > 0 && (
                          <Progress value={round.evalPercent} className="mt-3 h-1.5" />
                        )}
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Latest Projects Card */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Latest Projects</CardTitle>
                  <CardDescription>Recently submitted projects</CardDescription>
                </div>
                <Link
                  href="/admin/projects"
                  className="flex items-center gap-1 text-sm font-medium text-primary hover:underline"
                >
                  View all <ArrowRight className="h-3.5 w-3.5" />
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              {latestProjects.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <ClipboardList className="h-12 w-12 text-muted-foreground/50" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No projects submitted yet
                  </p>
                </div>
              ) : (
                <div className="space-y-1">
                  {latestProjects.map((project) => (
                    <Link
                      key={project.id}
                      href={`/admin/projects/${project.id}`}
                      className="block"
                    >
                      <div className="flex items-start gap-3 rounded-lg p-3 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-sm">
                        <ProjectLogo
                          project={project}
                          size="sm"
                          fallback="initials"
                        />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-start justify-between gap-2">
                            <p className="font-medium text-sm leading-tight truncate">
                              {truncate(project.title, 45)}
                            </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>
                          {(project.competitionCategory || project.oceanIssue) && (
                            <p className="text-xs text-muted-foreground/70 mt-0.5">
                              {[
                                project.competitionCategory
                                  ? formatEnumLabel(project.competitionCategory)
                                  : null,
                                project.oceanIssue
                                  ? formatEnumLabel(project.oceanIssue)
                                  : null,
                              ]
                                .filter(Boolean)
                                .join(' \u00b7 ')}
                            </p>
                          )}
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Right Column */}
        <div className="space-y-6 lg:col-span-5">
          {/* Pending Actions Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertTriangle className="h-4 w-4" />
                Pending Actions
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {pendingCOIs > 0 && (
                  <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
                    <div className="flex items-center gap-2">
                      <ShieldAlert className="h-4 w-4 text-amber-500" />
                      <span className="text-sm">COI declarations to review</span>
                    </div>
                    <Badge variant="warning">{pendingCOIs}</Badge>
                  </Link>
                )}
                {unassignedProjects > 0 && (
                  <Link href="/admin/projects" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
                    <div className="flex items-center gap-2">
                      <ClipboardList className="h-4 w-4 text-orange-500" />
                      <span className="text-sm">Projects without assignments</span>
                    </div>
                    <Badge variant="warning">{unassignedProjects}</Badge>
                  </Link>
                )}
                {draftRounds > 0 && (
                  <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
                    <div className="flex items-center gap-2">
                      <CircleDot className="h-4 w-4 text-blue-500" />
                      <span className="text-sm">Draft rounds to activate</span>
                    </div>
                    <Badge variant="secondary">{draftRounds}</Badge>
                  </Link>
                )}
                {pendingCOIs === 0 && unassignedProjects === 0 && draftRounds === 0 && (
                  <div className="flex flex-col items-center py-4 text-center">
                    <CheckCircle2 className="h-6 w-6 text-emerald-500" />
                    <p className="mt-1.5 text-sm text-muted-foreground">All caught up!</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Evaluation Progress Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-4 w-4" />
                Evaluation Progress
              </CardTitle>
            </CardHeader>
            <CardContent>
              {roundsWithEvalStats.filter((r) => r.status !== 'DRAFT' && r.totalEvals > 0).length === 0 ? (
                <div className="flex flex-col items-center justify-center py-6 text-center">
                  <TrendingUp className="h-8 w-8 text-muted-foreground/40" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No evaluations in progress
                  </p>
                </div>
              ) : (
                <div className="space-y-5">
                  {roundsWithEvalStats
                    .filter((r) => r.status !== 'DRAFT' && r.totalEvals > 0)
                    .map((round) => (
                      <div key={round.id} className="space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-sm font-medium truncate">{round.name}</p>
                          <span className="text-sm font-semibold tabular-nums">
                            {round.evalPercent}%
                          </span>
                        </div>
                        <Progress value={round.evalPercent} className="h-2" />
                        <p className="text-xs text-muted-foreground">
                          {round.submittedEvals} of {round.totalEvals} evaluations submitted
                        </p>
                      </div>
                    ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Category Breakdown Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Layers className="h-4 w-4" />
                Project Categories
              </CardTitle>
            </CardHeader>
            <CardContent>
              {categories.length === 0 && issues.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-6 text-center">
                  <Layers className="h-8 w-8 text-muted-foreground/40" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No category data available
                  </p>
                </div>
              ) : (
                <div className="space-y-5">
                  {categories.length > 0 && (
                    <div className="space-y-2.5">
                      <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                        By Type
                      </p>
                      {categories.map((cat) => (
                        <div key={cat.label} className="space-y-1">
                          <div className="flex items-center justify-between text-sm">
                            <span>{cat.label}</span>
                            <span className="font-medium tabular-nums">{cat.count}</span>
                          </div>
                          <div className="h-2 rounded-full bg-muted overflow-hidden">
                            <div
                              className="h-full rounded-full bg-primary transition-all"
                              style={{ width: `${(cat.count / maxCategoryCount) * 100}%` }}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                  {issues.length > 0 && (
                    <div className="space-y-2.5">
                      <p className="text-xs font-medium uppercase tracking-wider 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-sm">
                            <span className="truncate mr-2">{issue.label}</span>
                            <span className="font-medium tabular-nums">{issue.count}</span>
                          </div>
                          <div className="h-2 rounded-full bg-muted overflow-hidden">
                            <div
                              className="h-full rounded-full bg-brand-teal transition-all"
                              style={{ width: `${(issue.count / maxIssueCount) * 100}%` }}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Recent Activity Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Activity className="h-4 w-4" />
                Recent Activity
              </CardTitle>
            </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/40" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No recent activity
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {recentActivity.map((log) => (
                    <div key={log.id} className="flex items-start gap-3">
                      <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted">
                        {getActionIcon(log.action)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm">
                          <span className="font-medium">{log.user?.name || 'System'}</span>
                          {' '}{formatAction(log.action, log.entityType)}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {formatRelativeTime(log.timestamp)}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Upcoming Deadlines Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                Upcoming Deadlines
              </CardTitle>
            </CardHeader>
            <CardContent>
              {upcomingDeadlines.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-6 text-center">
                  <Calendar className="h-8 w-8 text-muted-foreground/40" />
                  <p className="mt-2 text-sm text-muted-foreground">
                    No upcoming deadlines
                  </p>
                </div>
              ) : (
                <div className="space-y-4">
                  {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-destructive/10' : 'bg-muted'}`}>
                          <Calendar className={`h-4 w-4 ${isUrgent ? 'text-destructive' : 'text-muted-foreground'}`} />
                        </div>
                        <div className="space-y-0.5">
                          <p className="text-sm font-medium">
                            {deadline.label} &mdash; {deadline.roundName}
                          </p>
                          <p className={`text-xs ${isUrgent ? 'text-destructive' : 'text-muted-foreground'}`}>
                            {formatDateOnly(deadline.date)} &middot; in {days} day{days !== 1 ? 's' : ''}
                          </p>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Geographic Distribution (full width, at the bottom) */}
      <GeographicSummaryCard programId={editionId} />
    </>
  )
}

function DashboardSkeleton() {
  return (
    <>
      {/* Header skeleton */}
      <div>
        <Skeleton className="h-8 w-40" />
        <Skeleton className="mt-2 h-4 w-64" />
      </div>

      {/* Stats grid skeleton */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <Card key={i}>
            <CardHeader className="space-y-0 pb-2">
              <Skeleton className="h-4 w-20" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16" />
              <Skeleton className="mt-2 h-3 w-24" />
            </CardContent>
          </Card>
        ))}
      </div>

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

      {/* Map skeleton */}
      <Skeleton className="h-[450px] w-full rounded-lg" />
    </>
  )
}