// Floating Tweaks panel — compact, collapsible.

const PALETTES = {
  rose:   { accent: '#d89a94', soft: '#f4dfdb', ink: '#8f5952', label: '玫瑰 rose' },
  sage:   { accent: '#8ea68a', soft: '#dde7d6', ink: '#556a52', label: '抹茶 sage' },
  butter: { accent: '#c9a24a', soft: '#f2e4bf', ink: '#7a5e1e', label: '奶油 butter' },
  clay:   { accent: '#b07b5a', soft: '#ebd9c9', ink: '#6e4427', label: '陶土 clay' },
  sky:    { accent: '#7fa5bf', soft: '#d9e5ee', ink: '#3e5d73', label: '晴天 sky' },
};

function TweaksPanel({ visible, tweaks, onTweaks }) {
  const [collapsed, setCollapsed] = React.useState(false);
  if (!visible) return null;

  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    onTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  // Collapsed — tiny pill
  if (collapsed) {
    return (
      <button
        className="btn-reset"
        onClick={() => setCollapsed(false)}
        style={{
          position: 'fixed', right: 16, bottom: 16,
          padding: '7px 12px',
          fontSize: 10.5,
          fontFamily: "'JetBrains Mono', monospace",
          letterSpacing: '0.08em',
          borderRadius: 99,
          background: 'var(--card)',
          border: '1px solid var(--line)',
          boxShadow: '0 4px 14px rgba(60, 40, 20, 0.10)',
          color: 'var(--ink-soft)',
          display: 'flex', alignItems: 'center', gap: 8,
          zIndex: 50,
          cursor: 'pointer',
        }}
      >
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: 'var(--accent)',
        }} />
        TWEAKS
      </button>
    );
  }

  return (
    <div style={{
      position: 'fixed',
      right: 16,
      bottom: 16,
      width: 204,
      background: 'var(--card)',
      border: '1px solid var(--line)',
      borderRadius: 10,
      boxShadow: '0 8px 24px rgba(60, 40, 20, 0.10), 0 1px 3px rgba(60, 40, 20, 0.05)',
      padding: 12,
      zIndex: 50,
      fontSize: 11,
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <div className="serif" style={{ fontSize: 13, fontWeight: 600, lineHeight: 1 }}>Tweaks</div>
          <div className="mono" style={{ fontSize: 8.5, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>
            LIVE
          </div>
        </div>
        <button
          className="btn-reset"
          onClick={() => setCollapsed(true)}
          title="Collapse"
          style={{
            width: 18, height: 18,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRadius: 4,
            color: 'var(--ink-faint)',
            fontSize: 13, lineHeight: 1,
          }}
        >−</button>
      </div>

      {/* palette */}
      <div style={{ marginBottom: 10 }}>
        <SectionLabel>主色 · PALETTE</SectionLabel>
        <div style={{ display: 'flex', gap: 5, marginTop: 5 }}>
          {Object.entries(PALETTES).map(([k, p]) => (
            <button
              key={k}
              className="btn-reset"
              onClick={() => set('palette', k)}
              title={p.label}
              style={{
                width: 22, height: 22, borderRadius: '50%',
                background: p.accent,
                border: tweaks.palette === k ? '2px solid var(--ink)' : '2px solid var(--card)',
                boxShadow: '0 0 0 1px var(--line)',
                cursor: 'pointer',
                padding: 0,
              }}
            />
          ))}
        </div>
      </div>

      {/* scale */}
      <div style={{ marginBottom: 10 }}>
        <SectionLabel>Y 軸 · SCALE</SectionLabel>
        <div style={{ display: 'flex', gap: 3, marginTop: 5 }}>
          {[
            { v: false, label: '線性' },
            { v: true,  label: '對數 log' },
          ].map(opt => (
            <button key={String(opt.v)} className="btn-reset"
              onClick={() => set('logScale', opt.v)}
              style={{
                flex: 1, padding: '4px 4px', fontSize: 10,
                borderRadius: 5,
                border: `1px solid ${tweaks.logScale === opt.v ? 'var(--accent)' : 'var(--line)'}`,
                background: tweaks.logScale === opt.v ? 'var(--accent-soft)' : 'transparent',
                color: tweaks.logScale === opt.v ? 'var(--accent-ink)' : 'var(--ink-soft)',
              }}>
              {opt.label}
            </button>
          ))}
        </div>
      </div>

      {/* bands toggle */}
      <label style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        cursor: 'pointer', marginBottom: 10,
      }}>
        <SectionLabel style={{ margin: 0 }}>正常範圍 BAND</SectionLabel>
        <Toggle on={tweaks.showBands} onChange={(v) => set('showBands', v)} />
      </label>

      {/* font size */}
      <div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 3,
        }}>
          <SectionLabel style={{ margin: 0 }}>字級 FONT</SectionLabel>
          <span className="mono" style={{ fontSize: 9.5, color: 'var(--accent-ink)' }}>
            {tweaks.fontSize}px
          </span>
        </div>
        <input
          type="range" min="13" max="18" step="1"
          value={tweaks.fontSize}
          onChange={(e) => set('fontSize', +e.target.value)}
          style={{ accentColor: 'var(--accent)', height: 3 }}
        />
      </div>
    </div>
  );
}

function SectionLabel({ children, style }) {
  return (
    <div style={{
      fontSize: 9, color: 'var(--ink-faint)',
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      fontFamily: "'JetBrains Mono', monospace",
      ...style,
    }}>
      {children}
    </div>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button className="btn-reset" onClick={() => onChange(!on)}
      style={{
        width: 26, height: 15, borderRadius: 99,
        background: on ? 'var(--accent)' : 'var(--line)',
        position: 'relative',
        transition: 'all 0.2s',
      }}>
      <span style={{
        position: 'absolute', top: 1.5, left: on ? 12.5 : 1.5,
        width: 12, height: 12, borderRadius: '50%',
        background: 'var(--card)',
        boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
        transition: 'all 0.2s',
      }} />
    </button>
  );
}

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