leocrm/frontend/src/components/search/SearchResultCard.tsx

import React from 'react';
import clsx from 'clsx';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { SearchResult } from '@/api/hooks';
import { Badge } from '@/components/ui/Badge';

const TYPE_LABELS: Record<string, string> = {
  company: 'search.companies',
  contact: 'search.contacts',
  mail: 'search.mails',
  file: 'search.files',
  event: 'search.events',
  message: 'search.messages',
};

const TYPE_ICON_CLASSES: Record<string, string> = {
  company: 'bg-primary-100 text-primary-700',
  contact: 'bg-accent-100 text-accent-700',
  mail: 'bg-success-100 text-success-700',
  file: 'bg-warning-100 text-warning-700',
  event: 'bg-secondary-100 text-secondary-700',
  message: 'bg-secondary-100 text-secondary-700',
};

const TYPE_BADGE_VARIANTS: Record<string, 'primary' | 'info' | 'success' | 'warning' | 'default'> = {
  company: 'primary',
  contact: 'info',
  mail: 'success',
  file: 'warning',
  event: 'default',
  message: 'default',
};

function typeIcon(type: string): string {
  switch (type) {
    case 'company': return 'F';
    case 'contact': return 'K';
    case 'mail': return '@';
    case 'file': return '📄';
    case 'event': return '📅';
    case 'message': return '💬';
    default: return '?';
  }
}

interface SearchResultCardProps {
  result: SearchResult;
  query?: string;
}

function highlightMatch(text: string, query: string): React.ReactNode {
  if (!query.trim()) return text;
  const lowerText = text.toLowerCase();
  const lowerQuery = query.toLowerCase();
  const idx = lowerText.indexOf(lowerQuery);
  if (idx === -1) return text;
  return (
    <>
      {text.slice(0, idx)}
      <mark className="bg-warning-200 text-secondary-900 rounded px-0.5">{text.slice(idx, idx + query.length)}</mark>
      {text.slice(idx + query.length)}
    </>
  );
}

export function SearchResultCard({ result, query }: SearchResultCardProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const score = typeof result.score === 'number' ? result.score : 0;
  const scorePct = Math.round(score * 100);

  return (
    <button
      onClick={() => navigate(result.url)}
      className="w-full text-left bg-white rounded-lg shadow-sm border border-secondary-200 p-4 flex items-start gap-4 hover:shadow-md hover:border-primary-300 transition-shadow min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
      data-testid={`search-result-${result.type}-${result.id}`}
    >
      <span
        className={clsx(
          'inline-flex items-center justify-center w-10 h-10 rounded-lg text-sm font-semibold flex-shrink-0',
          TYPE_ICON_CLASSES[result.type] || 'bg-secondary-100 text-secondary-700'
        )}
        aria-hidden="true"
      >
        {typeIcon(result.type)}
      </span>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <p className="font-medium text-secondary-900 truncate">
            {highlightMatch(result.name, query || '')}
          </p>
          <Badge variant={TYPE_BADGE_VARIANTS[result.type] || 'default'}>
            {t(TYPE_LABELS[result.type] || 'search.allTypes')}
          </Badge>
        </div>
        {result.description && (
          <p className="text-sm text-secondary-500 mt-1 line-clamp-2">
            {highlightMatch(result.description, query || '')}
          </p>
        )}
      </div>
      {score > 0 && (
        <span
          className="inline-flex items-center justify-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700 flex-shrink-0"
          title={t('search.score')}
        >
          {scorePct}%
        </span>
      )}
    </button>
  );
}