// ============================================================
//  Tweaks panel — toggles primary color, imagery, radius.
//  Cumulus reskin: presets now reflect Cumulus palette + the
//  new diagonal-stripe corner motif (replaces QBE asymmetric BR).
// ============================================================

function TweaksPanel({ visible, values, onChange }) {
  if (!visible) return null;

  const primaryOptions = [
    { key: 'green', label: 'Cumulus Green', dot: '#00AC5B', vars: { '--action-primary-bg': '#00AC5B', '--action-primary-bg-hover': '#009850', '--accent-stripe': '#00AC5B', '--cumulus-blue': '#2A94D6', '--cumulus-blue-hover': '#1F82C3', '--cumulus-sky': '#47B4EA' } },
    { key: 'blue',  label: 'Cumulus Blue',  dot: '#2A94D6', vars: { '--action-primary-bg': '#2A94D6', '--action-primary-bg-hover': '#1F82C3', '--accent-stripe': '#47B4EA', '--cumulus-blue': '#2A94D6', '--cumulus-blue-hover': '#1F82C3', '--cumulus-sky': '#47B4EA' } },
    { key: 'sky',   label: 'Cumulus Sky',   dot: '#47B4EA', vars: { '--action-primary-bg': '#47B4EA', '--action-primary-bg-hover': '#2A94D6', '--accent-stripe': '#47B4EA', '--cumulus-blue': '#2A94D6', '--cumulus-blue-hover': '#1F82C3', '--cumulus-sky': '#47B4EA' } },
  ];

  const radiusOptions = [
    { key: 'rounded', label: 'Rounded',    vars: { '--radius-card-br': '8px',  '--radius-section-br': '12px', '--radius-section-br-l': '16px' } },
    { key: 'softer',  label: 'Softer',     vars: { '--radius-card-br': '14px', '--radius-section-br': '20px', '--radius-section-br-l': '28px' } },
    { key: 'sharp',   label: 'Sharp',      vars: { '--radius-card-br': '0px',  '--radius-section-br': '0px',  '--radius-section-br-l': '0px' } },
  ];

  const imageryOptions = [
    { key: 'cumulus',  label: 'Cumulus photos', dot: '#2A94D6' },
    { key: 'qbe',      label: 'QBE photos',     dot: '#00205B' },
  ];

  const setPrimary = (opt) => {
    Object.entries(opt.vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    onChange({ primary: opt.key });
  };
  const setRadius = (opt) => {
    Object.entries(opt.vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    onChange({ radius: opt.key });
  };
  const setImagery = (opt) => {
    onChange({ imagery: opt.key });
  };

  return (
    <div className="tweaks-panel visible">
      <h4>Tweaks</h4>
      <div className="group">
        <div className="group-label">Primary color</div>
        <div className="swatch-row">
          {primaryOptions.map(opt => (
            <button key={opt.key}
              className={'swatch' + (values.primary === opt.key ? ' active' : '')}
              onClick={() => setPrimary(opt)}>
              <span className="dot" style={{ background: opt.dot }} />{opt.label}
            </button>
          ))}
        </div>
      </div>
      <div className="group">
        <div className="group-label">Corner radius</div>
        <div className="swatch-row">
          {radiusOptions.map(opt => (
            <button key={opt.key}
              className={'swatch' + (values.radius === opt.key ? ' active' : '')}
              onClick={() => setRadius(opt)}>
              {opt.label}
            </button>
          ))}
        </div>
      </div>
      <div className="group" style={{ marginBottom: 0 }}>
        <div className="group-label">Imagery</div>
        <div className="swatch-row">
          {imageryOptions.map(opt => (
            <button key={opt.key}
              className={'swatch' + (values.imagery === opt.key ? ' active' : '')}
              onClick={() => setImagery(opt)}>
              <span className="dot" style={{ background: opt.dot }} />{opt.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });