/* Tweaks panel — floats bottom-right, only visible when host toggles edit mode */

function TweaksPanel({ tweaks, onChange }) {
  return (
    <div style={twStyles.panel}>
      <div style={twStyles.header}>
        <div>
          <div style={twStyles.title}>Tweaks</div>
          <div style={twStyles.sub}>Try different looks</div>
        </div>
      </div>

      <div style={twStyles.body}>
        <Row label="Primary green">
          <input type="color" value={tweaks.primaryGreen}
                 onChange={(e)=>onChange({ primaryGreen: e.target.value })}
                 style={twStyles.color}/>
          <span style={twStyles.mono}>{tweaks.primaryGreen}</span>
        </Row>

        <Row label="Accent red">
          <input type="color" value={tweaks.accentRed}
                 onChange={(e)=>onChange({ accentRed: e.target.value })}
                 style={twStyles.color}/>
          <span style={twStyles.mono}>{tweaks.accentRed}</span>
        </Row>

        <Row label="Moroccan pattern">
          <Switch checked={tweaks.showMoroccanPattern}
                  onChange={(v)=>onChange({ showMoroccanPattern: v })}/>
        </Row>

        <Row label="Hero CTA label">
          <input type="text" value={tweaks.ctaLabel}
                 onChange={(e)=>onChange({ ctaLabel: e.target.value })}
                 style={twStyles.text}/>
        </Row>

        <Row label="Palette presets">
          <div style={{ display: 'flex', gap: 6 }}>
            {[
              { name: 'Atlas',     g: '#0B3D2E', r: '#C1272D' },
              { name: 'Sahara',    g: '#8B5E34', r: '#D94F2B' },
              { name: 'Majorelle', g: '#2E4C8F', r: '#C1272D' },
              { name: 'Zellige',   g: '#1E5F54', r: '#D4A017' },
            ].map(p => (
              <button key={p.name}
                      onClick={()=>onChange({ primaryGreen: p.g, accentRed: p.r })}
                      style={twStyles.preset}
                      title={p.name}>
                <span style={{ background: p.g, width: 14, height: 14, borderRadius: 3, display: 'inline-block' }}/>
                <span style={{ background: p.r, width: 14, height: 14, borderRadius: 3, display: 'inline-block' }}/>
              </button>
            ))}
          </div>
        </Row>
      </div>
    </div>
  );
}

function Row({ label, children }) {
  return (
    <div style={twStyles.row}>
      <div style={twStyles.rowLabel}>{label}</div>
      <div style={twStyles.rowVal}>{children}</div>
    </div>
  );
}

function Switch({ checked, onChange }) {
  return (
    <button onClick={()=>onChange(!checked)} style={{
      width: 36, height: 20, borderRadius: 999,
      background: checked ? 'var(--green)' : '#ccc',
      position: 'relative', transition: 'background .15s', padding: 0,
    }}>
      <span style={{
        position: 'absolute', top: 2, left: checked ? 18 : 2,
        width: 16, height: 16, borderRadius: 999, background: '#fff',
        transition: 'left .15s',
      }}/>
    </button>
  );
}

const twStyles = {
  panel: {
    position: 'fixed', bottom: 20, right: 20, zIndex: 200,
    width: 300,
    background: '#fff', border: '1px solid var(--line)',
    borderRadius: 14, boxShadow: 'var(--shadow-lg)',
    fontFamily: 'Inter, sans-serif',
    overflow: 'hidden',
  },
  header: {
    padding: '14px 16px',
    background: 'var(--green-deep)', color: '#fff',
  },
  title: { fontSize: 13, fontWeight: 600 },
  sub: { fontSize: 11, opacity: 0.6, marginTop: 2 },
  body: { padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 },
  row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 },
  rowLabel: { fontSize: 12, color: 'var(--muted)', fontWeight: 500 },
  rowVal: { display: 'flex', alignItems: 'center', gap: 8 },
  color: { width: 28, height: 28, border: 'none', borderRadius: 6, padding: 0, cursor: 'pointer', background: 'transparent' },
  mono: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)' },
  text: { border: '1px solid var(--line)', borderRadius: 6, padding: '4px 8px', fontSize: 12, width: 120, outline: 'none' },
  preset: { display: 'inline-flex', gap: 2, padding: 3, border: '1px solid var(--line)', borderRadius: 6, background: '#fff', cursor: 'pointer' },
};

window.TweaksPanel = TweaksPanel;