/* global React, ReactDOM */
/* Tweaks panel for ANEX site — controls accent + light/dark mode.
   Loaded on every page; the panel itself is governed by tweaks-panel.jsx host protocol. */

const { useState, useEffect } = React;

const ACCENTS = [
  { name: 'Clinical teal', hex: '#3B8C95' },
  { name: 'Indigo',        hex: '#4F62D6' },
  { name: 'Sage',          hex: '#6B8E7A' },
  { name: 'Plum',          hex: '#8E5A8A' },
  { name: 'Brick',         hex: '#B85A4A' },
  { name: 'Slate',         hex: '#3E4A5A' },
];

function AnexTweaks() {
  const [theme, setTheme] = useState(() => window.AnexSite.getTheme());
  const [accent, setAccent] = useState(() => {
    const cur = window.AnexSite.getAccent().toUpperCase();
    return ACCENTS.find(a => a.hex.toUpperCase() === cur)?.hex || cur;
  });

  useEffect(() => { window.AnexSite.setTheme(theme); }, [theme]);
  useEffect(() => { window.AnexSite.setAccent(accent); }, [accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mode">
        <TweakRadio
          value={theme}
          onChange={setTheme}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'dark',  label: 'Dark'  },
          ]}
        />
      </TweakSection>
      <TweakSection label="Accent color">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {ACCENTS.map(a => {
            const isActive = a.hex.toUpperCase() === accent.toUpperCase();
            return (
              <button
                key={a.hex}
                onClick={() => setAccent(a.hex)}
                title={a.name}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  padding: '8px 10px',
                  borderRadius: 8,
                  border: isActive ? '1px solid var(--ink, #1F2A37)' : '1px solid #DCD7CB',
                  background: isActive ? 'rgba(31,42,55,.06)' : 'transparent',
                  cursor: 'pointer',
                  fontSize: 12,
                  fontFamily: 'inherit',
                  color: 'inherit',
                  textAlign: 'left',
                }}>
                <span style={{
                  width: 14, height: 14, borderRadius: 4,
                  background: a.hex,
                  boxShadow: isActive ? '0 0 0 2px rgba(31,42,55,.18)' : 'none',
                }} />
                {a.name}
              </button>
            );
          })}
        </div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--muted, #6B7480)' }}>
          <input
            type="color"
            value={accent}
            onChange={e => setAccent(e.target.value.toUpperCase())}
            style={{ width: 28, height: 28, padding: 0, border: '1px solid #DCD7CB', borderRadius: 6, background: 'transparent' }}
          />
          custom
          <code style={{ marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace' }}>{accent.toUpperCase()}</code>
        </div>
      </TweakSection>
      <TweakSection label="About these tweaks">
        <div style={{ fontSize: 12, color: 'var(--muted, #6B7480)', lineHeight: 1.5 }}>
          Toggle dark mode and pick an accent across the entire site. Choices persist across pages.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<AnexTweaks />);