<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MultiSearch Tag Explorer</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      margin: 0; padding: 2rem;
      background: linear-gradient(145deg, #eef2f7, #ffffff);
      color: #2c3e50; min-height: 100vh;
      display: flex; flex-direction: column; align-items: center;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #1a1a1a;
      text-align: center;
      line-height: 1.2;
    }
    form#searchForm {
      display: flex;
      max-width: 420px;
      width: 100%;
      margin: 1rem auto 2rem auto;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    #searchBox {
      flex-grow: 1;
      padding: 0.6rem 1rem;
      font-size: 1rem;
      border: none;
      outline: none;
    }
    #searchBox::placeholder {
      color: #999;
    }
    button[type="submit"] {
      background: #1a73e8;
      border: none;
      color: #fff;
      font-size: 1rem;
      padding: 0 1.2rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      user-select: none;
    }
    button[type="submit"]:hover,
    button[type="submit"]:focus {
      background: #155ab6;
      outline: none;
    }
    #searchResults {
      max-width: 420px;
      width: 100%;
      color: #2c3e50;
    }
    #searchResults a {
      font-weight: 600;
      color: #1a73e8;
      text-decoration: none;
    }
    #searchResults a:hover,
    #searchResults a:focus {
      text-decoration: underline;
      outline: none;
    }
    #searchResults div.result-item {
      margin-bottom: 1rem;
      background: #fff;
      padding: 0.75rem 1rem;
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    #searchResults p.description {
      margin: 0.25rem 0 0.5rem 0;
      color: #444;
      font-size: 0.9rem;
      line-height: 1.3;
    }
    #searchResults div.tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    #searchResults div.tags a {
      background: #e8f0fe;
      color: #1a73e8;
      padding: 0.15rem 0.6rem;
      font-size: 0.85rem;
      border-radius: 12px;
      text-decoration: none;
      user-select: none;
      white-space: nowrap;
      transition: background-color 0.3s ease;
    }
    #searchResults div.tags a:hover,
    #searchResults div.tags a:focus {
      background-color: #c3dafd;
      outline: none;
    }
    @media (max-width: 480px) {
      body {
        padding: 1rem;
      }
      h1 {
        font-size: 1.5rem;
      }
      form#searchForm {
        max-width: 100%;
      }
      #searchResults {
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>MultiSearch Tag Explorer</h1>
  <form id="searchForm" role="search" aria-label="Wikipedia search form">
    <input
      id="searchBox"
      type="search"
      name="q"
      placeholder="Search…"
      aria-label="Search Wikipedia"
      autocomplete="off"
      spellcheck="false"
      required
    />
    <button type="submit" aria-label="Submit search">Go</button>
  </form>
  <div id="searchResults" role="region" aria-live="polite" aria-atomic="true"></div>
  <script>
    const searchForm = document.getElementById('searchForm');
    const searchBox = document.getElementById('searchBox');
    const resultsDiv = document.getElementById('searchResults');
    const language = 'en';
    const defaultFallback = 'Technology';
    function decodeHTML(html) {
      const txt = document.createElement('textarea');
      txt.innerHTML = html;
      return txt.value;
    }
    function escapeHTML(str) {
      return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }
    function extractTags(title) {
      const parts = title.split(/[^0-9\p{L}]+/u);
      return parts.filter(w => w.length > 1);
    }
    async function getLiveStartingTag() {
      const url = `https://${language}.wikipedia.org/w/api.php?action=query&list=recentchanges&rcnamespace=0&rclimit=5&rcprop=title|timestamp&rctype=edit&format=json&origin=*`;
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error();
        const data = await res.json();
        const changes = data.query?.recentchanges || [];
        for (let change of changes) {
          const fullTitle = decodeHTML(change.title).trim();
          if (fullTitle.length > 0 && !fullTitle.includes(':')) {
            return fullTitle; 
          }
        }
        return defaultFallback;
      } catch (e) {
        console.error("");
        return defaultFallback;
      }
    }
    function updateURLQuery(query) {
      const newUrl = new URL(window.location);
      if (query) {
        newUrl.searchParams.set('q', query);
      } else {
        newUrl.searchParams.delete('q');
      }
      history.pushState(null, '', newUrl);
    }
    function updateTitle(query) {
      if (query) {
        document.title = `${query}`;
      } else {
        document.title = '';
      }
    }
    async function performSearch(query) {
      updateTitle(query);
      resultsDiv.textContent = '';
      const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(query)}&format=json&origin=*`;
      try {
        const res = await fetch(apiUrl);
        if (!res.ok) throw new Error('Network error');
        const data = await res.json();
        if (!data.query || data.query.search.length === 0) {
          if (query.toLowerCase() !== defaultFallback.toLowerCase()) {
            console.warn(`"${query}" "${defaultFallback}"...`);
            searchBox.value = defaultFallback;
            updateURLQuery(defaultFallback);
            performSearch(defaultFallback);
          } else {
            resultsDiv.textContent = '';
          }
          return;
        }
        resultsDiv.innerHTML = data.query.search
          .map(item => {
            const cleanTitle = decodeHTML(item.title);
            const rawSnippet = item.snippet.replace(/<\/?span[^>]*>/g, '');
            const cleanSnippet = decodeHTML(rawSnippet);
            const tags = extractTags(cleanTitle);
            const safeTitle = escapeHTML(cleanTitle);
            const safeSnippet = escapeHTML(cleanSnippet);
            const tagsHtml = tags.map(tag => {
              const encodedTag = encodeURIComponent(tag);
              return `<a href="?q=${encodedTag}" class="tag-link" aria-label="Search for tag ${tag}">${escapeHTML(tag)}</a>`;
            }).join(' ');
            return `<div class="result-item">
              <a href="?q=${encodeURIComponent(cleanTitle)}" class="tag-link result-title" style="font-size: 1.2em; font-weight: bold; text-decoration: none;">${safeTitle}</a>
              <p class="description">${safeSnippet}...</p>
              <div class="tags" aria-label="Tags">${tagsHtml}</div>
            </div>`;
          })
          .join('');
      } catch (e) {
        resultsDiv.textContent = 'Error during search.';
        console.error(e);
      }
    }
    searchForm.addEventListener('submit', e => {
      e.preventDefault();
      const query = searchBox.value.trim();
      if (query.length === 0) {
        resultsDiv.textContent = '';
        updateURLQuery('');
        updateTitle('');
        return;
      }
      updateURLQuery(query);
      performSearch(query);
    });
    resultsDiv.addEventListener('click', e => {
      if (e.target.classList.contains('tag-link')) {
        e.preventDefault();
        const urlParams = new URLSearchParams(e.target.search);
        const tagQuery = urlParams.get('q');
        if (tagQuery) {
          searchBox.value = tagQuery;
          updateURLQuery(tagQuery);
          performSearch(tagQuery);
        }
      }
    });
    window.addEventListener('popstate', () => {
      const urlParams = new URLSearchParams(window.location.search);
      const q = urlParams.get('q') || '';
      searchBox.value = q;
      if (q) {
        performSearch(q);
      } else {
        resultsDiv.textContent = '';
        updateTitle('');
      }
    });
    window.addEventListener('DOMContentLoaded', async () => {
      const urlParams = new URLSearchParams(window.location.search);
      const q = urlParams.get('q');
      if (q) {
        searchBox.value = q;
        performSearch(q);
      } else {
        resultsDiv.textContent = '';
        const liveExpression = await getLiveStartingTag();
        searchBox.value = liveExpression;
        performSearch(liveExpression);
      }
    });
  </script>
  <footer style="margin-top: 0; padding: 1rem; text-align: center; color: #888; font-size: 0.9rem; user-select: none; background-color: #f9f9f9; border-top: 1px solid #eee;">
  <div style="margin-bottom: 0.5rem;">
    &copy; aéPiot - MultiSearch Tag Explorer. All rights reserved.
  </div>
  <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem; font-size: 0.85rem;">
    <a href="https://headlines-world.com/" target="_self" style="color: #555; text-decoration: none; transition: color 0.3s;">Headlines World</a>
    <a href="https://aepiot.com/" target="_self" style="color: #555; text-decoration: none; transition: color 0.3s;">aéPiot.com</a>
    <a href="https://aepiot.ro/" target="_self" style="color: #555; text-decoration: none; transition: color 0.3s;">aéPiot.ro</a>
    <a href="https://allgraph.ro/" target="_self" style="color: #555; text-decoration: none; transition: color 0.3s;">allGraph</a>
  </div>
  </footer>
</body>
</html>