MOPC-Portal/src/app/(admin)/admin/mentors/page.tsx

'use client'

import { useMemo, useState } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { ArrowUpDown, GraduationCap, Search, Users } from 'lucide-react'
import { formatEnumLabel } from '@/lib/utils'
import { MentorDetailSheet } from '@/components/admin/mentor/mentor-detail-sheet'

type SortKey = 'name' | 'load' | 'capacity' | 'lastActivity'

function formatRelativePast(date: Date | string | null): string {
  if (!date) return '—'
  const d = typeof date === 'string' ? new Date(date) : date
  const ms = Date.now() - d.getTime()
  const days = Math.floor(ms / 86_400_000)
  const hours = Math.floor(ms / 3_600_000)
  if (days >= 1) return `${days}d ago`
  if (hours >= 1) return `${hours}h ago`
  const minutes = Math.floor(ms / 60_000)
  return `${Math.max(0, minutes)}m ago`
}

const STATUS_BADGE: Record<
  'unassigned' | 'assigned' | 'active' | 'stalled',
  { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }
> = {
  unassigned: { label: 'Unassigned', variant: 'outline' },
  assigned: { label: 'Assigned', variant: 'secondary' },
  active: { label: 'Active', variant: 'default' },
  stalled: { label: 'Stalled', variant: 'destructive' },
}

type Mentor = {
  id: string
  name: string | null
  email: string
  country: string | null
  expertiseTags: string[]
  currentAssignments: number
  completedAssignments: number
  maxAssignments: number | null
  capacityRemaining: number | null
  lastActivityAt: Date | string | null
  activeTeams: { id: string; title: string }[]
}

