// Little Olive Street — site-wide Tweaks.
// Three expressive controls, each reshaping the whole site by rewriting
// the design system's CSS custom properties (colors, radii/shadows, type scale).
// No component internals are touched — everything here already reads var(--...).

const HUE = {
  blush: { base: 'var(--blush-600)', light: 'var(--blush-300)', hover: '#c85780', rgb: '217, 103, 138' },
  sage: { base: 'var(--sage-600)', light: 'var(--sage-300)', hover: '#4c6a45', rgb: '94, 125, 86' },
  mustard: { base: 'var(--mustard-600)', light: 'var(--mustard-300)', hover: '#8f6f19', rgb: '178, 137, 31' },
};

// Which hue leads (primary/CTA/focus) vs which two hues sit in the "sage" and
// "mustard" semantic slots (used by Badge/IconBadge tone props, roofline, etc).
const MOODS = {
  blush: { primary: 'blush', sageSlot: 'sage', mustardSlot: 'mustard' },
  sage: { primary: 'sage', sageSlot: 'mustard', mustardSlot: 'blush' },
  mustard: { primary: 'mustard', sageSlot: 'blush', mustardSlot: 'sage' },
};

const SHAPES = {
  rounded: {
    radiusSm: '12px', radiusMd: '16px', radiusLg: '20px', radiusPill: '999px',
    shadowCard: '0 1px 2px rgba(33, 30, 23, 0.04), 0 8px 24px rgba(33, 30, 23, 0.06)',
    shadowRaised: '0 4px 12px rgba(33, 30, 23, 0.08), 0 16px 40px rgba(33, 30, 23, 0.08)',
    buttonShadow: (rgb) => `0 2px 6px rgba(${rgb}, 0.28)`,
    borderStrong: 'rgba(33, 30, 23, 0.2)',
  },
  crisp: {
    radiusSm: '3px', radiusMd: '6px', radiusLg: '8px', radiusPill: '8px',
    shadowCard: '0 0 0 1px rgba(33, 30, 23, 0.1)',
    shadowRaised: '0 3px 0 rgba(33, 30, 23, 0.9)',
    buttonShadow: (rgb) => `0 3px 0 rgba(${rgb}, 0.9)`,
    borderStrong: 'rgba(33, 30, 23, 0.32)',
  },
};

const VOICES = {
  cozy: {
    displayXl: "600 3.75rem/1.05 var(--font-display)",
    displayLg: "600 2.75rem/1.08 var(--font-display)",
    displayMd: "600 1.75rem/1.15 var(--font-display)",
    displaySm: "600 1.3rem/1.2 var(--font-display)",
    trackingDisplay: '-0.01em',
    trackingEyebrow: '0.08em',
  },
  bold: {
    displayXl: "700 4.75rem/0.98 var(--font-display)",
    displayLg: "700 3.4rem/1.02 var(--font-display)",
    displayMd: "700 2.1rem/1.08 var(--font-display)",
    displaySm: "700 1.45rem/1.15 var(--font-display)",
    trackingDisplay: '-0.02em',
    trackingEyebrow: '0.16em',
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "blush",
  "shape": "rounded",
  "voice": "cozy"
}/*EDITMODE-END*/;

function buildCss(t) {
  const mood = MOODS[t.mood];
  const primary = HUE[mood.primary];
  const sageSlot = HUE[mood.sageSlot];
  const mustardSlot = HUE[mood.mustardSlot];
  const shape = SHAPES[t.shape];
  const voice = VOICES[t.voice];

  return `:root{
    --accent-primary: ${primary.base};
    --accent-primary-hover: ${primary.hover};
    --accent-primary-light: ${primary.light};
    --accent-sage: ${sageSlot.base};
    --accent-sage-light: ${sageSlot.light};
    --accent-mustard: ${mustardSlot.base};
    --accent-mustard-light: ${mustardSlot.light};
    --tint-blush: rgba(${primary.rgb}, 0.16);
    --tint-sage: rgba(${sageSlot.rgb}, 0.16);
    --tint-mustard: rgba(${mustardSlot.rgb}, 0.18);
    --focus-ring: rgba(${primary.rgb}, 0.45);

    --radius-sm: ${shape.radiusSm};
    --radius-md: ${shape.radiusMd};
    --radius-lg: ${shape.radiusLg};
    --radius-pill: ${shape.radiusPill};
    --shadow-card: ${shape.shadowCard};
    --shadow-raised: ${shape.shadowRaised};
    --shadow-button: ${shape.buttonShadow(primary.rgb)};
    --border-hairline-strong: ${shape.borderStrong};

    --text-display-xl: ${voice.displayXl};
    --text-display-lg: ${voice.displayLg};
    --text-display-md: ${voice.displayMd};
    --text-display-sm: ${voice.displaySm};
    --tracking-display: ${voice.trackingDisplay};
    --tracking-eyebrow: ${voice.trackingEyebrow};
  }`;
}

function SiteTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    let styleEl = document.getElementById('los-tweak-vars');
    if (!styleEl) {
      styleEl = document.createElement('style');
      styleEl.id = 'los-tweak-vars';
      document.head.appendChild(styleEl);
    }
    styleEl.textContent = buildCss(t);
  }, [t.mood, t.shape, t.voice]);

  const { TweaksPanel, TweakSection, TweakRadio } = window;

  return (
    <TweaksPanel>
      <TweakSection label="Mood" />
      <TweakRadio
        label="Palette lead"
        value={t.mood}
        options={['blush', 'sage', 'mustard']}
        onChange={(v) => setTweak('mood', v)}
      />
      <TweakSection label="Shape language" />
      <TweakRadio
        label="Corners & shadows"
        value={t.shape}
        options={['rounded', 'crisp']}
        onChange={(v) => setTweak('shape', v)}
      />
      <TweakSection label="Type voice" />
      <TweakRadio
        label="Headline energy"
        value={t.voice}
        options={['cozy', 'bold']}
        onChange={(v) => setTweak('voice', v)}
      />
    </TweaksPanel>
  );
}

window.SiteTweaks = SiteTweaks;