/**
 * OSINT Suite - Shared Navigation Bar
 * Reads from apps.json for single source of truth
 * Include with: <script src="https://assets.tools.ejfox.com/nav.js"></script>
 */
(function() {
  const APPS_JSON = 'https://assets.tools.ejfox.com/apps.json';
  const currentHost = window.location.hostname;
  const currentApp = currentHost.split('.')[0];

  // Inject favicon if not present
  if (!document.querySelector('link[rel="icon"]')) {
    const link = document.createElement('link');
    link.rel = 'icon';
    link.type = 'image/svg+xml';
    link.href = 'https://assets.tools.ejfox.com/favicon.svg';
    document.head.appendChild(link);
  }

  // Zulu time helpers
  const zulu = () => new Date().toISOString().slice(11, 16).replace(':', '') + 'Z';
  const zuluFull = () => new Date().toISOString().slice(11, 19).replace(/:/g, '') + 'Z';

  // Session ID (persistent per tab)
  const sessionId = sessionStorage.getItem('osint-session') ||
    (() => {
      const id = Date.now().toString(16).slice(-6).toUpperCase() + '-' +
                 Math.random().toString(16).slice(2, 6).toUpperCase();
      sessionStorage.setItem('osint-session', id);
      return id;
    })();

  fetch(APPS_JSON)
    .then(r => r.json())
    .then(data => {
      const domain = data.domain;
      const navCategories = data.categories.filter(c => c.nav);

      const nav = document.createElement('nav');
      nav.id = 'osint-nav';
      nav.innerHTML = `
        <style>
          #osint-nav {
            font-family: var(--font-mono, 'Monaspace Krypton'), Consolas, monospace;
            font-size: 10px;
            background: var(--bg-muted, #f5f5f5);
            border-bottom: 1px solid var(--border, #ccc);
            padding: 6px 16px;
            margin: -20px -20px 20px -20px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 16px;
            align-items: center;
          }
          #osint-nav a { color: var(--link, #0000EE); text-decoration: underline; }
          #osint-nav a.current { font-weight: bold; color: var(--text, #111); }
          #osint-nav .nav-home { font-weight: bold; margin-right: 4px; }
          #osint-nav .nav-group { display: flex; gap: 4px; align-items: center; }
          #osint-nav .nav-label { color: var(--text-muted, #888); font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; }
          #osint-nav .nav-sep { color: var(--border, #ccc); }
          #osint-nav .nav-status {
            margin-left: auto;
            display: flex;
            gap: 12px;
            align-items: center;
            color: var(--text-faint, #666);
            font-size: 9px;
            letter-spacing: 0.05em;
          }
          #osint-nav .nav-zulu { color: #228b22; font-weight: 500; }
          #osint-nav .nav-session { color: var(--text-muted, #888); }
          @media (max-width: 800px) {
            #osint-nav { font-size: 9px; gap: 3px 10px; padding: 5px 10px; }
            #osint-nav .nav-label { display: none; }
            #osint-nav .nav-status { display: none; }
          }
        </style>
        <a href="https://${domain}" class="nav-home" title="All apps">OSINT</a>
        ${navCategories.map(cat => `
          <div class="nav-group">
            <span class="nav-label">${cat.name}</span>
            ${cat.apps
              .filter(app => !app.navHide)
              .map(app => {
                const isCurrent = currentApp === app.id;
                const parts = app.id.split("/"); const url = parts.length > 1 ? `https://${parts[0]}.${domain}/${parts.slice(1).join("/")}` : `https://${app.id}.${domain}`; return `<a href="${url}" title="${app.desc}"${isCurrent ? ' class="current"' : ''}>${app.name}</a>`;
              })
              .join('<span class="nav-sep">·</span>')}
          </div>
        `).join('')}
        <div class="nav-status">
          <span class="nav-zulu" id="nav-zulu">${zulu()}</span>
          <span class="nav-session">${sessionId}</span>
        </div>
      `;

      // Insert at top of body
      if (document.body.firstChild) {
        document.body.insertBefore(nav, document.body.firstChild);
      } else {
        document.body.appendChild(nav);
      }

      // Update Zulu time every 10 seconds
      setInterval(() => {
        const el = document.getElementById('nav-zulu');
        if (el) el.textContent = zulu();
      }, 10000);
    })
    .catch(e => console.warn('nav.js: failed to load apps.json', e));
})();