// ============================================================================
// Traduality Branding Guidelines — Tweaks panel + Sidebar
// ============================================================================

const Sidebar = () => {
  const [active, setActive] = React.useState('who-we-are');

  React.useEffect(() => {
    const sections = document.querySelectorAll('section.guide');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-30% 0px -60% 0px' });
    sections.forEach(s => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  const links = [
    { group: 'Brand', items: [
      { id: 'who-we-are', label: 'Who we are' },
      { id: 'product', label: 'Product line' },
      { id: 'quick-ref', label: 'The five rules' },
    ]},
    { group: 'Visual', items: [
      { id: 'logo', label: 'Logo' },
      { id: 'color', label: 'Color' },
      { id: 'type', label: 'Typography' },
      { id: 'icons', label: 'Iconography' },
      { id: 'imagery', label: 'Imagery' },
    ]},
    { group: 'Language', items: [
      { id: 'voice', label: 'Voice and tone' },
      { id: 'vocab', label: 'Vocabulary' },
    ]},
    { group: 'Application', items: [
      { id: 'cobranding', label: 'Co-branding' },
    ]},
    { group: 'Resources', items: [
      { id: 'downloads', label: 'Downloads' },
    ]},
  ];

  return (
    <aside className="sidebar">
      <a href="#" className="sidebar-brand">
        <img src="assets/traduality-icon-color.png" alt="" />
        <div>
          <div className="sidebar-brand-name">Traduality</div>
          <div className="sidebar-brand-sub">Brand book v1.0</div>
        </div>
      </a>
      {links.map(g => (
        <React.Fragment key={g.group}>
          <div className="sidebar-section">{g.group}</div>
          {g.items.map(l => (
            <a key={l.id}
               href={`#${l.id}`}
               className={`sidebar-link ${active === l.id ? 'active' : ''}`}
            >
              {l.label}
            </a>
          ))}
        </React.Fragment>
      ))}
    </aside>
  );
};

// ----- Tweaks panel -----
const TweaksApp = () => {
  const defaults = window.__TWEAK_DEFAULTS || {};
  const [tweaks, setTweak] = useTweaks(defaults);

  // Apply tweaks live
  React.useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accent_orange === 'soft') r.style.setProperty('--td-orange', '#e89761');
    else if (tweaks.accent_orange === 'bold') r.style.setProperty('--td-orange', '#cf6328');
    else r.style.setProperty('--td-orange', '#cf6328');

    if (tweaks.display_font === 'nunito') {
      r.style.setProperty('--font-display', "'Nunito', ui-rounded, system-ui, sans-serif");
    } else if (tweaks.display_font === 'fraunces') {
      r.style.setProperty('--font-display', "'Fraunces', Georgia, serif");
      ensureGoogleFont('Fraunces:wght@600;700;800;900');
    } else if (tweaks.display_font === 'sora') {
      r.style.setProperty('--font-display', "'Sora', system-ui, sans-serif");
      ensureGoogleFont('Sora:wght@600;700;800');
    }

    document.body.classList.toggle('hide-anti', !tweaks.show_anti_patterns);
  }, [tweaks]);

  return (
    <TweaksPanel title="Brand book tweaks">
      <TweakSection title="Visual">
        <TweakRadio
          label="Display font"
          value={tweaks.display_font}
          onChange={(v) => setTweak('display_font', v)}
          options={[
            { value: 'nunito', label: 'Nunito' },
            { value: 'sora', label: 'Sora' },
            { value: 'fraunces', label: 'Fraunces' },
          ]}
        />
        <TweakRadio
          label="Accent orange"
          value={tweaks.accent_orange}
          onChange={(v) => setTweak('accent_orange', v)}
          options={[
            { value: 'soft', label: 'Soft' },
            { value: 'bold', label: 'Bold' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Content">
        <TweakToggle
          label="Show anti-pattern examples"
          value={tweaks.show_anti_patterns}
          onChange={(v) => setTweak('show_anti_patterns', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

window.ensureGoogleFont = function(spec) {
  const id = 'gf-' + spec.replace(/[^a-z0-9]/gi, '');
  if (document.getElementById(id)) return;
  const l = document.createElement('link');
  l.id = id;
  l.rel = 'stylesheet';
  l.href = `https://fonts.googleapis.com/css2?family=${spec}&display=swap`;
  document.head.appendChild(l);
};

Object.assign(window, { Sidebar, TweaksApp });