'use client';

/**
 * The autosuggest dropdown. Presentational only — it fetches nothing and owns
 * no state, so the fetching rules and the ARIA rules can be read separately.
 */

import type { Suggestion } from '@/lib/suggest';
import styles from './SuggestList.module.css';

/** The id the input's aria-activedescendant points at. */
export function suggestOptionId(id: string, index: number): string {
  return `${id}-option-${index}`;
}

interface Props {
  /** Shared with the input's aria-controls. */
  id: string;
  suggestions: Suggestion[];
  activeIndex: number;
  onPick: (s: Suggestion) => void;
  onHover: (index: number) => void;
}

export function SuggestList({ id, suggestions, activeIndex, onPick, onHover }: Props) {
  if (suggestions.length === 0) return null;

  return (
    <ul className={styles.list} id={id} role="listbox">
      {suggestions.map((s, i) => (
        <li
          key={s.urn}
          id={suggestOptionId(id, i)}
          role="option"
          aria-selected={i === activeIndex}
          className={`${styles.option} ${i === activeIndex ? styles.active : ''}`}
          /*
           * onMouseDown, not onClick: the input's blur handler closes the list,
           * and blur fires before click — so a click handler never runs. This
           * is the classic autosuggest bug where the dropdown is unclickable
           * with a mouse while working perfectly with a keyboard.
           */
          onMouseDown={(e) => { e.preventDefault(); onPick(s); }}
          onMouseEnter={() => onHover(i)}
        >
          <span className={styles.name}>{s.school_name}</span>
          {/* Not decoration: there are many "St Mary's". */}
          <span className={styles.meta}>{s.local_authority}</span>
        </li>
      ))}
    </ul>
  );
}