MOPC-Portal/src/app/(mentor)/mentor/projects/page.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 { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Users,
  ArrowRight,
  Mail,
  MapPin,
  GraduationCap,
  Waves,
  Crown,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'
import { CountryDisplay } from '@/components/shared/country-display'

// Status badge colors
const statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  SUBMITTED: 'secondary',
  ELIGIBLE: 'default',
  ASSIGNED: 'default',
  SEMIFINALIST: 'default',
  FINALIST: 'default',
  REJECTED: 'destructive',
}

function ProjectsSkeleton() {
  return (
    <div className="space-y-6">
      <div>
        <Skeleton className="h-8 w-32" />
        <Skeleton className="h-4 w-48 mt-2" />
      </div>
      <div className="grid gap-4">
        <Skeleton className="h-48" />
        <Skeleton className="h-48" />
      </div>
    </div>
  )
}

export default function MentorProjectsPage() {
  const { data: assignments, isLoading } = trpc.mentor.getMyProjects.useQuery()

  if (isLoading) {
    return <ProjectsSkeleton />
  }

  const projects = assignments || []

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">My Mentees</h1>
        <p className="text-muted-foreground">
          All projects assigned to you for mentorship
        </p>
      </div>

      {/* Projects List */}
      {projects.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
              <Users className="h-6 w-6 text-muted-foreground" />
            </div>
            <p className="mt-4 font-medium">No assigned projects yet</p>
            <p className="text-sm text-muted-foreground mt-1">
              You will see your mentee projects here once they are assigned to you.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4">
          {projects.map((assignment) => {
            const project = assignment.project
            const teamLead = project.teamMembers?.find((m) => m.role === 'LEAD')

            return (
              <Card key={assignment.id}>
                <CardHeader>
                  <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                    <div className="space-y-1">
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <span>
                          {project.program?.year} Edition
                        </span>
                        {project.program && (
                          <>
                            <span>•</span>
                            <span>{project.program.name}</span>
                          </>
                        )}
                      </div>
                      <CardTitle className="flex items-center gap-2">
                        {project.title}
                        {project.status && (
                          <Badge variant={statusColors[project.status] || 'secondary'}>
                            {project.status.replace('_', ' ')}
                          </Badge>
                        )}
                      </CardTitle>
                      {project.teamName && (
                        <CardDescription>{project.teamName}</CardDescription>
                      )}
                    </div>
                    <Button variant="outline" size="sm" asChild>
                      <Link href={`/mentor/projects/${project.id}` as Route}>
                        View Details
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Category badges */}
                  <div className="flex flex-wrap gap-2">
                    {project.competitionCategory && (
                      <Badge variant="outline" className="gap-1">
                        <GraduationCap className="h-3 w-3" />
                        {project.competitionCategory === 'STARTUP'
                          ? 'Start-up'
                          : 'Business Concept'}
                      </Badge>
                    )}
                    {project.oceanIssue && (
                      <Badge variant="outline" className="gap-1">
                        <Waves className="h-3 w-3" />
                        {project.oceanIssue.replace(/_/g, ' ')}
                      </Badge>
                    )}
                    {project.country && (
                      <Badge variant="outline" className="gap-1">
                        <MapPin className="h-3 w-3" />
                        <CountryDisplay country={project.country} />
                      </Badge>
                    )}
                  </div>

                  {/* Description preview */}
                  {project.description && (
                    <p className="text-sm text-muted-foreground line-clamp-2">
                      {project.description}
                    </p>
                  )}

                  {/* Team Lead Info */}
                  {teamLead && (
                    <div className="flex items-center gap-3 pt-2 border-t">
                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-yellow-100">
                        <Crown className="h-4 w-4 text-yellow-600" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium">
                          {teamLead.user.name || 'Unnamed'}{' '}
                          <span className="text-muted-foreground font-normal">
                            (Team Lead)
                          </span>
                        </p>
                        <a
                          href={`mailto:${teamLead.user.email}`}
                          className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1"
                        >
                          <Mail className="h-3 w-3" />
                          {teamLead.user.email}
                        </a>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {project.teamMembers?.length || 0} team member
                        {(project.teamMembers?.length || 0) !== 1 ? 's' : ''}
                      </div>
                    </div>
                  )}

                  {/* Assignment date */}
                  <p className="text-xs text-muted-foreground">
                    Assigned {formatDateOnly(assignment.assignedAt)}
                  </p>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}