// Maachu Labs Tweaks — three expressive controls (Signal, Voice, Pulse).
// Each one reshapes the FEEL of the whole page, not a single property.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "signal": "cobalt",
  "voice": "editorial",
  "pulse": "active"
}/*EDITMODE-END*/;

const SIGNAL_OPTIONS = [
  { value: "cobalt",   label: "Cobalt",   colors: ["#5eb3ff", "#b288ff"], desc: "blue · violet — editorial" },
  { value: "solar",    label: "Solar",    colors: ["#ffb060", "#ff6648"], desc: "amber · coral — kinetic" },
  { value: "terminal", label: "Terminal", colors: ["#7cf0a0", "#ffe26b"], desc: "phosphor — scanlines" },
  { value: "mono",     label: "Mono",     colors: ["#f4f4f4", "#9a9a9a"], desc: "no chroma — print" },
];

// Custom 2×2 swatch grid — TweakColor compares values via JSON.stringify so
// a string→array mapping wouldn't highlight the selected option. The chip is
// just <button> + the same shadow/checkmark cues the starter uses.
function SignalChips({ value, onChange }) {
  const cur = SIGNAL_OPTIONS.find((o) => o.value === value) || SIGNAL_OPTIONS[0];
  return (
    <div className="twk-row">
      <div className="twk-lbl"><span>Accent</span><span className="twk-val">{cur.label}</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {SIGNAL_OPTIONS.map((o) => {
          const on = o.value === value;
          return (
            <button key={o.value} type="button" onClick={() => onChange(o.value)}
              aria-label={o.label} title={o.label + " — " + o.desc}
              style={{
                position: "relative", appearance: "none", height: 38, padding: 0,
                border: 0, borderRadius: 7, cursor: "default", overflow: "hidden",
                background: `linear-gradient(120deg, ${o.colors[0]}, ${o.colors[1]})`,
                boxShadow: on
                  ? "0 0 0 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.18)"
                  : "0 0 0 .5px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.10)",
                transition: "box-shadow .12s, transform .12s",
                transform: on ? "translateY(0)" : "translateY(0)",
              }}>
              <span style={{
                position: "absolute", left: 8, bottom: 6,
                font: "600 10px/1 ui-sans-serif, system-ui",
                letterSpacing: ".04em",
                color: o.value === "mono" ? "rgba(0,0,0,.7)" : "rgba(255,255,255,.95)",
                textShadow: o.value === "mono" ? "none" : "0 1px 2px rgba(0,0,0,.35)",
              }}>{o.label}</span>
              {on && (
                <svg viewBox="0 0 14 14" width="13" height="13"
                  style={{ position: "absolute", top: 6, right: 6,
                    filter: "drop-shadow(0 1px 1px rgba(0,0,0,.35))" }}>
                  <path d="M3 7.2 5.8 10 11 4.2" fill="none" strokeWidth="2.2"
                    strokeLinecap="round" strokeLinejoin="round"
                    stroke={o.value === "mono" ? "rgba(0,0,0,.85)" : "#fff"} />
                </svg>
              )}
            </button>
          );
        })}
      </div>
      <div style={{
        font: "10px/1.3 ui-monospace, monospace",
        color: "rgba(41,38,27,.55)",
        letterSpacing: ".06em", textTransform: "uppercase",
      }}>{cur.desc}</div>
    </div>
  );
}

function MiniDesc({ children }) {
  return (
    <div style={{
      font: "10px/1.3 ui-monospace, monospace",
      color: "rgba(41,38,27,.55)",
      letterSpacing: ".06em",
      textTransform: "uppercase",
      marginTop: -4,
    }}>{children}</div>
  );
}

function AxonTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Sync the three axes to body classes so the variant CSS in tweaks.css applies.
  React.useEffect(() => {
    const body = document.body;
    const cleaned = [...body.classList].filter(
      (c) => !/^(signal|voice|pulse)-/.test(c)
    );
    body.className = [
      ...cleaned,
      `signal-${t.signal}`,
      `voice-${t.voice}`,
      `pulse-${t.pulse}`,
    ].join(" ").trim();
  }, [t.signal, t.voice, t.pulse]);

  const voiceDesc = {
    editorial: "serif italic — magazine",
    bracketed: "mono tag — technical",
    caps:      "bold uppercase — declarative",
  }[t.voice];

  const pulseDesc = {
    calm:   "still — print mode",
    active: "default — alive",
    hyper:  "fast · glow · scan",
  }[t.pulse];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Signal">
        <SignalChips value={t.signal} onChange={(v) => setTweak("signal", v)} />
      </TweakSection>

      <TweakSection label="Voice">
        <TweakRadio
          label="Em accent"
          value={t.voice}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "bracketed", label: "Bracketed" },
            { value: "caps",      label: "Caps" },
          ]}
          onChange={(v) => setTweak("voice", v)}
        />
        <MiniDesc>{voiceDesc}</MiniDesc>
      </TweakSection>

      <TweakSection label="Pulse">
        <TweakRadio
          label="Motion"
          value={t.pulse}
          options={[
            { value: "calm",   label: "Calm" },
            { value: "active", label: "Active" },
            { value: "hyper",  label: "Hyper" },
          ]}
          onChange={(v) => setTweak("pulse", v)}
        />
        <MiniDesc>{pulseDesc}</MiniDesc>
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<AxonTweaks />);