'use client';

import Link from 'next/link';
import { Badge } from '@/components/ui/badge';
import type { ResidentialInterestRow } from './residential-interest-columns';
import { RESIDENTIAL_STAGE_LABELS } from './residential-interest-filters';

/**
 * Mobile / grid card for the residential interests list. Mirrors the
 * footprint of <InterestCard> on the main list - same touch target
 * conventions (entire card is clickable, generous padding, truncated
 * meta below the title).
 */
export function ResidentialInterestCard({
  interest,
  portSlug,
}: {
  interest: ResidentialInterestRow;
  portSlug: string;
}) {
  return (
    <Link
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      href={`/${portSlug}/residential/interests/${interest.id}` as any}
      className="block rounded-lg border bg-card p-3 transition-colors hover:bg-muted/30"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <p className="truncate text-sm font-medium">{interest.clientName ?? '-'}</p>
          <div className="mt-1 flex flex-wrap items-center gap-1.5">
            <Badge variant="secondary" className="text-xs">
              {RESIDENTIAL_STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage}
            </Badge>
            {interest.source ? (
              <span className="text-xs capitalize text-muted-foreground">{interest.source}</span>
            ) : null}
          </div>
        </div>
        <span className="shrink-0 text-xs text-muted-foreground">
          {new Date(interest.updatedAt).toLocaleDateString()}
        </span>
      </div>
      {interest.preferences ? (
        <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{interest.preferences}</p>
      ) : null}
      {interest.notes ? (
        <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">{interest.notes}</p>
      ) : null}
    </Link>
  );
}