'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { AlertCircle, CheckCircle2, Users } from 'lucide-react'

interface CoverageReportProps {
  roundId: string
}

export function CoverageReport({ roundId }: CoverageReportProps) {
  const { data: coverage, isLoading } = trpc.roundAssignment.coverageReport.useQuery(
    { roundId, requiredReviews: 3 },
    { refetchInterval: 15_000 },
  )

  if (isLoading) {
    return (
      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-32" />
        ))}
      </div>
    )
  }

  if (!coverage) {
    return <p className="text-muted-foreground">No coverage data available</p>
  }

  const totalAssigned = coverage.fullyAssigned || 0
  const totalProjects = coverage.totalProjects || 0
  const avgPerJuror = coverage.avgReviewsPerProject?.toFixed(1) || '0'
  const unassignedCount = coverage.unassigned || 0

  return (
    <div className="space-y-4">
      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Assigned</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalAssigned}</div>
            <p className="text-xs text-muted-foreground">
              {totalProjects > 0
                ? `${((totalAssigned / totalProjects) * 100).toFixed(1)}% coverage`
                : 'No projects'}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Avg Per Juror</CardTitle>
            <Users className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{avgPerJuror}</div>
            <p className="text-xs text-muted-foreground">Assignments per juror</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Unassigned</CardTitle>
            <AlertCircle className="h-4 w-4 text-amber-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{unassignedCount}</div>
            <p className="text-xs text-muted-foreground">
              Projects below 3 reviews
            </p>
          </CardContent>
        </Card>
      </div>

      {coverage.unassigned > 0 && (
        <Card className="border-amber-500">
          <CardHeader>
            <CardTitle className="text-sm">Coverage Warnings</CardTitle>
            <CardDescription>Issues detected in assignment coverage</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-1 text-sm">
              <li className="flex items-start gap-2">
                <AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
                <span>{coverage.unassigned} projects have insufficient coverage</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      )}
    </div>
  )
}