/* ==========================================================================
   Sandbox.tsx
   --------------------------------------------------------------------------
   The interactive demo: v1 live, v2 on request. Shared by test.html (local
   dev harness) and the site's own /work/overture/status-banner page, so
   behavior stays identical between the two; only page chrome and CSS skin
   differ per host (see each page's own <style>/SCSS).

   A host page just needs:
     <div id="root"></div>
     <div id="turnstile-widget"></div>
   plus every script this directory's other files load in test.html, in the
   same order, with this file loaded last (it depends on SB.THRESHOLDS,
   SB.selectBanner, SB.StatsRow, SB.StatusBanner, SB.SummaryBanner,
   SB.useStreamedSummary, SB.mockData, SB.mockMatters), then mount with:
     ReactDOM.createRoot(document.getElementById("root")).render(<SB.Sandbox />);
   ========================================================================== */

declare const React: typeof import("react");

(function (SB: any) {
  "use strict";

  const useState = React.useState;

  /* ---- Turnstile ----------------------------------------------------------
     appearance: "interaction-only" keeps the widget fully invisible unless
     Cloudflare decides an interactive challenge is actually needed, instead
     of showing its managed-mode confirmation box on every load. The
     container itself is pinned out of the layout flow (fixed, bottom
     corner; see each host page's CSS) so even a challenge popup doesn't
     shift anything else on the page.
     ------------------------------------------------------------------------ */

  const TURNSTILE_SITE_KEY = "0x4AAAAAAFYtoUigzGzTV1LH";

  function makeTurnstileTokenGetter(containerSelector: string) {
    let widgetId: string | null = null;
    let pendingResolve: ((token: string | null) => void) | null = null;

    // "Invisible" here means the widget's MODE, chosen once in the
    // Cloudflare dashboard for this site key (Managed, in this case), not
    // a client-side render() option; there is no such `size` value.
    // render() throws synchronously on an invalid option, which previously
    // left this promise forever unresolved (every getToken() call hangs,
    // which is why v2 looked stuck/fell back silently); the try/catch
    // below means a future render failure resolves (openly failed)
    // instead of hanging again.
    const ready = new Promise<void>(function (resolve) {
      (function poll() {
        if ((window as any).turnstile) {
          try {
            widgetId = (window as any).turnstile.render(containerSelector, {
              sitekey: TURNSTILE_SITE_KEY,
              appearance: "interaction-only",
              callback: function (token: string) {
                if (pendingResolve) {
                  const r = pendingResolve;
                  pendingResolve = null;
                  r(token);
                }
              },
              "error-callback": function () {
                if (pendingResolve) {
                  const r = pendingResolve;
                  pendingResolve = null;
                  r(null);
                }
              },
            });
          } catch (e) {
            console.error("Turnstile render() failed:", e);
            widgetId = null;
          }
          resolve();
        } else {
          window.setTimeout(poll, 50);
        }
      })();
    });

    let queue: Promise<unknown> = Promise.resolve();

    // isStale, when given, is checked right before this call's turn
    // actually starts: a superseded caller (inputs changed again before
    // the queue reached it) gets skipped instantly instead of still
    // consuming a full execute() round trip.
    return function getToken(isStale?: () => boolean): Promise<string | null> {
      const result: Promise<string | null> = queue.then(function () {
        if (isStale && isStale()) return null;
        return ready.then(function () {
          if (widgetId === null) {
            // render() failed earlier; nothing to execute against.
            return null;
          }
          if (isStale && isStale()) return null;
          return new Promise<string | null>(function (resolve) {
            pendingResolve = resolve;
            // Reusing an invisible widget's execute() repeatedly without a
            // reset() between calls intermittently errors on the 2nd+
            // call; this clears the previous run's state first.
            (window as any).turnstile.reset(widgetId);
            (window as any).turnstile.execute(widgetId);
          });
        });
      });
      // Keep the queue moving even if a call above errors or resolves null.
      queue = result.then(
        function () {},
        function () {}
      );
      return result;
    };
  }

  SB.getTurnstileToken = makeTurnstileTokenGetter("#turnstile-widget");

  /* ---- request counter ----------------------------------------------------
     Every v2 request is a billed model call, so the page shows its own
     count rather than leaving it to be inferred from the network tab.
     ------------------------------------------------------------------------ */

  let callCountListeners: Array<(n: number) => void> = [];
  SB.apiCallCount = 0;

  function countApiCall() {
    SB.apiCallCount += 1;
    callCountListeners.forEach(function (fn) {
      fn(SB.apiCallCount);
    });
  }

  function useApiCallCount() {
    const s = useState(SB.apiCallCount);
    React.useEffect(function () {
      callCountListeners.push(s[1]);
      return function () {
        callCountListeners = callCountListeners.filter(function (fn) {
          return fn !== s[1];
        });
      };
    }, []);
    return s[0];
  }

  function formatHours(h: number): string {
    if (h < 24) return h + "h";
    return Math.round((h / 24) * 10) / 10 + "d";
  }

  // Mirrors selectBanner's own decision tree (StatusBanner.tsx) to explain,
  // in English, which condition actually matched. Kept separate from
  // selectBanner itself rather than having it return a reason, since v1 is
  // meant to stay a byte-for-byte port of the source's rule tree; this is
  // read-only commentary on top of it, for the sandbox only.
  function explainBanner(posting: any, viewer: any, now: number): string {
    const h = SB.helpers;
    const T = SB.THRESHOLDS;

    if (!h.isOpenOrPending(posting)) return "Not open or pending.";
    if (h.isDirect(posting)) return "Direct posting: stats and banner both suppressed.";
    if (h.isOwner(viewer)) return "Viewer is the owner: the banner speaks to responders only.";
    if (h.hasApplied(viewer)) return "Viewer already applied: nothing left to prompt.";

    const responses = posting.responseCount || 0;
    const isFresh = h.isWithinHours(posting.postedAt, T.freshHours, now);
    const ownerActive = h.isWithinHours(posting.lastOwnerMessageAt, T.ownerActiveHours, now);

    if (posting.ownerHasResponded && ownerActive) {
      return (
        "Owner replied within the last " + T.ownerActiveHours + "h, so " +
        "reviewing wins outright, regardless of response count."
      );
    }
    if (isFresh && responses === 0) {
      return "Under " + T.freshHours + "h old, no responses yet.";
    }
    if (isFresh && responses > 0 && responses <= T.competitiveMax && !posting.ownerHasResponded) {
      return (
        "Under " + T.freshHours + "h old with " + responses +
        " response" + (responses === 1 ? "" : "s") + " (the 1-" +
        T.competitiveMax + " band) and the owner silent."
      );
    }
    if (isFresh && responses >= T.trendingMin && !posting.ownerHasResponded) {
      return (
        "Under " + T.freshHours + "h old with " + responses +
        " responses (" + T.trendingMin + "+ band) and the owner silent."
      );
    }
    if (h.isWithinDays(posting.postedAt, T.dormantDays, now)) {
      const noResponsesAndAging = !isFresh && responses === 0;
      const momentumSlowing =
        !h.isWithinHours(posting.postedAt, T.staleHours, now) &&
        responses >= 1 &&
        !h.isWithinHours(posting.lastResponseAt, T.staleHours, now);

      if (noResponsesAndAging) {
        return "Past " + T.freshHours + "h old with still no responses.";
      }
      if (momentumSlowing) {
        return (
          "Past " + T.staleHours + "h old with responses, but none in the " +
          "last " + T.staleHours + "h."
        );
      }
      return (
        "Within the " + T.dormantDays + "-day window, but recent enough " +
        "activity that none of the five rules match."
      );
    }
    return "Past the " + T.dormantDays + "-day cutoff: dormant.";
  }

  // What the v2 slot actually renders. Two things beyond SummaryBanner
  // itself, both from phases.md Phase 4:
  // - On error (guardrail failure or rate limit, in the real API; the
  //   "Force error" toggle locally), fall back to v1's own banner content
  //   inside the v2 slot, with a small note, rather than a bare error.
  //   When v1 has nothing either (gate failed, or no rule matched),
  //   there's nothing to fall back to, so SummaryBanner's own error state
  //   is what's left.
  // - On success, show the category v2 converged on next to its text, like
  //   v1's rule tag. See StreamResult.category in useStreamedSummary.ts for
  //   why this is read as confirmation, not a live disagreement check.
  function V2Slot(props: any) {
    const posting = props.posting;
    const viewer = props.viewer;
    const now = props.now;
    const stream = props.stream;

    if (stream.state === "error") {
      const chosen = SB.selectBanner(posting, viewer, now);
      if (!chosen) {
        return <SB.SummaryBanner state="error" error={stream.error} />;
      }
      return (
        <div>
          <SB.StatusBanner posting={posting} viewer={viewer} now={now} />
          <p className="v2-fallback-note">
            v2 unavailable right now, showing the rule-based summary instead.
          </p>
        </div>
      );
    }

    return (
      <>
        <SB.SummaryBanner
          state={stream.state}
          activityText={stream.activityText}
          matterText={stream.matterText}
          error={stream.error}
        />
        {stream.state === "done" && stream.category && (
          <span className="case__tag v2-category-tag">model: {stream.category}</span>
        )}
      </>
    );
  }

  /* ---- state presets ------------------------------------------------------
     One entry per reachable v1 outcome. Clicking a tab drops these values
     into the sliders, which is what the fixed-case gallery was really for:
     getting to the prerequisites a rule needs without hand-dragging several
     sliders into a combination that satisfies it.

     Two underperforming entries, because that rule has two branches (no
     responses at all vs. responses that have gone quiet) and nothing else
     distinguishes them on screen.
     ------------------------------------------------------------------------ */

  const STATE_PRESETS = [
    {
      key: "new",
      label: "New",
      controls: { viewCount: 34, responseCount: 0, postedHoursAgo: 2,
        lastResponseHoursAgo: 0, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
    {
      key: "competitive",
      label: "Competitive",
      controls: { viewCount: 86, responseCount: 2, postedHoursAgo: 30,
        lastResponseHoursAgo: 5, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
    {
      key: "trending",
      label: "Trending",
      controls: { viewCount: 412, responseCount: 7, postedHoursAgo: 20,
        lastResponseHoursAgo: 1, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
    {
      key: "reviewing",
      label: "Reviewing",
      controls: { viewCount: 230, responseCount: 5, postedHoursAgo: 26,
        lastResponseHoursAgo: 4, ownerHasResponded: true, ownerMessageHoursAgo: 1 },
    },
    {
      key: "underperforming",
      label: "Underperforming · no responses",
      controls: { viewCount: 58, responseCount: 0, postedHoursAgo: 120,
        lastResponseHoursAgo: 0, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
    {
      key: "underperforming",
      label: "Underperforming · stalled",
      controls: { viewCount: 143, responseCount: 3, postedHoursAgo: 96,
        lastResponseHoursAgo: 72, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
    {
      key: "none",
      label: "Dormant · no banner",
      controls: { viewCount: 77, responseCount: 4, postedHoursAgo: 216,
        lastResponseHoursAgo: 192, ownerHasResponded: false, ownerMessageHoursAgo: 1 },
    },
  ];

  // A response can't arrive before the posting existed.
  function clampLastResponse(c: any): number {
    return Math.min(c.lastResponseHoursAgo, c.postedHoursAgo);
  }

  // Collapses the inputs v2 actually cares about into one string, so the
  // stream only restarts when one of them really changes (see
  // useStreamedSummary.ts: posting/matter are fresh objects every render).
  // Also used to compare a preset against the current controls, which is how
  // a tab knows it's the one exactly selected rather than merely sharing an
  // outcome with the sliders' current position.
  function depsKeyOf(c: any): string {
    return [
      c.viewCount,
      c.responseCount,
      c.postedHoursAgo,
      clampLastResponse(c),
      c.matterId,
      c.profileId,
      c.forceError,
      c.ownerHasResponded,
      c.ownerHasResponded ? c.ownerMessageHoursAgo : "-",
    ].join("|");
  }

  /* ---- "under the hood" disclosure -----------------------------------------
     The eight inputs stay exactly as they were (a grid, all visible at
     once) — they just sit behind one single toggle instead of being on
     screen by default, so the sandbox reads as a banner with an inspectable
     mechanism underneath it, not a settings panel up front. Closed by
     default; opening it doesn't touch v1/v2 state, purely a visibility
     toggle around the same control markup/handlers as before.
     ------------------------------------------------------------------------ */

  function Disclosure(props: { title: string; hint: string; children: React.ReactNode }) {
    const openState = useState(false);
    const isOpen = openState[0];
    const setOpen = openState[1];

    return (
      <div className={"disclosure" + (isOpen ? " disclosure--open" : "")}>
        <button
          type="button"
          className="disclosure__trigger"
          aria-expanded={isOpen}
          onClick={function () {
            setOpen(!isOpen);
          }}
        >
          <span className="disclosure__chevron" aria-hidden="true">&rsaquo;</span>
          <span className="disclosure__title">{props.title}</span>
          <span className="disclosure__hint">{isOpen ? "Hide inputs" : props.hint}</span>
        </button>
        {isOpen && <div className="disclosure__panel">{props.children}</div>}
      </div>
    );
  }

  // Drives one live posting from the sliders, so the rule tree (ages,
  // response bands, owner activity, the dormant cutoff) can be explored
  // directly. This is the only v2 stream on the page.
  function Sandbox() {
    const matters = SB.mockMatters;
    const viewers = SB.mockViewers;
    const mock = SB.mockData;

    // Busy but cooling: plenty of activity, no response in a while, owner
    // silent. Posted age is past the 72h fresh cutoff on purpose: within
    // that window v1's rule tree can only ever say "trending" once there
    // are 3+ responses, no matter how stale the last one is, so a
    // same-day version of "busy but cooling" is a case v1 and an
    // independent model read very differently and the guardrail rejects
    // almost every time (tested: 0/8 passes at 60h/15/31h). Past 72h,
    // v1's own momentum-slowing rule agrees with that reading too (tested:
    // 8/8 passes at these numbers). Default viewer is whitfield, the PI
    // attorney, whose practice overlaps the default matter (auto-rear-end)
    // on purpose, so the fit sentence has something to say immediately.
    const state = useState({
      viewCount: 340,
      responseCount: 15,
      postedHoursAgo: 100,
      lastResponseHoursAgo: 60,
      ownerHasResponded: false,
      ownerMessageHoursAgo: 1,
      matterId: matters[0].id,
      profileId: viewers[0].id,
      forceError: false,
    });
    const controls = state[0];
    const setControls = state[1];

    // v2 stays unrequested until asked, so a page load costs nothing.
    const firedState = useState(false);
    const hasFired = firedState[0];
    const setHasFired = firedState[1];

    const callCount = useApiCallCount();

    const lastResponseHoursAgo = clampLastResponse(controls);

    const posting = {
      state: "open",
      isDirect: false,
      postedAt: new Date(mock.now - controls.postedHoursAgo * 3600e3),
      viewCount: controls.viewCount,
      responseCount: controls.responseCount,
      lastResponseAt:
        controls.responseCount > 0
          ? new Date(mock.now - lastResponseHoursAgo * 3600e3)
          : null,
      ownerHasResponded: controls.ownerHasResponded,
      lastOwnerMessageAt: controls.ownerHasResponded
        ? new Date(mock.now - controls.ownerMessageHoursAgo * 3600e3)
        : null,
    };
    const matter =
      matters.filter(function (m: any) {
        return m.id === controls.matterId;
      })[0] || matters[0];
    const profile =
      viewers.filter(function (v: any) {
        return v.id === controls.profileId;
      })[0] || viewers[0];
    const viewer = { isOwner: false, hasApplied: false, profile: profile };

    const chosen = SB.selectBanner(posting, viewer, mock.now);
    const key = chosen ? chosen.key : null;

    const depsKey = depsKeyOf(controls);

    // auto: false, so nothing fires on mount or when a slider moves; every
    // request goes through fire() below.
    const stream = SB.useStreamedSummary(posting, viewer, matter, mock.now, depsKey, {
      forceError: controls.forceError,
      auto: false,
    });

    // Set by a tab click: the request has to wait for the preset's values to
    // land in state, because regenerate() reads the inputs off the current
    // render's closure and would otherwise send the pre-click ones.
    const fireOnNextDeps = React.useRef(false);

    function fire() {
      setHasFired(true);
      // The forceError path short-circuits before any fetch, so it isn't a
      // billed call and shouldn't be counted as one.
      if (!controls.forceError) countApiCall();
      stream.regenerate();
    }

    React.useEffect(
      function () {
        if (!fireOnNextDeps.current) return;
        fireOnNextDeps.current = false;
        fire();
      },
      [depsKey]
    );

    function selectPreset(preset: any) {
      const next = Object.assign({}, controls, preset.controls);
      // Re-clicking the tab the sliders already sit on leaves depsKey
      // unchanged, so the effect above would never run: fire directly.
      if (depsKeyOf(next) === depsKey) {
        fire();
        return;
      }
      setControls(next);
      fireOnNextDeps.current = true;
    }

    // Exactly one tab is active. An exact slider match wins; failing that,
    // whichever tab shares the outcome the rules currently produce, so
    // dragging the sliders moves the highlight without firing anything.
    let activeTab = -1;
    let byOutcome = -1;
    STATE_PRESETS.forEach(function (p, i) {
      if (activeTab < 0 && depsKeyOf(Object.assign({}, controls, p.controls)) === depsKey) {
        activeTab = i;
      }
      if (byOutcome < 0 && p.key === (key || "none")) byOutcome = i;
    });
    if (activeTab < 0) activeTab = byOutcome;

    function setControl(field: string) {
      return function (e: React.ChangeEvent<HTMLInputElement>) {
        const value = Number(e.target.value);
        setControls(function (prev: any) {
          const next = Object.assign({}, prev);
          next[field] = value;
          return next;
        });
      };
    }

    function setFlag(field: string) {
      return function (e: React.ChangeEvent<HTMLInputElement>) {
        const checked = e.target.checked;
        setControls(function (prev: any) {
          const next = Object.assign({}, prev);
          next[field] = checked;
          return next;
        });
      };
    }

    return (
      <section className="sandbox">
        <div className="sandbox__head">
          <h2 className="sandbox__title">Sandbox</h2>
          <span className={"case__tag" + (key ? "" : " case__tag--none")}>
            {key || "no banner"}
          </span>
          <span className="call-counter">
            v2 requests this page: <b>{callCount}</b>
          </span>
        </div>
        <p className="case__note">{explainBanner(posting, viewer, mock.now)}</p>

        <div className="tabs">
          {STATE_PRESETS.map(function (p, i) {
            return (
              <button
                type="button"
                key={p.label}
                className={"tab" + (i === activeTab ? " tab--active" : "")}
                onClick={function () {
                  selectPreset(p);
                }}
              >
                {p.label}
              </button>
            );
          })}
        </div>
        <p className="tabs__hint">
          Pick a state to compare the rules banner with an AI summary.
          Changing inputs updates v1 instantly; v2 updates when you click
          Regenerate.
        </p>

        <Disclosure title="Under the hood" hint="Show inputs">
          <div className="sandbox__controls">
            <label>
              Views: <b>{controls.viewCount}</b>
              <input
                type="range"
                min="0"
                max="500"
                value={controls.viewCount}
                onChange={setControl("viewCount")}
              />
            </label>
            <label>
              Responses: <b>{controls.responseCount}</b>
              <input
                type="range"
                min="0"
                max="20"
                value={controls.responseCount}
                onChange={setControl("responseCount")}
              />
            </label>
            <label>
              Posted: <b>{formatHours(controls.postedHoursAgo)} ago</b>
              <input
                type="range"
                min="0"
                max="240"
                value={controls.postedHoursAgo}
                onChange={setControl("postedHoursAgo")}
              />
            </label>
            <label
              className={
                controls.responseCount === 0 ? "sandbox__control--disabled" : ""
              }
            >
              Last response:{" "}
              <b>
                {controls.responseCount === 0
                  ? "n/a, no responses"
                  : formatHours(lastResponseHoursAgo) + " ago"}
              </b>
              <input
                type="range"
                min="0"
                max={controls.postedHoursAgo}
                value={lastResponseHoursAgo}
                disabled={controls.responseCount === 0}
                onChange={setControl("lastResponseHoursAgo")}
              />
            </label>
            <label>
              Owner activity:
              <span className="sandbox__checkbox-row">
                <input
                  type="checkbox"
                  checked={controls.ownerHasResponded}
                  onChange={setFlag("ownerHasResponded")}
                />
                Owner has responded
              </span>
            </label>
            <label
              className={
                !controls.ownerHasResponded ? "sandbox__control--disabled" : ""
              }
            >
              Owner message:{" "}
              <b>
                {controls.ownerHasResponded
                  ? formatHours(controls.ownerMessageHoursAgo) + " ago"
                  : "n/a, owner silent"}
              </b>
              <input
                type="range"
                min="0"
                max="240"
                value={controls.ownerMessageHoursAgo}
                disabled={!controls.ownerHasResponded}
                onChange={setControl("ownerMessageHoursAgo")}
              />
            </label>
            <label>
              Matter (v2 input):
              <select
                value={controls.matterId}
                onChange={function (e: React.ChangeEvent<HTMLSelectElement>) {
                  setControls(function (prev: any) {
                    return Object.assign({}, prev, { matterId: e.target.value });
                  });
                }}
              >
                {matters.map(function (m: any) {
                  return (
                    <option key={m.id} value={m.id}>
                      {m.practiceArea} &middot; {m.state}
                    </option>
                  );
                })}
              </select>
            </label>
            <label>
              Viewing as (v2 input):
              <select
                value={controls.profileId}
                onChange={function (e: React.ChangeEvent<HTMLSelectElement>) {
                  setControls(function (prev: any) {
                    return Object.assign({}, prev, { profileId: e.target.value });
                  });
                }}
              >
                {viewers.map(function (v: any) {
                  return (
                    <option key={v.id} value={v.id}>
                      {v.name}
                    </option>
                  );
                })}
              </select>
            </label>
            <label>
              v2 debug:
              <span className="sandbox__checkbox-row">
                <input
                  type="checkbox"
                  checked={controls.forceError}
                  onChange={setFlag("forceError")}
                />
                Force error (no request sent)
              </span>
            </label>
          </div>
          <p className="sandbox__viewer-profile">
            Viewing as <b>{profile.name}</b>: practices in{" "}
            {profile.practiceAreas.join(", ")}. Past cases:{" "}
            {profile.pastCaseTypes.join(", ")}.
          </p>
        </Disclosure>

        <div className="case__rule"></div>
        <div className="case__stage">
          <div className="sb">
            <SB.StatsRow posting={posting} viewer={viewer} now={mock.now} />
            <div className="banner-version">
              <div className="banner-version__label">v1 &middot; rules-based</div>
              <SB.StatusBanner posting={posting} viewer={viewer} now={mock.now} />
            </div>
            <div
              className={
                "banner-version" +
                (hasFired && stream.stale ? " banner-version--stale" : "")
              }
            >
              <div className="banner-version__label">
                v2 &middot; AI summary
              </div>

              {hasFired ? (
                <>
                  <V2Slot
                    posting={posting}
                    viewer={viewer}
                    now={mock.now}
                    stream={stream}
                  />
                  <div className="v2-actions">
                    <button
                      type="button"
                      onClick={fire}
                      disabled={!stream.stale && stream.state !== "error"}
                    >
                      Regenerate
                    </button>
                    <span className="v2-actions__note">
                      {stream.stale
                        ? "Inputs changed since this was generated."
                        : stream.state === "error"
                        ? "That attempt failed or was rejected. Try again."
                        : "Matches the inputs above."}
                    </span>
                  </div>
                </>
              ) : (
                <>
                  <div className="v2-idle">
                    Nothing requested yet. Each v2 summary is a real model
                    call, so this page only asks when you do.
                  </div>
                  <div className="v2-actions">
                    <button type="button" onClick={fire}>
                      Generate
                    </button>
                    <span className="v2-actions__note">
                      Or pick a state above.
                    </span>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    );
  }

  SB.Sandbox = Sandbox;
})((window as any).SB = (window as any).SB || {});