/* global React */
// wf-mobile · tweaks-panel.jsx
// Floating tweaks panel for presentation control. Posts edit-mode protocol so
// host (editor) stays in sync. Drop into any wireframe with TweakSection,
// TweakSelect, TweakText, TweakToggle, TweakRadio.
window.WFMobile = window.WFMobile || {};

const TWK_CSS = `
.twk{position:fixed;right:20px;bottom:20px;z-index:2147483646;width:300px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:rgba(255,255,255,.86);color:#1c1917;-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:.5px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 60px -12px rgba(0,0,0,.25);font:12px/1.4 'Inter',system-ui,sans-serif;overflow:hidden}
.twk-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;border-bottom:.5px solid rgba(0,0,0,.06)}
.twk-h b{font-weight:600;font-size:13px;letter-spacing:-.01em}
.twk-x{appearance:none;border:0;background:rgba(0,0,0,.05);width:24px;height:24px;border-radius:999px;color:#44403c;display:grid;place-items:center;cursor:pointer}
.twk-x:hover{background:rgba(0,0,0,.1)}
.twk-b{padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.twk-b::-webkit-scrollbar{width:6px}.twk-b::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
.twk-sect{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#78716c;padding-top:8px;border-top:.5px solid rgba(0,0,0,.06)}
.twk-sect:first-child{border-top:0;padding-top:0}
.twk-row{display:flex;flex-direction:column;gap:6px}
.twk-row label{font-size:11px;color:#57534e;font-weight:500;display:flex;justify-content:space-between}
.twk-row label span:last-child{color:#a8a29e;font-variant-numeric:tabular-nums}
.twk-row select,.twk-row input[type=text]{height:32px;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:0 10px;background:#fff;color:#1c1917;font-size:13px;outline:none;width:100%}
.twk-row select:focus,.twk-row input:focus{border-color:#e81c21}
.twk-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:#f5f5f4;padding:3px;border-radius:9px}
.twk-seg button{border:0;background:transparent;padding:6px 4px;font-size:11px;font-weight:500;color:#44403c;border-radius:7px;cursor:pointer}
.twk-seg button.on{background:#fff;color:#0c0a09;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.twk-toggle{display:flex;align-items:center;justify-content:space-between}
.twk-tog{width:38px;height:22px;border-radius:999px;background:#d6d3d1;position:relative;border:0;cursor:pointer;transition:background .2s}
.twk-tog.on{background:#15803d}
.twk-tog i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.twk-tog.on i{transform:translateX(16px)}
`;

function useTweaks(defaults) {
  const [values, setValues] = React.useState(defaults);
  const setTweak = React.useCallback((keyOrEdits, val) => {
    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null ? keyOrEdits : { [keyOrEdits]: val };
    setValues((prev) => ({ ...prev, ...edits }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*'); } catch (_) {}
  }, []);
  return [values, setTweak];
}

function TweaksPanel({ title = 'Tweaks', children, defaultOpen = true }) {
  const [open, setOpen] = React.useState(defaultOpen);
  React.useEffect(() => {
    const onMsg = (e) => {
      const t = e?.data?.type;
      if (t === '__activate_edit_mode') setOpen(true);
      if (t === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (_) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);
  if (!open) return null;
  return (
    <>
      <style>{TWK_CSS}</style>
      <div className="twk">
        <div className="twk-h"><b>{title}</b>
          <button className="twk-x" onClick={() => setOpen(false)} aria-label="Close">✕</button>
        </div>
        <div className="twk-b">{children}</div>
      </div>
    </>
  );
}

function TweakSection({ label }) { return <div className="twk-sect">{label}</div>; }

function TweakSelect({ label, value, options, onChange }) {
  return (
    <div className="twk-row">
      <label><span>{label}</span></label>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((o) => {
          const v = typeof o === 'string' ? o : o.value;
          const l = typeof o === 'string' ? o : o.label;
          return <option key={v} value={v}>{l}</option>;
        })}
      </select>
    </div>
  );
}

function TweakSegment({ label, value, options, onChange }) {
  return (
    <div className="twk-row">
      <label><span>{label}</span></label>
      <div className="twk-seg">
        {options.map((o) => {
          const v = typeof o === 'string' ? o : o.value;
          const l = typeof o === 'string' ? o : o.label;
          return <button key={v} className={v === value ? 'on' : ''} onClick={() => onChange(v)}>{l}</button>;
        })}
      </div>
    </div>
  );
}

function TweakText({ label, value, onChange, placeholder }) {
  return (
    <div className="twk-row">
      <label><span>{label}</span></label>
      <input type="text" value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <div className="twk-row twk-toggle">
      <label style={{ marginBottom: 0 }}><span>{label}</span></label>
      <button className={'twk-tog ' + (value ? 'on' : '')} onClick={() => onChange(!value)} aria-pressed={value}><i/></button>
    </div>
  );
}

window.WFMobile.useTweaks = useTweaks;
window.WFMobile.TweaksPanel = TweaksPanel;
window.WFMobile.TweakSection = TweakSection;
window.WFMobile.TweakSelect = TweakSelect;
window.WFMobile.TweakSegment = TweakSegment;
window.WFMobile.TweakText = TweakText;
window.WFMobile.TweakToggle = TweakToggle;