// NoMind — Tweaks panel. Speaks the host edit-mode protocol.
const { useState: _us, useEffect: _ue2 } = React;

function TweakRow({ label, children }) {
  return (
    <div className="tw-row">
      <div className="tw-row-label mono-label">{label}</div>
      <div className="tw-row-ctl">{children}</div>
    </div>
  );
}

function Segmented({ value, options, onChange }) {
  return (
    <div className="tw-seg">
      {options.map(o => (
        <button
          key={o.value}
          className={'tw-seg-btn' + (value === o.value ? ' is-on' : '')}
          onClick={() => onChange(o.value)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

function Swatches({ value, options, onChange }) {
  return (
    <div className="tw-sw">
      {options.map(o => (
        <button
          key={o.value}
          title={o.label}
          onClick={() => onChange(o.value)}
          className={'tw-sw-dot' + (value === o.value ? ' is-on' : '')}
          style={{ background: o.color }}
        />
      ))}
    </div>
  );
}

function TweaksPanel({ tweaks, setTweaks, visible, onClose }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks(prev => ({ ...prev, [k]: v }));

  return (
    <aside className="tw-panel" role="dialog" aria-label="Tweaks">
      <header className="tw-head">
        <div>
          <div className="mono-label dim">NoMind · Controls</div>
          <div className="tw-title">Tweaks</div>
        </div>
        <button className="tw-close" onClick={onClose} aria-label="Close">×</button>
      </header>

      <div className="tw-body">
        <TweakRow label="Art direction">
          <Segmented
            value={tweaks.direction}
            onChange={v => set('direction', v)}
            options={[
              { value: 'd1', label: 'D1 · Zen' },
              { value: 'd2', label: 'D2 · Exec' },
              { value: 'd3', label: 'D3 · Living' },
            ]}
          />
        </TweakRow>

        <TweakRow label="Background system">
          <Segmented
            value={tweaks.bg}
            onChange={v => set('bg', v)}
            options={[
              { value: 'field', label: 'Field' },
              { value: 'swarm', label: 'Swarm' },
              { value: 'life',  label: 'Life' },
              { value: 'nodes', label: 'Nodes' },
              { value: 'grid',  label: 'Grid' },
            ]}
          />
        </TweakRow>

        <TweakRow label="Accent">
          <Swatches
            value={tweaks.accent}
            onChange={v => set('accent', v)}
            options={[
              { value: 'jade',   color: 'oklch(0.58 0.075 165)', label: 'Jade' },
              { value: 'indigo', color: 'oklch(0.55 0.12 265)',  label: 'Indigo' },
              { value: 'ember',  color: 'oklch(0.64 0.14 45)',   label: 'Ember' },
              { value: 'orchid', color: 'oklch(0.62 0.14 320)',  label: 'Orchid' },
              { value: 'bone',   color: 'oklch(0.70 0.02 85)',   label: 'Bone' },
            ]}
          />
        </TweakRow>

        <TweakRow label={`Motion · ${Math.round(tweaks.motion * 100)}`}>
          <input
            className="tw-range"
            type="range" min="0" max="100" step="5"
            value={Math.round(tweaks.motion * 100)}
            onChange={e => set('motion', e.target.value / 100)}
          />
        </TweakRow>

        {tweaks.bg === 'swarm' && (
          <>
            <TweakRow label={`Swarm · circle size · ${tweaks.swarmSize.toFixed(1)}px`}>
              <input
                className="tw-range"
                type="range" min="0.6" max="5" step="0.1"
                value={tweaks.swarmSize}
                onChange={e => set('swarmSize', parseFloat(e.target.value))}
              />
            </TweakRow>
            <TweakRow label={`Swarm · count · ${Math.round(tweaks.swarmCount * 100)}%`}>
              <input
                className="tw-range"
                type="range" min="0.2" max="2.5" step="0.1"
                value={tweaks.swarmCount}
                onChange={e => set('swarmCount', parseFloat(e.target.value))}
              />
            </TweakRow>
            <TweakRow label="Swarm · proximity edges">
              <Segmented
                value={tweaks.swarmEdges ? 'on' : 'off'}
                onChange={v => set('swarmEdges', v === 'on')}
                options={[
                  { value: 'on',  label: 'On' },
                  { value: 'off', label: 'Off' },
                ]}
              />
            </TweakRow>
          </>
        )}

        {tweaks.bg === 'life' && (
          <>
            <TweakRow label={`Life · cell size · ${tweaks.lifeCell}px`}>
              <input className="tw-range" type="range" min="6" max="40" step="1"
                value={tweaks.lifeCell}
                onChange={e => set('lifeCell', parseInt(e.target.value, 10))} />
            </TweakRow>
            <TweakRow label={`Life · opacity · ${Math.round((tweaks.lifeOpacity ?? 0.55) * 100)}%`}>
              <input className="tw-range" type="range" min="0.01" max="1" step="0.01"
                value={tweaks.lifeOpacity ?? 0.55}
                onChange={e => set('lifeOpacity', parseFloat(e.target.value))} />
            </TweakRow>
            <TweakRow label={`Life · seed density · ${Math.round((tweaks.lifeDensity ?? 0.22) * 100)}%`}>
              <input className="tw-range" type="range" min="0.05" max="0.5" step="0.01"
                value={tweaks.lifeDensity ?? 0.22}
                onChange={e => set('lifeDensity', parseFloat(e.target.value))} />
            </TweakRow>
          </>
        )}

        <TweakRow label="Typography">
          <Segmented
            value={tweaks.type}
            onChange={v => set('type', v)}
            options={[
              { value: 'editorial',     label: 'Editorial' },
              { value: 'architectural', label: 'Sans only' },
              { value: 'mono-accent',   label: 'Serif + mono' },
              { value: 'manifesto',     label: 'Manifesto' },
            ]}
          />
        </TweakRow>

        <TweakRow label="Theme">
          <Segmented
            value={tweaks.theme}
            onChange={v => set('theme', v)}
            options={[
              { value: 'light', label: 'Light' },
              { value: 'dark',  label: 'Dark' },
            ]}
          />
        </TweakRow>

        <TweakRow label="Copy tone">
          <Segmented
            value={tweaks.tone}
            onChange={v => set('tone', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'manifesto', label: 'Manifesto' },
              { value: 'terse',     label: 'Terse' },
            ]}
          />
        </TweakRow>

        <TweakRow label="Density">
          <Segmented
            value={tweaks.density}
            onChange={v => set('density', v)}
            options={[
              { value: 'tight',   label: 'Tight' },
              { value: 'default', label: 'Default' },
              { value: 'airy',    label: 'Airy' },
            ]}
          />
        </TweakRow>
      </div>

      <footer className="tw-foot">
        <span className="mono-label dim">Changes persist to file</span>
      </footer>
    </aside>
  );
}

Object.assign(window, { TweaksPanel });