'use client'

import { trpc } from '@/lib/trpc/client'
import { Skeleton } from '@/components/ui/skeleton'
import {
  GeographicDistribution,
  StatusBreakdownChart,
  DiversityMetricsChart,
  CrossStageComparisonChart,
} from '@/components/charts'

interface GlobalAnalyticsTabProps {
  programId: string
  roundIds?: string[]
}

export function GlobalAnalyticsTab({ programId, roundIds }: GlobalAnalyticsTabProps) {
  const { data: geoData, isLoading: geoLoading } =
    trpc.analytics.getGeographicDistribution.useQuery({ programId })

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

  const { data: statusBreakdown, isLoading: statusLoading } =
    trpc.analytics.getStatusBreakdown.useQuery({ programId })

  const { data: crossRound, isLoading: crossLoading } =
    trpc.analytics.getCrossRoundComparison.useQuery(
      { roundIds: roundIds ?? [] },
      { enabled: !!roundIds && roundIds.length >= 2 }
    )

  return (
    <div className="space-y-6">
      {/* Diversity Metrics — includes summary cards, category breakdown, ocean issues, tags */}
      {diversityLoading ? (
        <Skeleton className="h-[400px]" />
      ) : diversity ? (
        <DiversityMetricsChart data={diversity} />
      ) : null}

      {/* Geographic Distribution — full-width map with top countries */}
      {geoLoading ? (
        <Skeleton className="h-[500px]" />
      ) : geoData?.length ? (
        <GeographicDistribution data={geoData} />
      ) : null}

      {/* Project Status + Cross-Round Comparison */}
      <div className="grid gap-6 lg:grid-cols-2">
        {statusLoading ? (
          <Skeleton className="h-[350px]" />
        ) : statusBreakdown ? (
          <StatusBreakdownChart data={statusBreakdown} />
        ) : null}

        {roundIds && roundIds.length >= 2 && (
          <>
            {crossLoading ? (
              <Skeleton className="h-[350px]" />
            ) : crossRound ? (
              <CrossStageComparisonChart data={crossRound} />
            ) : null}
          </>
        )}
      </div>
    </div>
  )
}
