// Tweaks panel for RecordingsViewer
// Loaded after tweaks-panel.jsx

function TweaksApp() {
  const { TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, useTweaks } = window;

  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accentColor": "oklch(0.75 0.15 65)",
    "density": "normal",
    "monoTimestamps": true,
    "showQualityColors": true,
    "sidebarCollapsed": false
  }/*EDITMODE-END*/);

  // Apply tweaks to CSS vars live
  React.useEffect(() => {
    const root = document.documentElement;
    // Accent color
    root.style.setProperty('--amber', tweaks.accentColor);
    // Density
    const pad = tweaks.density === 'compact' ? '6px 10px' : tweaks.density === 'comfortable' ? '14px 18px' : '9px 12px';
    root.style.setProperty('--row-padding', pad);
    // Monospace timestamps
    document.querySelectorAll('.mono-ts').forEach(el => {
      el.style.fontFamily = tweaks.monoTimestamps ? 'var(--font-mono)' : 'var(--font-sans)';
    });
  }, [tweaks]);

  return (
    <TweaksPanel>
      <TweakSection label="Appearance">
        <TweakColor label="Accent color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[{ label: 'Compact', value: 'compact' }, { label: 'Normal', value: 'normal' }, { label: 'Airy', value: 'comfortable' }]}
          onChange={v => setTweak('density', v)}
        />
      </TweakSection>
      <TweakSection label="Display">
        <TweakToggle label="Monospace timestamps" value={tweaks.monoTimestamps} onChange={v => setTweak('monoTimestamps', v)} />
        <TweakToggle label="Quality color coding" value={tweaks.showQualityColors} onChange={v => setTweak('showQualityColors', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount tweaks panel in a separate div
const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);