/* ============================================================
   TT Love Loading — reusable AI-wait / "processing" overlay for
   the React/Babel workspace. Pairs with ws-loading.css.

   Indeterminate only: it signals that work is in flight, it does
   NOT show a progress percentage.

   Usage (fullscreen splash — default, sits above modals/cards):
     {busy && <TTLoveLoading text="生成中…" subText="…" />}

   Usage (inline overlay over one panel):
     <div className="loading-host">
       {busy && <TTLoveLoading fullscreen={false} size="md" text="…" />}
       …panel…
     </div>

   Props: visible, text, subText, fullscreen (default true), size
   ("sm"|"md"|"lg"), variant ("halo"|"minimal"), logoSrc.
   ============================================================ */
function TTLoveLoading({
  visible = true,
  text = "處理中…",
  subText = "SPREAD LOVE. INSPIRE BEAUTY.",
  fullscreen = true,
  size = "md",
  variant = "halo",
  logoSrc = "/assets/ttlove-logo.jpg",
}) {
  const cls = [
    "tt-loading",
    "tt-loading--" + size,
    "tt-loading--" + (variant === "halo" ? "halo" : variant),
    fullscreen ? "tt-loading--fullscreen" : "tt-loading--inline",
    visible ? "" : "tt-loading--hidden",
  ].filter(Boolean).join(" ");
  const sparks = [1, 2, 3, 4, 5, 6, 7, 8];
  return (
    <div
      className={cls}
      role="status"
      aria-live="polite"
      aria-busy={visible ? "true" : "false"}
      aria-hidden={visible ? undefined : "true"}
    >
      <div className="tt-loading__waves" aria-hidden="true" />
      <div className="tt-loading__stage">
        <div className="tt-loading__glow" aria-hidden="true" />
        <div className="tt-loading__halo" aria-hidden="true" />
        <div className="tt-loading__halo2" aria-hidden="true" />
        <div className="tt-loading__sweep" aria-hidden="true" />
        <div className="tt-loading__sparks" aria-hidden="true">
          {sparks.map((i) => <span key={i} className={"tt-loading__spark s" + i} />)}
        </div>
        <div className="tt-loading__logo">
          <img src={logoSrc} alt="TT Love" draggable="false" />
        </div>
      </div>
      <div className="tt-loading__caption">
        <p className="tt-loading__text">{text}</p>
        <div className="tt-loading__bar" aria-hidden="true">
          <span className="tt-loading__bar-fill" />
        </div>
        {subText ? <p className="tt-loading__sub">{subText}</p> : null}
      </div>
    </div>
  );
}

Object.assign(window, { TTLoveLoading });