// Audience-toggle infrastructure: provider, hook, copy helper, top-center pill.

const { useState: useState5, useEffect: useEffect5, useContext: useContext5 } = React;

const AUDIENCES = ["team", "client"];
const AUDIENCE_DEFAULT = "team";
const AUDIENCE_STORAGE_KEY = "proshore.audience";

const AudienceContext = React.createContext({
  audience: AUDIENCE_DEFAULT,
  setAudience: () => {},
});

function readInitialAudience() {
  try {
    const fromUrl = new URLSearchParams(window.location.search).get("audience");
    if (AUDIENCES.includes(fromUrl)) return fromUrl;
    const fromStorage = window.localStorage.getItem(AUDIENCE_STORAGE_KEY);
    if (AUDIENCES.includes(fromStorage)) return fromStorage;
  } catch (e) {}
  return AUDIENCE_DEFAULT;
}

function writeAudience(next) {
  try {
    window.localStorage.setItem(AUDIENCE_STORAGE_KEY, next);
    const url = new URL(window.location.href);
    url.searchParams.set("audience", next);
    window.history.replaceState({}, "", url);
  } catch (e) {}
}

function AudienceProvider({ children }) {
  const [audience, setAudienceState] = useState5(() => readInitialAudience());

  useEffect5(() => {
    // Sync URL on first mount (covers the localStorage-only case).
    writeAudience(audience);
    const onPop = () => setAudienceState(readInitialAudience());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const setAudience = (next) => {
    if (!AUDIENCES.includes(next)) return;
    setAudienceState(next);
    writeAudience(next);
  };

  return (
    <AudienceContext.Provider value={{ audience, setAudience }}>
      {children}
    </AudienceContext.Provider>
  );
}

function useAudience() {
  return useContext5(AudienceContext);
}

// pickCopy(value, audience) unwraps {team, client} variants, leaves anything else alone.
function pickCopy(value, audience) {
  if (
    value &&
    typeof value === "object" &&
    !Array.isArray(value) &&
    ("team" in value || "client" in value)
  ) {
    return value[audience] ?? value.team ?? value.client ?? "";
  }
  return value;
}

function AudienceToggle() {
  const { audience, setAudience } = useAudience();
  return (
    <nav className="audience-nav" aria-label="View audience">
      {AUDIENCES.map((a) => (
        <button
          key={a}
          type="button"
          className={`audience-pill ${audience === a ? "active" : ""}`}
          onClick={() => setAudience(a)}
          aria-pressed={audience === a}
        >
          {a === "team" ? "For team" : "For client"}
        </button>
      ))}
    </nav>
  );
}

Object.assign(window, {
  AudienceContext,
  AudienceProvider,
  useAudience,
  pickCopy,
  AudienceToggle,
  AUDIENCES,
  AUDIENCE_DEFAULT,
});