import { escapeHtml } from '../ui-shared.js';

const LOGO = '<img src="/logo.svg" alt="" width="24" height="24" class="b2-logo-img">';

/**
 * Fixed app header for board v2. The project cell is visual only — the real
 * project switcher dropdown arrives with the multi-project v3 spec.
 * The SSE status span keeps the v1 ids (`sseStatus`, `sseLabel`) so the ported
 * connection-status JS keeps working unchanged.
 */
export function headerHtml(projectName: string): string {
  const name = escapeHtml(projectName);
  return `
<header class="b2-hdr">
  <span class="b2-brand">${LOGO}<b>agenthub</b></span>
  <span class="b2-proj" title="Projektwechsel kommt mit v3">/ ${name}&nbsp;<span class="b2-chev">▾</span></span>
  <nav class="b2-nav" aria-label="Primary">
    <b aria-current="page">Board</b><a href="/team">Team</a><a href="/activity">Activity</a><a href="/decisions">Decisions</a>
  </nav>
  <span class="b2-hdr-right">
    <button type="button" class="b2-btn" id="newTaskBtn" aria-haspopup="dialog" aria-expanded="false">+ New task</button>
    <span class="sse-status stale" id="sseStatus">
      <span class="b2-live-dot" aria-hidden="true"></span>
      <span id="sseLabel">connecting</span>
    </span>
  </span>
</header>`;
}

/** Fullscreen splash overlay, shown until first data render (hard cap 1.5s). */
export function splashHtml(): string {
  return `
<div id="b2-splash" class="b2-splash" aria-hidden="true">
  <div class="b2-splash-inner">
    <img src="/logo.svg" alt="agenthub" width="72" height="72" class="b2-splash-logo">
    <div class="b2-splash-word">agenthub</div>
  </div>
</div>`;
}

/**
 * Inline script: hides the splash after the first successful refresh() or after
 * a hard 1500ms cap, whichever comes first. Exposes window.__b2SplashDone() so
 * the data layer can signal completion.
 */
export function splashJs(): string {
  return `
(function () {
  var done = false;
  window.__b2SplashDone = function () {
    if (done) return;
    done = true;
    var s = document.getElementById('b2-splash');
    if (!s) return;
    s.classList.add('b2-splash-hide');
    setTimeout(function () { if (s.parentNode) s.parentNode.removeChild(s); }, 450);
  };
  setTimeout(window.__b2SplashDone, 1500); // hard cap — splash must never block
})();`;
}