// Tweaks panel for theme switching
const TweaksPanel = ({theme, setTheme, enabled}) => {
  const [collapsed, setCollapsed] = React.useState(false);
  if (!enabled) return null;
  const themes = window.PAS_THEMES;

  const preview = (key) => {
    const t = themes[key];
    return (
      <div className="pas-tweak-swatch">
        <span style={{background: t.heroBg}}/>
        <span style={{background: t.accent}}/>
        <span style={{background: t.bg}}/>
      </div>
    );
  };

  if (collapsed) {
    return (
      <div className="pas-tweaks is-collapsed" onClick={() => setCollapsed(false)}>
        <svg className="pas-tweaks-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 10v6M4.22 4.22l4.24 4.24m7.08 7.08 4.24 4.24M1 12h6m10 0h6M4.22 19.78l4.24-4.24m7.08-7.08 4.24-4.24"/></svg>
      </div>
    );
  }

  return (
    <div className="pas-tweaks">
      <button className="pas-tweaks-collapse" onClick={() => setCollapsed(true)}><Icon name="minus" size={12} color="#0B1530"/></button>
      <div className="pas-tweaks-h">Tweaks</div>
      <div className="pas-tweaks-sub">비주얼 테마</div>
      <div className="pas-tweaks-options">
        {Object.entries(themes).map(([key, t]) => (
          <button key={key} className={`pas-tweak-opt ${theme === key ? "is-on" : ""}`} onClick={() => setTheme(key)}>
            {preview(key)}
            <div className="pas-tweak-opt-text">
              <div className="pas-tweak-opt-name">{t.name}</div>
              <div className="pas-tweak-opt-desc">{t.desc}</div>
            </div>
            {theme === key && <Icon name="check" size={14}/>}
          </button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, {TweaksPanel});