// Tweaks panel — live editable controls

const TweaksPanel = ({ tweaks, setTweaks, visible }) => {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, zIndex: 100,
      background: 'var(--white)', border: '1px solid var(--ink)',
      borderRadius: 4, padding: 20, width: 280,
      boxShadow: '0 12px 40px rgba(0,0,0,0.15)',
      fontFamily: 'Inter, sans-serif',
    }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12, display: 'flex', justifyContent: 'space-between' }}>
        <span>Tweaks</span><span style={{ color: 'var(--clay)' }}>✶</span>
      </div>

      <Row label="Accent color">
        <div style={{ display: 'flex', gap: 6 }}>
          {[
            { id: 'clay', color: '#D96B3F' },
            { id: 'sage', color: '#3C5A47' },
            { id: 'butter', color: '#C9A44A' },
            { id: 'sky', color: '#5A8BA8' },
          ].map(a => (
            <button key={a.id} onClick={() => setTweaks({ ...tweaks, accent: a.id, accentColor: a.color })}
              style={{
                width: 28, height: 28, borderRadius: 14, background: a.color,
                border: tweaks.accent === a.id ? '2px solid var(--ink)' : '2px solid transparent',
              }} />
          ))}
        </div>
      </Row>

      <Row label="Display font">
        {[{ id: 'fraunces', label: 'Fraunces' }, { id: 'playfair', label: 'Playfair' }, { id: 'dm', label: 'DM Serif' }].map(f => (
          <button key={f.id} className={`chip ${tweaks.font === f.id ? 'active' : ''}`}
            style={{ fontSize: 11 }}
            onClick={() => setTweaks({ ...tweaks, font: f.id })}>{f.label}</button>
        ))}
      </Row>

      <Row label="Background">
        {[{ id: 'warm', label: 'Warm' }, { id: 'cool', label: 'Cool' }, { id: 'dark', label: 'Dark' }].map(b => (
          <button key={b.id} className={`chip ${tweaks.bg === b.id ? 'active' : ''}`}
            style={{ fontSize: 11 }}
            onClick={() => setTweaks({ ...tweaks, bg: b.id })}>{b.label}</button>
        ))}
      </Row>

      <Row label="Card style">
        {[{ id: 'soft', label: 'Soft' }, { id: 'sharp', label: 'Sharp' }, { id: 'pill', label: 'Pill' }].map(c => (
          <button key={c.id} className={`chip ${tweaks.cards === c.id ? 'active' : ''}`}
            style={{ fontSize: 11 }}
            onClick={() => setTweaks({ ...tweaks, cards: c.id })}>{c.label}</button>
        ))}
      </Row>

      <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 10, lineHeight: 1.4 }}>
        Changes apply live. Toggle tweaks again to hide.
      </div>
    </div>
  );
};

const Row = ({ label, children }) => (
  <div style={{ marginBottom: 14 }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{children}</div>
  </div>
);

// Apply tweaks by mutating CSS variables
const applyTweaks = (t) => {
  const root = document.documentElement.style;
  // accent
  const accents = {
    clay: '#D96B3F', sage: '#3C5A47', butter: '#C9A44A', sky: '#5A8BA8',
  };
  root.setProperty('--clay', accents[t.accent] || accents.clay);
  // bg
  if (t.bg === 'cool') {
    root.setProperty('--bg', '#F0F2EF');
    root.setProperty('--bg-2', '#E4E9E3');
  } else if (t.bg === 'dark') {
    root.setProperty('--bg', '#1E2220');
    root.setProperty('--bg-2', '#272B27');
    root.setProperty('--ink', '#F3EFE3');
    root.setProperty('--ink-soft', '#CAC4B0');
    root.setProperty('--line', '#3A3E3A');
    root.setProperty('--white', '#2A2E2A');
    root.setProperty('--muted', '#9A958A');
  } else {
    root.setProperty('--bg', '#F6F4EE');
    root.setProperty('--bg-2', '#EEEBDF');
    root.setProperty('--ink', '#1A1D1A');
    root.setProperty('--ink-soft', '#3A3D38');
    root.setProperty('--line', '#D9D4C3');
    root.setProperty('--white', '#FFFDF7');
    root.setProperty('--muted', '#7A7D76');
  }
  // font
  const fontMap = {
    fraunces: '"Fraunces", serif',
    playfair: '"Playfair Display", serif',
    dm: '"DM Serif Display", serif',
  };
  root.setProperty('--serif', fontMap[t.font] || fontMap.fraunces);
  document.querySelectorAll('.serif').forEach(el => {
    el.style.fontFamily = fontMap[t.font] || fontMap.fraunces;
  });
  // radius
  if (t.cards === 'sharp') root.setProperty('--radius', '0px');
  else if (t.cards === 'pill') root.setProperty('--radius', '16px');
  else root.setProperty('--radius', '4px');
};

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