'use client'

import { useMemo } from 'react'
import { trpc } from '@/lib/trpc/client'
import { cn } from '@/lib/utils'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'

export type ScoreDistributionProps = {
  roundId: string
}

export function ScoreDistribution({ roundId }: ScoreDistributionProps) {
  const { data: dist, isLoading } = trpc.analytics.getRoundScoreDistribution.useQuery(
    { roundId },
    { refetchInterval: 15_000 },
  )

  const maxCount = useMemo(() =>
    dist ? Math.max(...dist.globalDistribution.map((b) => b.count), 1) : 1,
  [dist])

  return (
    <Card className="flex flex-col">
      <CardHeader>
        <CardTitle className="text-base">Score Distribution</CardTitle>
        <CardDescription>
          {dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col flex-1 pb-4">
        {isLoading ? (
          <div className="flex items-end gap-1 flex-1 min-h-[120px]">
            {Array.from({ length: 10 }).map((_, i) => <Skeleton key={i} className="flex-1 h-full" />)}
          </div>
        ) : !dist || dist.totalEvaluations === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-6">
            No evaluations submitted yet
          </p>
        ) : (
          <div className="flex gap-1 h-[160px]">
            {dist.globalDistribution.map((bucket) => {
              const heightPct = (bucket.count / maxCount) * 100
              return (
                <div key={bucket.score} className="flex-1 flex flex-col items-center gap-1">
                  <span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
                  <div className="w-full flex-1 relative min-h-0">
                    <div className={cn(
                      'absolute inset-x-0 bottom-0 rounded-t transition-all',
                      bucket.score <= 3 ? 'bg-red-400' :
                      bucket.score <= 6 ? 'bg-amber-400' :
                      'bg-emerald-400',
                    )} style={{ height: `${Math.max(heightPct, 4)}%` }} />
                  </div>
                  <span className="text-[10px] text-muted-foreground">{bucket.score}</span>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}