/* announce.jsx — a one-time "what's new" celebration modal.

   Shows once per person (per device) during a time window, then never again.
   Dismissed by either button. Kept generic: bump ANNOUNCE.id + the copy for the
   next announcement and the old dismissal keys stop matching, so everyone sees
   the new one once.
*/

const ANNOUNCE = {
  id: "livedata-options-2026-08",              // bumped: re-announce now options mark live too
  until: Date.UTC(2026, 7, 18, 23, 59, 59),    // Tue 18 Aug 2026 — one week, then never again
};

function announceDismissed(uid) {
  try { return localStorage.getItem("announce:" + ANNOUNCE.id + ":" + (uid || "anon")) === "1"; }
  catch (_) { return false; }
}
function dismissAnnounce(uid) {
  try { localStorage.setItem("announce:" + ANNOUNCE.id + ":" + (uid || "anon"), "1"); } catch (_) {}
}
// Active when: inside the window, not already dismissed, and the person actually
// HAS a server with live data on (so "check it out" has something real to show).
function announceActive(uid, hasLiveServer) {
  return !!hasLiveServer && Date.now() < ANNOUNCE.until && !announceDismissed(uid);
}

// Live-data mini tour — two spotlight steps reusing AppTour. Targets resolve to
// the first live row on the Positions tab; if a viewer has no live share (or no
// option) the step just centers with the same copy. Deliberately does not label
// latency — it's a celebration, not a spec sheet.
function buildLiveDataTourSteps() {
  return [
    { key: "ld-intro", tab: "positions", title: "Live prices are on 📈",
      body: "Your positions now move with the market in real time. Two quick things to notice." },
    { key: "ld-chart", tab: "positions", target: "live-chart", title: "Live prices — shares and options",
      body: "Every position marks to its real-time price: shares to the live stock price, option plays to their live option premium — each with a mini chart that flashes green or red as it moves." },
    { key: "ld-underlying", tab: "positions", target: "live-underlying", title: "The stock behind each option",
      body: "On an option play, the underlying stock's live price also rides along on the row — so you see the move driving the premium." },
  ];
}

function AnnounceLiveData({ onCheckItOut, onDismiss }) {
  return (
    <div className="announce-back" role="dialog" aria-modal="true" aria-label="What's new">
      <div className="announce">
        <div className="announce-fw" aria-hidden="true"><i /><i /><i /><i /></div>
        <div className="announce-body">
          <span className="announce-badge">NEW</span>
          <h2 className="announce-title">Live market data — now on options too</h2>
          <p className="announce-copy">
            Your positions move with the market in real time. <strong>Shares and options</strong> both
            tick live — shares to the live stock price, option plays to their live option premium — each
            with its own mini chart, flashing green or red as it moves.
          </p>
          <div className="announce-acts">
            <button className="btn primary" onClick={onCheckItOut}>Check it out</button>
            <button className="btn" onClick={onDismiss}>Awesome</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { announceActive, dismissAnnounce, buildLiveDataTourSteps, AnnounceLiveData });