MOPC-Portal/src/app/(applicant)/applicant/page.tsx

'use client'

import { useSession } from 'next-auth/react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { StatusTracker } from '@/components/shared/status-tracker'
import { CompetitionTimelineSidebar } from '@/components/applicant/competition-timeline'
import { WithdrawButton } from '@/components/applicant/withdraw-button'
import { MentoringRequestCard } from '@/components/applicant/mentoring-request-card'
import { AnimatedCard } from '@/components/shared/animated-container'
import {
  FileText,
  Calendar,
  CheckCircle,
  Users,
  Crown,
  MessageSquare,
  Upload,
  ArrowRight,
  Star,
  AlertCircle,
} from 'lucide-react'

const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
  DRAFT: 'secondary',
  SUBMITTED: 'default',
  UNDER_REVIEW: 'default',
  ELIGIBLE: 'default',
  SEMIFINALIST: 'success',
  FINALIST: 'success',
  WINNER: 'success',
  REJECTED: 'destructive',
}

export default function ApplicantDashboardPage() {
  const { data: session, status: sessionStatus } = useSession()
  const isAuthenticated = sessionStatus === 'authenticated'

  const { data, isLoading } = trpc.applicant.getMyDashboard.useQuery(undefined, {
    enabled: isAuthenticated,
  })

  const { data: deadlines } = trpc.applicant.getUpcomingDeadlines.useQuery(undefined, {
    enabled: isAuthenticated,
  })

  const { data: docCompleteness } = trpc.applicant.getDocumentCompleteness.useQuery(undefined, {
    enabled: isAuthenticated,
  })

  const { data: evaluations } = trpc.applicant.getMyEvaluations.useQuery(undefined, {
    enabled: isAuthenticated,
  })

  if (sessionStatus === 'loading' || isLoading) {
    return (
      <div className="space-y-6">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-96" />
        </div>
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="lg:col-span-2 space-y-6">
            <Skeleton className="h-48 w-full" />
            <Skeleton className="h-32 w-full" />
          </div>
          <div className="space-y-6">
            <Skeleton className="h-64 w-full" />
            <Skeleton className="h-48 w-full" />
          </div>
        </div>
      </div>
    )
  }

  // No project yet
  if (!data?.project) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">My Project</h1>
          <p className="text-muted-foreground">
            Your applicant dashboard
          </p>
        </div>
        <AnimatedCard index={0}>
          <Card>
            <CardContent className="flex flex-col items-center justify-center py-12">
              <div className="rounded-2xl bg-muted/60 p-4 mb-4">
                <FileText className="h-8 w-8 text-muted-foreground/70" />
              </div>
              <h2 className="text-xl font-semibold mb-2">No Project Yet</h2>
              <p className="text-muted-foreground text-center max-w-md">
                You haven&apos;t submitted a project yet. Check for open application rounds
                on the MOPC website.
              </p>
            </CardContent>
          </Card>
        </AnimatedCard>
      </div>
    )
  }

  const { project, timeline, currentStatus, openRounds, hasPassedIntake } = data
  const programYear = project.program?.year
  const programName = project.program?.name
  const totalEvaluations = evaluations?.reduce((sum, r) => sum + r.evaluationCount, 0) ?? 0

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between flex-wrap gap-4">
        <div className="flex items-center gap-4">
          {/* Project logo */}
          <div className="shrink-0 h-14 w-14 rounded-xl border bg-muted/50 flex items-center justify-center overflow-hidden">
            {data.logoUrl ? (
              <img src={data.logoUrl} alt={project.title} className="h-full w-full object-cover" />
            ) : (
              <FileText className="h-7 w-7 text-muted-foreground/60" />
            )}
          </div>
          <div>
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-semibold tracking-tight">{project.title}</h1>
              {currentStatus && (
                <Badge variant={statusColors[currentStatus] || 'secondary'}>
                  {currentStatus.replace('_', ' ')}
                </Badge>
              )}
            </div>
            <p className="text-muted-foreground">
              {programYear ? `${programYear} Edition` : ''}{programName ? ` - ${programName}` : ''}
            </p>
          </div>
        </div>
        {project.isTeamLead && currentStatus !== 'REJECTED' && (currentStatus as string) !== 'WINNER' && (
          <WithdrawButton projectId={project.id} />
        )}
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Project details */}
          <AnimatedCard index={0}>
          <Card>
            <CardHeader>
              <CardTitle>Project Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {project.teamName && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Team/Organization</p>
                  <p>{project.teamName}</p>
                </div>
              )}
              {project.description && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Description</p>
                  <p className="whitespace-pre-wrap">{project.description}</p>
                </div>
              )}
              {project.tags && project.tags.length > 0 && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-2">Tags</p>
                  <div className="flex flex-wrap gap-2">
                    {project.tags.map((tag) => (
                      <Badge key={tag} variant="outline">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

              {/* Metadata */}
              {project.metadataJson && Object.keys(project.metadataJson as Record<string, unknown>).length > 0 && (
                <div className="border-t pt-4 mt-4">
                  <p className="text-sm font-medium text-muted-foreground mb-3">Additional Information</p>
                  <dl className="space-y-2">
                    {Object.entries(project.metadataJson as Record<string, unknown>).map(([key, value]) => (
                      <div key={key} className="flex justify-between">
                        <dt className="text-sm text-muted-foreground capitalize">
                          {key.replace(/_/g, ' ')}
                        </dt>
                        <dd className="text-sm font-medium">{String(value)}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              )}

              {/* Meta info row */}
              <div className="flex flex-wrap gap-4 text-sm text-muted-foreground border-t pt-4 mt-4">
                <div className="flex items-center gap-1">
                  <Calendar className="h-4 w-4" />
                  Created {new Date(project.createdAt).toLocaleDateString()}
                </div>
                {project.submittedAt && (
                  <div className="flex items-center gap-1">
                    <CheckCircle className="h-4 w-4 text-green-500" />
                    Submitted {new Date(project.submittedAt).toLocaleDateString()}
                  </div>
                )}
                <div className="flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  {project.files.length} file(s)
                </div>
              </div>
            </CardContent>
          </Card>
          </AnimatedCard>

          {/* Quick actions */}
          <AnimatedCard index={1}>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              <Link href={"/applicant/documents" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/30 hover:bg-blue-500/5">
                <div className="rounded-xl bg-blue-500/10 p-2.5 transition-colors group-hover:bg-blue-500/20">
                  <Upload className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium">Documents</p>
                  <p className="text-xs text-muted-foreground">
                    {openRounds.length > 0 ? `${openRounds.length} round(s) open` : 'View uploads'}
                  </p>
                </div>
                <ArrowRight className="h-4 w-4 text-muted-foreground" />
              </Link>

              <Link href={"/applicant/team" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-purple-500/30 hover:bg-purple-500/5">
                <div className="rounded-xl bg-purple-500/10 p-2.5 transition-colors group-hover:bg-purple-500/20">
                  <Users className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium">Team</p>
                  <p className="text-xs text-muted-foreground">
                    {project.teamMembers.length} member(s)
                  </p>
                </div>
                <ArrowRight className="h-4 w-4 text-muted-foreground" />
              </Link>

              {project.mentorAssignment && (
                <Link href={"/applicant/mentor" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-green-500/30 hover:bg-green-500/5">
                  <div className="rounded-xl bg-green-500/10 p-2.5 transition-colors group-hover:bg-green-500/20">
                    <MessageSquare className="h-5 w-5 text-green-600 dark:text-green-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium">Mentor</p>
                    <p className="text-xs text-muted-foreground">
                      {project.mentorAssignment.mentor?.name || 'Assigned'}
                    </p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
                </Link>
              )}
            </div>
          </AnimatedCard>

          {/* Document Completeness */}
          {docCompleteness && docCompleteness.length > 0 && (
            <AnimatedCard index={2}>
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    Document Progress
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {docCompleteness.map((dc) => (
                    <div key={dc.roundId}>
                      <div className="flex items-center justify-between text-sm mb-1.5">
                        <span className="font-medium">{dc.roundName}</span>
                        <span className="text-muted-foreground">
                          {dc.uploaded}/{dc.required} files
                        </span>
                      </div>
                      <div className="h-2 rounded-full bg-muted overflow-hidden">
                        <div
                          className="h-full rounded-full bg-primary transition-all"
                          style={{ width: `${dc.required > 0 ? Math.round((dc.uploaded / dc.required) * 100) : 0}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </CardContent>
              </Card>
            </AnimatedCard>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Competition timeline or status tracker */}
          <AnimatedCard index={3}>
          <Card>
            <CardHeader>
              <CardTitle>Status Timeline</CardTitle>
            </CardHeader>
            <CardContent>
              <CompetitionTimelineSidebar />
            </CardContent>
          </Card>
          </AnimatedCard>

          {/* Mentoring Request Card — show when there's an active MENTORING round */}
          {project.isTeamLead && openRounds.filter((r) => r.roundType === 'MENTORING').map((mentoringRound) => (
            <AnimatedCard key={mentoringRound.id} index={4}>
              <MentoringRequestCard
                projectId={project.id}
                roundId={mentoringRound.id}
                roundName={mentoringRound.name}
              />
            </AnimatedCard>
          ))}

          {/* Jury Feedback Card */}
          {totalEvaluations > 0 && (
            <AnimatedCard index={4}>
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center gap-2">
                      <Star className="h-5 w-5" />
                      Jury Feedback
                    </CardTitle>
                    <Button variant="ghost" size="sm" asChild>
                      <Link href={"/applicant/evaluations" as Route}>
                        View All
                      </Link>
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    {totalEvaluations} evaluation{totalEvaluations !== 1 ? 's' : ''} available from{' '}
                    {evaluations?.length ?? 0} round{(evaluations?.length ?? 0) !== 1 ? 's' : ''}.
                  </p>
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* Team overview */}
          <AnimatedCard index={5}>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="flex items-center gap-2">
                  <Users className="h-5 w-5" />
                  Team
                </CardTitle>
                <Button variant="ghost" size="sm" asChild>
                  <Link href={"/applicant/team" as Route}>
                    Manage
                  </Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              {project.teamMembers.length > 0 ? (
                project.teamMembers.slice(0, 5).map((member) => (
                  <div key={member.id} className="flex items-center gap-3">
                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
                      {member.role === 'LEAD' ? (
                        <Crown className="h-4 w-4 text-yellow-500" />
                      ) : (
                        <span className="text-xs font-medium">
                          {member.user.name?.charAt(0).toUpperCase() || '?'}
                        </span>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">
                        {member.user.name || member.user.email}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {member.role === 'LEAD' ? 'Team Lead' : member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
                      </p>
                    </div>
                  </div>
                ))
              ) : (
                <p className="text-sm text-muted-foreground text-center py-2">
                  No team members yet
                </p>
              )}
              {project.teamMembers.length > 5 && (
                <p className="text-xs text-muted-foreground text-center">
                  +{project.teamMembers.length - 5} more
                </p>
              )}
            </CardContent>
          </Card>
          </AnimatedCard>

          {/* Upcoming Deadlines */}
          {deadlines && deadlines.length > 0 && (
            <AnimatedCard index={6}>
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <AlertCircle className="h-5 w-5" />
                    Upcoming Deadlines
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {deadlines.map((dl, i) => (
                    <div key={i} className="flex items-center justify-between text-sm">
                      <span className="font-medium truncate mr-2">{dl.roundName}</span>
                      <span className="text-muted-foreground shrink-0">
                        {new Date(dl.windowCloseAt).toLocaleDateString()}
                      </span>
                    </div>
                  ))}
                </CardContent>
              </Card>
            </AnimatedCard>
          )}

          {/* Key dates */}
          <AnimatedCard index={7}>
          <Card>
            <CardHeader>
              <CardTitle>Key Dates</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Created</span>
                <span>{new Date(project.createdAt).toLocaleDateString()}</span>
              </div>
              {project.submittedAt && (
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Submitted</span>
                  <span>{new Date(project.submittedAt).toLocaleDateString()}</span>
                </div>
              )}
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Last Updated</span>
                <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
              </div>
            </CardContent>
          </Card>
          </AnimatedCard>
        </div>
      </div>
    </div>
  )
}