/* Tweaks panel — toggled via toolbar. Lets user tweak accent hue, hero layout, and plan highlight */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHex": "#C9A063",
  "heroItalicAccent": true,
  "highlightPlan": "Advanced",
  "showProofMetrics": true,
  "compactHero": false
}/*EDITMODE-END*/;

const TweaksPanel = ({active, values, setValues}) => {
  if (!active) return null;
  const update = (k, v) => {
    const next = { ...values, [k]: v };
    setValues(next);
    try { window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]: v}}, '*'); } catch(e){}
  };
  return (
    <div id="tweaks" className="fixed bottom-6 right-6 z-50 w-[320px] bg-white border border-borderLine rounded-xl shadow-xl p-5" style={{boxShadow:'0 20px 60px rgba(15,23,42,0.18)'}}>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <span className="dot-gold"/>
          <h4 className="font-serif text-[18px] text-midnight">Tweaks</h4>
        </div>
        <span className="text-[11px] text-textMuted uppercase tracking-wider">Editor</span>
      </div>

      <div className="space-y-4 text-[13px]">
        <div>
          <label className="block text-textSecondary mb-2 font-medium">Cor de acento</label>
          <div className="flex items-center gap-2">
            {['#C9A063','#B08754','#8B6F47','#D4A574','#A08060'].map(c => (
              <button key={c} onClick={()=>update('accentHex', c)}
                className="w-7 h-7 rounded-full border-2 transition"
                style={{background:c, borderColor: values.accentHex === c ? '#0F172A' : 'transparent'}}
                title={c}
              />
            ))}
          </div>
        </div>

        <div className="flex items-center justify-between">
          <label className="text-textSecondary font-medium">Itálico dourado nas headlines</label>
          <Toggle on={values.heroItalicAccent} onChange={v=>update('heroItalicAccent', v)}/>
        </div>

        <div>
          <label className="block text-textSecondary mb-2 font-medium">Plano em destaque</label>
          <div className="grid grid-cols-3 gap-1 p-1 bg-cream rounded-lg">
            {['Essential','Advanced','Premium'].map(p => (
              <button key={p} onClick={()=>update('highlightPlan', p)}
                className={`py-1.5 rounded-md text-[12px] font-medium transition ${values.highlightPlan===p ? 'bg-midnight text-cream' : 'text-textSecondary'}`}>
                {p}
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center justify-between">
          <label className="text-textSecondary font-medium">Seção de prova</label>
          <Toggle on={values.showProofMetrics} onChange={v=>update('showProofMetrics', v)}/>
        </div>

        <div className="flex items-center justify-between">
          <label className="text-textSecondary font-medium">Hero compacto</label>
          <Toggle on={values.compactHero} onChange={v=>update('compactHero', v)}/>
        </div>
      </div>
    </div>
  );
};

const Toggle = ({on, onChange}) => (
  <button onClick={()=>onChange(!on)}
    className={`relative w-10 h-6 rounded-full transition ${on ? 'bg-midnight' : 'bg-borderLine'}`}>
    <span className="absolute top-0.5 w-5 h-5 rounded-full bg-white transition shadow"
      style={{left: on ? '18px' : '2px'}}/>
  </button>
);

Object.assign(window, { TweaksPanel, TWEAK_DEFAULTS });