/* Honey Scripts — Tweaks panel
   Lets the user swap the brand glyph live (and a couple of other touches).
*/

const { useTweaks, TweaksPanel, TweakSection, TweakColor } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glyph": "mic",
  "accent": "#FFB800"
}/*EDITMODE-END*/;

const GLYPH_OPTIONS = [
  // Radio & audio (curated for Honey Radio — script-contextual)
  { key: "walkie",    label: "Walkie talkie", group: "Radio & audio" },
  { key: "walkieR",   label: "Walkie (round)", group: "Radio & audio" },
  { key: "mic",       label: "Microphone", group: "Radio & audio" },
  { key: "micStudio", label: "Studio mic", group: "Radio & audio" },
  { key: "headset",   label: "Headset", group: "Radio & audio" },
  { key: "waves",     label: "Signal waves", group: "Radio & audio" },
  { key: "antenna",   label: "Antenna tower", group: "Radio & audio" },
  { key: "broadcast", label: "Broadcast", group: "Radio & audio" },
  { key: "bars",      label: "Signal bars", group: "Radio & audio" },
  { key: "speaker",   label: "Speaker", group: "Radio & audio" },
  { key: "dial",      label: "Tuning dial", group: "Radio & audio" },
  // Geometric / honey themed
  { key: "hex",     label: "Hex gem", group: "Geometric / honey" },
  { key: "outline", label: "Hex outline", group: "Geometric / honey" },
  { key: "prism",   label: "Hex prism", group: "Geometric / honey" },
  { key: "ring",    label: "Hex ring", group: "Geometric / honey" },
  { key: "stack",   label: "Hex stack", group: "Geometric / honey" },
  { key: "spark",   label: "Hex spark", group: "Geometric / honey" },
  { key: "bolt",    label: "Hex bolt", group: "Geometric / honey" },
  { key: "cut",     label: "Hex cut", group: "Geometric / honey" },
  { key: "grid",    label: "Hex grid", group: "Geometric / honey" },
  { key: "comb",    label: "Honeycomb", group: "Geometric / honey" },
  { key: "jar",     label: "Honey-fill", group: "Geometric / honey" },
  { key: "flower",  label: "Hex bloom", group: "Geometric / honey" },
  { key: "drop",    label: "Honey drop", group: "Geometric / honey" },
  { key: "bee",     label: "Tiny bee", group: "Geometric / honey" },
];

const GLYPH_ICON_MAP = {
  walkie:"Walkie", walkieR:"WalkieRound", mic:"Mic", micStudio:"MicStudio",
  headset:"Headset", waves:"Waves", antenna:"Antenna", broadcast:"Broadcast",
  bars:"Bars", speaker:"Speaker", dial:"Dial",
  hex:"Hex", outline:"HexOutline", prism:"HexPrism", ring:"HexRing",
  stack:"HexStack", spark:"HexSpark", bolt:"HexBolt", cut:"HexCut",
  grid:"HexGrid", comb:"Honeycomb", jar:"HexJar", flower:"HexFlower",
  drop:"HoneyDrop", bee:"Bee"
};

function GlyphPicker({ value, onChange }) {
  const groups = {};
  GLYPH_OPTIONS.forEach(o => { (groups[o.group] = groups[o.group] || []).push(o); });
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {Object.entries(groups).map(([group, items]) => (
        <div key={group}>
          <div style={{
            fontSize: 9.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase",
            color: "rgba(41,38,27,.45)", marginBottom: 6, paddingLeft: 2,
          }}>{group}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
            {items.map(opt => {
              const Icn = window.Icon[GLYPH_ICON_MAP[opt.key]];
              const selected = value === opt.key;
              return (
                <button
                  key={opt.key}
                  onClick={() => onChange(opt.key)}
                  title={opt.label}
                  style={{
                    padding: "10px 0",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    borderRadius: 10,
                    border: selected ? "1px solid #FFB800" : "1px solid rgba(0,0,0,.10)",
                    background: selected
                      ? "linear-gradient(180deg, rgba(255,184,0,0.18), rgba(255,149,0,0.06))"
                      : "rgba(255,255,255,0.4)",
                    cursor: "pointer",
                    color: selected ? "#FF9500" : "#29261b",
                    boxShadow: selected ? "0 0 14px rgba(255,184,0,0.25)" : "none",
                    transition: "all .15s ease",
                  }}
                >
                  <Icn style={{ width: 22, height: 22 }}/>
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

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

  // Sync glyph -> global brand icon store
  React.useEffect(() => { window.setBrandGlyph(t.glyph); }, [t.glyph]);

  // Sync accent -> CSS custom property
  React.useEffect(() => {
    document.documentElement.style.setProperty("--honey", t.accent);
  }, [t.accent]);

  return (
    <TweaksPanel>
      <TweakSection label="Honey Radio · script icon"/>
      <div className="twk-row">
        <div className="twk-lbl"><span>Glyph</span><span className="twk-val" style={{ fontSize: 10 }}>tap to swap</span></div>
        <GlyphPicker value={t.glyph} onChange={(v) => setTweak("glyph", v)}/>
      </div>

      <TweakSection label="Accent"/>
      <TweakColor
        label="Honey shade"
        value={t.accent}
        options={["#FFB800", "#FF9500", "#F7C548", "#E59500", "#F2A900"]}
        onChange={(v) => setTweak("accent", v)}
      />
    </TweaksPanel>
  );
}

// Mount the panel into its own root so it doesn't fight with the main app's render.
(function mount() {
  const el = document.createElement("div");
  el.id = "tweaks-root";
  document.body.appendChild(el);
  const r = ReactDOM.createRoot(el);
  r.render(<TweaksHost/>);
})();