pn-new-crm/src/components/interests/deal-pulse-chip.tsx

'use client';

import { useState } from 'react';
import { Activity, ExternalLink } from 'lucide-react';

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { computeDealHealth, type DealHealthInput } from '@/lib/services/deal-health';
import { cn } from '@/lib/utils';

const PULSE_TINT: Record<'cold' | 'warm' | 'hot', string> = {
  hot: 'border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100',
  warm: 'border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100',
  cold: 'border-rose-200 bg-rose-50 text-rose-800 hover:bg-rose-100',
};

const PULSE_LABEL: Record<'cold' | 'warm' | 'hot', string> = {
  hot: 'Hot',
  warm: 'Warm',
  cold: 'Cold',
};

/**
 * Header chip surfacing the rule-based deal-health score.
 *
 * Click opens a popover with the full per-signal breakdown + plain-language
 * explanation of how the score is computed, plus a link to the docs page
 * for users who want the deep-dive. Replaces the prior hover-tooltip so
 * the content is keyboard-accessible, doesn't time out, and reads on
 * touch devices.
 */
export function DealPulseChip({ interest }: { interest: DealHealthInput }) {
  const [open, setOpen] = useState(false);

  // Closed / archived deals don't get a pulse — UX would be confusing.
  if (interest.archivedAt || interest.outcome) return null;

  const health = computeDealHealth(interest);
  const tint = PULSE_TINT[health.pulse];
  const label = PULSE_LABEL[health.pulse];

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          className={cn(
            'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors cursor-pointer',
            tint,
          )}
          aria-label={`Deal pulse: ${label}, score ${health.score}/100. Click for breakdown.`}
        >
          <Activity className="size-3" aria-hidden />
          {label} · {health.score}
        </button>
      </PopoverTrigger>
      <PopoverContent side="bottom" align="start" className="w-80 p-4 space-y-3">
        <div>
          <p className="text-sm font-semibold">
            Deal pulse - {label} ({health.score} / 100)
          </p>
          <p className="mt-0.5 text-xs text-muted-foreground">
            How likely this deal is to keep moving forward, scored from 0 to 100.
          </p>
        </div>

        <div>
          <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
            What pushed the score
          </p>
          {health.signals.length === 0 ? (
            <p className="mt-1 text-xs text-muted-foreground">
              Nothing notable yet - the score is sitting at the baseline (50). Log a contact,
              progress the stage, or send a signing request and you&apos;ll see the dial move.
            </p>
          ) : (
            <ul className="mt-1.5 space-y-1.5 text-xs">
              {health.signals.map((s) => (
                <li key={s.id} className="flex items-start gap-2">
                  <span
                    className={cn(
                      'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold tabular-nums',
                      s.delta > 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800',
                    )}
                  >
                    {s.delta > 0 ? `+${s.delta}` : s.delta}
                  </span>
                  <span className="text-foreground/90">{s.detail}</span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="rounded-md bg-muted/40 p-2.5 text-[11px] text-muted-foreground">
          <p className="font-medium text-foreground/80">How this is calculated</p>
          <p className="mt-0.5">
            Every signal above traces to a specific date or pipeline stage on this deal. Recent
            contact + recent stage movement push the score up; long silences and outdated documents
            pull it down.
          </p>
        </div>

        <div className="flex items-center justify-between gap-2">
          <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
            Close
          </Button>
          <Button asChild variant="link" size="sm" className="text-xs">
            <a
              href="/docs/deal-pulse"
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-1"
            >
              Full guide
              <ExternalLink className="size-3" aria-hidden />
            </a>
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}