---
import { getPublication } from '../utils/publication';
import { faqItemsFromSourceHtml, faqPageSchema, serializeJsonLd, type FAQItem } from '../utils/structured-data';

interface Props {
  label?: string;
  heading: string;
  items?: FAQItem[];
  canonical?: string;
  variant?: 'blog' | 'source' | 'page';
  sourceSelector?: string;
  sourceHtml?: string;
  searchSelector?: string;
  faqIconColor?: string;
}

const {
  label,
  heading,
  items = [],
  canonical,
  variant = 'blog',
  sourceSelector,
  sourceHtml,
  searchSelector,
  faqIconColor = '--color-accent-strong'
} = Astro.props;
const resolvedFaqIconColor = faqIconColor.startsWith('--')
  ? `var(${faqIconColor})`
  : faqIconColor;
const headingId = variant === 'page'
  ? 'faq-questions-heading'
  : label
    ? 'blog-faq-heading'
    : 'source-faq-heading';
const publication = await getPublication(Astro.url.pathname);
if (canonical && canonical.replace(/\/$/, '') !== publication.canonical.replace(/\/$/, '')) {
  throw new Error(`FAQ canonical disagrees with publication policy: ${publication.route}`);
}
if ((sourceSelector && items.length) || (sourceHtml !== undefined && !sourceSelector)) {
  throw new Error('FAQ items and runtime source content must not be mixed');
}
const schemaItems = sourceSelector
  ? sourceHtml === undefined ? [] : faqItemsFromSourceHtml(sourceHtml)
  : items;
const schema = faqPageSchema(schemaItems, publication);
// Locals belong to this render request, not a module-level build-wide registry.
const state = Astro.locals as { aiaFaqSchemaClaimed?: boolean };
if (schema) {
  if (state.aiaFaqSchemaClaimed) throw new Error(`Multiple FAQ schemas: consolidate accordions on ${publication.route}`);
  state.aiaFaqSchemaClaimed = true;
}
---
<section
  class:list={[
    'blog-faq',
    { 'faq-accordion--source': variant === 'source' },
    { 'faq-accordion--page': variant === 'page' }
  ]}
  aria-labelledby={headingId}
  data-faq-accordion
  data-faq-group={headingId}
  data-source-selector={sourceSelector}
  data-search-selector={searchSelector}
  style={`--faq-icon-color: ${resolvedFaqIconColor}`}
>
  <div class="faq-accordion__inner">
    <header class="blog-faq-heading">
      {label && <h2 id={headingId}>{label}</h2>}
      {variant === 'page'
        ? <h2 id={headingId}>{heading}</h2>
        : <h3 id={!label ? headingId : undefined}>{heading}</h3>}
    </header>
    <div class="blog-faq-list" data-faq-list>
      {items.map((item, index) => (
        <details class="faq" name={headingId} open={index === 0}>
          <summary>
            <span>{item.question}</span>
            <span class="faq-icon" aria-hidden="true"></span>
          </summary>
          <div class="faq-answer">
            <div class="faq-answer__inner" set:html={item.answerHtml || `<p>${item.answer}</p>`} />
          </div>
        </details>
      ))}
    </div>
  </div>
</section>
{schema && <script type="application/ld+json" is:inline set:html={serializeJsonLd(schema)} />}

