/**
 * RecentContactsWidget — shows last 5 contacts (Task 5.25).
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useUnifiedContacts } from '@/api/hooks';
import { formatDateTime } from '@/utils/date';
import { Users } from 'lucide-react';

export function RecentContactsWidget() {
  const { t } = useTranslation();
  const { data, isLoading, isError } = useUnifiedContacts(1, 5, undefined, undefined);

  if (isLoading) {
    return <div className="animate-pulse space-y-2" data-testid="recent-contacts-loading">{[...Array(3)].map((_, i) => <div key={i} className="h-4 bg-secondary-100 rounded" />)}</div>;
  }

  if (isError) {
    return <p className="text-sm text-secondary-500" data-testid="recent-contacts-error">{t('dashboard.widgetError')}</p>;
  }

  const contacts = data?.items ?? [];

  if (contacts.length === 0) {
    return <p className="text-sm text-secondary-500" data-testid="recent-contacts-empty">{t('dashboard.noContacts')}</p>;
  }

  return (
    <div className="space-y-2" data-testid="recent-contacts-widget">
      {contacts.map((contact) => (
        <div key={contact.id} className="flex items-center gap-2 text-sm">
          <Users className="w-3.5 h-3.5 text-secondary-400" />
          <span className="font-medium text-secondary-800">{contact.displayname}</span>
          {contact.email_1 && <span className="text-secondary-500 truncate">{contact.email_1}</span>}
        </div>
      ))}
    </div>
  );
}