// Tweaks panel — lives bottom-right, only visible when edit mode is active.

function TweaksPanel({ tweaks, setTweaks, active, onClose }) {
  if (!active) return null;
  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 1000,
      width: 280,
      background: '#fff',
      border: `1px solid ${KS.borderStrong}`,
      boxShadow: '0 20px 60px -20px rgba(0,0,0,0.25)',
      fontFamily: KSFonts.body,
      color: KS.charcoal,
    }}>
      <div style={{
        padding: '10px 14px',
        borderBottom: `1px solid ${KS.border}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: KS.offwhite,
      }}>
        <div style={{ fontFamily: KSFonts.mono, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>Tweaks</div>
        <button onClick={onClose} style={{ background: 'none', border: 0, cursor: 'pointer', fontSize: 14, color: KS.muted }}>×</button>
      </div>
      <div style={{ padding: 14, display: 'grid', gap: 16 }}>

        <Row label="Akzentfarbe">
          <div style={{ display: 'flex', gap: 8 }}>
            {[KS.coral, KS.deepRed, KS.forest, KS.charcoal].map(c => (
              <button key={c} onClick={() => update('accent', c)} aria-label={c} style={{
                width: 24, height: 24, borderRadius: 12,
                background: c, border: tweaks.accent === c ? `2px solid ${KS.black}` : `1px solid ${KS.border}`,
                cursor: 'pointer', padding: 0,
              }} />
            ))}
          </div>
        </Row>

        <Row label="Linke Spalte">
          <Seg options={[['light', 'Off-white'], ['dark', 'Charcoal']]}
               value={tweaks.leftDark ? 'dark' : 'light'}
               onChange={v => update('leftDark', v === 'dark')} />
        </Row>

        <Row label="Pixel-Icon">
          <Seg options={[[true, 'An'], [false, 'Aus']]}
               value={tweaks.showPixel}
               onChange={v => update('showPixel', v)} />
        </Row>

        <Row label={`Node-Graph-Dichte · ${tweaks.density}`}>
          <input type="range" min="10" max="60" step="2" value={tweaks.density}
                 onChange={e => update('density', Number(e.target.value))}
                 style={{ width: '100%', accentColor: KS.coral }} />
        </Row>

      </div>
    </div>
  );
}

function Row({ label, children }) {
  return (
    <div>
      <div style={{ fontFamily: KSFonts.mono, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', color: KS.muted, marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function Seg({ options, value, onChange }) {
  return (
    <div style={{ display: 'inline-flex', border: `1px solid ${KS.border}`, borderRadius: 4, overflow: 'hidden' }}>
      {options.map(([v, l]) => {
        const active = value === v;
        return (
          <button key={String(v)} onClick={() => onChange(v)} style={{
            background: active ? KS.charcoal : '#fff',
            color: active ? KS.offwhite : KS.charcoal,
            border: 0, padding: '6px 12px',
            fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 0.5, textTransform: 'uppercase',
            cursor: 'pointer',
          }}>{l}</button>
        );
      })}
    </div>
  );
}

Object.assign(window, { TweaksPanel });