(function () {
  "use strict";

  var TARGET_ID = "multi-step-worfklow";
  var GLOBAL_NAME = "MultiStepWorkflowWidget";

  function createStyles() {
    return `
      :host {
        all: initial;
        display: block;
        width: 600px;
        height: 400px;
        max-width: 100%;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #1f2937;
      }

      * {
        box-sizing: border-box;
      }

      .mw-viewport {
        width: 600px;
        height: 400px;
        max-width: 100%;
        overflow: hidden;
        border-radius: 22px;
        position: relative;
        background: #ffffff;
      }

      .mw-scale {
        width: 1120px;
        height: 700px;
        transform: scale(0.535);
        transform-origin: top left;
      }

      .mw-shell {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid #edf1fb;
        box-shadow: 0 24px 80px rgba(40, 72, 134, 0.12);
        width: 1120px;
        height: 700px;
      }

      .mw-sidebar {
        position: absolute;
        inset: 0 auto 0 0;
        width: 42px;
        background: #eef3fb;
        border-right: 1px solid #e4eaf5;
      }

      .mw-sidebar span {
        position: absolute;
        left: 14px;
        width: 14px;
        height: 2px;
        background: #7b8494;
        border-radius: 2px;
      }

      .mw-sidebar span:nth-child(1) { top: 18px; }
      .mw-sidebar span:nth-child(2) { top: 23px; }
      .mw-sidebar span:nth-child(3) { top: 28px; }

      .mw-gear {
        position: absolute;
        left: 12px;
        bottom: 12px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #778092;
        opacity: 0.8;
      }

      .mw-content {
        margin-left: 42px;
        padding: 0 18px 42px;
      }

      .mw-top {
        height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eff2f8;
        position: relative;
      }

      .mw-top:before {
        content: "";
        position: absolute;
        top: 0;
        left: 14px;
        width: 118px;
        height: 2px;
        background: #6177ee;
        border-radius: 0 0 4px 4px;
      }

      .mw-top-title {
        margin-left: 30px;
        font-size: 13px;
        font-weight: 700;
        color: #5a6fe8;
      }

      .mw-dots {
        margin-left: auto;
        display: flex;
        gap: 10px;
        color: #5a6fe8;
        font-weight: 700;
        letter-spacing: 2px;
        padding-right: 10px;
      }

      .mw-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 18px 0 16px;
      }

      .mw-stat {
        position: relative;
        padding: 20px 18px 22px;
        min-height: 86px;
        border: 1px solid #edf1fb;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(40, 72, 134, 0.10);
        opacity: 0;
        transform: translateY(12px);
        animation: mwFadeUp .65s ease forwards;
      }

      .mw-stat:nth-child(2) { animation-delay: .1s; }
      .mw-stat:nth-child(3) { animation-delay: .2s; }
      .mw-stat:nth-child(4) { animation-delay: .3s; }

      .mw-stat-label {
        font-size: 12px;
        color: #566278;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .mw-stat-value {
        font-size: 25px;
        line-height: 1;
        color: #1e2333;
        letter-spacing: -0.04em;
      }

      .mw-stat-icon {
        position: absolute;
        top: 18px;
        right: 18px;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 800;
      }

      .green { background: #daf8e4; color: #2bbd71; }
      .blue { background: #e2e7ff; color: #6177d8; }
      .yellow { background: #fff3c9; color: #f5a400; }
      .sky { background: #dcecff; color: #4d8df7; }

      .mw-explore {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 16px;
        margin-bottom: 20px;
        border: 1px solid #edf1fb;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(33, 42, 60, 0.06);
        opacity: 0;
        transform: translateY(10px);
        animation: mwFadeUp .65s ease .45s forwards;
      }

      .mw-explore-icon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: #e8ecff;
        color: #6177ee;
        font-weight: 800;
      }

      .mw-explore strong {
        display: block;
        font-size: 13px;
        color: #20283b;
      }

      .mw-explore span {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #617088;
      }

      .mw-section-title {
        margin: 0 0 14px;
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: #151827;
      }

      .mw-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .mw-card {
        min-height: 95px;
        padding: 20px 16px 18px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #eff2f7;
        box-shadow: 0 3px 14px rgba(18, 28, 45, 0.04);
        opacity: 0;
        transform: translateY(16px) scale(.98);
        animation: mwCardIn .55s ease forwards;
      }

      .mw-card.soft { background: #f5f7fb; }
      .mw-card:nth-child(1) { animation-delay: .65s; }
      .mw-card:nth-child(2) { animation-delay: .75s; }
      .mw-card:nth-child(3) { animation-delay: .85s; }
      .mw-card:nth-child(4) { animation-delay: .95s; }
      .mw-card:nth-child(5) { animation-delay: 1.05s; }
      .mw-card:nth-child(6) { animation-delay: 1.15s; }
      .mw-card:nth-child(7) { animation-delay: 1.25s; }
      .mw-card:nth-child(8) { animation-delay: 1.35s; }
      .mw-card:nth-child(9) { animation-delay: 1.45s; }
      .mw-card:nth-child(10) { animation-delay: 1.55s; }
      .mw-card:nth-child(11) { animation-delay: 1.65s; }
      .mw-card:nth-child(12) { animation-delay: 1.75s; }
      .mw-card:nth-child(13) { animation-delay: 1.85s; }

      .mw-card-kicker {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 11px;
        font-weight: 800;
        color: #4b9a52;
      }

      .mw-card-kicker.purple { color: #8568da; }

      .mw-card-title {
        font-size: 14px;
        line-height: 1.35;
        color: #4b586e;
        min-height: 36px;
      }

      .mw-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 13px;
      }

      .mw-mini-icon {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: #f0f2f6;
        color: #20283b;
        font-size: 12px;
        font-weight: 800;
      }

      .mw-mini-icon.spark {
        background: #dfe7ff;
        color: #6177ee;
        animation: mwPulse 1.8s ease-in-out infinite;
      }

      .mw-btn {
        height: 25px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 8px;
        border: 1px solid #b9c6ff;
        background: #f8faff;
        color: #6177ee;
        font-size: 11px;
        font-weight: 700;
      }

      .mw-play {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid currentColor;
      }

      .mw-trash {
        color: #a7afbf;
        font-size: 13px;
        margin-left: 4px;
      }

      .mw-running {
        position: relative;
        overflow: hidden;
      }

      .mw-running:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 0%, rgba(97,119,238,.10) 42%, rgba(97,119,238,.24) 50%, rgba(97,119,238,.10) 58%, transparent 100%);
        transform: translateX(-100%);
        animation: mwShimmer 2.4s ease-in-out infinite;
      }

      @keyframes mwFadeUp {
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes mwCardIn {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes mwPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(97,119,238,0); }
        50% { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(97,119,238,.10); }
      }

      @keyframes mwShimmer {
        0% { transform: translateX(-120%); }
        55%, 100% { transform: translateX(120%); }
      }

      @media (max-width: 620px) {
        :host {
          width: 100%;
          height: auto;
          aspect-ratio: 3 / 2;
        }

        .mw-viewport {
          width: 100%;
          height: 100%;
        }

        .mw-scale {
          transform: scale(calc(var(--mw-scale, 1)));
        }
      }
    `;
  }

  function createMarkup() {
    return `
      <div class="mw-viewport">
        <div class="mw-scale">
          <div class="mw-shell" role="img" aria-label="Animated multi-step workflow dashboard">
            <div class="mw-sidebar"><span></span><span></span><span></span><div class="mw-gear"></div></div>
            <div class="mw-content">
              <div class="mw-top"><div class="mw-top-title">Dashboard</div><div class="mw-dots">⋮ ×</div></div>

              <div class="mw-stats">
                <div class="mw-stat"><div class="mw-stat-label">Automated</div><div class="mw-stat-value">20%</div><div class="mw-stat-icon green">✓</div></div>
                <div class="mw-stat"><div class="mw-stat-label">Accuracy</div><div class="mw-stat-value">100%</div><div class="mw-stat-icon blue">⬟</div></div>
                <div class="mw-stat"><div class="mw-stat-label">Needs Review</div><div class="mw-stat-value">5</div><div class="mw-stat-icon yellow">⌘</div></div>
                <div class="mw-stat"><div class="mw-stat-label">Time Left</div><div class="mw-stat-value">~0.2 hrs</div><div class="mw-stat-icon sky">◷</div></div>
              </div>

              <div class="mw-explore"><div class="mw-explore-icon">↗</div><div><strong>Explore Data</strong><span>View, filter, and export data</span></div></div>
              <h3 class="mw-section-title">Skills</h3>

              <div class="mw-grid">
                <div class="mw-card"><div class="mw-card-kicker">Upload File ✓</div><div class="mw-card-title">Upload source data</div><div class="mw-actions"><div class="mw-mini-icon">⇪</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">Ingest ✓</div><div class="mw-card-title">Normalize into canonical schema</div><div class="mw-actions"><div class="mw-mini-icon">↳</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card soft"><div class="mw-card-kicker purple">Census Baseline</div><div class="mw-card-title">Fetch establishment counts by NAICS × county</div><div class="mw-actions"><div class="mw-mini-icon">▮</div><div class="mw-btn"><span class="mw-play"></span>Run</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">ProPublica ✓</div><div class="mw-card-title">Fetch IRS nonprofits by NTEE code</div><div class="mw-actions"><div class="mw-mini-icon">▰</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card soft"><div class="mw-card-kicker purple">Socrata</div><div class="mw-card-title">Fetch Chicago creative economy licenses</div><div class="mw-actions"><div class="mw-mini-icon">▤</div><div class="mw-btn"><span class="mw-play"></span>Run</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">OSM ✓</div><div class="mw-card-title">Fetch creative venues from OpenStreetMap</div><div class="mw-actions"><div class="mw-mini-icon">◧</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card soft mw-running"><div class="mw-card-kicker purple">Google</div><div class="mw-card-title">Search & verify each business via Google</div><div class="mw-actions"><div class="mw-mini-icon">◉</div><div class="mw-btn"><span class="mw-play"></span>Run</div></div></div>
                <div class="mw-card soft"><div class="mw-card-kicker purple">Resolve</div><div class="mw-card-title">Deduplicate across all sources</div><div class="mw-actions"><div class="mw-mini-icon">⌁</div><div class="mw-btn"><span class="mw-play"></span>Run</div></div></div>
                <div class="mw-card soft mw-running"><div class="mw-card-kicker purple">Classify</div><div class="mw-card-title">Run the classification pipeline</div><div class="mw-actions"><div class="mw-mini-icon spark">✦</div><div class="mw-btn"><span class="mw-play"></span>Run</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">Evaluate ✓</div><div class="mw-card-title">Score against ground truth</div><div class="mw-actions"><div class="mw-mini-icon">▣</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">Propose ✓</div><div class="mw-card-title">Generate rule suggestions</div><div class="mw-actions"><div class="mw-mini-icon">●</div><div class="mw-mini-icon spark">✦</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
                <div class="mw-card soft"><div class="mw-card-kicker purple">Review</div><div class="mw-card-title">Accept or reject rules</div><div class="mw-actions"><div class="mw-mini-icon">◩</div></div></div>
                <div class="mw-card"><div class="mw-card-kicker">Compile ✓</div><div class="mw-card-title">Apply approved rules</div><div class="mw-actions"><div class="mw-mini-icon">⌕</div><div class="mw-btn">↗ View</div><div class="mw-trash">⌫</div></div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  function setResponsiveScale(shadowRoot) {
    var viewport = shadowRoot.querySelector(".mw-viewport");
    var scale = shadowRoot.querySelector(".mw-scale");
    if (!viewport || !scale) return;

    var width = viewport.clientWidth || 600;
    var nextScale = width / 1120;
    scale.style.transform = "scale(" + nextScale + ")";
  }

  function renderInto(root) {
    if (!root) return false;
    if (root.__multiStepWorkflowMounted) return true;

    root.__multiStepWorkflowMounted = true;
    root.innerHTML = "";

    var host = document.createElement("div");
    host.setAttribute("data-multi-step-workflow", "true");
    root.appendChild(host);

    var shadow = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;

    var style = document.createElement("style");
    style.textContent = createStyles();

    var container = document.createElement("div");
    container.innerHTML = createMarkup();

    shadow.appendChild(style);
    shadow.appendChild(container);

    window.setTimeout(function () { setResponsiveScale(shadow); }, 0);
    window.addEventListener("resize", function () { setResponsiveScale(shadow); });

    return true;
  }

  function mount(targetId) {
    var id = targetId || TARGET_ID;
    var root = document.getElementById(id);
    return renderInto(root);
  }

  function autoMount() {
    var attempts = 0;
    var maxAttempts = 80;

    function tryMount() {
      attempts += 1;

      if (mount(TARGET_ID)) return;

      if (attempts < maxAttempts) {
        window.setTimeout(tryMount, 250);
      } else if (window.console && console.warn) {
        console.warn("[MultiStepWorkflowWidget] Target div not found:", TARGET_ID);
      }
    }

    tryMount();
  }

  window[GLOBAL_NAME] = {
    mount: mount,
    targetId: TARGET_ID
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", autoMount);
  } else {
    autoMount();
  }
})();