pn-new-crm/src/components/interests/interest-card.tsx

'use client';

import { Anchor, Archive, Compass, MessageSquare, MoreHorizontal, Pencil } from 'lucide-react';
import { formatDistanceToNowStrict } from 'date-fns';

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { TagBadge } from '@/components/shared/tag-badge';
import {
  ListCard,
  ListCardAvatar,
  ListCardMeta,
  deriveInitials,
} from '@/components/shared/list-card';
import { cn } from '@/lib/utils';
import {
  stageBadgeClass,
  stageDotClass,
  stageLabel as toStageLabel,
  formatSource,
} from '@/lib/constants';
import { computeUrgencyBadges } from '@/components/interests/urgency';
import type { InterestRow } from './interest-columns';

const CATEGORY_LABELS: Record<string, string> = {
  general_interest: 'General',
  specific_qualified: 'Qualified',
  hot_lead: 'Hot lead',
};

interface InterestCardProps {
  interest: InterestRow;
  portSlug: string;
  onEdit: (interest: InterestRow) => void;
  onArchive: (interest: InterestRow) => void;
}

export function InterestCard({ interest, portSlug, onEdit, onArchive }: InterestCardProps) {
  const stageLabel = toStageLabel(interest.pipelineStage);
  const stagePill = stageBadgeClass(interest.pipelineStage);
  const accentClass = stageDotClass(interest.pipelineStage);
  const isHotLead = interest.leadCategory === 'hot_lead';
  const categoryLabel = interest.leadCategory ? CATEGORY_LABELS[interest.leadCategory] : null;
  const sourceLabel = formatSource(interest.source);
  const tags = interest.tags ?? [];
  const notesCount = interest.notesCount ?? 0;
  const urgencyBadges = computeUrgencyBadges(interest);

  const clientName = interest.clientName ?? 'Unknown client';
  const berthLabel = interest.berthMooringNumber;
  const lastIso = interest.dateLastContact ?? interest.updatedAt ?? null;
  const lastActivity = lastIso
    ? formatDistanceToNowStrict(new Date(lastIso), { addSuffix: true })
    : null;

  return (
    <ListCard
      href={`/${portSlug}/interests/${interest.id}`}
      ariaLabel={`Interest for ${clientName}`}
      accentClassName={accentClass}
      actions={
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-9 w-9"
              onClick={(e) => e.stopPropagation()}
              aria-label={`Actions for ${clientName}'s interest`}
            >
              <MoreHorizontal className="h-4 w-4" aria-hidden />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => onEdit(interest)}>
              <Pencil className="mr-2 h-3.5 w-3.5" aria-hidden />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(interest)}>
              <Archive className="mr-2 h-3.5 w-3.5" aria-hidden />
              Archive
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      }
    >
      <div className="flex items-start gap-3">
        <ListCardAvatar initials={deriveInitials(clientName)} />
        <div className="min-w-0 flex-1">
          {/* Title row: name + comment-icon when notes exist + spacer for actions */}
          <div className="flex items-start justify-between gap-2">
            <div className="flex min-w-0 items-center gap-1.5">
              <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
                {clientName}
              </h3>
              {notesCount > 0 ? (
                <span
                  title={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
                  aria-label={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
                  className="inline-flex shrink-0 items-center text-muted-foreground"
                >
                  <MessageSquare className="size-3.5" aria-hidden />
                </span>
              ) : null}
            </div>
            <span aria-hidden className="block h-9 w-9 shrink-0" />
          </div>

          {/* Berth or general-interest line */}
          <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
            {berthLabel ? (
              <>
                <Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
                <span className="truncate">{berthLabel}</span>
              </>
            ) : (
              <>
                <Compass className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
                <span className="italic">General interest</span>
              </>
            )}
          </p>

          {/* Stage pill + category + source */}
          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
            <span
              className={cn(
                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
                stagePill,
              )}
            >
              {stageLabel}
            </span>

            {isHotLead ? (
              <span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-rose-700">
                Hot
              </span>
            ) : null}

            {(categoryLabel && !isHotLead) || sourceLabel ? (
              <div className="flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
                {categoryLabel && !isHotLead ? <ListCardMeta>{categoryLabel}</ListCardMeta> : null}
                {categoryLabel && !isHotLead && sourceLabel ? <span aria-hidden>·</span> : null}
                {sourceLabel ? <ListCardMeta>{sourceLabel}</ListCardMeta> : null}
              </div>
            ) : null}
          </div>

          {urgencyBadges.length > 0 ? (
            <div className="mt-1.5 flex flex-wrap gap-1">
              {urgencyBadges.map((b) => (
                <span
                  key={b.id}
                  title={b.detail}
                  className={cn(
                    'inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium',
                    b.className,
                  )}
                >
                  {b.label}
                </span>
              ))}
            </div>
          ) : null}

          {tags.length > 0 ? (
            <div className="mt-2 flex flex-wrap gap-1">
              {tags.slice(0, 2).map((tag) => (
                <TagBadge key={tag.id} name={tag.name} color={tag.color} />
              ))}
              {tags.length > 2 ? (
                <span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
                  +{tags.length - 2}
                </span>
              ) : null}
            </div>
          ) : null}

          {lastActivity ? (
            <p className="mt-1.5 text-[11px] text-muted-foreground tabular-nums">
              Last activity {lastActivity}
            </p>
          ) : null}
        </div>
      </div>
    </ListCard>
  );
}