// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { RefreshCw, X } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';
import type { MemberInvitationResponse } from '@archer/api-interface';
import { RoleBadge } from './RoleBadge';

interface PendingInvitationsListProps {
  invitations: MemberInvitationResponse[];
  onResend: (invitation: MemberInvitationResponse) => Promise<void>;
  onRevoke: (invitation: MemberInvitationResponse) => Promise<void>;
}

export function PendingInvitationsList({ invitations, onResend, onRevoke }: PendingInvitationsListProps) {
  const { t, locale } = useTranslation();
  return (
    <section data-testid="pending-invitations-section" className="bg-white border border-gray-200 rounded-lg p-6">
      <h2 className="text-lg font-semibold mb-4">{t('members.pending.heading')}</h2>
      {invitations.length === 0 ? (
        <div className="text-sm text-gray-500">{t('members.pending.empty')}</div>
      ) : (
        <ul className="divide-y divide-gray-100" data-testid="invitations-list">
          {invitations.map((inv) => (
            <li key={inv.id} className="py-3 flex items-center gap-4" data-testid={`invitation-row-${inv.id}`}>
              <div className="flex-1 min-w-0">
                <div className="font-medium text-gray-900 truncate">{inv.email}</div>
                <div className="text-xs text-gray-500">
                  {t('members.pending.invitedBy', {
                    name: inv.invitedByName,
                    date: new Date(inv.expiresAt).toLocaleDateString(locale),
                  })}
                </div>
              </div>
              <RoleBadge role={inv.role} />
              <button
                type="button"
                onClick={() => onResend(inv)}
                data-testid={`invitation-resend-${inv.id}`}
                className="inline-flex items-center gap-1 text-emerald-700 hover:text-emerald-800 text-sm"
              >
                <RefreshCw size={14} /> {t('members.pending.resend')}
              </button>
              <button
                type="button"
                onClick={() => onRevoke(inv)}
                data-testid={`invitation-revoke-${inv.id}`}
                className="inline-flex items-center gap-1 text-red-600 hover:text-red-700 text-sm"
              >
                <X size={14} /> {t('members.pending.revoke')}
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}