'use client'

import { trpc } from '@/lib/trpc/client'
import { Skeleton } from '@/components/ui/skeleton'
import { StatusBreakdownChart, DiversityMetricsChart } from '@/components/charts'
import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'

interface IntakeReportTabsProps {
  roundId: string
  programId: string
}

export function IntakeReportTabs({ roundId, programId }: IntakeReportTabsProps) {
  const { data: statusBreakdown, isLoading: statusLoading } =
    trpc.analytics.getStatusBreakdown.useQuery({ roundId })

  const { data: diversity, isLoading: diversityLoading } =
    trpc.analytics.getDiversityMetrics.useQuery({ roundId })

  return (
    <div className="space-y-6">
      <RoundTypeStatsCards roundId={roundId} />

      {statusLoading ? (
        <Skeleton className="h-[350px]" />
      ) : statusBreakdown ? (
        <StatusBreakdownChart data={statusBreakdown} />
      ) : null}

      {diversityLoading ? (
        <Skeleton className="h-[400px]" />
      ) : diversity ? (
        <DiversityMetricsChart data={diversity} />
      ) : null}
    </div>
  )
}
