/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FE2285",
  "background": "aurora",
  "featuredPlan": "Starter",
  "showFloatingChips": true,
  "showStats": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#FE2285", "#23B6FF", "#AF23FF", "#FFC656"];

function applyAccent(hex) {
  // derive a glow rgba
  const r = parseInt(hex.slice(1,3),16);
  const g = parseInt(hex.slice(3,5),16);
  const b = parseInt(hex.slice(5,7),16);
  document.documentElement.style.setProperty('--pink', hex);
  document.documentElement.style.setProperty('--magenta', hex);
  // update featured glow
  const glow = `0 30px 80px rgba(${r},${g},${b},0.20), 0 0 0 1px rgba(${r},${g},${b},0.4)`;
  document.querySelectorAll('.plan.featured').forEach(p => { p.style.boxShadow = glow; });
}

function applyBackground(mode) {
  const field = document.querySelector('.bg-field');
  if (!field) return;
  if (mode === 'aurora') {
    field.style.background = `
      radial-gradient(ellipse 80% 60% at 80% -10%, rgba(35,182,255,0.35) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 10% 30%, rgba(104,83,253,0.32) 0%, transparent 60%),
      radial-gradient(ellipse 90% 60% at 50% 110%, rgba(43,30,143,0.55) 0%, transparent 60%),
      #0B0830`;
  } else if (mode === 'gradient') {
    field.style.background = `linear-gradient(180deg, #23B6FF 0%, #6853FD 38%, #2B1E8F 75%, #0B0830 100%)`;
  } else if (mode === 'deep') {
    field.style.background = `linear-gradient(180deg, #0B0830 0%, #0B0830 100%)`;
  }
}

function applyFeatured(name) {
  document.querySelectorAll('.plan').forEach(p => {
    const nameEl = p.querySelector('.plan-name');
    const isMatch = nameEl && nameEl.textContent.trim().toLowerCase() === name.toLowerCase();
    p.classList.toggle('featured', !!isMatch);
    let badge = p.querySelector('.plan-badge');
    if (isMatch && !badge) {
      const b = document.createElement('span');
      b.className = 'plan-badge';
      b.textContent = 'Most Popular';
      p.prepend(b);
    } else if (!isMatch && badge) {
      badge.remove();
    }
  });
}

function applyChips(show) {
  document.querySelectorAll('.chip').forEach(c => { c.style.display = show ? '' : 'none'; });
}

function applyStats(show) {
  const stats = document.querySelector('.stats');
  if (stats) stats.style.display = show ? '' : 'none';
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyBackground(t.background); }, [t.background]);
  useEffect(() => { applyFeatured(t.featuredPlan); }, [t.featuredPlan]);
  useEffect(() => { applyChips(t.showFloatingChips); }, [t.showFloatingChips]);
  useEffect(() => { applyStats(t.showStats); }, [t.showStats]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand accent">
        <TweakColor
          label="CTA color"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection label="Background mood">
        <TweakRadio
          label="Background"
          value={t.background}
          options={[
            { value: 'aurora', label: 'Aurora' },
            { value: 'gradient', label: 'Gradient' },
            { value: 'deep', label: 'Deep' },
          ]}
          onChange={(v) => setTweak('background', v)}
        />
      </TweakSection>

      <TweakSection label="Featured pricing plan">
        <TweakRadio
          label="Highlight"
          value={t.featuredPlan}
          options={['Pilot', 'Starter', 'Growth']}
          onChange={(v) => setTweak('featuredPlan', v)}
        />
      </TweakSection>

      <TweakSection label="Hero details">
        <TweakToggle
          label="Floating product chips"
          value={t.showFloatingChips}
          onChange={(v) => setTweak('showFloatingChips', v)}
        />
        <TweakToggle
          label="Show stat callouts row"
          value={t.showStats}
          onChange={(v) => setTweak('showStats', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<TweaksApp />);