MOPC-Portal/src/components/admin/round/mentoring-projects-table.tsx

'use client'

import { useMemo, useState } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Skeleton } from '@/components/ui/skeleton'
import { Search, UserPlus, ArrowRight, Sparkles } from 'lucide-react'
import { CountryDisplay } from '@/components/shared/country-display'

type Filter = 'all' | 'unassigned' | 'assigned' | 'wants_only'

export function MentoringProjectsTable({ roundId }: { roundId: string }) {
  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState<Filter>('all')

  const { data, isLoading } = trpc.round.listMentoringProjects.useQuery(
    { roundId },
    { refetchInterval: 30_000 },
  )

  const filtered = useMemo(() => {
    if (!data) return []
    const q = search.trim().toLowerCase()
    return data.projects.filter((p) => {
      if (filter === 'unassigned' && p.mentors.length > 0) return false
      if (filter === 'assigned' && p.mentors.length === 0) return false
      if (filter === 'wants_only' && !p.wantsMentorship) return false
      if (!q) return true
      const hay = [
        p.title,
        p.teamName ?? '',
        p.country ?? '',
        ...p.mentors.map((m) => m.name ?? m.email),
      ]
        .join(' ')
        .toLowerCase()
      return hay.includes(q)
    })
  }, [data, search, filter])

  const totals = useMemo(() => {
    if (!data)
      return { total: 0, unassigned: 0, assigned: 0, wants: 0 }
    return {
      total: data.projects.length,
      unassigned: data.projects.filter((p) => p.mentors.length === 0).length,
      assigned: data.projects.filter((p) => p.mentors.length > 0).length,
      wants: data.projects.filter((p) => p.wantsMentorship).length,
    }
  }, [data])

  if (isLoading) {
    return (
      <div className="space-y-2">
        {[1, 2, 3, 4, 5].map((i) => (
          <Skeleton key={i} className="h-14 w-full" />
        ))}
      </div>
    )
  }

  if (!data || data.projects.length === 0) {
    return (
      <div className="rounded-md border bg-muted/30 px-4 py-12 text-center text-sm text-muted-foreground">
        No projects in this mentoring round yet.
      </div>
    )
  }

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

  return (
    <div className="space-y-3">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap gap-1.5">
          <Pill value="all" label="All" count={totals.total} />
          <Pill value="unassigned" label="No mentor" count={totals.unassigned} />
          <Pill value="assigned" label="Has mentor" count={totals.assigned} />
          <Pill value="wants_only" label="Wants mentorship" count={totals.wants} />
        </div>
        <div className="relative w-full sm:max-w-xs">
          <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search projects, teams, or mentors…"
            className="pl-8"
          />
        </div>
      </div>

      <div className="overflow-hidden rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Project</TableHead>
              <TableHead>Wants?</TableHead>
              <TableHead>Mentors</TableHead>
              <TableHead className="w-32 text-right">Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filtered.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={4}
                  className="py-8 text-center text-sm text-muted-foreground"
                >
                  No projects match the current filter.
                </TableCell>
              </TableRow>
            ) : (
              filtered.map((p) => (
                <TableRow key={p.id}>
                  <TableCell>
                    <div className="font-medium">{p.title}</div>
                    <div className="text-xs text-muted-foreground">
                      {p.teamName ?? '—'}
                      {p.country && (
                        <>
                          {' · '}
                          <CountryDisplay country={p.country} />
                        </>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-1">
                      {p.wantsMentorship ? (
                        <Badge variant="secondary" className="w-fit text-xs">
                          Requested
                        </Badge>
                      ) : (
                        <span className="text-xs text-muted-foreground">No</span>
                      )}
                      {p.finalistConfirmationStatus !== 'CONFIRMED' && (
                        <span
                          className="text-[10px] uppercase tracking-wide text-amber-700"
                          title="Auto-fill skips projects whose team has not confirmed attendance."
                        >
                          {p.finalistConfirmationStatus
                            ? p.finalistConfirmationStatus.toLowerCase()
                            : 'no confirmation'}
                        </span>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    {p.mentors.length === 0 ? (
                      <span className="text-xs italic text-muted-foreground">
                        Unassigned
                      </span>
                    ) : (
                      <div className="flex flex-wrap gap-1">
                        {p.mentors.map((m) => (
                          <Badge
                            key={m.assignmentId}
                            variant="outline"
                            className="gap-1 text-xs"
                            title={m.email}
                          >
                            {(m.method === 'AI_AUTO' ||
                              m.method === 'AI_SUGGESTED') && (
                              <Sparkles className="h-3 w-3 text-amber-500" />
                            )}
                            {m.name ?? m.email}
                          </Badge>
                        ))}
                      </div>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button asChild size="sm" variant="outline">
                      <Link href={`/admin/projects/${p.id}/mentor`}>
                        {p.mentors.length === 0 ? (
                          <>
                            <UserPlus className="mr-1 h-3.5 w-3.5" />
                            Assign
                          </>
                        ) : (
                          <>
                            Open
                            <ArrowRight className="ml-1 h-3.5 w-3.5" />
                          </>
                        )}
                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}