<?php
declare(strict_types=1);

require_once __DIR__ . '/nav.php';

/**
 * Renderiza la lista principal reutilizable para desktop y drawer.
 */
function renderNavList(array $items): void
{
    $current = currentPath();

    foreach ($items as $item) {
        $href = (string) $item['href'];
        $text = (string) $item['text'];
        $iconName = (string) $item['icon'];
        $isExternal = !empty($item['external']);

        $base = basename(parse_url($href, PHP_URL_PATH) ?? $href);
        $active = ($base === $current) ? ' is-active' : '';

        echo '<li>';
        echo '<a class="nav-link' . $active . '" href="' . htmlspecialchars($href, ENT_QUOTES, 'UTF-8') . '"' . navTargetAttributes($isExternal) . '>';
        echo '<span class="nav-ico" aria-hidden="true">' . icon($iconName) . '</span>';
        echo '<span class="nav-link__text">' . htmlspecialchars($text, ENT_QUOTES, 'UTF-8') . '</span>';
        if ($isExternal) {
            echo '<span class="nav-link__external" aria-hidden="true">' . icon('arrow-up-right') . '</span>';
        }
        echo '</a>';
        echo '</li>';
    }
}

function renderQuickLinks(array $items, string $listClass = 'u-quicklinks__list'): void
{
    echo '<ul class="' . htmlspecialchars($listClass, ENT_QUOTES, 'UTF-8') . '">';

    foreach ($items as $item) {
        $href = (string) $item['href'];
        $text = (string) $item['text'];
        $iconName = (string) $item['icon'];
        $isExternal = !empty($item['external']);

        echo '<li>';
        echo '<a class="u-quicklinks__link" href="' . htmlspecialchars($href, ENT_QUOTES, 'UTF-8') . '"' . navTargetAttributes($isExternal) . '>';
        echo '<span class="u-quicklinks__icon" aria-hidden="true">' . icon($iconName) . '</span>';
        echo '<span class="u-quicklinks__text">' . htmlspecialchars($text, ENT_QUOTES, 'UTF-8') . '</span>';
        if ($isExternal) {
            echo '<span class="u-quicklinks__external" aria-hidden="true">' . icon('arrow-up-right') . '</span>';
        }
        echo '</a>';
        echo '</li>';
    }

    echo '</ul>';
}

function renderHeaderSocialLinks(array $items, string $extraClass = ''): void
{
    $className = trim('u-socials ' . $extraClass);
    echo '<div class="' . htmlspecialchars($className, ENT_QUOTES, 'UTF-8') . '" aria-label="Redes oficiales">';

    foreach ($items as $item) {
        $label = (string) $item['label'];
        $href = (string) $item['href'];
        $iconName = (string) $item['icon'];
        $network = (string) $item['network'];

        echo '<a class="u-social u-social--' . htmlspecialchars($network, ENT_QUOTES, 'UTF-8') . '"';
        echo ' href="' . htmlspecialchars($href, ENT_QUOTES, 'UTF-8') . '" target="_blank" rel="noopener noreferrer"';
        echo ' aria-label="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '" title="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '">';
        echo '<span class="u-social__icon" aria-hidden="true">' . icon($iconName) . '</span>';
        echo '</a>';
    }

    echo '</div>';
}
?>

