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

'use client'

import { useState } from 'react'
import type { Route } from 'next'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import {
  FileText,
  Download,
  ExternalLink,
  BookOpen,
} from 'lucide-react'

export default function ApplicantResourcesPage() {
  const [downloadingId, setDownloadingId] = useState<string | null>(null)

  const { data, isLoading } = trpc.learningResource.myResources.useQuery({})
  const utils = trpc.useUtils()

  const handleDownload = async (resourceId: string) => {
    setDownloadingId(resourceId)
    try {
      const { url } = await utils.learningResource.getDownloadUrl.fetch({ id: resourceId })
      window.open(url, '_blank')
    } catch (error) {
      console.error('Download failed:', error)
    } finally {
      setDownloadingId(null)
    }
  }

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold">Resources</h1>
          <p className="text-muted-foreground">
            Resources and materials for applicants
          </p>
        </div>
        <div className="grid gap-4">
          {[1, 2, 3].map((i) => (
            <Card key={i}>
              <CardContent className="flex items-center gap-4 py-4">
                <Skeleton className="h-10 w-10 rounded-lg" />
                <div className="flex-1 space-y-2">
                  <Skeleton className="h-5 w-48" />
                  <Skeleton className="h-4 w-32" />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

  const resources = data?.resources || []

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Resources</h1>
        <p className="text-muted-foreground">
          Resources and materials for applicants
        </p>
      </div>

      {resources.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <BookOpen className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-medium mb-2">No resources available</h3>
            <p className="text-muted-foreground">
              Check back later for learning materials
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4">
          {resources.map((resource) => {
            const isDownloading = downloadingId === resource.id
            const hasContent = !!resource.contentJson

            return (
              <Card key={resource.id}>
                <CardContent className="flex items-center gap-4 py-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
                    <FileText className="h-5 w-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-medium">{resource.title}</h3>
                    {resource.description && (
                      <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                        {resource.description}
                      </p>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    {hasContent && (
                      <Link href={`/applicant/resources/${resource.id}` as Route}>
                        <Button variant="outline" size="sm">
                          <BookOpen className="mr-2 h-4 w-4" />
                          Read
                        </Button>
                      </Link>
                    )}
                    {resource.externalUrl && (
                      <a
                        href={resource.externalUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Button variant="outline" size="sm">
                          <ExternalLink className="mr-2 h-4 w-4" />
                          Open
                        </Button>
                      </a>
                    )}
                    {resource.objectKey && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDownload(resource.id)}
                        disabled={isDownloading}
                      >
                        <Download className="mr-2 h-4 w-4" />
                        {isDownloading ? 'Loading...' : 'Download'}
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}