/* Shared Help + tooltip module for the Work Package Suite.
   Included by the home page, the suite, and the embedded creator. It injects:
     - tooltip styles for the .help-tip (ⓘ) component and [data-tip] hovers
     - a Help modal (workflow + key concepts) opened via window.openHelp()
   Add a "❔ Help" button anywhere with onclick="openHelp()". */
(function (global) {
  'use strict';

  var css = `
  .help-tip{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
    margin-left:5px; border-radius:50%; background:#5a6675; color:#fff; font-size:10px; font-weight:700;
    font-family:ui-sans-serif,system-ui,sans-serif; cursor:help; vertical-align:middle; position:relative; }
  .help-tip::after{ content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
    background:#1a2230; color:#fff; padding:7px 10px; border-radius:6px; font-size:12px; font-weight:400;
    line-height:1.4; white-space:normal; width:max-content; max-width:260px; text-align:left; z-index:9999;
    opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:0 4px 14px rgba(20,30,50,.22); }
  .help-tip::before{ content:''; position:absolute; bottom:130%; left:50%; transform:translate(-50%,95%);
    border:5px solid transparent; border-top-color:#1a2230; opacity:0; transition:opacity .12s; z-index:9999; }
  .help-tip:hover::after, .help-tip:hover::before, .help-tip:focus::after, .help-tip:focus::before{ opacity:1; }

  .ui-help-overlay{ position:fixed; inset:0; background:rgba(20,30,50,.5); display:none; align-items:flex-start;
    justify-content:center; z-index:10000; padding:5vh 16px; overflow:auto; }
  .ui-help-overlay.open{ display:flex; }
  .ui-help-modal{ background:#fff; color:#1a2230; max-width:680px; width:100%; border-radius:10px;
    box-shadow:0 12px 40px rgba(20,30,50,.3); font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; }
  .ui-help-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
    border-bottom:1px solid #e3e6ec; font-size:16px; }
  .ui-help-head button{ background:none; border:none; font-size:18px; cursor:pointer; color:#5a6675; line-height:1; }
  .ui-help-body{ padding:18px 22px; font-size:13.5px; line-height:1.6; }
  .ui-help-body h4{ margin:18px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:#2563d6; }
  .ui-help-body h4:first-child{ margin-top:0; }
  .ui-help-body ol, .ui-help-body ul{ margin:0 0 6px; padding-left:20px; }
  .ui-help-body li{ margin-bottom:5px; }
  .ui-help-body code{ background:#f0f2f5; padding:1px 5px; border-radius:4px; font-size:12px; }
  `;
  var style = document.createElement('style');
  style.textContent = css;
  (document.head || document.documentElement).appendChild(style);

  var HELP_HTML = `
    <h4>How the suite works</h4>
    <ol>
      <li><strong>Pick or create a Project</strong> on the home page — projects are stored centrally and each keeps its own SOP and Work Packages.</li>
      <li><strong>SOP Configuration</strong> — set the project baseline (team, sign-offs, WP types, governance &amp; sizing, quality, sequence, constraints, sources). Every Work Package inherits these defaults.</li>
      <li><strong>Work Package Creation</strong> — author individual IWPs against the SOP. Use <strong>New</strong> for a blank one or <strong>Duplicate</strong> to copy an existing one.</li>
      <li><strong>Dashboard</strong> — track status, hours, and what's gating each package across the project.</li>
    </ol>

    <h4>Key concepts</h4>
    <ul>
      <li><strong>Constraints &amp; release readiness:</strong> a package can't move to <em>Issued</em> until every constraint is <em>Cleared</em> or <em>N/A</em>. If a constraint reopens after release, the package drops to <em>Issue (Hold)</em>.</li>
      <li><strong>Disciplines &amp; Split:</strong> a package can carry more than one discipline (e.g. Mechanical + Electrical + Tech), each with its own scope section and status. <strong>Split by Discipline</strong> breaks it into instances — <code>WP01A</code>, <code>WP01B</code>, <code>WP01C</code> — each tied to the master.</li>
      <li><strong>WP size:</strong> the SOP sets a typical size band, which sets a max-hours <em>split threshold</em>. The creator warns when a package's estimated hours exceed it so it can be broken down.</li>
      <li><strong>Material by discipline:</strong> on a multi-discipline package each material line can be tagged to a discipline; splitting routes each instance only its own materials.</li>
    </ul>

    <h4>Tips</h4>
    <ul>
      <li><strong>Load Sample</strong> is context-aware — it loads the sample SOP on the SOP tab and an example Work Package on the WP tab.</li>
      <li>Data is kept <strong>per project</strong>; switch projects from the home page.</li>
      <li>Hover the <span class="help-tip" data-tip="Like this one — hover any ⓘ for a hint.">i</span> icons for inline hints.</li>
    </ul>`;

  function buildModal() {
    if (document.getElementById('ui-help-overlay')) return;
    var overlay = document.createElement('div');
    overlay.className = 'ui-help-overlay';
    overlay.id = 'ui-help-overlay';
    overlay.innerHTML = '<div class="ui-help-modal" role="dialog" aria-modal="true" aria-label="Help">' +
      '<div class="ui-help-head"><strong>❔ Help — Work Package Suite</strong>' +
      '<button type="button" onclick="closeHelp()" aria-label="Close help">✕</button></div>' +
      '<div class="ui-help-body">' + HELP_HTML + '</div></div>';
    overlay.addEventListener('click', function (e) { if (e.target === overlay) closeHelp(); });
    document.body.appendChild(overlay);
  }

  global.openHelp = function () { buildModal(); document.getElementById('ui-help-overlay').classList.add('open'); };
  global.closeHelp = function () { var o = document.getElementById('ui-help-overlay'); if (o) o.classList.remove('open'); };
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') global.closeHelp(); });
})(window);