/* ============================================================
   SMB1001 Questionnaire — Tweaks Panel
   Three feel-level controls (not pixel-pushers):
     1. Accent Palette  — changes the entire colour register
     2. Card Character  — boxed / ruled / elevated visual rhythm
     3. Density Mode    — sprint / standard / spacious
   ============================================================ */

const PALETTE_DEFS = {
  gold:    { dark:'#C49A2C', light:'#A87E14', glt:'#D4B44E', gdk:'#8F6E18', glow:'rgba(196,154,44,.18)', name:'Gold' },
  steel:   { dark:'#4A8FD8', light:'#2B6EB5', glt:'#6AABF0', gdk:'#1E5490', glow:'rgba(74,143,216,.18)', name:'Steel' },
  forest:  { dark:'#3DA864', light:'#27834C', glt:'#5DC87E', gdk:'#1B6438', glow:'rgba(61,168,100,.18)', name:'Forest' },
  crimson: { dark:'#C8502E', light:'#A83820', glt:'#E07050', gdk:'#8A2E18', glow:'rgba(200,80,46,.18)', name:'Crimson' },
  violet:  { dark:'#8B68D8', light:'#6648BE', glt:'#A888F0', gdk:'#4C32A0', glow:'rgba(139,104,216,.18)', name:'Violet' },
};

function applyTweaks(t){
  const el = document.documentElement;

  // 1. Palette — override CSS custom props
  const isLight = el.getAttribute('data-theme') === 'light';
  const p = PALETTE_DEFS[t.accent] || PALETTE_DEFS.gold;
  const style = document.getElementById('__tweak-accent') || (() => {
    const s = document.createElement('style'); s.id = '__tweak-accent';
    document.head.appendChild(s); return s;
  })();
  style.textContent = `
    :root {
      --gold:${p.dark};
      --glt:${p.glt};
      --gdk:${p.gdk};
      --gglow:${p.glow};
    }
    [data-theme="light"] {
      --gold:${p.light};
      --glt:${p.dark};
      --gdk:${p.gdk};
      --gglow:${p.glow};
    }
  `;

  // 2. Card character — data attr driven CSS
  el.setAttribute('data-card-style', t.cardStyle);

  // 3. Density — data attr driven CSS
  el.setAttribute('data-density', t.density);
}

// ---- Listen for theme changes to re-apply (theme-toggle.js fires a storage event) ----
window.addEventListener('storage', () => {
  const t = window.__TWEAK_CURRENT;
  if (t) applyTweaks(t);
});

