(function () {
  const roots = document.querySelectorAll('[data-normativa-app]');

  if (!roots.length) {
    return;
  }

  const baseUrl = 'https://web-flax-pi.vercel.app';
  const documents = [
    {
      id: 'res-0659-2025',
      title: 'Resolución No. 0659 de 2025',
      category: 'Resolución',
      description: '"Por lo cual se autoriza modificar la resolución 1500-67.10/1616 del 22 de septiembre de 2021, artículo primero, por el cambio de Dirección a la Institución de Educación para el Trabajo y el Desarrollo Humano denominada: CENTRO DE IDIOMAS DE LA UNIVERSIDAD DE LOS LLANOS, en el Municipio de Villavicencio"',
      pdfPath: '/docs/normativa/res-0659-2025.pdf'
    },
    {
      id: 'res-2337-2023',
      title: 'Resolución 1500 - 67.10/2337 del 25 de octubre de 2023',
      category: 'Resolución',
      description: '"Por lo cual se concede el registro de seis (6) Programas de Formación Académica a la Institución de Educación para el Trabajo y el Desarrollo Humano denominada: CENTRO DE IDIOMAS DE LA UNIVERSIDAD DE LOS LLANOS, en el municipio de Villavicencio."',
      pdfPath: '/docs/normativa/res-2337-2023.pdf'
    },
    {
      id: 'res-2338-2023',
      title: 'Resolución 1500 - 67.10/2338 del 25 de octubre de 2023',
      category: 'Resolución',
      description: '"Por la cual se concede la Renovación de treinta y siete (37) Programas de Formación Académica a la Institución de Educación para el Trabajo y el Desarrollo Humano denominada: CENTRO DE IDIOMAS DE LA UNIVERSIDAD DE LOS LLANOS, en el municipio de Villavicencio."',
      pdfPath: '/docs/normativa/res-2338-2023.pdf'
    },
    {
      id: 'res-3584-2019',
      title: 'Resolución 3584 del 2019',
      category: 'Resolución',
      description: '"Por medio del cual se autoriza el registro de unos programas de formación académica al Centro de Idiomas de la Universidad de Los Llanos - Sede Granada - Meta"',
      pdfPath: '/docs/normativa/res-3584-2019.pdf'
    },
    {
      id: 'res-3585-2019',
      title: 'Resolución 3585 del 2019',
      category: 'Resolución',
      description: '"Por medio del cual se autoriza la renovación de unos programas de formación académica al Centro de Idiomas de la Universidad de Los Llanos - Sede Granada - Meta"',
      pdfPath: '/docs/normativa/res-3585-2019.pdf'
    },
    {
      id: 'res-3586-2019',
      title: 'Resolución 3586 del 2019',
      category: 'Resolución',
      description: '"Por medio del cual se autoriza el registro de unos programas de formación académica al Centro de Idiomas de la Universidad de Los Llanos - Sede San Martín - Meta"',
      pdfPath: '/docs/normativa/res-3586-2019.pdf'
    },
    {
      id: 'res-aclaratorias-2024',
      title: 'Resoluciones Aclaratorias de Fechas (2024)',
      category: 'Aclaración',
      description: 'Aclaraciones a resoluciones anteriores.',
      pdfPath: '/docs/normativa/res-aclaratorias-2024.pdf',
      subItems: [
        {
          title: 'RESOLUCIÓN N° 5412 DE 2024',
          description: '"Por la cual se aclara la Resolución 3585 de 2024"'
        },
        {
          title: 'RESOLUCIÓN N° 5413 DE 2024',
          description: '"Por la cual se aclara la Resolución 3586 de 2024"'
        },
        {
          title: 'RESOLUCIÓN N° 5411 DE 2024',
          description: '"Por la cual se aclara la Resolución 3584 de 2024"'
        }
      ]
    },
    {
      id: 'acuerdo-008-2023',
      title: 'ACUERDO SUPERIOR No. 008 DE 2023',
      category: 'Acuerdo',
      description: '"Por medio de la cual se reglamenta la reserva y devolución de dineros por concepto de matrículas del Centro de Idiomas de la Universidad de los Llanos, bajo la modalidad del servicio público de educación para el trabajo y desarrollo humano"',
      pdfPath: '/docs/normativa/acuerdo-008-2023.pdf'
    },
    {
      id: 'acuerdo-003-2023',
      title: 'ACUERDO SUPERIOR N° 003 DE 2023',
      category: 'Acuerdo',
      description: '"Por el cual se establecen las estrategias para el desarrollo de competencias comunicativas en un segundo idioma en estudiantes - Plan de Bilingüismo Universidad de los Llanos BULL"',
      pdfPath: '/docs/normativa/acuerdo-003-2023.pdf'
    },
    {
      id: 'acuerdo-011-2025',
      title: 'ACUERDO ACADEMICO N° 011 DE 2025',
      category: 'Acuerdo',
      description: '“Por el cual se establecen las estrategias para acreditar la suficiencia y el desarrollo de competencias comunicativas en un segundo idiomas en estudiantes de posgrado de la Universidad de los Llanos”',
      pdfPath: '/docs/normativa/acuerdo-011-2025.pdf'
    },
    {
      id: 'acuerdo-015-2025',
      title: 'ACUERDO ACADEMICO N° 015 DE 2025',
      category: 'Acuerdo',
      description: '“Por el cual se adiciona el parágrafo 3 al artículo 8 del Acuerdo Académico No. 003 de 2023”',
      pdfPath: '/docs/normativa/acuerdo-015-2025.pdf'
    },
    {
      id: 'acta-sanitaria-0497-2025',
      title: 'Acta Sanitaria N°0497 de 2025',
      category: 'Acta',
      description: '"Acta de inspección, vigencia y control sanitario establecimientos educativos N°0497 del 07 de Abril de 2025"',
      pdfPath: '/docs/normativa/acta-sanitaria-0497-2025.pdf'
    }
  ].map((item) => ({
    ...item,
    pdfUrl: `${baseUrl}${item.pdfPath}`
  }));

  const sigLinks = [
    {
      title: 'Sistema Integrado de Gestión de la Universidad',
      description: 'Consulta el Sistema Integrado de Gestión de la Universidad de los Llanos.',
      href: 'https://sig.unillanos.edu.co/'
    },
    {
      title: 'Política de Seguridad de la Información',
      description: 'Acuerdo Superior 002 de 2019 publicado por el Sistema Integrado de Gestión.',
      href: 'https://sig.unillanos.edu.co/phocadownload/ACUERDO%20SUPERIOR%20002%20DE%202019.pdf'
    }
  ];

  const policyLinks = [
    {
      title: 'Estatuto sobre Propiedad Intelectual',
      href: 'https://drive.google.com/file/d/0BwmLeW3ZlZXteFFXX0ZEOUpaQkpXQnpmYm9uMlVYZEd0WFlz/view?resourcekey=0-U9NwKW-81SLRPCyRPRnDMw'
    },
    {
      title: 'Política de Tratamiento y Protección de Datos Personales',
      href: 'https://drive.google.com/file/d/0BwmLeW3ZlZXtR0QxeWRNanVNOG1GOER6SkRsaUFtM0NuYmVZ/view?resourcekey=0-KI2mtnlNcRK7boQVeZiJYQ'
    }
  ];

  const iconForCategory = {
    Resolución: 'fa-gavel',
    Aclaración: 'fa-check-square-o',
    Acuerdo: 'fa-university',
    Acta: 'fa-file-text-o'
  };

  const renderDocument = (doc, index) => {
    const subItems = (doc.subItems || []).map((subItem) => `
      <li>
        <strong>${subItem.title}</strong>
        <span>${subItem.description}</span>
      </li>`).join('');

    return `
      <article class="idioma-normativa-card" data-normativa-card data-doc-id="${doc.id}" style="--delay:${index * 55}ms">
        <div class="idioma-normativa-card__main">
          <span class="idioma-normativa-card__icon" aria-hidden="true"><i class="fa ${iconForCategory[doc.category] || 'fa-file-pdf-o'}"></i></span>
          <span class="idioma-normativa-card__content">
            <span class="idioma-normativa-card__meta">${doc.category}</span>
            <span class="idioma-normativa-card__title">${doc.title}</span>
            <span class="idioma-normativa-card__text">${doc.description}</span>
          </span>
        </div>
        ${subItems ? `<ul class="idioma-normativa-card__subitems">${subItems}</ul>` : ''}
        <div class="idioma-normativa-card__actions">
          <button class="idioma-normativa-btn idioma-normativa-btn--primary" type="button" data-normativa-select="${doc.id}">
            <i class="fa fa-search" aria-hidden="true"></i>
            Visualizar
          </button>
          <a class="idioma-normativa-btn idioma-normativa-btn--ghost" href="${doc.pdfUrl}" target="_blank" rel="noopener noreferrer">
            <i class="fa fa-external-link" aria-hidden="true"></i>
            Ver Documento
          </a>
        </div>
      </article>`;
  };

  const render = (root) => {
    root.innerHTML = `
      <section class="idioma-normativa" aria-labelledby="idioma-normativa-title">
        <div class="idioma-normativa__grain" aria-hidden="true"></div>
        <header class="idioma-normativa__hero idioma-normativa-reveal">
          <span class="idioma-normativa__eyebrow"><i class="fa fa-balance-scale" aria-hidden="true"></i> Marco institucional</span>
          <h1 id="idioma-normativa-title">Normativa del Centro de Idiomas</h1>
          <p>Documentos, resoluciones y acuerdos que rigen el funcionamiento y los procesos académicos del Centro de Idiomas de la Universidad de los Llanos.</p>
        </header>

        <div class="idioma-normativa__layout">
          <section class="idioma-normativa__list idioma-normativa-reveal" aria-label="Documentos normativos">
            <div class="idioma-normativa__section-head">
              <span>Documentos oficiales</span>
              <strong>${documents.length} archivos PDF</strong>
            </div>
            <div class="idioma-normativa__cards">
              ${documents.map(renderDocument).join('')}
            </div>
          </section>

          <aside class="idioma-normativa__viewer" data-normativa-viewer role="dialog" aria-modal="true" aria-label="Visualizador de documentos PDF" hidden>
            <div class="idioma-normativa-viewer">
              <div class="idioma-normativa-viewer__head">
                <button class="idioma-normativa-viewer__close" type="button" data-normativa-close aria-label="Cerrar vista previa">
                  <i class="fa fa-times" aria-hidden="true"></i>
                </button>
                <span class="idioma-normativa-viewer__badge"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Vista previa</span>
                <h2 data-normativa-viewer-title></h2>
                <p data-normativa-viewer-desc></p>
                <div class="idioma-normativa-viewer__actions">
                  <a class="idioma-normativa-btn idioma-normativa-btn--primary" data-normativa-open href="#" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-external-link" aria-hidden="true"></i>
                    Abrir PDF
                  </a>
                  <button class="idioma-normativa-btn idioma-normativa-btn--ghost" type="button" data-normativa-fullscreen>
                    <i class="fa fa-expand" aria-hidden="true"></i>
                    Ampliar
                  </button>
                </div>
              </div>
              <div class="idioma-normativa-viewer__frame-wrap">
                <iframe class="idioma-normativa-viewer__frame" data-normativa-frame title="Vista previa del documento seleccionado" hidden></iframe>
              </div>
            </div>
          </aside>
        </div>

        <section class="idioma-normativa__support idioma-normativa-reveal" aria-label="Enlaces institucionales relacionados">
          <div class="idioma-normativa__support-copy">
            <span class="idioma-normativa__eyebrow"><i class="fa fa-link" aria-hidden="true"></i> Enlaces institucionales</span>
            <h2>Sistema Integrado de Gestión de la Universidad</h2>
            <p>El PECI ha sido actualizado y aprobado de acuerdo a los requisitos aplicables y la normativa vigente. Su aprobación se realizó mediante el Acta de Comité de Centro N°21 el 6 de diciembre de 2023.</p>
          </div>
          <div class="idioma-normativa__support-grid">
            ${sigLinks.map((link) => `
              <a class="idioma-normativa-linkcard" href="${link.href}" target="_blank" rel="noopener noreferrer">
                <span><i class="fa fa-external-link" aria-hidden="true"></i></span>
                <strong>${link.title}</strong>
                <small>${link.description}</small>
              </a>`).join('')}
            ${policyLinks.map((link) => `
              <a class="idioma-normativa-linkcard" href="${link.href}" target="_blank" rel="noopener noreferrer">
                <span><i class="fa fa-shield" aria-hidden="true"></i></span>
                <strong>${link.title}</strong>
                <small>Documento institucional de consulta pública.</small>
              </a>`).join('')}
          </div>
        </section>
      </section>`;

    const frame = root.querySelector('[data-normativa-frame]');
    const openLink = root.querySelector('[data-normativa-open]');
    const title = root.querySelector('[data-normativa-viewer-title]');
    const desc = root.querySelector('[data-normativa-viewer-desc]');
    const cards = Array.from(root.querySelectorAll('[data-normativa-card]'));
    const fullscreenButton = root.querySelector('[data-normativa-fullscreen]');
    const closeButton = root.querySelector('[data-normativa-close]');
    const normativa = root.querySelector('.idioma-normativa');
    const viewerShell = root.querySelector('[data-normativa-viewer]');
    const viewer = root.querySelector('.idioma-normativa-viewer');

    document.body.appendChild(viewerShell);

    const selectDoc = (id) => {
      const doc = documents.find((item) => item.id === id);

      if (!doc) {
        return;
      }

      cards.forEach((card) => {
        card.classList.toggle('is-active', card.getAttribute('data-doc-id') === id);
      });
      title.textContent = doc.title;
      desc.textContent = doc.description;
      openLink.href = doc.pdfUrl;
      frame.title = doc.title;
      frame.src = `${doc.pdfUrl}#zoom=page-width&pagemode=none`;
      frame.hidden = false;
      viewerShell.hidden = false;
      normativa.classList.add('has-preview');
    };

    const closePreview = () => {
      cards.forEach((card) => card.classList.remove('is-active'));
      normativa.classList.remove('has-preview');
      viewerShell.hidden = true;
      frame.hidden = true;
      frame.removeAttribute('src');
      title.textContent = '';
      desc.textContent = '';
      openLink.href = '#';
    };

    root.addEventListener('click', (event) => {
      const trigger = event.target.closest('[data-normativa-select]');

      if (!trigger) {
        return;
      }

      selectDoc(trigger.getAttribute('data-normativa-select'));
    });

    fullscreenButton.addEventListener('click', () => {
      if (viewer.requestFullscreen) {
        viewer.requestFullscreen();
      } else {
        openLink.click();
      }
    });

    closeButton.addEventListener('click', closePreview);

    viewerShell.addEventListener('click', (event) => {
      if (event.target === viewerShell) {
        closePreview();
      }
    });

    root.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && !viewerShell.hidden) {
        closePreview();
      }
    });

    const observer = 'IntersectionObserver' in window ? new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.16 }) : null;

    root.querySelectorAll('.idioma-normativa-reveal, [data-normativa-card]').forEach((item) => {
      if (observer) {
        observer.observe(item);
      } else {
        item.classList.add('is-visible');
      }
    });

    requestAnimationFrame(() => normativa.classList.add('is-ready'));
  };

  roots.forEach(render);
}());