// settings.jsx — slide-in drawer for editing thresholds per sensor.

function ThresholdInput({ label, value, onChange, color }) {
  const [draft, setDraft] = React.useState(value == null ? '' : String(value));
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    // Don't clobber what the user is currently typing if the value prop
    // changes mid-edit (the cross-device tweak sync polls every 30s).
    if (typeof document !== 'undefined' && inputRef.current === document.activeElement) return;
    setDraft(value == null ? '' : String(value));
  }, [value]);
  return (
    <div className="thr-input">
      <label>{label}</label>
      <div className="thr-input-row">
        <span className="thr-dot" style={{ background: color }}/>
        <input
          ref={inputRef}
          type="number"
          value={draft}
          placeholder="—"
          onChange={(e) => setDraft(e.target.value)}
          onBlur={() => {
            if (draft === '' || draft === '-') onChange(null);
            else {
              const n = parseFloat(draft);
              onChange(isFinite(n) ? n : null);
            }
          }}
          onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
        />
      </div>
    </div>
  );
}

function SettingsPanel({ open, onClose, sensors, thresholds, setThresholds, visibleSensors, setVisibleSensors }) {
  const update = (sid, key, val) => {
    setThresholds(prev => ({ ...prev, [sid]: { ...prev[sid], [key]: val } }));
  };
  const reset = (sid) => {
    setThresholds(prev => ({ ...prev, [sid]: { warnLow: null, warnHigh: null, dangerLow: null, dangerHigh: null } }));
  };
  return (
    <React.Fragment>
      <div className={`drawer-scrim ${open ? 'open' : ''}`} onClick={onClose}/>
      <aside className={`drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <header className="drawer-hd">
          <div>
            <div className="drawer-eyebrow">CONFIG / 02</div>
            <h2>Thresholds</h2>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 3L13 13M13 3L3 13" stroke="currentColor" strokeWidth="2" strokeLinecap="square"/></svg>
          </button>
        </header>
        <p className="drawer-help">Define warning and danger bounds for each channel. Empty = disabled.</p>

        <section className="drawer-section">
          <div className="drawer-section-hd">
            <span className="mono-lbl">VISIBILITY</span>
          </div>
          <div className="visibility-grid">
            {sensors.map(s => (
              <button
                key={s.id}
                className={`vis-toggle ${visibleSensors.includes(s.id) ? 'on' : ''}`}
                onClick={() => setVisibleSensors(prev =>
                  prev.includes(s.id) ? prev.filter(x => x !== s.id) : [...prev, s.id]
                )}
              >
                <span className="vis-check"/>
                <span className="vis-label">{s.label}</span>
              </button>
            ))}
          </div>
        </section>

        {sensors.map(s => {
          const t = thresholds[s.id] || {};
          return (
            <section key={s.id} className="drawer-section">
              <div className="drawer-section-hd">
                <span className="mono-lbl">{s.label.toUpperCase()} <span className="thr-unit">[ {s.range[0]}–{s.range[1]} {s.unit} ]</span></span>
                <button className="link-btn" onClick={() => reset(s.id)}>RESET</button>
              </div>
              <div className="thr-grid">
                <ThresholdInput label="DANGER ↓" color="#D9342B" value={t.dangerLow}
                  onChange={(v) => update(s.id, 'dangerLow', v)}/>
                <ThresholdInput label="WARN ↓" color="#E5A82B" value={t.warnLow}
                  onChange={(v) => update(s.id, 'warnLow', v)}/>
                <ThresholdInput label="WARN ↑" color="#E5A82B" value={t.warnHigh}
                  onChange={(v) => update(s.id, 'warnHigh', v)}/>
                <ThresholdInput label="DANGER ↑" color="#D9342B" value={t.dangerHigh}
                  onChange={(v) => update(s.id, 'dangerHigh', v)}/>
              </div>
            </section>
          );
        })}

        <footer className="drawer-ft">
          <span className="mono-lbl muted">Saved locally · auto-applied</span>
        </footer>
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { SettingsPanel });