const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "goldHue": 78,
  "goldChroma": 9,
  "goldLight": 70,
  "bgLight": 6,
  "bgWarmth": 30,
  "paperLight": 92,
  "darkness": 100,
  "displayFont": "Cormorant Garamond",
  "bodyFont": "Inter",
  "displayWeight": 300,
  "italicDisplay": true,
  "titleScale": 100,
  "bodyScale": 100,
  "tracking": 0,
  "kickerTracking": 28,
  "lineHeight": 160,
  "uppercaseKickers": true,
  "brandName": "Harlys",
  "brandTagline": "Conseil privé · est. 2018",
  "heroPre": "Antananarivo · Madagascar",
  "heroHeadline": "Le droit, discrètement à votre service.",
  "heroAccentWord": "discrètement",
  "heroSub": "HARLYS accompagne en privé une sélection de dirigeants, family offices et entreprises malgaches. Une équipe permanente, des honoraires forfaitaires, une réponse écrite sous 24 heures.",
  "ctaPrimary": "Demander une audience",
  "ctaSecondary": "Lire le manifeste",
  "spotlightIntensity": 100,
  "atmosphereGradient": 100,
  "spotlightHue": 78,
  "showSpotlight": true,
  "showGlassCounsel": true,
  "showGlassLedger": true,
  "glassBlur": 20,
  "glassOpacity": 72,
  "floatSpeed": 100,
  "floatAmplitude": 5,
  "showHeroSeal": true,
  "heroAlign": "left",
  "museumStyle": "engrave",
  "showPillars": true,
  "showBespoke": true,
  "showConfidants": true,
  "showLedger": true,
  "showPrivy": true,
  "pillarsCount": 4,
  "bespokeColumns": 2,
  "confidantsColumns": 3,
  "borderStyle": "thin",
  "borderColor": "subtle",
  "cardPadding": 100,
  "sectionSpacing": 100,
  "cardRadius": 4,
  "btnRadius": 0,
  "shadowDepth": 100,
  "goldGlow": 100,
  "noiseTexture": 0,
  "vignette": 0,
  "filmGrain": 0,
  "scanlines": 0,
  "verticalRule": false,
  "monogramHeader": true,
  "decoSeparators": true,
  "romanNumerals": true,
  "ledgerStyle": "bars",
  "barAnimSpeed": 100,
  "ctaPaddingY": 140,
  "ctaCenterGlow": 100,
  "letterMonogram": "H",
  "footerStyle": "default"
}/*EDITMODE-END*/;

