'use client'

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

const SEGMENTS = [
  { key: 'passed' as const,      label: 'Passed',       color: '#2d8659', bg: '#2d865915' },
  { key: 'filteredOut' as const, label: 'Filtered Out',  color: '#de0f1e', bg: '#de0f1e15' },
  { key: 'flagged' as const,     label: 'Flagged',       color: '#d97706', bg: '#d9770615' },
]

interface FilteringScreeningBarProps {
  roundId: string
  className?: string
}

export function FilteringScreeningBar({ roundId, className }: FilteringScreeningBarProps) {
  const { data, isLoading } = trpc.analytics.getFilteringResultStats.useQuery(
    { roundId },
    { enabled: !!roundId }
  )

  return (
    <Card className={cn(className)}>
      <CardHeader>
        <CardTitle className="text-base">Screening Results</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {isLoading ? (
          <>
            <Skeleton className="h-5 w-full rounded-full" />
            <div className="flex flex-wrap gap-2">
              <Skeleton className="h-8 w-28 rounded-lg" />
              <Skeleton className="h-8 w-32 rounded-lg" />
              <Skeleton className="h-8 w-24 rounded-lg" />
            </div>
          </>
        ) : !data || data.total === 0 ? (
          <p className="text-sm text-muted-foreground">No screening data available.</p>
        ) : (
          <>
            {/* Segmented bar */}
            <div className="flex h-5 w-full overflow-hidden rounded-full bg-muted">
              {SEGMENTS.map(({ key, color }) => {
                const pct = (data[key] / data.total) * 100
                if (pct === 0) return null
                return (
                  <div
                    key={key}
                    title={`${data[key]} (${Math.round(pct)}%)`}
                    style={{ width: `${pct}%`, backgroundColor: color, minWidth: '4px' }}
                    className="transition-all duration-500 first:rounded-l-full last:rounded-r-full"
                  />
                )
              })}
            </div>

            {/* Stat pills */}
            <div className="flex flex-wrap gap-2">
              {SEGMENTS.map(({ key, label, color, bg }) => {
                const count = data[key]
                const pct = Math.round((count / data.total) * 100)
                return (
                  <div
                    key={key}
                    className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
                    style={{ backgroundColor: bg, color }}
                  >
                    <span
                      className="inline-block h-2 w-2 shrink-0 rounded-full"
                      style={{ backgroundColor: color }}
                    />
                    <span>{label}</span>
                    <span className="tabular-nums font-bold">{count}</span>
                    <span className="font-normal opacity-70">({pct}%)</span>
                  </div>
                )
              })}

              {/* Total */}
              <div className="flex items-center gap-1.5 rounded-lg bg-muted px-3 py-1.5 text-sm font-medium text-muted-foreground">
                <span>Total</span>
                <span className="tabular-nums font-bold text-foreground">{data.total}</span>
              </div>

              {/* Overridden — only if any */}
              {data.overridden > 0 && (
                <div
                  className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
                  style={{ backgroundColor: '#7c3aed15', color: '#7c3aed' }}
                >
                  <span>Overridden</span>
                  <span className="tabular-nums font-bold">{data.overridden}</span>
                </div>
              )}

              {/* Routed to awards — only if any */}
              {data.routedToAwards > 0 && (
                <div
                  className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
                  style={{ backgroundColor: '#053d5715', color: '#053d57' }}
                >
                  <span>Routed to Awards</span>
                  <span className="tabular-nums font-bold">{data.routedToAwards}</span>
                </div>
              )}
            </div>
          </>
        )}
      </CardContent>
    </Card>
  )
}
