/* London Free Guide — shared top context bar (window.NowBar).
   A slim one-line bar: "LONDON TODAY" + a 3-day forecast on the left (weather
   uses the same OS emoji as Explore), then a row of live items on the right,
   joined by " · ". Non-weather glyphs are clean monochrome inline SVG icons in
   the brand line-icon language. Each page assembles its own items; empty/failed
   items are left out by the caller, so the bar degrades gracefully.

   Helpers for callers:  NowBar.ic(name[, cls]) -> <span> named glyph
     (tube, moon, clock, star, pin, open, shut)

   Usage:  <NowBar forecast={[{label,code,t}]} items={[ <span/>, … ]} />
   Stays on one line; if the items overflow it pans gently (pauses on hover). */
(function () {
  if (window.NowBar) return;
  var React = window.React;

  /* ---------- inline SVG icon set (non-weather only) ---------- */
  function svg(inner) {
    return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" '
      + 'stroke-linecap="round" stroke-linejoin="round">' + inner + "</svg>";
  }
  var NB_IC = {
    tube: svg('<circle cx="12" cy="12" r="8"/><path d="M4 12h16"/>'),
    moon: svg('<path d="M20 14.4A8 8 0 1 1 9.6 4 6.4 6.4 0 0 0 20 14.4z"/>'),
    clock: svg('<circle cx="12" cy="12" r="8"/><path d="M12 7.6V12l3 1.8"/>'),
    star: svg('<path d="M12 3.5l2.5 5.1 5.6.8-4 4 .9 5.6L12 16.4l-5 2.6.9-5.6-4-4 5.6-.8z"/>'),
    pin: svg('<path d="M12 21s6.5-5.2 6.5-10.5A6.5 6.5 0 0 0 5.5 10.5C5.5 15.8 12 21 12 21z"/><circle cx="12" cy="10.3" r="2.2"/>'),
    shut: svg('<circle cx="12" cy="12" r="8"/><path d="M7 17 17 7"/>'),
    open: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="currentColor"/></svg>'
  };
  function icEl(html, cls) {
    return React.createElement("span", {
      className: "nb-ico" + (cls ? " " + cls : ""),
      "aria-hidden": "true",
      dangerouslySetInnerHTML: { __html: html }
    });
  }
  function wxEmoji(code) {
    return window.LFGWeather ? window.LFGWeather.icon(code) : "";
  }

  // inject the bar stylesheet once (theme-aware via existing CSS vars)
  if (!document.getElementById("lfg-nowbar-css")) {
    var css = document.createElement("style");
    css.id = "lfg-nowbar-css";
    css.textContent = [
      ".nb{border-bottom:1px solid var(--lfg-white-08);background:var(--lfg-bar-bg,#141414)}",
      ".nb-row{display:flex;align-items:center;gap:16px;padding:8px 0;min-height:22px;",
      "font-family:var(--lfg-font-body),sans-serif;font-size:.72rem;flex-wrap:nowrap}",
      ".nb-wx{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--lfg-white-70);flex:0 0 auto}",
      ".nb-k{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.64rem;color:var(--lfg-white-50)}",
      ".nb-fc{display:inline-flex;align-items:center;gap:5px}",
      ".nb-fc+.nb-fc{padding-left:10px;border-left:1px solid var(--lfg-white-08)}",
      ".nb-fcd{font-size:.66rem;letter-spacing:.01em;color:var(--lfg-white-50);font-weight:600}",
      ".nb-fct{font-weight:700;color:var(--lfg-white)}",
      ".nb-wxe{font-size:1.02em;line-height:1}",
      ".nb-ico{display:inline-flex;align-items:center;vertical-align:-3px;margin-right:5px}",
      ".nb-ico svg{width:14px;height:14px;display:block}",
      ".nb-go{color:#2ECC40}",
      ".nb-tube{display:inline-flex;align-items:center;gap:0}",
      ".nb-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;",
      "box-shadow:0 0 0 1px var(--lfg-white-30);flex:0 0 auto;vertical-align:0}",
      ".nb-dot-go{background:#2ECC40}",
      ".nb-line{white-space:nowrap}",
      ".nb-line-n{font-weight:600;color:var(--lfg-white-70)}",
      ".nb-line-s{color:var(--lfg-white-50)}",
      ".nb-tube .nb-ico{opacity:.6}",
      ".nb-tsep{color:var(--lfg-white-30);margin:0 7px}",
      ".nb-tick{min-width:0;overflow:hidden;flex:1 1 auto;text-align:left}",
      ".nb-tick.is-pan{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);",
      "mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}",
      ".nb-track{display:inline-block;white-space:nowrap;color:var(--lfg-white-70);font-weight:400}",
      ".nb-track.is-pan{animation:nbPan var(--nb-dur,14s) ease-in-out infinite alternate}",
      ".nb-tick:hover .nb-track.is-pan{animation-play-state:paused}",
      ".nb-track b,.nb-track .r{color:var(--lfg-accent);font-weight:700}",
      ".nb-track a{color:var(--lfg-accent);font-weight:700;text-decoration:none}",
      ".nb-track a:hover{text-decoration:underline}",
      ".nb-hot{color:var(--lfg-accent)}",
      ".nb-mut{color:var(--lfg-white-50)}",
      ".nb-sep{color:var(--lfg-white-30);margin:0 10px;font-weight:400}",
      "@keyframes nbPan{from{transform:translateX(0)}to{transform:translateX(var(--nb-shift,0px))}}",
      "@media (max-width:640px){.nb-k{display:none}.nb-wx{gap:8px}.nb-fc+.nb-fc{padding-left:8px}}",
      "@media (prefers-reduced-motion:reduce){.nb-track.is-pan{animation:none}}"
    ].join("");
    document.head.appendChild(css);
  }

  function NowBar(props) {
    var items = (props.items || []).filter(function (x) {
      return x !== null && x !== undefined && x !== false && x !== "";
    });
    var fc = props.forecast || [];
    var tickRef = React.useRef(null);
    var trackRef = React.useRef(null);
    var st = React.useState(0);
    var shift = st[0], setShift = st[1];

    React.useEffect(function () {
      function measure() {
        var t = trackRef.current, c = tickRef.current;
        if (!t || !c) return;
        var over = t.scrollWidth - c.clientWidth;
        setShift(over > 6 ? over + 14 : 0);
      }
      measure();
      var id = setTimeout(measure, 400); // after fonts settle
      window.addEventListener("resize", measure);
      return function () { clearTimeout(id); window.removeEventListener("resize", measure); };
    }, [items.length, fc.length, props.tickKey]);

    if (!fc.length && !items.length) return null;
    var pan = shift > 0;

    var kids = [];
    items.forEach(function (node, n) {
      if (n) kids.push(React.createElement("span", { className: "nb-sep", key: "s" + n, "aria-hidden": "true" }, "·"));
      kids.push(React.createElement("span", { className: "nb-cell", key: "i" + n }, node));
    });

    return React.createElement(
      "div", { className: "nb" },
      React.createElement(
        "div", { className: "wrap nb-row" },
        React.createElement(
          "span", { className: "nb-wx" },
          React.createElement("span", { className: "nb-k" }, "London"),
          fc.map(function (d, n) {
            return React.createElement(
              "span", { className: "nb-fc", key: n },
              React.createElement("span", { className: "nb-fcd" }, d.label),
              React.createElement("span", { className: "nb-wxe", "aria-hidden": "true" }, wxEmoji(d.code)),
              React.createElement("span", { className: "nb-fct" }, d.t + "\u00b0")
            );
          })
        ),
        items.length ? React.createElement(
          "span", { className: "nb-tick" + (pan ? " is-pan" : ""), ref: tickRef },
          React.createElement(
            "span", {
              className: "nb-track" + (pan ? " is-pan" : ""),
              ref: trackRef,
              style: pan ? { "--nb-shift": shift + "px", "--nb-dur": Math.max(10, Math.round(shift / 16)) + "s" } : null
            },
            kids
          )
        ) : null
      )
    );
  }

  NowBar.ic = function (name, cls) { return icEl(NB_IC[name] || "", cls); };

  /* render TfL tube status as coloured line chips (shared by every bar) */
  NowBar.tube = function (status) {
    if (!status) return null;
    var R = React, ic = NowBar.ic("tube");
    if (status.allGood) {
      return R.createElement("span", { className: "nb-tube" }, ic,
        R.createElement("span", { className: "nb-dot nb-dot-go" }), "Tube: good service");
    }
    var colour = window.LFGTube ? window.LFGTube.colour : function () { return "#888"; };
    var chips = [];
    status.lines.forEach(function (l, i) {
      if (i) chips.push(R.createElement("span", { className: "nb-tsep", key: "s" + i, "aria-hidden": "true" }, "·"));
      chips.push(R.createElement("span", { className: "nb-line", key: "l" + i },
        R.createElement("span", { className: "nb-dot", style: { background: colour(l.name) } }),
        R.createElement("span", { className: "nb-line-n" }, l.name), " ",
        R.createElement("span", { className: "nb-line-s" }, l.desc.toLowerCase())
      ));
    });
    return R.createElement("span", { className: "nb-tube" }, ic, chips);
  };

  window.NowBar = NowBar;
})();