function TweaksApp(){
  const defaults = window.__TWEAK_DEFAULTS || { accent:'gold', cardStyle:'boxed', density:'standard' };
  const [tweaks, setTweakRaw] = React.useState(defaults);

  function setTweak(key, val){
    const next = {...tweaks, [key]: val};
    window.__TWEAK_CURRENT = next;
    setTweakRaw(next);
    applyTweaks(next);
    window.parent.postMessage({ type:'__edit_mode_set_keys', edits:{ [key]: val } }, '*');
  }

  React.useEffect(() => {
    window.__TWEAK_CURRENT = tweaks;
    applyTweaks(tweaks);
  }, []);

  const paletteOptions = Object.entries(PALETTE_DEFS).map(([k, p]) => {
    const c = p.dark;
    return [c];           // single-colour swatch — TweakColor treats array-of-1 as a swatch
  });
  const paletteValues = Object.keys(PALETTE_DEFS);
  const currentPaletteIdx = paletteValues.indexOf(tweaks.accent);

  return React.createElement(TweaksPanel, { title:'Tweaks' },
    React.createElement(TweakSection, { label:'Accent Palette' },
      React.createElement('div', { style:{ display:'flex', gap:8, flexWrap:'wrap', marginTop:4 } },
        Object.entries(PALETTE_DEFS).map(([k, p]) =>
          React.createElement('button', {
            key: k,
            onClick: () => setTweak('accent', k),
            title: p.name,
            style: {
              width: 32, height: 32, borderRadius: 4,
              background: p.dark,
              border: tweaks.accent === k ? `3px solid white` : '2px solid rgba(255,255,255,.2)',
              boxShadow: tweaks.accent === k ? `0 0 0 2px ${p.dark}` : 'none',
              cursor: 'pointer',
              outline: 'none',
              transition: 'transform .15s, box-shadow .15s',
              transform: tweaks.accent === k ? 'scale(1.15)' : 'scale(1)',
              position: 'relative',
            },
          },
          tweaks.accent === k ? React.createElement('span', {
            style:{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:14, fontWeight:700 }
          }, '✓') : null
          )
        )
      ),
      React.createElement('div', { style:{ fontSize:11, color:'rgba(255,255,255,.4)', marginTop:6, letterSpacing:'.06em' } },
        PALETTE_DEFS[tweaks.accent]?.name || 'Gold'
      )
    ),

    React.createElement(TweakSection, { label:'Card Character' },
      React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:6, marginTop:4 } },
        [
          { val:'boxed',    label:'Boxed',    desc:'Full border on every card — official document feel' },
          { val:'ruled',    label:'Ruled',    desc:'Divider-line only — printed form feel' },
          { val:'elevated', label:'Elevated', desc:'Shadow + airy spacing — modern app feel' },
        ].map(o =>
          React.createElement('button', {
            key: o.val,
            onClick: () => setTweak('cardStyle', o.val),
            style:{
              display:'grid', gridTemplateColumns:'16px 1fr', gap:'0 10px', alignItems:'start',
              background: tweaks.cardStyle === o.val ? 'rgba(255,255,255,.1)' : 'transparent',
              border: `1px solid ${tweaks.cardStyle === o.val ? 'rgba(255,255,255,.3)' : 'rgba(255,255,255,.08)'}`,
              borderRadius: 4, padding:'9px 12px', cursor:'pointer', textAlign:'left',
              transition:'all .15s',
            }
          },
          React.createElement('div', { style:{ width:14, height:14, borderRadius:'50%', background: tweaks.cardStyle===o.val ? 'white' : 'transparent', border:'2px solid rgba(255,255,255,.5)', marginTop:2, flexShrink:0, transition:'background .15s' } }),
          React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:13, fontWeight:600, color:'white', lineHeight:1.2, marginBottom:2 } }, o.label),
            React.createElement('div', { style:{ fontSize:11, color:'rgba(255,255,255,.45)', lineHeight:1.4 } }, o.desc)
          )
          )
        )
      )
    ),

    React.createElement(TweakSection, { label:'Density' },
      React.createElement('div', { style:{ display:'flex', gap:6, marginTop:4 } },
        [
          { val:'compact',  label:'Sprint',   desc:'Tight', icon:'⚡' },
          { val:'standard', label:'Standard', desc:'Balanced', icon:'◼' },
          { val:'spacious', label:'Spacious', desc:'Airy', icon:'◻' },
        ].map(o =>
          React.createElement('button', {
            key: o.val,
            onClick: () => setTweak('density', o.val),
            style:{
              flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4,
              padding:'10px 8px', border:`1px solid ${tweaks.density===o.val ? 'rgba(255,255,255,.5)' : 'rgba(255,255,255,.1)'}`,
              borderRadius:4, background: tweaks.density===o.val ? 'rgba(255,255,255,.12)' : 'transparent',
              cursor:'pointer', transition:'all .15s',
            }
          },
          React.createElement('span', { style:{ fontSize:18 } }, o.icon),
          React.createElement('span', { style:{ fontSize:11, fontWeight:600, color:'white' } }, o.label),
          React.createElement('span', { style:{ fontSize:10, color:'rgba(255,255,255,.4)' } }, o.desc)
          )
        )
      )
    )
  );
}

// Mount
const __tweakRoot = document.getElementById('__tweak-root');
if (__tweakRoot) {
  ReactDOM.createRoot(__tweakRoot).render(React.createElement(TweaksApp));
}