pn-new-crm/src/components/dashboard/kpi-cards.tsx

'use client';

import { useQuery } from '@tanstack/react-query';

import { apiFetch } from '@/lib/api/client';
import { useUIStore } from '@/stores/ui-store';
import { KPITile } from '@/components/ui/kpi-tile';
import { Skeleton } from '@/components/ui/skeleton';
import { formatCurrency } from '@/lib/utils/currency';
import { WidgetErrorBoundary } from './widget-error-boundary';

interface KpiData {
  totalClients: number;
  activeInterests: number;
  pipelineValueUsd: number;
  occupancyRate: number;
}

const formatUsd = (value: number) => formatCurrency(value, 'USD', { maxFractionDigits: 0 });

function formatPercent(value: number): string {
  return `${value.toFixed(1)}%`;
}

function KpiTileSkeleton() {
  return (
    <div className="relative overflow-hidden rounded-xl border border-border bg-card p-3 shadow-sm sm:p-5">
      <div className="absolute inset-x-0 top-0 h-1 bg-muted" aria-hidden />
      <Skeleton className="h-3 w-20" />
      <Skeleton className="mt-2 h-6 w-24 sm:mt-3 sm:h-7" />
    </div>
  );
}

export function KpiCards() {
  // Keying on currentPortId ensures React Query treats a port-resolved fetch
  // as a different query than the one that fires on first paint when the
  // store hasn't yet hydrated. Without this, an early null-port fetch could
  // cache an error and display "-" indefinitely until the staleTime expires.
  const portId = useUIStore((s) => s.currentPortId);
  const { data, isLoading, isError } = useQuery<KpiData>({
    queryKey: ['dashboard', 'kpis', portId],
    queryFn: () => apiFetch<KpiData>('/api/v1/dashboard/kpis'),
    staleTime: 60_000,
    retry: 2,
    // Avoid running until we have a port id - gates against the early
    // unauth/no-port window where the API would return zeroes/errors.
    enabled: !!portId,
  });

  if (isLoading) {
    return (
      <>
        <KpiTileSkeleton />
        <KpiTileSkeleton />
        <KpiTileSkeleton />
        <KpiTileSkeleton />
      </>
    );
  }

  const kpis: Array<{
    label: string;
    value: string;
    accent: 'brand' | 'success' | 'warning' | 'mint' | 'teal' | 'purple';
  }> = [
    {
      label: 'Total Clients',
      value: isError ? '-' : String(data?.totalClients ?? 0),
      accent: 'brand',
    },
    {
      label: 'Active Interests',
      value: isError ? '-' : String(data?.activeInterests ?? 0),
      accent: 'teal',
    },
    {
      label: 'Pipeline Value',
      value: isError ? '-' : formatUsd(data?.pipelineValueUsd ?? 0),
      accent: 'success',
    },
    {
      label: 'Occupancy Rate',
      value: isError ? '-' : formatPercent(data?.occupancyRate ?? 0),
      accent: 'purple',
    },
  ];

  return (
    <>
      {kpis.map(({ label, value, accent }) => (
        <KPITile key={label} title={label} value={value} accent={accent} />
      ))}
    </>
  );
}

export function KpiCardsWithBoundary() {
  return (
    <WidgetErrorBoundary>
      <KpiCards />
    </WidgetErrorBoundary>
  );
}