(function () {
  const _cfg        = window.BTH_CONFIG || {};
  const _tweaksOpen = _cfg._tweaksActive;
  const TWEAK_DEFAULTS = {
    accent:           _cfg.accent           || '#e8a04c',
    showProjects:     _cfg.showProjects     !== undefined ? _cfg.showProjects     : false,
    showStatus:       _cfg.showStatus       !== undefined ? _cfg.showStatus       : false,
    showRoadmap:      _cfg.showRoadmap      !== undefined ? _cfg.showRoadmap      : false,
    showFutureNotes:  _cfg.showFutureNotes  !== undefined ? _cfg.showFutureNotes  : false,
    showWriting:      _cfg.showWriting      !== undefined ? _cfg.showWriting      : false,
    showYoutube:      _cfg.showYoutube      !== undefined ? _cfg.showYoutube      : false,
    showRss:          _cfg.showRss          !== undefined ? _cfg.showRss          : false,
    showEmail:        _cfg.showEmail        !== undefined ? _cfg.showEmail        : false,
    promptUser:       _cfg.user             || 'bob',
    promptHost:       _cfg.host             || 'buildthehomelab',
  };

  function applyTweaks(t) {
    const html = document.documentElement;
    html.style.setProperty('--accent', t.accent);
    const activeSection = document.getElementById('active');
    if (activeSection) activeSection.style.display = t.showProjects ? '' : 'none';

    document.querySelectorAll('.project .footer').forEach(f => {
      f.style.display = t.showStatus ? '' : 'none';
    });
    const blogSection = document.getElementById('blog');
    if (blogSection) blogSection.style.display = t.showWriting ? '' : 'none';

    const ytLink = document.getElementById('yt-link');
    if (ytLink) ytLink.style.display = t.showYoutube ? '' : 'none';

    const rssLink = document.getElementById('rss-link');
    if (rssLink) rssLink.style.display = t.showRss ? '' : 'none';

    const emailLink = document.getElementById('email-link');
    if (emailLink) emailLink.style.display = t.showEmail ? '' : 'none';

    const futureSection = document.getElementById('future');
    if (futureSection) futureSection.style.display = t.showRoadmap ? '' : 'none';

    document.querySelectorAll('.future-item .note').forEach(n => {
      n.style.display = t.showFutureNotes ? '' : 'none';
    });

    const userEl = document.querySelector('.prompt .user');
    const hostEl = document.querySelector('.prompt .host');
    if (userEl) userEl.textContent = t.promptUser;
    if (hostEl) hostEl.textContent = t.promptHost;
    document.title = `${t.promptUser}@${t.promptHost}:~$`;
  }

  // Apply defaults immediately so the page is always correctly styled
  applyTweaks(TWEAK_DEFAULTS);

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    React.useEffect(() => { applyTweaks(t); }, [t]);

    return (
      <TweaksPanel title="Tweaks" initialOpen={_tweaksOpen}>
        <TweakSection label="theme">
          <TweakColor
            label="accent"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#e8a04c', '#6db86b', '#6ea7d8', '#b58ad6', '#d36a5e']}
          />
        </TweakSection>

        <TweakSection label="content">
          <TweakToggle label="projects"        value={t.showProjects}    onChange={v => setTweak('showProjects', v)} />
          <TweakSubToggle label="service status" value={t.showStatus} disabled={!t.showProjects} onChange={v => setTweak('showStatus', v)} />
          <TweakToggle label="writing"           value={t.showWriting}     onChange={v => setTweak('showWriting', v)} />
          <TweakToggle label="youtube link"      value={t.showYoutube}     onChange={v => setTweak('showYoutube', v)} />
          <TweakToggle label="rss link"          value={t.showRss}         onChange={v => setTweak('showRss', v)} />
          <TweakToggle label="email link"        value={t.showEmail}        onChange={v => setTweak('showEmail', v)} />
          <TweakToggle label="roadmap"          value={t.showRoadmap}     onChange={v => setTweak('showRoadmap', v)} />
          <TweakSubToggle label="roadmap notes" value={t.showFutureNotes} disabled={!t.showRoadmap} onChange={v => setTweak('showFutureNotes', v)} />
        </TweakSection>

        <TweakSection label="prompt">
          <TweakText label="user" value={t.promptUser} onChange={v => setTweak('promptUser', v)} />
          <TweakText label="host" value={t.promptHost} onChange={v => setTweak('promptHost', v)} />
        </TweakSection>
      </TweaksPanel>
    );
  }

  const _root = document.createElement('div');
  document.body.appendChild(_root);
  ReactDOM.createRoot(_root).render(<App />);
})();