/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSlider, useTweaks, Manifesto, OperatorOS */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "operator",
  "manifestoPalette": "bone",
  "manifestoDensity": "regular",
  "operatorAccent": "amber",
  "operatorRole": "operator",
  "operatorScanlines": true
}/*EDITMODE-END*/;

const MANIFESTO_PALETTES = {
  bone:  { bg: "#f1ecdf", ink: "#1a1614", accent: "#b8451f", muted: "#7a6f5e", line: "rgba(26,22,20,0.12)", swatch: ["#f1ecdf","#1a1614","#b8451f"] },
  paper: { bg: "#f6f4ef", ink: "#1a1614", accent: "#8d4f2a", muted: "#6e6457", line: "rgba(26,22,20,0.1)",  swatch: ["#f6f4ef","#1a1614","#8d4f2a"] },
  noir:  { bg: "#15110d", ink: "#f0ead8", accent: "#e07a3c", muted: "#8a8270", line: "rgba(240,234,216,0.12)", swatch: ["#15110d","#f0ead8","#e07a3c"] }
};

const OPERATOR_ACCENTS = {
  amber:  { hex: "#ffb547", glow: "rgba(255,181,71,0.18)", swatch: ["#ffb547","#0a0a0a","#e8e0d0"] },
  green:  { hex: "#7fffa0", glow: "rgba(127,255,160,0.16)", swatch: ["#7fffa0","#0a0a0a","#e8e0d0"] },
  orange: { hex: "#ff6b35", glow: "rgba(255,107,53,0.18)", swatch: ["#ff6b35","#0a0a0a","#e8e0d0"] },
  blue:   { hex: "#9cc6ff", glow: "rgba(156,198,255,0.16)", swatch: ["#9cc6ff","#0a0a0a","#e8e0d0"] }
};

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

  const isManifesto = t.direction === "manifesto";

  const manifestoPalette = MANIFESTO_PALETTES[t.manifestoPalette] || MANIFESTO_PALETTES.bone;
  const operatorAccent = OPERATOR_ACCENTS[t.operatorAccent] || OPERATOR_ACCENTS.amber;

  // map array swatches back to key
  const matchPaletteKey = (arr, dict) => {
    const k = JSON.stringify(arr).toLowerCase();
    for (const [key, val] of Object.entries(dict)) {
      if (JSON.stringify(val.swatch).toLowerCase() === k) return key;
    }
    return null;
  };

  return (
    <React.Fragment>
      {isManifesto ? (
        <Manifesto theme={manifestoPalette} density={t.manifestoDensity} />
      ) : (
        <OperatorOS
          accent={operatorAccent}
          role={t.operatorRole}
          scanlines={t.operatorScanlines}
          setRole={(r) => setTweak("operatorRole", r)}
        />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Direction" />
        <TweakRadio
          label="Variant"
          value={t.direction}
          options={[{ value: "manifesto", label: "Manifesto" }, { value: "operator", label: "Operator OS" }]}
          onChange={(v) => setTweak("direction", v)}
        />

        {isManifesto ? (
          <React.Fragment>
            <TweakSection label="Manifesto" />
            <TweakColor
              label="Palette"
              value={manifestoPalette.swatch}
              options={Object.values(MANIFESTO_PALETTES).map(p => p.swatch)}
              onChange={(arr) => {
                const key = matchPaletteKey(arr, MANIFESTO_PALETTES);
                if (key) setTweak("manifestoPalette", key);
              }}
            />
            <TweakRadio
              label="Density"
              value={t.manifestoDensity}
              options={["compact", "regular", "airy"]}
              onChange={(v) => setTweak("manifestoDensity", v)}
            />
          </React.Fragment>
        ) : (
          <React.Fragment>
            <TweakSection label="Operator OS" />
            <TweakColor
              label="Accent"
              value={operatorAccent.swatch}
              options={Object.values(OPERATOR_ACCENTS).map(a => a.swatch)}
              onChange={(arr) => {
                const key = matchPaletteKey(arr, OPERATOR_ACCENTS);
                if (key) setTweak("operatorAccent", key);
              }}
            />
            <TweakRadio
              label="View as"
              value={t.operatorRole}
              options={["engineer", "operator", "advisor"]}
              onChange={(v) => setTweak("operatorRole", v)}
            />
            <TweakToggle
              label="Scanlines"
              value={t.operatorScanlines}
              onChange={(v) => setTweak("operatorScanlines", v)}
            />
          </React.Fragment>
        )}
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);