<header class="u-header">
  <div class="u-topline"></div>

  <div class="u-utility">
    <div class="u-utility__inner">
      <nav class="u-quicklinks" aria-label="Accesos rápidos">
        <?php renderQuickLinks($UTILITY_ITEMS); ?>
      </nav>

      <div class="u-utility__actions">
        <?php renderHeaderSocialLinks($SOCIAL_LINKS); ?>

        <button
          class="u-search-toggle"
          id="uSearchToggle"
          type="button"
          aria-label="Abrir buscador del sitio"
          aria-expanded="false"
          aria-controls="uSearchDialog"
          data-site-search-toggle
        >
          <span class="u-search-toggle__icon" aria-hidden="true"><?= icon('search') ?></span>
          <span class="u-search-toggle__label">Buscar</span>
        </button>
      </div>
    </div>
  </div>

  <div class="u-bar" id="uBar">
    <div class="u-bar__inner">
      <a
        class="u-brand has-tooltip"
        href="https://www.unillanos.edu.co/"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Universidad de los Llanos"
      >
        <img src="imagenes/horizontal.jpg" alt="Universidad de los Llanos">
        <span class="tooltip">Ir al sitio oficial de la Universidad de los Llanos</span>
      </a>

      <nav class="u-nav" aria-label="Menú principal">
        <ul>
          <?php renderNavList($NAV_ITEMS); ?>
        </ul>
      </nav>

      <button class="u-burger" id="uBurger" type="button" aria-label="Abrir menú" aria-expanded="false" aria-controls="uDrawer">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>

  <div class="u-drawer-shell" id="uDrawerShell" aria-hidden="true">
    <button class="u-drawer__backdrop" type="button" data-drawer-close aria-label="Cerrar menú"></button>

    <nav id="uDrawer" class="u-drawer" aria-label="Menú móvil" tabindex="-1">
      <div class="u-drawer__top">
        <a
          class="u-brand u-brand--drawer"
          href="https://www.unillanos.edu.co/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Universidad de los Llanos"
        >
          <img src="imagenes/horizontal.jpg" alt="Universidad de los Llanos">
        </a>

        <button class="u-drawer__close" type="button" data-drawer-close aria-label="Cerrar menú">
          <span></span>
          <span></span>
        </button>
      </div>

      <div class="u-drawer__block">
        <button
          class="u-search-toggle u-search-toggle--drawer"
          type="button"
          aria-label="Abrir buscador del sitio"
          aria-expanded="false"
          aria-controls="uSearchDialog"
          data-site-search-toggle
        >
          <span class="u-search-toggle__icon" aria-hidden="true"><?= icon('search') ?></span>
          <span class="u-search-toggle__label">Buscar contenido</span>
        </button>
      </div>

      <div class="u-drawer__block">
        <p class="u-drawer__label">Accesos rápidos</p>
        <?php renderQuickLinks($UTILITY_ITEMS, 'u-quicklinks__list u-quicklinks__list--drawer'); ?>
      </div>

      <div class="u-drawer__block">
        <p class="u-drawer__label">Menú principal</p>
        <ul class="u-drawer__menu">
          <?php renderNavList($NAV_ITEMS); ?>
        </ul>
      </div>

      <div class="u-drawer__block">
        <p class="u-drawer__label">Redes sociales</p>
        <?php renderHeaderSocialLinks($SOCIAL_LINKS, 'u-socials--drawer'); ?>
      </div>
    </nav>
  </div>

  <div class="u-search-overlay" id="uSearchDialog" hidden>
    <div class="u-search-overlay__backdrop" data-site-search-close></div>

    <section class="u-search-panel" role="dialog" aria-modal="true" aria-labelledby="uSearchTitle">
      <button class="u-search-panel__close" type="button" aria-label="Cerrar buscador" data-site-search-close>
        <span></span>
        <span></span>
      </button>

      <div class="u-search-panel__copy">
        <p class="u-search-panel__eyebrow">Explora Biblioteca Unillanos</p>
        <h2 id="uSearchTitle">Buscar contenido del sitio</h2>
        <p class="u-search-panel__lead">Encuentra páginas, recursos, tutoriales, sedes, servicios y accesos institucionales desde un solo lugar.</p>
      </div>

      <label class="u-search-field" for="uSiteSearchInput">
        <span class="u-search-field__icon" aria-hidden="true"><?= icon('search') ?></span>
        <input
          id="uSiteSearchInput"
          type="search"
          autocomplete="off"
          placeholder="Busca recursos, tutoriales, sedes o servicios"
        >
      </label>

      <p class="u-search-status" id="uSearchStatus">Escribe un término para buscar dentro de todo el sitio.</p>
      <div class="u-search-results" id="uSearchResults" aria-live="polite"></div>
    </section>
  </div>
</header>