/* 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-2026-07",
  until: Date.UTC(2026, 7, 10, 23, 59, 59),   // Mon 10 Aug 2026 — ~2 weeks
};

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 charts on shares",
      body: "Every share position shows a live price with a mini chart of today's path — it flashes green or red as it moves." },
    { key: "ld-underlying", tab: "positions", target: "live-underlying", title: "The stock behind each option",
      body: "For option plays, the underlying stock's live price rides along on the row — so you see the move driving the trade." },
  ];
}

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 is here</h2>
          <p className="announce-copy">
            Your positions now move with the market. Share prices tick live — each with its own mini
            price chart — and option plays show the underlying stock's live price right on the row.
          </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 });