/* MatchPlan.ai — Tweaks: theme (light/dark) + accent family + demo reset.
   Kept in sync with the in-app theme toggle via MP + the 'mp-themechange' event. */

const MP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "accent": "blue",
  "createFlow": "smart"
}/*EDITMODE-END*/;

const CREATE_FLOWS = [
  { key: "smart", label: "Smart box" },
  { key: "invite", label: "Forward an invite" },
  { key: "meeting", label: "Pick a meeting" }
];

function Tweaks() {
  const [t, setTweak] = useTweaks(MP_TWEAK_DEFAULTS);
  const accents = MP.ACCENTS;
  const hexFor = (key) => (accents.find(a => a.key === key) || accents[0]).accent;
  const keyFor = (hex) => (accents.find(a => a.accent.toLowerCase() === String(hex).toLowerCase()) || accents[0]).key;

  // hydrate from stored MP state once
  React.useEffect(() => {
    const st = MP.get();
    setTweak({ dark: st.theme === "dark", accent: st.accent || "blue", createFlow: st.createFlow || "smart" });
  }, []);

  // apply (skip first render so we don't clobber the stored theme on load)
  const firstTheme = React.useRef(true);
  React.useEffect(() => {
    if (firstTheme.current) { firstTheme.current = false; return; }
    MP.setTheme(t.dark ? "dark" : "light");
    window.dispatchEvent(new Event("mp-themechange"));
  }, [t.dark]);

  const firstAccent = React.useRef(true);
  React.useEffect(() => {
    if (firstAccent.current) { firstAccent.current = false; return; }
    MP.setAccent(t.accent);
  }, [t.accent]);

  const firstFlow = React.useRef(true);
  React.useEffect(() => {
    if (firstFlow.current) { firstFlow.current = false; return; }
    MP.setCreateFlow(t.createFlow);
    window.dispatchEvent(new Event("mp-flowchange"));
  }, [t.createFlow]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />

      <TweakSection label="Accent" />
      <TweakColor label="Brand accent"
        value={hexFor(t.accent)}
        options={accents.map(a => a.accent)}
        onChange={(hex) => setTweak("accent", keyFor(hex))} />
      <p style={{ fontSize: 11, lineHeight: 1.5, opacity: 0.6, margin: "2px 2px 0" }}>
        Recolors every primary action, link, and highlight. Drawn from the Evolve brand families.
      </p>

      <TweakSection label="New-brief flow" />
      <TweakRadio label="How reps start a brief"
        value={t.createFlow}
        options={CREATE_FLOWS.map(f => ({ value: f.key, label: f.label }))}
        onChange={(v) => setTweak("createFlow", v)} />
      <p style={{ fontSize: 11, lineHeight: 1.5, opacity: 0.6, margin: "2px 2px 0" }}>
        Three takes on the lowest-effort way to start: paste anything, forward a calendar invite, or pick from upcoming meetings.
      </p>

      <TweakSection label="Demo" />
      <TweakButton label="Reset to a fresh login" secondary
        onClick={() => { MP.reset(); window.dispatchEvent(new Event("mp-themechange")); window.location.hash = "#/login"; }} />
    </TweaksPanel>
  );
}

Object.assign(window, { Tweaks, MP_TWEAK_DEFAULTS });