// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * "Request contact" button — sits next to the intercept/release controls
 * in the ConversationDetail header. Only enabled while the operator is
 * actively driving the conversation (`status === 'intercepted'`).
 *
 * Click → POST /conversations/:id/request-contact via
 * useRequestContactMutation. No success toast; the next /captured-contact
 * poll surfaces the submitted data, and the SYSTEM bubble appears in the
 * transcript on its own.
 */

import { Mail } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';
import type { ConversationStatus } from '../lib/types';
import { useRequestContactMutation } from '../hooks/useRequestContactMutation';

interface RequestContactButtonProps {
  conversationId: string;
  conversationStatus: ConversationStatus;
}

export function RequestContactButton({ conversationId, conversationStatus }: RequestContactButtonProps) {
  const { t } = useTranslation();
  const mutation = useRequestContactMutation();

  const isIntercepted = conversationStatus === 'intercepted';
  const disabled = !isIntercepted || mutation.isPending;
  const title = isIntercepted
    ? t('conversations.composer.requestContact')
    : t('conversations.composer.requestContactDisabled');

  const handleClick = () => {
    if (disabled) return;
    mutation.mutate(conversationId);
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={disabled}
      title={title}
      data-testid="request-contact-btn"
      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-emerald-300 text-emerald-700 hover:bg-emerald-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium rounded-md"
    >
      <Mail size={14} />
      {t('conversations.composer.requestContact')}
    </button>
  );
}