function MentorListPanel() {
  const [search, setSearch] = useState('')
  const [sortKey, setSortKey] = useState<SortKey>('load')
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
  const [detailMentorId, setDetailMentorId] = useState<string | null>(null)

  const { data, isLoading } = trpc.mentor.getMentorPool.useQuery({})

  const filtered = useMemo<Mentor[]>(() => {
    if (!data) return []
    const q = search.trim().toLowerCase()
    let rows: Mentor[] = data.mentors
    if (q) {
      rows = rows.filter((m) =>
        [m.name ?? '', m.email, m.country ?? '', ...m.expertiseTags]
          .join(' ')
          .toLowerCase()
          .includes(q),
      )
    }
    rows = [...rows].sort((a, b) => {
      let av: string | number = 0
      let bv: string | number = 0
      switch (sortKey) {
        case 'name':
          av = (a.name ?? '').toLowerCase()
          bv = (b.name ?? '').toLowerCase()
          break
        case 'load':
          av = a.currentAssignments
          bv = b.currentAssignments
          break
        case 'capacity':
          av = a.capacityRemaining ?? Number.MAX_SAFE_INTEGER
          bv = b.capacityRemaining ?? Number.MAX_SAFE_INTEGER
          break
        case 'lastActivity':
          av = a.lastActivityAt ? new Date(a.lastActivityAt).getTime() : 0
          bv = b.lastActivityAt ? new Date(b.lastActivityAt).getTime() : 0
          break
      }
      if (av < bv) return sortDir === 'asc' ? -1 : 1
      if (av > bv) return sortDir === 'asc' ? 1 : -1
      return 0
    })
    return rows
  }, [data, search, sortKey, sortDir])

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
    else {
      setSortKey(key)
      setSortDir(key === 'name' ? 'asc' : 'desc')
    }
  }

  const SortHeader = ({
    k,
    children,
    align = 'left',
  }: {
    k: SortKey
    children: React.ReactNode
    align?: 'left' | 'right'
  }) => (
    <button
      type="button"
      onClick={() => toggleSort(k)}
      className={`flex items-center gap-1 text-sm font-medium ${align === 'right' ? 'ml-auto' : ''}`}
    >
      {children}
      <ArrowUpDown
        className={`h-3 w-3 ${sortKey === k ? 'text-foreground' : 'text-muted-foreground/50'}`}
      />
    </button>
  )

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader className="space-y-4">
          <CardTitle className="text-base">Mentor list</CardTitle>
          <div className="relative">
            <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search by name, email, country, or expertise tag…"
              className="pl-9"
            />
          </div>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="space-y-2">
              {[1, 2, 3, 4, 5].map((i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          ) : filtered.length === 0 ? (
            <div className="text-muted-foreground py-12 text-center text-sm">
              {search ? 'No matching mentors.' : 'No mentors yet.'}
            </div>
          ) : (
            <div className="overflow-hidden rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>
                      <SortHeader k="name">Mentor</SortHeader>
                    </TableHead>
                    <TableHead>Expertise</TableHead>
                    <TableHead>Country</TableHead>
                    <TableHead className="text-right">
                      <SortHeader k="capacity" align="right">
                        Capacity
                      </SortHeader>
                    </TableHead>
                    <TableHead>
                      <SortHeader k="lastActivity">Last activity</SortHeader>
                    </TableHead>
                    <TableHead>
                      <SortHeader k="load">Teams</SortHeader>
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filtered.map((m) => (
                    <TableRow
                      key={m.id}
                      className="cursor-pointer"
                      onClick={() => setDetailMentorId(m.id)}
                    >
                      <TableCell>
                        <div className="font-medium">{m.name ?? 'Unnamed'}</div>
                        <div className="text-muted-foreground text-xs">{m.email}</div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {m.expertiseTags.slice(0, 4).map((tag) => (
                            <Badge key={tag} variant="secondary" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                          {m.expertiseTags.length > 4 && (
                            <Badge variant="outline" className="text-xs">
                              +{m.expertiseTags.length - 4}
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-sm">{m.country ?? '—'}</TableCell>
                      <TableCell className="text-right text-sm tabular-nums">
                        {m.capacityRemaining != null ? m.capacityRemaining : '∞'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {formatRelativePast(m.lastActivityAt)}
                      </TableCell>
                      <TableCell>
                        {m.activeTeams.length === 0 ? (
                          <span className="text-muted-foreground text-xs">—</span>
                        ) : (
                          <div className="flex flex-wrap gap-1">
                            {m.activeTeams.slice(0, 2).map((t) => (
                              <Badge
                                key={t.id}
                                variant="outline"
                                className="max-w-[12rem] truncate text-xs"
                                title={t.title}
                              >
                                {t.title}
                              </Badge>
                            ))}
                            {m.activeTeams.length > 2 && (
                              <Badge variant="outline" className="text-xs">
                                +{m.activeTeams.length - 2}
                              </Badge>
                            )}
                          </div>
                        )}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      <MentorDetailSheet
        mentorId={detailMentorId}
        open={!!detailMentorId}
        onOpenChange={(next) => {
          if (!next) setDetailMentorId(null)
        }}
      />
    </div>
  )
}

type StatusFilter = 'all' | 'unassigned' | 'assigned' | 'active' | 'stalled'

function MenteeActivityPanel() {
  const [search, setSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')

  const { data, isLoading } = trpc.mentor.getMenteeActivity.useQuery({})

  const filtered = useMemo(() => {
    if (!data) return []
    const q = search.trim().toLowerCase()
    return data.rows.filter((r) => {
      if (statusFilter !== 'all' && r.status !== statusFilter) return false
      if (!q) return true
      const hay = [
        r.project.title,
        r.project.country ?? '',
        r.teamLead?.name ?? '',
        r.teamLead?.email ?? '',
        r.mentor?.name ?? '',
        r.mentor?.email ?? '',
      ]
        .join(' ')
        .toLowerCase()
      return hay.includes(q)
    })
  }, [data, search, statusFilter])

  const totals = data?.totals ?? { unassigned: 0, assigned: 0, active: 0, stalled: 0 }

  const StatusPill = ({ value, label, count }: { value: StatusFilter; label: string; count: number }) => (
    <button
      type="button"
      onClick={() => setStatusFilter(value)}
      className={`rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${
        statusFilter === value
          ? 'bg-primary text-primary-foreground border-primary'
          : 'bg-background hover:bg-muted'
      }`}
    >
      {label} <span className="tabular-nums opacity-80">({count})</span>
    </button>
  )

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader className="space-y-4">
          <div className="flex items-center justify-between gap-4">
            <CardTitle className="text-base">Mentee teams</CardTitle>
            <div className="flex flex-wrap gap-1.5">
              <StatusPill
                value="all"
                label="All"
                count={
                  totals.unassigned + totals.assigned + totals.active + totals.stalled
                }
              />
              <StatusPill value="unassigned" label="Unassigned" count={totals.unassigned} />
              <StatusPill value="assigned" label="Assigned" count={totals.assigned} />
              <StatusPill value="active" label="Active" count={totals.active} />
              <StatusPill value="stalled" label="Stalled" count={totals.stalled} />
            </div>
          </div>
          <div className="relative">
            <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search by project, team lead, or mentor…"
              className="pl-9"
            />
          </div>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="space-y-2">
              {[1, 2, 3, 4, 5].map((i) => (
                <Skeleton key={i} className="h-14 w-full" />
              ))}
            </div>
          ) : filtered.length === 0 ? (
            <div className="text-muted-foreground py-12 text-center text-sm">
              {search || statusFilter !== 'all'
                ? 'No matching teams.'
                : 'No teams have requested mentorship yet.'}
            </div>
          ) : (
            <div className="overflow-hidden rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Project</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Mentor</TableHead>
                    <TableHead className="text-right">Messages</TableHead>
                    <TableHead className="text-right">Files</TableHead>
                    <TableHead>Last activity</TableHead>
                    <TableHead></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filtered.map((r) => {
                    const badge = STATUS_BADGE[r.status]
                    return (
                      <TableRow key={r.project.id}>
                        <TableCell>
                          <div className="font-medium">{r.project.title}</div>
                          <div className="text-muted-foreground text-xs">
                            {r.teamLead?.name ?? r.teamLead?.email ?? '—'}
                            {r.project.oceanIssue && (
                              <>
                                {' · '}
                                {formatEnumLabel(r.project.oceanIssue)}
                              </>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={badge.variant} className="text-xs">
                            {badge.label}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {r.mentor ? (
                            <div className="text-sm">
                              <div>{r.mentor.name ?? r.mentor.email}</div>
                              <div className="text-muted-foreground text-xs tabular-nums">
                                {r.mentor.currentLoad}
                                {r.mentor.maxAssignments != null
                                  ? `/${r.mentor.maxAssignments}`
                                  : ''}
                                {' load'}
                              </div>
                            </div>
                          ) : (
                            <span className="text-muted-foreground text-sm">—</span>
                          )}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {r.messageCount}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">{r.fileCount}</TableCell>
                        <TableCell className="text-sm">
                          {formatRelativePast(r.lastActivityAt as unknown as Date | null)}
                        </TableCell>
                        <TableCell className="text-right">
                          <Button asChild size="sm" variant="outline">
                            <Link href={`/admin/projects/${r.project.id}/mentor`}>
                              {r.mentor ? 'Open' : 'Assign'}
                            </Link>
                          </Button>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

export default function MentorsListPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Mentors</h1>
          <p className="text-muted-foreground">
            Manage the mentor pool and track mentee teams across the program.
          </p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin/members">
            <Users className="mr-2 h-4 w-4" />
            Manage Members
          </Link>
        </Button>
      </div>

      <Tabs defaultValue="mentors" className="space-y-6">
        <TabsList>
          <TabsTrigger value="mentors">
            <GraduationCap className="mr-2 h-4 w-4" /> Mentors
          </TabsTrigger>
          <TabsTrigger value="mentees">
            <Users className="mr-2 h-4 w-4" /> Mentees & Activity
          </TabsTrigger>
        </TabsList>
        <TabsContent value="mentors">
          <MentorListPanel />
        </TabsContent>
        <TabsContent value="mentees">
          <MenteeActivityPanel />
        </TabsContent>
      </Tabs>
    </div>
  )
}