// Page: FAQ — accordéon (un seul item ouvert à la fois)
const SELECTOR_ITEM = '[data-faq-item]';
const SELECTOR_TRIGGER = '[data-faq-trigger]';
const CLASS_OPEN = 'is-open';

const initFaqPage = () => {
  const container = document.querySelector('.faq-container');
  if (!container) return;

  const items = container.querySelectorAll<HTMLElement>(SELECTOR_ITEM);
  const triggers = container.querySelectorAll<HTMLButtonElement>(SELECTOR_TRIGGER);

  const updateIcons = () => {
    container.querySelectorAll('[data-faq-icon]').forEach((icon) => {
      const item = icon.closest<HTMLElement>(SELECTOR_ITEM);
      icon.textContent = item?.classList.contains(CLASS_OPEN) ? '×' : '+';
    });
  };

  const openItem = (item: HTMLElement) => {
    items.forEach((el) => el.classList.remove(CLASS_OPEN));
    item.classList.add(CLASS_OPEN);
    const trigger = item.querySelector<HTMLButtonElement>(SELECTOR_TRIGGER);
    const answerId = trigger?.getAttribute('aria-controls');
    const answer = answerId ? document.getElementById(answerId) : null;
    if (trigger) trigger.setAttribute('aria-expanded', 'true');
    if (answer) answer.hidden = false;
    updateIcons();
  };

  const closeItem = (item: HTMLElement) => {
    item.classList.remove(CLASS_OPEN);
    const trigger = item.querySelector<HTMLButtonElement>(SELECTOR_TRIGGER);
    const answerId = trigger?.getAttribute('aria-controls');
    const answer = answerId ? document.getElementById(answerId) : null;
    if (trigger) trigger.setAttribute('aria-expanded', 'false');
    if (answer) answer.hidden = true;
    updateIcons();
  };

  const toggleItem = (item: HTMLElement) => {
    const isOpen = item.classList.contains(CLASS_OPEN);
    if (isOpen) {
      closeItem(item);
    } else {
      openItem(item);
    }
  };

  triggers.forEach((trigger) => {
    trigger.addEventListener('click', () => {
      const item = trigger.closest<HTMLElement>(SELECTOR_ITEM);
      if (item) toggleItem(item);
    });
  });

  // État initial : fermer les réponses non ouvertes et mettre à jour les icônes
  items.forEach((item) => {
    const trigger = item.querySelector<HTMLButtonElement>(SELECTOR_TRIGGER);
    const answerId = trigger?.getAttribute('aria-controls');
    const answer = answerId ? document.getElementById(answerId) : null;
    const isOpen = item.classList.contains(CLASS_OPEN);
    if (trigger) trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    if (answer) answer.hidden = !isOpen;
  });
  updateIcons();
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => initFaqPage());
} else {
  initFaqPage();
}

export { initFaqPage };