import { Suspense } from 'react'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Plus,
  FileText,
  Video,
  Link as LinkIcon,
  File,
  Eye,
  Pencil,
  ExternalLink,
} from 'lucide-react'
import { formatDate } from '@/lib/utils'

const resourceTypeIcons = {
  PDF: FileText,
  VIDEO: Video,
  DOCUMENT: File,
  LINK: LinkIcon,
  OTHER: File,
}

const cohortColors = {
  ALL: 'bg-gray-100 text-gray-800',
  SEMIFINALIST: 'bg-blue-100 text-blue-800',
  FINALIST: 'bg-purple-100 text-purple-800',
}

async function LearningResourcesList() {
  const caller = await api()
  const { data: resources } = await caller.learningResource.list({
    perPage: 50,
  })

  if (resources.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12">
          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">No resources yet</h3>
          <p className="text-muted-foreground mb-4">
            Start by adding your first learning resource
          </p>
          <Link href="/admin/learning/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Resource
            </Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="grid gap-4">
      {resources.map((resource) => {
        const Icon = resourceTypeIcons[resource.resourceType]
        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">
                <Icon className="h-5 w-5" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium truncate">{resource.title}</h3>
                  {!resource.isPublished && (
                    <Badge variant="secondary">Draft</Badge>
                  )}
                </div>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Badge className={cohortColors[resource.cohortLevel]} variant="outline">
                    {resource.cohortLevel}
                  </Badge>
                  <span>{resource.resourceType}</span>
                  <span>-</span>
                  <span>{resource._count.accessLogs} views</span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                {resource.externalUrl && (
                  <a
                    href={resource.externalUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Button variant="ghost" size="icon">
                      <ExternalLink className="h-4 w-4" />
                    </Button>
                  </a>
                )}
                <Link href={`/admin/learning/${resource.id}`}>
                  <Button variant="ghost" size="icon">
                    <Pencil className="h-4 w-4" />
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <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>
  )
}

export default function LearningHubPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Learning Hub</h1>
          <p className="text-muted-foreground">
            Manage educational resources for jury members
          </p>
        </div>
        <Link href="/admin/learning/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Add Resource
          </Button>
        </Link>
      </div>

      <Suspense fallback={<LoadingSkeleton />}>
        <LearningResourcesList />
      </Suspense>
    </div>
  )
}