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

'use client'

import { useSession } from 'next-auth/react'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { RequirementUploadList } from '@/components/shared/requirement-upload-slot'
import {
  FileText,
  Upload,
  AlertTriangle,
  Clock,
  Video,
  File,
  Download,
} from 'lucide-react'

const fileTypeIcons: Record<string, typeof FileText> = {
  EXEC_SUMMARY: FileText,
  BUSINESS_PLAN: FileText,
  PRESENTATION: FileText,
  VIDEO_PITCH: Video,
  VIDEO: Video,
  OTHER: File,
  SUPPORTING_DOC: File,
}

const fileTypeLabels: Record<string, string> = {
  EXEC_SUMMARY: 'Executive Summary',
  BUSINESS_PLAN: 'Business Plan',
  PRESENTATION: 'Presentation',
  VIDEO_PITCH: 'Video Pitch',
  VIDEO: 'Video',
  OTHER: 'Other Document',
  SUPPORTING_DOC: 'Supporting Document',
}

export default function ApplicantDocumentsPage() {
  const { status: sessionStatus } = useSession()
  const isAuthenticated = sessionStatus === 'authenticated'

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

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="space-y-2">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-64 w-full" />
        <Skeleton className="h-48 w-full" />
      </div>
    )
  }

  if (!data?.project) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Documents</h1>
        </div>
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <FileText className="h-12 w-12 text-muted-foreground/50 mb-4" />
            <h2 className="text-xl font-semibold mb-2">No Project</h2>
            <p className="text-muted-foreground text-center">
              Submit a project first to upload documents.
            </p>
          </CardContent>
        </Card>
      </div>
    )
  }

  const { project, openStages } = data
  const isDraft = !project.submittedAt

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
          <Upload className="h-6 w-6" />
          Documents
        </h1>
        <p className="text-muted-foreground">
          Upload and manage documents for your project: {project.title}
        </p>
      </div>

      {/* Per-stage upload sections */}
      {openStages.length > 0 && (
        <div className="space-y-6">
          {openStages.map((stage) => {
            const now = new Date()
            const hasDeadline = !!stage.windowCloseAt
            const deadlinePassed = hasDeadline && now > new Date(stage.windowCloseAt!)
            const isLate = deadlinePassed

            return (
              <Card key={stage.id}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="text-lg">{stage.name}</CardTitle>
                      <CardDescription>
                        Upload documents for this stage
                      </CardDescription>
                    </div>
                    <div className="flex items-center gap-2">
                      {isLate && (
                        <Badge variant="warning" className="gap-1">
                          <AlertTriangle className="h-3 w-3" />
                          Late submission
                        </Badge>
                      )}
                      {hasDeadline && !deadlinePassed && (
                        <Badge variant="outline" className="gap-1">
                          <Clock className="h-3 w-3" />
                          Due {new Date(stage.windowCloseAt!).toLocaleDateString()}
                        </Badge>
                      )}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <RequirementUploadList
                    projectId={project.id}
                    stageId={stage.id}
                    disabled={false}
                  />
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}

      {/* Uploaded files list */}
      <Card>
        <CardHeader>
          <CardTitle>All Uploaded Documents</CardTitle>
          <CardDescription>
            All files associated with your project
          </CardDescription>
        </CardHeader>
        <CardContent>
          {project.files.length === 0 ? (
            <p className="text-muted-foreground text-center py-4">
              No documents uploaded yet
            </p>
          ) : (
            <div className="space-y-2">
              {project.files.map((file) => {
                const Icon = fileTypeIcons[file.fileType] || File
                const fileRecord = file as typeof file & { isLate?: boolean; stageId?: string | null }

                return (
                  <div
                    key={file.id}
                    className="flex items-center justify-between p-3 rounded-lg border"
                  >
                    <div className="flex items-center gap-3">
                      <Icon className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-sm">{file.fileName}</p>
                          {fileRecord.isLate && (
                            <Badge variant="warning" className="text-xs gap-1">
                              <AlertTriangle className="h-3 w-3" />
                              Late
                            </Badge>
                          )}
                        </div>
                        <p className="text-xs text-muted-foreground">
                          {fileTypeLabels[file.fileType] || file.fileType}
                          {' - '}
                          {new Date(file.createdAt).toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* No open stages message */}
      {openStages.length === 0 && project.files.length === 0 && (
        <Card className="bg-muted/50">
          <CardContent className="p-6 text-center">
            <Clock className="h-10 w-10 mx-auto text-muted-foreground/50 mb-3" />
            <p className="text-muted-foreground">
              No stages are currently open for document submissions.
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}