<script>
  const initFaqAccordions = () => {
    document.querySelectorAll<HTMLElement>('[data-faq-accordion]').forEach((root) => {
      if (root.dataset.faqReady === 'true') {
        return;
      }

      const list = root.querySelector<HTMLElement>('[data-faq-list]');
      if (!list) {
        return;
      }

      const sourceSelector = root.dataset.sourceSelector;
      const groupName = root.dataset.faqGroup || 'faq-accordion';

      if (sourceSelector) {
        const source = document.querySelector<HTMLElement>(sourceSelector);
        if (!source) {
          return;
        }

        const nodes = [...source.childNodes];
        const firstQuestionIndex = nodes.findIndex(
          (node) => node instanceof HTMLElement && node.tagName === 'H3'
        );

        if (firstQuestionIndex === -1) {
          return;
        }

        let index = firstQuestionIndex;
        let openedFirst = false;

        while (index < nodes.length) {
          const node = nodes[index];

          if (!(node instanceof HTMLElement) || node.tagName !== 'H3') {
            index += 1;
            continue;
          }

          const details = document.createElement('details');
          details.className = 'faq';
          details.setAttribute('name', groupName);
          details.open = !openedFirst;

          const summary = document.createElement('summary');
          const title = document.createElement('h3');
          title.textContent = node.textContent?.trim() || '';
          const icon = document.createElement('span');
          icon.className = 'faq-icon';
          icon.setAttribute('aria-hidden', 'true');
          summary.append(title, icon);
          details.appendChild(summary);

          const answer = document.createElement('div');
          answer.className = 'faq-answer interactive-faq-with-seo-schema-integration__list__answer';
          const answerInner = document.createElement('div');
          answerInner.className = 'faq-answer__inner';

          index += 1;
          while (index < nodes.length) {
            const answerNode = nodes[index];
            if (answerNode instanceof HTMLElement && answerNode.tagName === 'H3') {
              break;
            }

            if (answerNode.nodeType === Node.TEXT_NODE) {
              const text = answerNode.textContent?.trim();
              if (text) {
                const paragraph = document.createElement('p');
                paragraph.textContent = text;
                answerInner.appendChild(paragraph);
              }
            } else {
              answerInner.appendChild(answerNode.cloneNode(true));
            }

            answerNode.remove();
            index += 1;
          }

          answer.appendChild(answerInner);
          details.appendChild(answer);
          list.appendChild(details);
          openedFirst = true;
        }

        for (let sourceIndex = firstQuestionIndex; sourceIndex < nodes.length; sourceIndex += 1) {
          nodes[sourceIndex].remove();
        }
      }

      const faqItems = [...list.querySelectorAll<HTMLDetailsElement>('details.faq')];
      if (faqItems.length === 0) {
        return;
      }

      interface FaqAnimation {
        answer: HTMLDivElement;
        frame?: number;
        timer?: number;
        transitionHandler?: (event: TransitionEvent) => void;
      }

      const animations = new WeakMap<HTMLDetailsElement, FaqAnimation>();
      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      const getAnswer = (item: HTMLDetailsElement) =>
        item.querySelector<HTMLDivElement>('.faq-answer');
      const clearAnimation = (item: HTMLDetailsElement) => {
        const animation = animations.get(item);
        if (!animation) {
          return;
        }

        if (animation.frame !== undefined) {
          window.cancelAnimationFrame(animation.frame);
        }
        if (animation.timer !== undefined) {
          window.clearTimeout(animation.timer);
        }
        if (animation.transitionHandler) {
          animation.answer.removeEventListener('transitionend', animation.transitionHandler);
        }

        animations.delete(item);
      };

      const awaitHeightTransition = (
        item: HTMLDetailsElement,
        animation: FaqAnimation,
        onComplete: () => void
      ) => {
        const complete = () => {
          if (animations.get(item) !== animation) {
            return;
          }

          clearAnimation(item);
          onComplete();
        };

        animation.transitionHandler = (event) => {
          if (event.target === animation.answer && event.propertyName === 'height') {
            complete();
          }
        };
        animation.answer.addEventListener('transitionend', animation.transitionHandler);
        animation.timer = window.setTimeout(complete, 360);
      };

      const finishClosing = (item: HTMLDetailsElement, answer: HTMLDivElement) => {
        item.removeAttribute('open');
        item.dataset.state = 'closed';
        answer.style.height = '0px';
      };

      const finishOpening = (item: HTMLDetailsElement, answer: HTMLDivElement) => {
        item.dataset.state = 'open';
        answer.style.height = 'auto';
      };

      const closeItem = (item: HTMLDetailsElement, immediate = false) => {
        if (item.dataset.state === 'closed' || item.dataset.state === 'closing') {
          return;
        }

        const answer = getAnswer(item);
        if (!answer) {
          item.removeAttribute('open');
          item.dataset.state = 'closed';
          return;
        }

        clearAnimation(item);
        const startHeight = answer.getBoundingClientRect().height;
        answer.style.height = `${startHeight}px`;
        answer.offsetHeight;
        item.dataset.state = 'closing';

        if (immediate || reduceMotion || startHeight === 0) {
          finishClosing(item, answer);
          return;
        }

        const animation: FaqAnimation = { answer };
        animations.set(item, animation);
        animation.frame = window.requestAnimationFrame(() => {
          if (animations.get(item) !== animation) {
            return;
          }

          animation.frame = undefined;
          answer.style.height = '0px';
          awaitHeightTransition(item, animation, () => finishClosing(item, answer));
        });
      };

      const openItem = (item: HTMLDetailsElement) => {
        if (item.dataset.state === 'open' || item.dataset.state === 'opening') {
          return;
        }

        const answer = getAnswer(item);
        if (!answer) {
          item.setAttribute('open', '');
          item.dataset.state = 'open';
          return;
        }

        clearAnimation(item);
        const startHeight = item.open ? answer.getBoundingClientRect().height : 0;
        item.setAttribute('open', '');
        answer.style.height = `${startHeight}px`;
        answer.offsetHeight;
        item.dataset.state = 'opening';

        if (reduceMotion) {
          finishOpening(item, answer);
          return;
        }

        const animation: FaqAnimation = { answer };
        animations.set(item, animation);
        animation.frame = window.requestAnimationFrame(() => {
          if (animations.get(item) !== animation) {
            return;
          }

          animation.frame = undefined;
          const targetHeight = answer.scrollHeight;
          answer.style.height = `${targetHeight}px`;

          if (targetHeight === startHeight) {
            clearAnimation(item);
            finishOpening(item, answer);
            return;
          }

          awaitHeightTransition(item, animation, () => finishOpening(item, answer));
        });
      };

      let activeItem: HTMLDetailsElement | null = null;
      faqItems.forEach((item, index) => {
        const answer = getAnswer(item);

        // Keep native name grouping in the server HTML as a no-JavaScript fallback,
        // then let the animation controller own exclusivity after enhancement.
        item.removeAttribute('name');

        if (index === 0 && item.open && answer) {
          activeItem = item;
          item.dataset.state = 'open';
          answer.style.height = 'auto';
        } else {
          item.removeAttribute('open');
          item.dataset.state = 'closed';
          if (answer) {
            answer.style.height = '0px';
          }
        }
      });

      faqItems.forEach((item) => {
        item.querySelector('summary')?.addEventListener('click', (event) => {
          event.preventDefault();
          const isActive = activeItem === item
            && (item.dataset.state === 'open' || item.dataset.state === 'opening');

          if (isActive) {
            activeItem = null;
            closeItem(item);
            return;
          }

          const previousItem = activeItem;
          activeItem = item;
          if (previousItem && previousItem !== item) {
            closeItem(previousItem);
          }
          openItem(item);
        });
      });

      const searchSelector = root.dataset.searchSelector;
      const search = searchSelector
        ? document.querySelector<HTMLInputElement>(searchSelector)
        : null;

      if (search) {
        search.addEventListener('input', () => {
          const query = search.value.trim().toLowerCase();
          faqItems.forEach((item) => {
            const text = item.textContent?.toLowerCase() || '';
            item.hidden = Boolean(query) && !text.includes(query);

            if (item.hidden && item.dataset.state !== 'closed') {
              if (activeItem === item) {
                activeItem = null;
              }
              closeItem(item, true);
            }
          });
        });
      }

      root.dataset.faqReady = 'true';
    });
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initFaqAccordions, { once: true });
  } else {
    initFaqAccordions();
  }
