pn-new-crm/src/components/dashboard/hot-deals-card.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Flame } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';

import { apiFetch } from '@/lib/api/client';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

interface HotDeal {
  id: string;
  stage: string;
  clientName: string;
  mooringNumber: string | null;
  lastContact: string | null;
}

interface HotDealsResponse {
  data: HotDeal[];
}

const STAGE_LABELS: Record<string, string> = {
  contract_signed: 'Contract Signed',
  contract_sent: 'Contract Sent',
  deposit_10: 'Deposit 10%',
  eoi_signed: 'EOI Signed',
  eoi_sent: 'EOI Sent',
  in_comms: 'In Comms',
  details_sent: 'Details Sent',
  open: 'Open',
  completed: 'Completed',
};

/**
 * Top 5 in-flight interests closest to closing. Ranked server-side by
 * pipeline stage (the further along, the closer to signing) with most-
 * recent activity as a tiebreaker. Gives reps a "what should I be
 * chasing this week" view without opening the full pipeline board.
 */
export function HotDealsCard() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const { data, isLoading } = useQuery<HotDealsResponse>({
    queryKey: ['dashboard', 'hot_deals'],
    queryFn: () => apiFetch<HotDealsResponse>('/api/v1/dashboard/hot-deals'),
    staleTime: 60_000,
  });

  const deals = data?.data ?? [];

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-1.5 text-base">
          <Flame className="size-4 text-orange-500" aria-hidden />
          Hot deals
        </CardTitle>
        <CardDescription>Active interests closest to closing.</CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-3">
            <Skeleton className="h-12 w-full" />
            <Skeleton className="h-12 w-full" />
            <Skeleton className="h-12 w-full" />
          </div>
        ) : deals.length === 0 ? (
          <p className="py-4 text-center text-sm text-muted-foreground">
            No active deals to chase. New leads will surface here once they advance past Open.
          </p>
        ) : (
          <ul className="space-y-1">
            {deals.map((d) => (
              <li key={d.id}>
                <Link
                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
                  href={`/${portSlug}/interests/${d.id}` as any}
                  className="-mx-2 flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-accent/60"
                >
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium text-foreground">{d.clientName}</p>
                    <p className="text-xs text-muted-foreground">
                      {d.mooringNumber ? `Berth ${d.mooringNumber}` : 'No berth linked'}
                      {d.lastContact ? (
                        <>
                          {' · '}
                          last touched {formatDistanceToNow(new Date(d.lastContact))} ago
                        </>
                      ) : null}
                    </p>
                  </div>
                  <Badge variant="secondary" className="shrink-0 text-[10px]">
                    {STAGE_LABELS[d.stage] ?? d.stage}
                  </Badge>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}