'use client'

import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Trophy } from 'lucide-react'

export default function AwardMasterDashboard() {
  const { data: awards, isLoading } = trpc.specialAward.getMyAwards.useQuery()

  if (isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-9 w-48" />
        <div className="grid gap-4 sm:grid-cols-2">
          {[...Array(2)].map((_, i) => (
            <Skeleton key={i} className="h-40" />
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">
          Award Master Dashboard
        </h1>
        <p className="text-muted-foreground">
          Review eligible projects and select award winners
        </p>
      </div>

      {awards && awards.length > 0 ? (
        <div className="grid gap-4 sm:grid-cols-2">
          {awards.map((award) => (
            <Link key={award.id} href={`/award-master/awards/${award.id}`}>
              <Card className="transition-colors hover:bg-muted/50 cursor-pointer h-full">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <CardTitle className="flex items-center gap-2">
                      <Trophy className="h-5 w-5 text-amber-500" />
                      {award.name}
                    </CardTitle>
                    <Badge
                      variant={
                        award.status === 'VOTING_OPEN' ? 'default' : 'secondary'
                      }
                    >
                      {award.status.replace('_', ' ')}
                    </Badge>
                  </div>
                  {award.description && (
                    <CardDescription className="line-clamp-2">
                      {award.description}
                    </CardDescription>
                  )}
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    {award._count.eligibilities} eligible projects
                  </p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      ) : (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <Trophy className="h-12 w-12 text-muted-foreground/50" />
            <p className="mt-2 font-medium">No awards assigned</p>
            <p className="text-sm text-muted-foreground">
              You will see your awards here when they are assigned to you
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}