// Tweaks panel — primary color + skill theme color
const PRIMARY_SWATCHES = [
  '#1A5276', // spec default
  '#0F172A', // slate
  '#1D4ED8', // blue
  '#0F766E', // teal
  '#7C3AED', // violet
  '#DC2626', // red
];
const SKILL_SWATCHES = [
  '#2E75B6', '#E67E22', '#8E44AD', '#27AE60', '#06B6D4', '#F43F5E',
];

const TweaksPanel = ({ visible, onClose, tweaks, setTweaks }) => {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sliders-horizontal" size={14} />
          Tweaks
        </div>
        <button className="modal-close" onClick={onClose}><Icon name="x" size={14} /></button>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-section">
          <span className="tweaks-label">主色 Primary</span>
          <div className="swatches">
            {PRIMARY_SWATCHES.map(c => (
              <div
                key={c}
                className={`swatch ${tweaks.primary === c ? 'active' : ''}`}
                style={{ background: c }}
                onClick={() => setTweaks({ primary: c })}
              />
            ))}
          </div>
        </div>
        <div className="tweaks-section">
          <span className="tweaks-label">算量主题色 Skill Theme</span>
          <div className="swatches">
            {SKILL_SWATCHES.map(c => (
              <div
                key={c}
                className={`swatch ${tweaks.skillTheme === c ? 'active' : ''}`}
                style={{ background: c }}
                onClick={() => setTweaks({ skillTheme: c })}
              />
            ))}
          </div>
        </div>
        <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
          调整仅影响当前预览。顶栏"Tweaks"开关可随时关闭。
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;