// LungPilot Tweaks Panel · separate file
// Mounts at #tweaks-root using global React/ReactDOM from CDN.
// Communicates with app.jsx via:
//   - CSS vars (--primary, --cyan)
//   - window.__scene.setPrimary / setCyan (for the 3D scene)
//   - CustomEvent 'lp:headline' on document (for the Hero)
//   - localStorage for persistence between sessions

(function () {
  const { useState, useEffect } = React;

  /* ============ EDITMODE-BEGIN ============ */
  const DEFAULTS = {
    primary: '#1E6EFF',
    cyan:    '#36C5E0',
    l1:      'Plantão de UTI não devia te custar o',
    l2:      'jantar de casa.',
  };
  const PRIMARY_OPTIONS = ['#1E6EFF', '#0F47C7', '#0EA5E9', '#6366F1'];
  const CYAN_OPTIONS    = ['#36C5E0', '#0EA5E9', '#22D3EE', '#67E8F9'];
  /* ============ EDITMODE-END ============ */

  const LS_KEY = 'lp_tweaks_v1';

  function loadSaved() {
    try {
      const raw = localStorage.getItem(LS_KEY);
      if (!raw) return null;
      return JSON.parse(raw);
    } catch (e) { return null; }
  }
  function saveTweaks(t) {
    try { localStorage.setItem(LS_KEY, JSON.stringify(t)); } catch (e) {}
  }

  function useTweaks() {
    const saved = loadSaved() || {};
    const [primary, setPrimary] = useState(saved.primary || DEFAULTS.primary);
    const [cyan,    setCyan]    = useState(saved.cyan    || DEFAULTS.cyan);
    const [l1,      setL1]      = useState(saved.l1      || DEFAULTS.l1);
    const [l2,      setL2]      = useState(saved.l2      || DEFAULTS.l2);

    // Expose initial state immediately for app.jsx to read
    if (typeof window !== 'undefined') {
      window.__tweaks = { primary, cyan, l1, l2 };
    }

    useEffect(() => {
      document.documentElement.style.setProperty('--primary', primary);
      if (window.__scene && window.__scene.setPrimary) window.__scene.setPrimary(primary);
    }, [primary]);

    useEffect(() => {
      document.documentElement.style.setProperty('--cyan', cyan);
      if (window.__scene && window.__scene.setCyan) window.__scene.setCyan(cyan);
    }, [cyan]);

    useEffect(() => {
      window.__tweaks = { primary, cyan, l1, l2 };
      saveTweaks({ primary, cyan, l1, l2 });
      // Notify app.jsx of headline change
      document.dispatchEvent(new CustomEvent('lp:headline', { detail: { l1, l2 } }));
    }, [primary, cyan, l1, l2]);

    return { primary, setPrimary, cyan, setCyan, l1, setL1, l2, setL2 };
  }

  function TweakSection({ label, children }) {
    return (
      <div className="tweaks-section">
        <div className="tweaks-label">{label}</div>
        {children}
      </div>
    );
  }

  function TweakColor({ value, options, onChange }) {
    return (
      <div className="swatches">
        {options.map(c => (
          <button
            key={c}
            type="button"
            className={`swatch ${value === c ? 'active' : ''}`}
            style={{ background: c }}
            onClick={() => onChange(c)}
            aria-label={`Cor ${c}`}
          />
        ))}
      </div>
    );
  }

  function TweakText({ value, onChange, placeholder }) {
    return (
      <input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder || ''}
      />
    );
  }

  function TweaksPanel() {
    const [open, setOpen] = useState(false);
    const t = useTweaks();

    return (
      <>
        <button
          className="tweaks-toggle"
          onClick={() => setOpen(o => !o)}
          aria-label="Painel de ajustes"
          aria-expanded={open}
        >
          {open ? '×' : '⚙'}
        </button>
        <div className={`tweaks-panel ${open ? 'open' : ''}`} role="dialog" aria-label="Tweaks">
          <h4>🎛 Tweaks</h4>
          <TweakSection label="Primária (azul)">
            <TweakColor value={t.primary} options={PRIMARY_OPTIONS} onChange={t.setPrimary} />
          </TweakSection>
          <TweakSection label="Ciano">
            <TweakColor value={t.cyan} options={CYAN_OPTIONS} onChange={t.setCyan} />
          </TweakSection>
          <TweakSection label="Headline · linha 1">
            <TweakText value={t.l1} onChange={t.setL1} />
          </TweakSection>
          <TweakSection label="Headline · linha 2 (gradiente)">
            <TweakText value={t.l2} onChange={t.setL2} />
          </TweakSection>
        </div>
      </>
    );
  }

  // Mount
  const root = document.getElementById('tweaks-root');
  if (root) {
    ReactDOM.createRoot(root).render(<TweaksPanel />);
  }
})();