const useTweaksObj = (defaults) => {
  const [v, setV] = React.useState(defaults);
  const set = React.useCallback((patch) => {
    setV(prev => ({ ...prev, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  }, []);
  return [v, set];
};

const Tweaks = () => {
  const [t, set] = useTweaksObj(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    // Color
    r.style.setProperty('--gold', `oklch(${t.goldLight/100} ${t.goldChroma/100} ${t.goldHue})`);
    r.style.setProperty('--gold-2', `oklch(${(t.goldLight+10)/100} ${(t.goldChroma+1)/100} ${t.goldHue})`);
    r.style.setProperty('--gold-3', `oklch(${(t.goldLight-25)/100} ${(t.goldChroma+1)/100} ${t.goldHue})`);
    r.style.setProperty('--gold-tint', `oklch(${t.goldLight/100} ${t.goldChroma/100} ${t.goldHue} / 0.10)`);
    r.style.setProperty('--bg', `oklch(${t.bgLight/100} ${(t.bgWarmth-50)*0.001} ${50+t.bgWarmth*0.4})`);
    r.style.setProperty('--bg-2', `oklch(${(t.bgLight+4)/100} ${(t.bgWarmth-50)*0.001} ${50+t.bgWarmth*0.4})`);
    r.style.setProperty('--bg-3', `oklch(${(t.bgLight+8)/100} ${(t.bgWarmth-50)*0.001} ${50+t.bgWarmth*0.4})`);
    r.style.setProperty('--paper', `oklch(${t.paperLight/100} 0.05 ${50+t.bgWarmth*0.4})`);
    r.style.setProperty('--ink', `oklch(${0.6+t.paperLight/300} 0.04 ${50+t.bgWarmth*0.4})`);
    r.style.setProperty('--darkness', t.darkness/100);

    // Type
    r.style.setProperty('--display-font', `"${t.displayFont}"`);
    r.style.setProperty('--body-font', `"${t.bodyFont}"`);
    r.style.setProperty('--display-weight', t.displayWeight);
    r.style.setProperty('--title-scale', t.titleScale/100);
    r.style.setProperty('--body-scale', t.bodyScale/100);
    r.style.setProperty('--tracking', `${t.tracking/1000}em`);
    r.style.setProperty('--kicker-tracking', `${t.kickerTracking/100}em`);
    r.style.setProperty('--line-height', t.lineHeight/100);

    // Layout / spacing
    r.style.setProperty('--card-padding-scale', t.cardPadding/100);
    r.style.setProperty('--section-spacing-scale', t.sectionSpacing/100);
    r.style.setProperty('--card-radius', `${t.cardRadius}px`);
    r.style.setProperty('--btn-radius', `${t.btnRadius}px`);
    r.style.setProperty('--shadow-scale', t.shadowDepth/100);
    r.style.setProperty('--glow-scale', t.goldGlow/100);

    // Effects
    r.style.setProperty('--noise-opacity', t.noiseTexture/100);
    r.style.setProperty('--vignette-opacity', t.vignette/100);
    r.style.setProperty('--grain-opacity', t.filmGrain/100);
    r.style.setProperty('--scanline-opacity', t.scanlines/100);
    r.style.setProperty('--spotlight-intensity', t.spotlightIntensity/100);
    r.style.setProperty('--atmosphere-intensity', t.atmosphereGradient/100);
    r.style.setProperty('--spotlight-hue', t.spotlightHue);
    r.style.setProperty('--glass-blur', `${t.glassBlur}px`);
    r.style.setProperty('--glass-opacity', t.glassOpacity/100);

    // Anim
    r.style.setProperty('--float-speed', `${14 - (t.floatSpeed/100)*10}s`);
    r.style.setProperty('--float-amp', `${t.floatAmplitude}px`);
    r.style.setProperty('--bar-anim-speed', `${1.8 - (t.barAnimSpeed/100)}s`);

    // CTA
    r.style.setProperty('--cta-py', `${t.ctaPaddingY}px`);
    r.style.setProperty('--cta-center-glow', t.ctaCenterGlow/100);

    // Toggles via data attrs
    r.dataset.upperKickers = t.uppercaseKickers ? '1' : '0';
    r.dataset.italicDisplay = t.italicDisplay ? '1' : '0';
    r.dataset.heroAlign = t.heroAlign;
    r.dataset.museumStyle = t.museumStyle;
    r.dataset.borderStyle = t.borderStyle;
    r.dataset.borderColor = t.borderColor;
    r.dataset.verticalRule = t.verticalRule ? '1' : '0';
    r.dataset.romanNumerals = t.romanNumerals ? '1' : '0';
    r.dataset.decoSeparators = t.decoSeparators ? '1' : '0';
    r.dataset.ledgerStyle = t.ledgerStyle;
    r.dataset.footerStyle = t.footerStyle;

    // Section visibility
    document.querySelectorAll('[data-section="pillars"]').forEach(el => el.style.display = t.showPillars ? '' : 'none');
    document.querySelectorAll('[data-section="bespoke"]').forEach(el => el.style.display = t.showBespoke ? '' : 'none');
    document.querySelectorAll('[data-section="confidants"]').forEach(el => el.style.display = t.showConfidants ? '' : 'none');
    document.querySelectorAll('[data-section="ledger"]').forEach(el => el.style.display = t.showLedger ? '' : 'none');
    document.querySelectorAll('[data-section="privy"]').forEach(el => el.style.display = t.showPrivy ? '' : 'none');

    // Grid columns
    const pillars = document.querySelector('.pillars');
    if (pillars) {
      pillars.style.gridTemplateColumns = `repeat(${Math.min(t.pillarsCount, 4)}, 1fr)`;
      const items = pillars.querySelectorAll('.pillar');
      items.forEach((it, i) => it.style.display = i < t.pillarsCount ? '' : 'none');
    }
    const bespoke = document.querySelector('.bespoke');
    if (bespoke) bespoke.style.gridTemplateColumns = `repeat(${t.bespokeColumns}, 1fr)`;
    const conf = document.querySelector('.confidants');
    if (conf) conf.style.gridTemplateColumns = `repeat(${t.confidantsColumns}, 1fr)`;

    // Hero parts
    const seal = document.querySelector('.hero__seal');
    if (seal) seal.style.display = t.showHeroSeal ? '' : 'none';
    const counsel = document.querySelector('.glass--counsel');
    if (counsel) counsel.style.display = t.showGlassCounsel ? '' : 'none';
    const ledger = document.querySelector('.glass--ledger');
    if (ledger) ledger.style.display = t.showGlassLedger ? '' : 'none';
    const spot = document.querySelector('.museum__spotlight');
    if (spot) spot.style.display = t.showSpotlight ? '' : 'none';

    // Brand text
    document.querySelectorAll('[data-tw="brand-name"]').forEach(el => {
      el.innerHTML = `<em style="font-style:italic">${t.brandName.charAt(0)}</em>${t.brandName.slice(1)}`;
    });
    document.querySelectorAll('[data-tw="tagline"]').forEach(el => el.textContent = t.brandTagline);
    document.querySelectorAll('[data-tw="hero-pre"]').forEach(el => el.textContent = t.heroPre);
    document.querySelectorAll('[data-tw="hero-sub"]').forEach(el => el.textContent = t.heroSub);
    document.querySelectorAll('[data-tw="cta-primary"]').forEach(el => el.innerHTML = t.ctaPrimary + ' →');
    document.querySelectorAll('[data-tw="cta-secondary"]').forEach(el => el.textContent = t.ctaSecondary);
    document.querySelectorAll('[data-tw="monogram"]').forEach(el => el.textContent = t.letterMonogram);

    // Headline with accent word italic
    document.querySelectorAll('[data-tw="hero-headline"]').forEach(el => {
      const w = t.heroAccentWord;
      const html = w && t.heroHeadline.includes(w)
        ? t.heroHeadline.replace(w, `<span class="italic">${w}</span>`)
        : t.heroHeadline;
      el.innerHTML = html;
    });
  }, [JSON.stringify(t)]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color">
        <TweakSlider label="Gold hue" min={0} max={360} step={1} unit="°" value={t.goldHue} onChange={v=>set({goldHue:v})}/>
        <TweakSlider label="Gold chroma" min={0} max={25} step={1} value={t.goldChroma} onChange={v=>set({goldChroma:v})}/>
        <TweakSlider label="Gold lightness" min={40} max={90} step={1} unit="%" value={t.goldLight} onChange={v=>set({goldLight:v})}/>
        <TweakSlider label="Bg lightness" min={2} max={30} step={1} unit="%" value={t.bgLight} onChange={v=>set({bgLight:v})}/>
        <TweakSlider label="Bg warmth" min={0} max={100} step={1} value={t.bgWarmth} onChange={v=>set({bgWarmth:v})}/>
        <TweakSlider label="Paper light" min={70} max={98} step={1} unit="%" value={t.paperLight} onChange={v=>set({paperLight:v})}/>
        <TweakSlider label="Overall darkness" min={50} max={150} step={1} unit="%" value={t.darkness} onChange={v=>set({darkness:v})}/>
      </TweakSection>

      <TweakSection label="Typography">
        <TweakSelect label="Display font" value={t.displayFont} onChange={v=>set({displayFont:v})}
          options={["Cormorant Garamond","Playfair Display","DM Serif Display","Fraunces","Instrument Serif","Libre Caslon Display","Italiana"]}/>
        <TweakSelect label="Body font" value={t.bodyFont} onChange={v=>set({bodyFont:v})}
          options={["Inter","DM Sans","Manrope","IBM Plex Sans","Work Sans","Source Sans 3"]}/>
        <TweakSlider label="Display weight" min={300} max={700} step={100} value={t.displayWeight} onChange={v=>set({displayWeight:v})}/>
        <TweakToggle label="Italic display" value={t.italicDisplay} onChange={v=>set({italicDisplay:v})}/>
        <TweakSlider label="Title scale" min={70} max={150} step={5} unit="%" value={t.titleScale} onChange={v=>set({titleScale:v})}/>
        <TweakSlider label="Body scale" min={85} max={120} step={1} unit="%" value={t.bodyScale} onChange={v=>set({bodyScale:v})}/>
        <TweakSlider label="Letter tracking" min={-30} max={30} step={1} value={t.tracking} onChange={v=>set({tracking:v})}/>
        <TweakSlider label="Kicker tracking" min={0} max={50} step={1} value={t.kickerTracking} onChange={v=>set({kickerTracking:v})}/>
        <TweakSlider label="Line height" min={120} max={200} step={1} unit="%" value={t.lineHeight} onChange={v=>set({lineHeight:v})}/>
        <TweakToggle label="Uppercase kickers" value={t.uppercaseKickers} onChange={v=>set({uppercaseKickers:v})}/>
      </TweakSection>

      <TweakSection label="Brand & copy">
        <TweakText label="Brand name" value={t.brandName} onChange={v=>set({brandName:v})}/>
        <TweakText label="Tagline" value={t.brandTagline} onChange={v=>set({brandTagline:v})}/>
        <TweakText label="Monogram letter" value={t.letterMonogram} onChange={v=>set({letterMonogram:v})}/>
        <TweakText label="Hero pre-line" value={t.heroPre} onChange={v=>set({heroPre:v})}/>
        <TweakText label="Hero headline" value={t.heroHeadline} onChange={v=>set({heroHeadline:v})}/>
        <TweakText label="Italicized word" value={t.heroAccentWord} onChange={v=>set({heroAccentWord:v})}/>
        <TweakText label="Hero subhead" value={t.heroSub} onChange={v=>set({heroSub:v})}/>
        <TweakText label="CTA primary" value={t.ctaPrimary} onChange={v=>set({ctaPrimary:v})}/>
        <TweakText label="CTA secondary" value={t.ctaSecondary} onChange={v=>set({ctaSecondary:v})}/>
      </TweakSection>

      <TweakSection label="Hero & atmosphere">
        <TweakRadio label="Text align" value={t.heroAlign} options={["left","center"]} onChange={v=>set({heroAlign:v})}/>
        <TweakSelect label="Museum frame" value={t.museumStyle} onChange={v=>set({museumStyle:v})}
          options={["engrave","solid","duotone","gold","void","columns"]}/>
        <TweakSlider label="Spotlight intensity" min={0} max={200} step={5} unit="%" value={t.spotlightIntensity} onChange={v=>set({spotlightIntensity:v})}/>
        <TweakSlider label="Spotlight hue" min={0} max={360} step={1} unit="°" value={t.spotlightHue} onChange={v=>set({spotlightHue:v})}/>
        <TweakSlider label="Atmosphere gradient" min={0} max={200} step={5} unit="%" value={t.atmosphereGradient} onChange={v=>set({atmosphereGradient:v})}/>
        <TweakToggle label="Show spotlight" value={t.showSpotlight} onChange={v=>set({showSpotlight:v})}/>
        <TweakToggle label="Counsel card" value={t.showGlassCounsel} onChange={v=>set({showGlassCounsel:v})}/>
        <TweakToggle label="Ledger card" value={t.showGlassLedger} onChange={v=>set({showGlassLedger:v})}/>
        <TweakSlider label="Glass blur" min={0} max={40} step={1} unit="px" value={t.glassBlur} onChange={v=>set({glassBlur:v})}/>
        <TweakSlider label="Glass opacity" min={20} max={100} step={1} unit="%" value={t.glassOpacity} onChange={v=>set({glassOpacity:v})}/>
        <TweakSlider label="Float speed" min={0} max={200} step={10} unit="%" value={t.floatSpeed} onChange={v=>set({floatSpeed:v})}/>
        <TweakSlider label="Float amplitude" min={0} max={20} step={1} unit="px" value={t.floatAmplitude} onChange={v=>set({floatAmplitude:v})}/>
        <TweakToggle label="Hero seal" value={t.showHeroSeal} onChange={v=>set({showHeroSeal:v})}/>
      </TweakSection>

      <TweakSection label="Sections">
        <TweakToggle label="Pillars" value={t.showPillars} onChange={v=>set({showPillars:v})}/>
        <TweakSlider label="Pillars count" min={2} max={4} step={1} value={t.pillarsCount} onChange={v=>set({pillarsCount:v})}/>
        <TweakToggle label="Bespoke services" value={t.showBespoke} onChange={v=>set({showBespoke:v})}/>
        <TweakSlider label="Bespoke columns" min={1} max={4} step={1} value={t.bespokeColumns} onChange={v=>set({bespokeColumns:v})}/>
        <TweakToggle label="Confidants" value={t.showConfidants} onChange={v=>set({showConfidants:v})}/>
        <TweakSlider label="Confidants cols" min={1} max={3} step={1} value={t.confidantsColumns} onChange={v=>set({confidantsColumns:v})}/>
        <TweakToggle label="Ledger" value={t.showLedger} onChange={v=>set({showLedger:v})}/>
        <TweakRadio label="Ledger style" value={t.ledgerStyle} options={["bars","dots","line"]} onChange={v=>set({ledgerStyle:v})}/>
        <TweakSlider label="Bar anim speed" min={50} max={200} step={10} unit="%" value={t.barAnimSpeed} onChange={v=>set({barAnimSpeed:v})}/>
        <TweakToggle label="Privy CTA" value={t.showPrivy} onChange={v=>set({showPrivy:v})}/>
        <TweakSlider label="CTA padding Y" min={60} max={240} step={10} unit="px" value={t.ctaPaddingY} onChange={v=>set({ctaPaddingY:v})}/>
        <TweakSlider label="CTA glow" min={0} max={200} step={10} unit="%" value={t.ctaCenterGlow} onChange={v=>set({ctaCenterGlow:v})}/>
      </TweakSection>

      <TweakSection label="Shape & spacing">
        <TweakSlider label="Section spacing" min={50} max={180} step={5} unit="%" value={t.sectionSpacing} onChange={v=>set({sectionSpacing:v})}/>
        <TweakSlider label="Card padding" min={50} max={180} step={5} unit="%" value={t.cardPadding} onChange={v=>set({cardPadding:v})}/>
        <TweakSlider label="Card radius" min={0} max={32} step={1} unit="px" value={t.cardRadius} onChange={v=>set({cardRadius:v})}/>
        <TweakSlider label="Button radius" min={0} max={32} step={1} unit="px" value={t.btnRadius} onChange={v=>set({btnRadius:v})}/>
        <TweakSlider label="Shadow depth" min={0} max={250} step={10} unit="%" value={t.shadowDepth} onChange={v=>set({shadowDepth:v})}/>
        <TweakSlider label="Gold glow" min={0} max={250} step={10} unit="%" value={t.goldGlow} onChange={v=>set({goldGlow:v})}/>
        <TweakRadio label="Border style" value={t.borderStyle} options={["thin","medium","thick","none"]} onChange={v=>set({borderStyle:v})}/>
        <TweakRadio label="Border color" value={t.borderColor} options={["subtle","gold","strong"]} onChange={v=>set({borderColor:v})}/>
      </TweakSection>

      <TweakSection label="Atmosphere & FX">
        <TweakSlider label="Noise texture" min={0} max={100} step={1} unit="%" value={t.noiseTexture} onChange={v=>set({noiseTexture:v})}/>
        <TweakSlider label="Vignette" min={0} max={100} step={1} unit="%" value={t.vignette} onChange={v=>set({vignette:v})}/>
        <TweakSlider label="Film grain" min={0} max={100} step={1} unit="%" value={t.filmGrain} onChange={v=>set({filmGrain:v})}/>
        <TweakSlider label="Scanlines" min={0} max={100} step={1} unit="%" value={t.scanlines} onChange={v=>set({scanlines:v})}/>
        <TweakToggle label="Vertical column rule" value={t.verticalRule} onChange={v=>set({verticalRule:v})}/>
        <TweakToggle label="Roman numerals" value={t.romanNumerals} onChange={v=>set({romanNumerals:v})}/>
        <TweakToggle label="Deco separators" value={t.decoSeparators} onChange={v=>set({decoSeparators:v})}/>
      </TweakSection>
    </TweaksPanel>
  );
};

ReactDOM.createRoot(document.getElementById("__tweaks")).render(<Tweaks/>);