MOPC-Portal/src/components/observer/observer-dashboard-content.tsx

'use client'

import { useState } from 'react'
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 { Input } from '@/components/ui/input'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { StatusBadge } from '@/components/shared/status-badge'
import {
  FolderKanban,
  ClipboardList,
  Users,
  CheckCircle2,
  Eye,
  BarChart3,
  Search,
  ChevronLeft,
  ChevronRight,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { AnimatedCard } from '@/components/shared/animated-container'
import { useDebouncedCallback } from 'use-debounce'

const PER_PAGE_OPTIONS = [10, 20, 50]

export function ObserverDashboardContent({ userName }: { userName?: string }) {
  const [selectedRoundId, setSelectedRoundId] = useState<string>('all')
  const [search, setSearch] = useState('')
  const [debouncedSearch, setDebouncedSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [page, setPage] = useState(1)
  const [perPage, setPerPage] = useState(20)

  const debouncedSetSearch = useDebouncedCallback((value: string) => {
    setDebouncedSearch(value)
    setPage(1)
  }, 300)

  const handleSearchChange = (value: string) => {
    setSearch(value)
    debouncedSetSearch(value)
  }

  const handleRoundChange = (value: string) => {
    setSelectedRoundId(value)
    setPage(1)
  }

  const handleStatusChange = (value: string) => {
    setStatusFilter(value)
    setPage(1)
  }

  // Fetch programs/rounds for the filter dropdown
  const { data: programs } = trpc.program.list.useQuery({})

  const rounds = programs?.flatMap((p) =>
    (p.rounds ?? []).map((r: { id: string; name: string; status: string }) => ({
      id: r.id,
      name: r.name,
      programName: `${p.year} Edition`,
      status: r.status,
    }))
  ) || []

  // Fetch dashboard stats
  const roundIdParam = selectedRoundId !== 'all' ? selectedRoundId : undefined
  const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
    { roundId: roundIdParam }
  )

  // Fetch projects
  const { data: projectsData, isLoading: projectsLoading } = trpc.analytics.getAllProjects.useQuery({
    roundId: roundIdParam,
    search: debouncedSearch || undefined,
    status: statusFilter !== 'all' ? statusFilter : undefined,
    page,
    perPage,
  })

  // Fetch recent rounds for jury completion
  const { data: recentRoundsData } = trpc.program.list.useQuery({})
  const recentRounds = recentRoundsData?.flatMap((p) =>
    (p.rounds ?? []).map((r: { id: string; name: string; status: string }) => ({
      ...r,
      programName: `${p.year} Edition`,
    }))
  )?.slice(0, 5) || []

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">
          Welcome, {userName || 'Observer'}
        </p>
      </div>

      {/* Observer Notice */}
      <div className="rounded-lg border border-blue-200 bg-blue-50/50 px-4 py-3">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-blue-100 p-2.5">
            <Eye className="h-4 w-4 text-blue-600" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <p className="font-semibold text-blue-900">Observer Mode</p>
              <Badge variant="outline" className="border-blue-300 text-blue-700 text-xs">
                Read-Only
              </Badge>
            </div>
            <p className="text-sm text-blue-700">
              You have read-only access to view platform statistics and reports.
            </p>
          </div>
        </div>
      </div>

      {/* Round Filter */}
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
        <label className="text-sm font-medium">Filter by Round:</label>
        <Select value={selectedRoundId} onValueChange={handleRoundChange}>
          <SelectTrigger className="w-full sm:w-[300px]">
            <SelectValue placeholder="All Rounds" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Rounds</SelectItem>
            {rounds.map((round) => (
              <SelectItem key={round.id} value={round.id}>
                {round.programName} - {round.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Stats Grid */}
      {statsLoading ? (
        <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>
      ) : stats ? (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <AnimatedCard index={0}>
            <Card className="border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
              <CardContent className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Programs</p>
                    <p className="text-2xl font-bold mt-1">{stats.programCount}</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      {stats.activeRoundCount} active round{stats.activeRoundCount !== 1 ? 's' : ''}
                    </p>
                  </div>
                  <div className="rounded-xl bg-blue-50 p-3">
                    <FolderKanban className="h-5 w-5 text-blue-600" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>

          <AnimatedCard index={1}>
            <Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
              <CardContent className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Projects</p>
                    <p className="text-2xl font-bold mt-1">{stats.projectCount}</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      {selectedRoundId !== 'all' ? 'In selected round' : 'Across all rounds'}
                    </p>
                  </div>
                  <div className="rounded-xl bg-emerald-50 p-3">
                    <ClipboardList className="h-5 w-5 text-emerald-600" />
                  </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-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Jury Members</p>
                    <p className="text-2xl font-bold mt-1">{stats.jurorCount}</p>
                    <p className="text-xs text-muted-foreground mt-1">Active members</p>
                  </div>
                  <div className="rounded-xl bg-violet-50 p-3">
                    <Users className="h-5 w-5 text-violet-600" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>

          <AnimatedCard index={3}>
            <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
              <CardContent className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Evaluations</p>
                    <p className="text-2xl font-bold mt-1">{stats.submittedEvaluations}</p>
                    <div className="mt-2">
                      <Progress value={stats.completionRate} className="h-2" gradient />
                      <p className="mt-1 text-xs text-muted-foreground">
                        {stats.completionRate}% completion rate
                      </p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-brand-teal/10 p-3">
                    <CheckCircle2 className="h-5 w-5 text-brand-teal" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </AnimatedCard>
        </div>
      ) : null}

      {/* Projects Table */}
      <AnimatedCard index={4}>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2.5">
            <div className="rounded-lg bg-emerald-500/10 p-1.5">
              <ClipboardList className="h-4 w-4 text-emerald-500" />
            </div>
            All Projects
          </CardTitle>
          <CardDescription>
            {projectsData ? `${projectsData.total} project${projectsData.total !== 1 ? 's' : ''} found` : 'Loading projects...'}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Search & Filter Bar */}
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Search by title or team..."
                value={search}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={handleStatusChange}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <SelectValue placeholder="All Statuses" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="SUBMITTED">Submitted</SelectItem>
                <SelectItem value="ELIGIBLE">Eligible</SelectItem>
                <SelectItem value="ASSIGNED">Assigned</SelectItem>
                <SelectItem value="SEMIFINALIST">Semi-finalist</SelectItem>
                <SelectItem value="FINALIST">Finalist</SelectItem>
                <SelectItem value="REJECTED">Rejected</SelectItem>
              </SelectContent>
            </Select>
            <Select value={String(perPage)} onValueChange={(v) => { setPerPage(Number(v)); setPage(1) }}>
              <SelectTrigger className="w-full sm:w-[100px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {PER_PAGE_OPTIONS.map((n) => (
                  <SelectItem key={n} value={String(n)}>{n} / page</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {projectsLoading ? (
            <div className="space-y-2">
              {[...Array(5)].map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          ) : projectsData && projectsData.projects.length > 0 ? (
            <>
              {/* Desktop Table */}
              <div className="hidden md:block">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Title</TableHead>
                      <TableHead>Team</TableHead>
                      <TableHead>Round</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="text-right">Avg Score</TableHead>
                      <TableHead className="text-right">Evaluations</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {projectsData.projects.map((project) => (
                      <TableRow key={project.id}>
                        <TableCell className="font-medium max-w-[250px] truncate">
                          {project.title}
                        </TableCell>
                        <TableCell className="max-w-[150px] truncate">{project.teamName || '-'}</TableCell>
                        <TableCell>
                          <Badge variant="outline" className="text-xs whitespace-nowrap">
                            {project.roundName}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <StatusBadge status={project.status} />
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {project.averageScore !== null
                            ? project.averageScore.toFixed(2)
                            : '-'}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {project.evaluationCount}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {/* Mobile Cards */}
              <div className="space-y-3 md:hidden">
                {projectsData.projects.map((project) => (
                  <Card key={project.id}>
                    <CardContent className="pt-4 space-y-2">
                      <div className="flex items-start justify-between gap-2">
                        <p className="font-medium text-sm leading-tight">{project.title}</p>
                        <StatusBadge status={project.status} />
                      </div>
                      {project.teamName && (
                        <p className="text-xs text-muted-foreground">{project.teamName}</p>
                      )}
                      <div className="flex items-center justify-between text-xs text-muted-foreground">
                        <Badge variant="outline" className="text-xs">
                          {project.roundName}
                        </Badge>
                        <div className="flex gap-3">
                          <span>Score: {project.averageScore !== null ? project.averageScore.toFixed(2) : '-'}</span>
                          <span>{project.evaluationCount} eval{project.evaluationCount !== 1 ? 's' : ''}</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {/* Pagination */}
              {projectsData.totalPages > 1 && (
                <div className="flex items-center justify-between pt-2">
                  <p className="text-sm text-muted-foreground">
                    Page {projectsData.page} of {projectsData.totalPages}
                  </p>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage((p) => Math.max(1, p - 1))}
                      disabled={page <= 1}
                    >
                      <ChevronLeft className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage((p) => Math.min(projectsData.totalPages, p + 1))}
                      disabled={page >= projectsData.totalPages}
                    >
                      <ChevronRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </>
          ) : (
            <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">
                {debouncedSearch || statusFilter !== 'all'
                  ? 'No projects match your filters'
                  : 'No projects found'}
              </p>
            </div>
          )}
        </CardContent>
      </Card>
      </AnimatedCard>

      {/* Score Distribution */}
      {stats && stats.scoreDistribution.some((b) => b.count > 0) && (
        <AnimatedCard index={5}>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2.5">
              <div className="rounded-lg bg-amber-500/10 p-1.5">
                <BarChart3 className="h-4 w-4 text-amber-500" />
              </div>
              Score Distribution
            </CardTitle>
            <CardDescription>Distribution of global scores across evaluations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {(() => {
                const maxCount = Math.max(...stats.scoreDistribution.map((b) => b.count), 1)
                const colors = ['bg-green-500', 'bg-emerald-400', 'bg-amber-400', 'bg-orange-400', 'bg-red-400']
                return stats.scoreDistribution.map((bucket, i) => (
                  <div key={bucket.label} className="flex items-center gap-3">
                    <span className="text-sm w-16 text-right tabular-nums">{bucket.label}</span>
                    <div className="flex-1 h-6 bg-muted rounded-full overflow-hidden">
                      <div
                        className={cn('h-full rounded-full transition-all', colors[i])}
                        style={{ width: `${maxCount > 0 ? (bucket.count / maxCount) * 100 : 0}%` }}
                      />
                    </div>
                    <span className="text-sm tabular-nums w-8">{bucket.count}</span>
                  </div>
                ))
              })()}
            </div>
          </CardContent>
        </Card>
        </AnimatedCard>
      )}

      {/* Recent Rounds */}
      {recentRounds.length > 0 && (
        <AnimatedCard index={6}>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2.5">
              <div className="rounded-lg bg-violet-500/10 p-1.5">
                <BarChart3 className="h-4 w-4 text-violet-500" />
              </div>
              Recent Rounds
            </CardTitle>
            <CardDescription>Overview of the latest evaluation rounds</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentRounds.map((round) => (
                <div
                  key={round.id}
                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
                >
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <p className="font-medium">{round.name}</p>
                      <Badge
                        variant={
                          round.status === 'ROUND_ACTIVE'
                            ? 'default'
                            : round.status === 'ROUND_CLOSED'
                              ? 'secondary'
                              : 'outline'
                        }
                      >
                        {round.status === 'ROUND_ACTIVE' ? 'Active' : round.status === 'ROUND_CLOSED' ? 'Closed' : round.status}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {round.programName}
                    </p>
                  </div>
                  <div className="text-right text-sm">
                    <p>Round details</p>
                    <p className="text-muted-foreground">
                      View analytics
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
        </AnimatedCard>
      )}
    </div>
  )
}