'use client';

import { AlertCircle } from 'lucide-react';
import type { FieldErrors, FieldValues } from 'react-hook-form';

import { cn } from '@/lib/utils';

interface FormErrorSummaryProps<TFieldValues extends FieldValues> {
  errors: FieldErrors<TFieldValues>;
  /**
   * Optional override map for human-readable field labels. Falls back
   * to the schema-supplied message label or the raw field name.
   */
  labels?: Partial<Record<keyof TFieldValues & string, string>>;
  className?: string;
}

/**
 * Top-of-form validation summary. Renders only when ≥2 fields have
 * errors; a single-error form is handled by the
 * `useFormScrollToError` hook (no banner needed). Each entry is an
 * anchor link that scrolls + focuses the offending input on click.
 */
export function FormErrorSummary<TFieldValues extends FieldValues>({
  errors,
  labels,
  className,
}: FormErrorSummaryProps<TFieldValues>) {
  const entries = Object.entries(errors).filter(([, err]) => err != null);
  if (entries.length < 2) return null;

  function onJump(name: string) {
    const node =
      (document.querySelector(`[name="${name}"]`) as HTMLElement | null) ??
      (document.getElementById(name) as HTMLElement | null);
    if (!node) return;
    node.scrollIntoView({ block: 'center', behavior: 'smooth' });
    if (typeof node.focus === 'function') {
      window.setTimeout(() => node.focus({ preventScroll: true }), 50);
    }
  }

  return (
    <div
      role="alert"
      aria-live="polite"
      className={cn(
        'rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2',
        className,
      )}
    >
      <div className="flex items-center gap-2 text-sm font-medium text-destructive">
        <AlertCircle className="size-4" aria-hidden />
        Please fix the following before submitting:
      </div>
      <ul className="mt-1.5 ml-6 list-disc text-xs text-destructive/90">
        {entries.map(([name, err]) => {
          const label =
            (labels as Record<string, string> | undefined)?.[name] ??
            (err && typeof err === 'object' && 'message' in err && typeof err.message === 'string'
              ? err.message
              : name);
          return (
            <li key={name}>
              <button
                type="button"
                onClick={() => onJump(name)}
                className="hover:underline focus:outline-none focus:underline"
              >
                {label}
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
