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,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { StatusTracker } from '@/components/shared/status-tracker'
import { AnimatedCard } from '@/components/shared/animated-container'
import {
  FileText,
  Calendar,
  Clock,
  AlertCircle,
  CheckCircle,
  Users,
  Crown,
  MessageSquare,
  Upload,
  ArrowRight,
} 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 { status: sessionStatus } = useSession()
  const isAuthenticated = sessionStatus === 'authenticated'

  const { data, isLoading } = trpc.applicant.getMyDashboard.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, openStages } = data
  const isDraft = !project.submittedAt
  const programYear = project.program?.year
  const programName = project.program?.name

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between flex-wrap gap-4">
        <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>

      {/* Draft warning */}
      {isDraft && (
        <Alert>
          <Clock className="h-4 w-4" />
          <AlertTitle>Draft Submission</AlertTitle>
          <AlertDescription>
            This submission has not been submitted yet. You can continue editing and submit when ready.
          </AlertDescription>
        </Alert>
      )}

      <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">
                    <Clock className="h-4 w-4 text-orange-500" />
                    Draft
                  </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-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">
                    {openStages.length > 0 ? `${openStages.length} stage(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>

              <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 || 'Not assigned'}
                  </p>
                </div>
                <ArrowRight className="h-4 w-4 text-muted-foreground" />
              </Link>
            </div>
          </AnimatedCard>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Status timeline */}
          <AnimatedCard index={2}>
          <Card>
            <CardHeader>
              <CardTitle>Status Timeline</CardTitle>
            </CardHeader>
            <CardContent>
              <StatusTracker
                timeline={timeline}
                currentStatus={currentStatus || 'SUBMITTED'}
              />
            </CardContent>
          </Card>
          </AnimatedCard>

          {/* Team overview */}
          <AnimatedCard index={3}>
          <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>

          {/* Key dates */}
          <AnimatedCard index={4}>
          <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>
              {openStages.length > 0 && openStages[0].windowCloseAt && (
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Deadline</span>
                  <span>{new Date(openStages[0].windowCloseAt).toLocaleDateString()}</span>
                </div>
              )}
            </CardContent>
          </Card>
          </AnimatedCard>
        </div>
      </div>
    </div>
  )
}