</script>

<style>
  .blog-faq {
    margin-block: 2.5rem 3rem;
  }

  .blog-faq-heading {
    margin-bottom: 1.875rem;
  }

  .blog-faq-heading h2 {
    color: var(--color-accent-strong);
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    margin: 0;
  }

  .blog-faq-heading h3 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    margin: .5rem 0 0;
  }

  .blog-faq-list {
    background: #fcf2e2;
    padding: 1.25rem;
  }

  .faq {
    background: transparent;
    border-bottom: 1px solid var(--color-accent-strong);
    padding: 0;
  }

  .faq:last-child {
    border-bottom: 0;
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 1.875rem;
    justify-content: space-between;
    list-style: none;
    padding: 1rem 0;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary span:first-child {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
  }

  .faq-icon {
    flex: 0 0 auto;
    height: 14px;
    margin-inline-end: .5rem;
    position: relative;
    width: 14px;
  }

  .faq-icon::after {
    border-bottom: 1px solid var(--faq-icon-color, var(--color-accent-strong));
    border-right: 1px solid var(--faq-icon-color, var(--color-accent-strong));
    content: "";
    display: block;
    height: 14px;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
    transition: transform 400ms;
    width: 14px;
  }

  details[open] .faq-icon::after {
    transform: rotate(-135deg);
  }

  .faq[data-state='closing'] .faq-icon::after,
  .faq[data-state='closed'] .faq-icon::after {
    transform: translateY(-50%) rotate(45deg);
  }

  .faq-answer {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-.35rem);
    transition: height .3s ease, margin-bottom .3s ease, opacity .3s ease, transform .3s ease;
  }

  .faq[open] .faq-answer {
    height: auto;
    margin-bottom: 1.25rem;
    opacity: 1;
    transform: translateY(0);
  }

  .faq[data-state='closing'] .faq-answer,
  .faq[data-state='closed'] .faq-answer {
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-.35rem);
  }

  .faq-answer__inner :global(p) {
    margin: 0 0 1rem;
  }

  .faq-accordion--source {
    margin: 0;
  }

  .faq-accordion--source .blog-faq-heading {
    margin-bottom: 1.875rem;
    text-align: center;
  }

  .faq-accordion--source .blog-faq-heading h3 {
    font-size: 2.2rem;
    line-height: 2.8rem;
    margin: 0;
  }

  .faq-accordion--source .blog-faq-list {
    background: transparent;
    padding: 0;
  }

  .faq-accordion--source .faq {
    border-bottom-color: var(--color-accent);
  }

  .faq-accordion--source summary span:first-child {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .faq-accordion--source .faq-answer__inner :global(p) {
    margin-bottom: 0;
  }

  .faq-accordion--source .faq-answer__inner :global(a) {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  .faq-accordion--source .faq-answer__inner :global(a:hover),
  .faq-accordion--source .faq-answer__inner :global(a:focus-visible) {
    color: var(--color-primary-dark);
  }

  .faq-accordion--page {
    background: var(--color-tint);
    margin: 0;
    padding-block: 2rem 4rem;
  }

  .faq-accordion--page .faq-accordion__inner {
    margin-inline: auto;
    padding-inline: 20px;
    width: min(100%, 820px);
  }

  .faq-accordion--page .blog-faq-heading {
    margin-bottom: 1.75rem;
  }

  .faq-accordion--page .blog-faq-heading h2 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 0;
    text-align: center;
  }

  .faq-accordion--page .blog-faq-list {
    background: transparent;
    padding: 1.5rem 1.25rem 1rem;
  }

  .faq-accordion--page :global(.faq) {
    background: transparent;
    border-bottom: 1px solid var(--color-accent-strong);
    padding: 0;
  }

  .faq-accordion--page :global(.faq:last-child) {
    border-bottom: 0;
  }

  .faq-accordion--page :global(.faq[hidden]) {
    display: none;
  }

  .faq-accordion--page :global(summary) {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    list-style: none;
    padding: .875rem 0;
  }

  .faq-accordion--page :global(summary::-webkit-details-marker) {
    display: none;
  }

  .faq-accordion--page :global(summary h3) {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625;
    margin: 0;
  }

  .faq-accordion--page :global(.faq-icon) {
    display: block;
    flex: 0 0 auto;
    height: 12px;
    margin-inline-start: auto;
    position: relative;
    width: 12px;
  }

  .faq-accordion--page :global(.faq-icon::after) {
    border-bottom: 1px solid var(--faq-icon-color, var(--color-accent-strong));
    border-right: 1px solid var(--faq-icon-color, var(--color-accent-strong));
    content: "";
    display: block;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
    transition: transform 300ms ease;
    width: 12px;
  }

  .faq-accordion--page :global(details[open] .faq-icon::after) {
    transform: rotate(-135deg);
  }

  .faq-accordion--page :global(.faq[data-state='closing'] .faq-icon::after),
  .faq-accordion--page :global(.faq[data-state='closed'] .faq-icon::after) {
    transform: translateY(-50%) rotate(45deg);
  }

  .faq-accordion--page :global(.interactive-faq-with-seo-schema-integration__list__answer) {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-.35rem);
    transition: height .3s ease, margin-bottom .3s ease, opacity .3s ease, transform .3s ease;
  }

  .faq-accordion--page :global(.faq[open] .interactive-faq-with-seo-schema-integration__list__answer) {
    margin-bottom: .85rem;
    opacity: 1;
    transform: translateY(0);
  }

  .faq-accordion--page :global(.faq[data-state='closing'] .interactive-faq-with-seo-schema-integration__list__answer),
  .faq-accordion--page :global(.faq[data-state='closed'] .interactive-faq-with-seo-schema-integration__list__answer) {
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-.35rem);
  }

  .faq-accordion--page :global(.faq-answer__inner) {
    padding-bottom: .25rem;
  }

  .faq-accordion--page :global(.faq-answer p) {
    line-height: 1.7;
    margin: 0 0 1rem;
  }

  .faq-accordion--page :global(.faq-answer p:last-child) {
    margin-bottom: 0;
  }

  .faq-accordion--page :global(.faq-answer__inner h4),
  .faq-accordion--page :global(.faq-answer__inner h5) {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 0;
    text-wrap: balance;
  }

  .faq-accordion--page :global(.faq-answer__inner h4) {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1.25rem;
  }

  .faq-accordion--page :global(.faq-answer__inner h5) {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.25rem;
  }

  .faq-accordion--page :global(.faq-answer__inner :where(ul, ol)) {
    margin-block: 0 1.5rem;
    padding-inline-start: 2.5rem;
  }

  .faq-accordion--page :global(.faq-answer__inner :where(ul, ol) :where(ul, ol)) {
    margin-block: .25rem 0;
  }

  .faq-accordion--page :global(.faq-answer__inner li) {
    line-height: 1.625;
    margin-block: 0;
    padding-inline-start: .15rem;
  }

  .faq-accordion--page :global(.faq-answer__inner li > p) {
    margin-block: 0;
  }

  .faq-accordion--page :global(.faq-answer__inner ul > li::marker) {
    color: var(--color-accent-strong);
  }

  .faq-accordion--page :global(.faq-answer__inner ol > li::marker) {
    color: var(--color-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-answer,
    .faq-icon::after,
    .faq-accordion--page :global(.interactive-faq-with-seo-schema-integration__list__answer),
    .faq-accordion--page :global(.faq-icon::after) {
      transition-duration: .01ms;
    }
  }

  @media (max-width: 767px) {
    .faq-accordion--source .blog-faq-heading h3 {
      font-size: 1.875rem;
      line-height: 2.375rem;
    }

    .faq-accordion--source summary span:first-child {
      font-size: 1.375rem;
      line-height: 1.5rem;
    }
  }

  @media (min-width: 768px) {
    .blog-faq {
      margin-bottom: 3.125rem;
    }

    .blog-faq-list {
      padding: 2.5rem;
    }

    .faq-accordion--source {
      margin-bottom: 0;
    }

    .faq-accordion--source .blog-faq-list {
      padding: 0;
    }

    .faq-accordion--page .blog-faq-heading {
      margin-bottom: 2rem;
    }

    .faq-accordion--page .blog-faq-list {
      padding: 2.5rem 2rem 1.5rem;
    }
  }
</style>