export function esc(value) {
  return String(value ?? '')
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

export function cleanText(value) {
  return String(value ?? '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
}

function renderLinks(links = []) {
  const items = links
    .filter(item => item?.href && item?.label)
    .slice(0, 24)
    .map(item => `<li><a href="${esc(item.href)}">${esc(item.label)}</a>${item.text ? `<span>${esc(item.text)}</span>` : ''}</li>`)
    .join('');
  return items ? `<ul class="static-fallback__links">${items}</ul>` : '';
}

function renderFacts(facts = []) {
  const items = facts
    .filter(item => item?.label && item?.value)
    .slice(0, 12)
    .map(item => `<li><strong>${esc(item.label)}</strong><span>${esc(item.value)}</span></li>`)
    .join('');
  return items ? `<ul class="static-fallback__facts">${items}</ul>` : '';
}

export function renderStaticFallback({ eyebrow, title, description, bodyHtml, facts, links, sections } = {}) {
  const renderedSections = (sections ?? [])
    .filter(section => section?.title || section?.text)
    .slice(0, 8)
    .map(section => `
        <section>
          ${section.title ? `<h2>${esc(section.title)}</h2>` : ''}
          ${section.text ? `<p>${esc(section.text)}</p>` : ''}
          ${renderLinks(section.links)}
        </section>`)
    .join('');

  return `<section id="static-fallback" class="static-fallback" aria-label="محتوای اصلی صفحه">
    <main class="static-fallback__inner">
      ${eyebrow ? `<p class="static-fallback__eyebrow">${esc(eyebrow)}</p>` : ''}
      ${title ? `<h1>${esc(title)}</h1>` : ''}
      ${description ? `<p class="static-fallback__lead">${esc(description)}</p>` : ''}
      ${renderFacts(facts)}
      ${renderLinks(links)}
      ${bodyHtml ? `<article class="static-fallback__article">${bodyHtml}</article>` : ''}
      ${renderedSections}
    </main>
  </section>`;
}

export function replaceStaticFallback(html, fallbackHtml) {
  const fallbackPattern = /<section id="static-fallback"[\s\S]*?<\/section>\s*(?=<div id="root"><\/div>)/;
  if (fallbackPattern.test(html)) {
    return html.replace(fallbackPattern, `${fallbackHtml}\n\n  `);
  }
  return html.replace('<div id="root"></div>', `${fallbackHtml}\n\n  <div id="root"></div>`);
}