/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakColor, TweakButton */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A86A",
  "heroImage": "real-airchateau-lady-bmw-branded-h125.webp",
  "heroCrop": "Editorial frame",
  "showRoadmap": true,
  "imageVignette": 0.55,
  "density": "Spacious"
}/*EDITMODE-END*/;

const HERO_IMAGES = {
  'real-airchateau-lady-bmw-branded-h125.webp': 'Brand · Lady + BMW',
  'real-airchateau-dubai-frame-aerial.webp': 'Aerial · Dubai frame',
  'real-yt-h125-helipad-luxury-car.webp': 'H125 + BMW · ramp',
  'real-yt-palm-jumeirah-aerial.webp': 'Palm Jumeirah aerial',
  'real-yt-h125-sunset-helipad.webp': 'H125 sunset · helipad',
  'real-airchateau-couple-boarding-pilot.webp': 'Couple boarding · pilot',
  'real-airchateau-dubai-skyline-night.webp': 'Dubai skyline · night',
};

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

  // Apply accent
  useEffect(() => {
    document.documentElement.style.setProperty('--gold', t.accent);
    // shift bright/deep tones proportionally
    const c = t.accent;
    document.documentElement.style.setProperty('--accent', c);
  }, [t.accent]);

  // Apply hero image
  useEffect(() => {
    const img = document.getElementById('hero-img');
    if (img) img.src = 'media/' + t.heroImage;
  }, [t.heroImage]);

  // Apply vignette via gradient overlay opacity
  useEffect(() => {
    const sheet = document.getElementById('tweak-vignette') || (() => {
      const s = document.createElement('style');
      s.id = 'tweak-vignette';
      document.head.appendChild(s);
      return s;
    })();
    const v = t.imageVignette;
    sheet.textContent = `.hero-img { opacity: ${1 - v * 0.4}; } .hero::after { opacity: ${0.4 + v} !important; }`;
  }, [t.imageVignette]);

  // Apply roadmap visibility
  useEffect(() => {
    const r = document.getElementById('future');
    if (r) r.style.display = t.showRoadmap ? '' : 'none';
  }, [t.showRoadmap]);

  // Apply density
  useEffect(() => {
    const sheet = document.getElementById('tweak-density') || (() => {
      const s = document.createElement('style');
      s.id = 'tweak-density';
      document.head.appendChild(s);
      return s;
    })();
    if (t.density === 'Tight') {
      sheet.textContent = `section { padding: clamp(60px, 7vw, 110px) var(--pad); } .section-head { margin-bottom: 56px; }`;
    } else if (t.density === 'Editorial') {
      sheet.textContent = `section { padding: clamp(120px, 15vw, 220px) var(--pad); } .section-head { margin-bottom: 120px; }`;
    } else {
      sheet.textContent = '';
    }
  }, [t.density]);

  // Apply hero crop
  useEffect(() => {
    const img = document.getElementById('hero-img');
    if (!img) return;
    if (t.heroCrop === 'Full bleed') img.style.objectPosition = 'center center';
    else if (t.heroCrop === 'Aerial wide') img.style.objectPosition = 'center 30%';
    else img.style.objectPosition = 'center 60%';
  }, [t.heroCrop]);

  return (
    <TweaksPanel title="Air Chateau · Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Hero accent"
          value={t.accent}
          options={['#C9A86A', '#E1C189', '#1E6FA8', '#7AA9D4', '#B0915A']}
          onChange={v => setTweak('accent', v)}
        />
        <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.12em', color: '#888', margin: '8px 0 0' }}>
          Gold is the brand-evidence default. Blue is a sky-led alternate · brief permits one accent.
        </p>
      </TweakSection>

      <TweakSection title="Hero">
        <TweakSelect
          label="Hero image"
          value={t.heroImage}
          options={Object.keys(HERO_IMAGES).map(k => ({ value: k, label: HERO_IMAGES[k] }))}
          onChange={v => setTweak('heroImage', v)}
        />
        <TweakRadio
          label="Crop"
          value={t.heroCrop}
          options={['Editorial frame', 'Full bleed', 'Aerial wide']}
          onChange={v => setTweak('heroCrop', v)}
        />
        <TweakSlider
          label="Vignette intensity"
          value={t.imageVignette}
          min={0}
          max={1}
          step={0.05}
          onChange={v => setTweak('imageVignette', v)}
        />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          options={['Tight', 'Spacious', 'Editorial']}
          onChange={v => setTweak('density', v)}
        />
        <TweakToggle
          label="Show eVTOL roadmap"
          value={t.showRoadmap}
          onChange={v => setTweak('showRoadmap', v)}
        />
      </TweakSection>

      <TweakSection title="Quick demo">
        <TweakButton onClick={() => window.openBooking('sunrise-special')}>Open booking modal</TweakButton>
        <TweakButton onClick={() => window.openWhatsApp('Hi Air Chateau, sample concierge enquiry.')}>Open WhatsApp prefill</TweakButton>
        <TweakButton onClick={() => { document.querySelector('.lang-toggle button[data-lang="ar"]').click(); }}>Toggle Arabic (RTL)</TweakButton>
        <TweakButton onClick={() => { document.querySelector('.lang-toggle button[data-lang="en"]').click(); }}>Back to English</TweakButton>
      </TweakSection>
    </TweaksPanel>
  );
}

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