// ─────── TWEAKS panel ───────

const ACCENT_SWATCHES = PortfolioCore.constants.ACCENT_SWATCHES;

function TweaksPanel({ tweaks, setTweaks, onClose }) {
  const updateAccent = (sw) => {
    const theme = tweaks.theme;
    const color = theme === 'light' ? sw.light : sw.dark;
    document.documentElement.style.setProperty('--status', color);
    document.documentElement.style.setProperty('--blue', color);
    setTweaks({ ...tweaks, accent: sw.name });
  };
  return (
    <div className="tweaks-panel">
      <div className="tp-header">
        <span>:Tweaks</span>
        <span style={{ cursor: 'pointer', color: 'var(--fg-dim)' }} onClick={onClose}>
          ×
        </span>
      </div>
      <div className="tp-body">
        <div className="tp-row">
          <label>theme</label>
          <div className="tp-segmented">
            <button
              className={tweaks.theme === 'dark' ? 'on' : ''}
              onClick={() => setTweaks({ ...tweaks, theme: 'dark' })}
            >
              dark
            </button>
            <button
              className={tweaks.theme === 'light' ? 'on' : ''}
              onClick={() => setTweaks({ ...tweaks, theme: 'light' })}
            >
              light
            </button>
          </div>
        </div>
        <div className="tp-row">
          <label>accent</label>
          <div className="tp-swatches">
            {ACCENT_SWATCHES.map((sw) => (
              <div
                key={sw.name}
                className={'tp-swatch' + (tweaks.accent === sw.name ? ' on' : '')}
                style={{ background: tweaks.theme === 'light' ? sw.light : sw.dark }}
                onClick={() => updateAccent(sw)}
              />
            ))}
          </div>
        </div>
        <div className="tp-row">
          <label>file tree</label>
          <div className="tp-segmented">
            <button
              className={tweaks.tree ? 'on' : ''}
              onClick={() => setTweaks({ ...tweaks, tree: true })}
            >
              show
            </button>
            <button
              className={!tweaks.tree ? 'on' : ''}
              onClick={() => setTweaks({ ...tweaks, tree: false })}
            >
              hide
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;
window.ACCENT_SWATCHES = ACCENT_SWATCHES;