(function () {
  const key = () => "sle.birthsky.seen:" + (window.ChartStore?.getActiveChart()?.id || "local");

  window.CosmicLoading = function CosmicLoading({ lang = "ar", chart = false }) {
    return <main className="cosmic-loading" role="status">
      <span className="cosmic-loader-orb" aria-hidden="true" />
      <strong>{chart
        ? (lang === "ar" ? "بنجهّز خريطة ميلادك" : "Preparing your birth chart")
        : (lang === "ar" ? "بنتأكد من حسابك" : "Checking your account")}</strong>
    </main>;
  };

  window.BirthSkyIntro = function BirthSkyIntro({ lang, onDone, replay }) {
    const ar = lang === "ar";
    const button = React.useRef(null);
    const meta = window.ChartStore?.getActiveChart()?.chart?.meta;
    React.useLayoutEffect(() => {
      button.current?.focus({ preventScroll: true });
      const sky = window.SkyGalaxy;
      if (!sky) return;
      sky.setVisible(true);
      sky.setOption("timeOfDay", "night");
      if (Number.isFinite(meta?.lat) && Number.isFinite(meta?.lng)) sky.setObserver(meta.lat, meta.lng);
      const epoch = Date.parse(meta?.birth_iso);
      if (Number.isFinite(epoch)) sky.anchorTime(epoch);
      return () => window.BgControl?._reapply();
    }, [meta]);

    return <main className="bsky" dir={ar ? "rtl" : "ltr"} aria-label={ar ? "سما الميلاد" : "Birth sky"}>
      <button ref={button} type="button" className="bsky-reveal" onClick={() => {
        try { localStorage.setItem(key(), "1"); } catch {}
        onDone();
      }}>{replay ? (ar ? "ارجع لشارتك" : "Back to your chart") : (ar ? "اعرض شارتك" : "Reveal your chart")}</button>
    </main>;
  };

  window.BirthSkyIntro.shouldShow = function () {
    if (!window.CHART_SUMMARY?._computed) return false;
    try { return localStorage.getItem(key()) !== "1"; } catch { return false; }
  };
})();