const { useState: useStateTw, useEffect: useEffectTw } = React;

// Tweaks panel — activated by the host toolbar toggle.
function Tweaks({ values, onChange }) {
  return (
    <div className="tweaks-panel" role="dialog" aria-label="Tweaks">
      <div className="tweaks-head">
        <div className="tweaks-title">Tweaks</div>
        <div className="tweaks-sub">live-edit this design</div>
      </div>

      <div className="tweak-group">
        <label className="tweak-label">Accent color</label>
        <div className="tweak-swatches">
          {[
            ["#d65a2e", "Rust"],
            ["#e07a1a", "Amber"],
            ["#2563eb", "Blue"],
            ["#16a34a", "Green"],
            ["#a855f7", "Lilac"],
            ["#db2777", "Pink"],
            ["#0f172a", "Slate"],
          ].map(([c, l]) => (
            <button
              key={c}
              className={"tw-swatch" + (values.accent === c ? " active" : "")}
              style={{ background: c }}
              title={l}
              onClick={() => onChange({ accent: c })}
            />
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <label className="tweak-label">Headline size <span className="tweak-val">{values.headlineSize}px</span></label>
        <input
          type="range"
          min="48"
          max="96"
          step="2"
          value={values.headlineSize}
          onChange={(e) => onChange({ headlineSize: Number(e.target.value) })}
        />
      </div>

      <div className="tweak-group">
        <label className="tweak-label">Headline text</label>
        <textarea
          rows="2"
          value={values.heroHeadline}
          onChange={(e) => onChange({ heroHeadline: e.target.value })}
        />
        <label className="tweak-label" style={{ marginTop: 10 }}>Accent phrase (within headline)</label>
        <input
          type="text"
          value={values.heroAccentText}
          onChange={(e) => onChange({ heroAccentText: e.target.value })}
        />
      </div>

      <div className="tweak-group tweak-checks">
        <label className="tweak-check">
          <input
            type="checkbox"
            checked={values.fatter}
            onChange={(e) => onChange({ fatter: e.target.checked })}
          />
          <span>Fatter headline (800 weight)</span>
        </label>
        <label className="tweak-check">
          <input
            type="checkbox"
            checked={values.showChibi}
            onChange={(e) => onChange({ showChibi: e.target.checked })}
          />
          <span>Show chibi on globe</span>
        </label>
        <label className="tweak-check">
          <input
            type="checkbox"
            checked={values.showPlanet}
            onChange={(e) => onChange({ showPlanet: e.target.checked })}
          />
          <span>Show globe</span>
        </label>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });