import { smoothScrollIntoView, prefersReducedMotion } from './smoothScroll';

/**
 * Phrase FR intelligible et EXHAUSTIVE listant les champs en erreur (manquants ou invalides),
 * par leur libellé humain. Ex : "Il reste à compléter : Prénom, Numéro de téléphone et Clientèle."
 */
export function formatMissingFields(keys: string[], labels: Record<string, string>): string {
  const names = keys.map((k) => labels[k] || k).filter(Boolean);
  if (names.length === 0) return 'Merci de vérifier les champs en rouge.';
  if (names.length === 1) return `Il reste à compléter : ${names[0]}.`;
  const last = names[names.length - 1];
  const rest = names.slice(0, -1).join(', ');
  return `Il reste à compléter : ${rest} et ${last}.`;
}

/**
 * Défile en douceur vers le premier champ en erreur du formulaire (premier `[role="alert"]`)
 * et tente de focuser son champ de saisie. Couvre aussi les champs custom (scroll même si focus impossible).
 */
export function scrollToFirstError(formEl: HTMLElement | null): void {
  if (!formEl) return;
  const alert = formEl.querySelector<HTMLElement>('[role="alert"]');
  if (!alert) return;
  const field = (alert.closest('div') as HTMLElement | null) ?? alert;

  if (prefersReducedMotion()) {
    field.scrollIntoView({ block: 'center', behavior: 'auto' });
  } else {
    smoothScrollIntoView(field, { offset: 140, duration: 700 });
  }

  const focusable = field.querySelector<HTMLElement>(
    'input:not([type="hidden"]):not([disabled]), select, textarea',
  );
  if (focusable) {
    window.setTimeout(() => {
      try {
        focusable.focus({ preventScroll: true });
      } catch {
        /* focus best-effort */
      }
    }, 60);
  }
}