'use client';

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

import { apiFetch } from '@/lib/api/client';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { formatCurrency } from '@/lib/utils/currency';

interface KpiResponse {
  pipelineValueUsd: number;
}

/**
 * Total pipeline value for active interests, USD-denominated. Sourced
 * from the same KPIs endpoint as the active-deals tile so the two
 * share a cache entry and render in lockstep.
 */
export function PipelineValueTile() {
  const { data, isLoading } = useQuery<KpiResponse>({
    queryKey: ['dashboard', 'kpis'],
    queryFn: () => apiFetch<KpiResponse>('/api/v1/dashboard/kpis'),
    staleTime: 60_000,
  });

  return (
    <Card>
      {/* `pt-5 pb-5` is explicit because shadcn's default CardContent ships
          with `pt-0` (it assumes a CardHeader sits above). Without these
          overrides the tile content snaps to the top edge of the card. */}
      <CardContent className="flex items-center gap-3 pt-5 pb-5">
        <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-accent text-foreground">
          <DollarSign className="size-5" aria-hidden />
        </div>
        <div className="min-w-0 flex-1">
          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            Pipeline value
          </p>
          {isLoading ? (
            <Skeleton className="mt-1 h-7 w-24" aria-hidden />
          ) : (
            <p
              className="truncate text-2xl font-bold leading-tight text-foreground"
              title={formatCurrency(data?.pipelineValueUsd ?? 0, 'USD')}
            >
              {formatCurrency(data?.pipelineValueUsd ?? 0, 'USD', { maxFractionDigits: 0 })}
            </p>
          )}
        </div>
      </CardContent>
    </Card>
  );
}