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

const HERO_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroScale": 1.05,
  "heroPosX": 60,
  "heroPosY": 35,
  "heroBrightness": 0.78,
  "heroWidth": 100,
  "heroHeight": 100,
  "heroAnim": true,
  "metaPadX": 8,
  "metaPadY": 102,
  "metaFontSize": 12,
  "metaLetterSpacing": 0.2,
  "metaLineHeight": 1.8,
  "mPosX": 60,
  "mPosY": 35,
  "mScale": 1.05,
  "mImgWidth": 100,
  "mImgHeight": 100,
  "mImgClipTop": 0,
  "mImgClipBottom": 0,
  "mHeroHeight": 100,
  "mHeroMarginBottom": -116,
  "mManifestoPaddingTop": 76,
  "mHeroBottomPadding": 148,
  "mHeroFadeStart": 50,
  "mHeroFadeEnd": 86,
  "mBrightness": 0.78,
  "mHeroCtaVisible": true,
  "mEyebrowVisible": true,
  "mEyebrowSize": 11,
  "mEyebrowSpacing": 0.12,
  "mEyebrowMarginBottom": 28,
  "mEyebrowOffsetX": 10,
  "mTitleSize": 10,
  "mTitleAlign": "left",
  "mTitleMarginTop": -10,
  "mTitleMarginBottom": 0,
  "mTitleOffsetX": 4,
  "mSubSize": 16,
  "mSubMaxW": 360,
  "mSubAlign": "left",
  "mSubMarginTop": 12,
  "mSubOffsetX": 8,
  "mPadX": 24,
  "mTextAlign": "center",
  "mJustify": "center",
  "mLayout": "overlay-top"
}/*EDITMODE-END*/;

function HeroTweaks() {
  const [t, setTweak] = useTweaks(HERO_DEFAULTS);

  useEffect(() => {
    const img = document.querySelector('.hero-img');
    if (img) {
      img.style.setProperty('--hero-scale', t.heroScale);
      img.style.setProperty('--hero-pos-x', t.heroPosX + '%');
      img.style.setProperty('--hero-pos-y', t.heroPosY + '%');
      img.style.setProperty('--hero-brightness', t.heroBrightness);
      img.style.setProperty('--hero-width', t.heroWidth + '%');
      img.style.setProperty('--hero-height', t.heroHeight + '%');
      img.style.setProperty('--hero-anim', t.heroAnim ? 'running' : 'paused');
    }

    const bottom = document.querySelector('.hero-bottom');
    if (bottom) {
      bottom.style.setProperty('--meta-pad-x', t.metaPadX + 'vw');
      bottom.style.setProperty('--meta-pad-y', t.metaPadY + 'px');
    }

    const meta = document.querySelector('.hero-meta');
    if (meta) {
      meta.style.setProperty('--meta-font-size', t.metaFontSize + 'px');
      meta.style.setProperty('--meta-letter-spacing', t.metaLetterSpacing + 'em');
      meta.style.setProperty('--meta-line-height', t.metaLineHeight);
    }

    // Mobile-specific (only applies on viewport ≤720px via CSS media query)
    const root = document.documentElement;
    // Hero Image
    root.style.setProperty('--hero-pos-x-m', t.mPosX + '%');
    root.style.setProperty('--hero-pos-y-m', t.mPosY + '%');
    root.style.setProperty('--hero-scale-m', t.mScale);
    root.style.setProperty('--hero-img-w-m', t.mImgWidth + '%');
    root.style.setProperty('--hero-img-h-m', t.mImgHeight + '%');
    root.style.setProperty('--hero-img-clip-top-m', t.mImgClipTop + '%');
    root.style.setProperty('--hero-img-clip-bottom-m', t.mImgClipBottom + '%');
    root.style.setProperty('--hero-height-m', t.mHeroHeight + 'vh');
    root.style.setProperty('--hero-margin-bottom-m', t.mHeroMarginBottom + 'px');
    root.style.setProperty('--manifesto-padding-top-m', t.mManifestoPaddingTop + 'px');
    root.style.setProperty('--hero-bottom-pad-y-m', t.mHeroBottomPadding + 'px');
    root.style.setProperty('--hero-fade-start-m', t.mHeroFadeStart + '%');
    root.style.setProperty('--hero-fade-end-m', t.mHeroFadeEnd + '%');
    root.style.setProperty('--hero-brightness-m', t.mBrightness);
    root.style.setProperty('--hero-cta-display-m', t.mHeroCtaVisible ? 'inline-flex' : 'none');
    // Helper: when "left distance" != 0, anchor element to flex-start with fixed margin-left.
    // Positive = offset from left edge. Negative = pull element past left padding.
    // When 0, fall back to auto-centering (preserves existing centered look).
    const resolveLeft = (val, defaultML, defaultMR, defaultSelf) => {
      if (val !== 0) {
        return { ml: val + 'px', mr: '0', self: 'flex-start' };
      }
      return { ml: defaultML, mr: defaultMR, self: defaultSelf };
    };

    // Eyebrow (P・SPO CHITACOH ・ 月額制スタディスペース)
    root.style.setProperty('--hero-eyebrow-display-m', t.mEyebrowVisible ? 'inline-flex' : 'none');
    root.style.setProperty('--hero-eyebrow-size-m', t.mEyebrowSize + 'px');
    root.style.setProperty('--hero-eyebrow-spacing-m', t.mEyebrowSpacing + 'em');
    root.style.setProperty('--hero-eyebrow-mb-m', t.mEyebrowMarginBottom + 'px');
    {
      const { ml, mr, self } = resolveLeft(t.mEyebrowOffsetX, 'auto', 'auto', 'auto');
      root.style.setProperty('--hero-eyebrow-ml-m', ml);
      root.style.setProperty('--hero-eyebrow-mr-m', mr);
      root.style.setProperty('--hero-eyebrow-self-m', self);
    }
    // Main Message (Title)
    root.style.setProperty('--hero-title-size-m', `clamp(28px, ${t.mTitleSize}vw, 96px)`);
    root.style.setProperty('--hero-title-align-m', t.mTitleAlign);
    root.style.setProperty('--hero-title-mt-m', t.mTitleMarginTop + 'px');
    root.style.setProperty('--hero-title-mb-m', t.mTitleMarginBottom + 'px');
    {
      const { ml, mr, self } = resolveLeft(t.mTitleOffsetX, '0', '0', 'stretch');
      root.style.setProperty('--hero-title-ml-m', ml);
      root.style.setProperty('--hero-title-mr-m', mr);
      root.style.setProperty('--hero-title-self-m', self);
    }
    // Sub Message
    root.style.setProperty('--hero-sub-size-m', t.mSubSize + 'px');
    root.style.setProperty('--hero-sub-maxw-m', t.mSubMaxW + 'px');
    root.style.setProperty('--hero-sub-align-m', t.mSubAlign);
    root.style.setProperty('--hero-sub-mt-m', t.mSubMarginTop + 'px');
    {
      const { ml, mr, self } = resolveLeft(t.mSubOffsetX, 'auto', 'auto', 'auto');
      root.style.setProperty('--hero-sub-ml-m', ml);
      root.style.setProperty('--hero-sub-mr-m', mr);
      root.style.setProperty('--hero-sub-self-m', self);
    }
    // Layout
    root.style.setProperty('--hero-content-pad-x-m', t.mPadX + 'px');
    root.style.setProperty('--hero-text-align-m', t.mTextAlign);
    root.style.setProperty('--hero-align-m', t.mTextAlign === 'left' ? 'flex-start' : t.mTextAlign === 'right' ? 'flex-end' : 'center');
    root.style.setProperty('--hero-justify-m', t.mJustify);
    // Layout preset (data attribute on html)
    root.setAttribute('data-m-layout', t.mLayout);
  }, [t]);

  const reset = () => {
    if (window.__clearTweakLS) window.__clearTweakLS();
    setTweak(HERO_DEFAULTS);
  };
  const copyCurrent = async () => {
    const json = JSON.stringify(t, null, 2);
    try {
      await navigator.clipboard.writeText(json);
      console.log('[Tweaks] Copied current values:\n' + json);
      alert('現在の値をクリップボードにコピーしました。\nhero-tweaks.jsx の HERO_DEFAULTS ブロックに貼り付けて永続化できます。');
    } catch (e) {
      console.log('[Tweaks] Current values:\n' + json);
      alert('クリップボードAPIが使えません。コンソールに値を出力しました。');
    }
  };

  return (
    <TweaksPanel title="Hero">
      <TweakSection label="画像位置 / Image Position" />
      <TweakSlider label="水平位置 X" value={t.heroPosX} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('heroPosX', v)} />
      <TweakSlider label="垂直位置 Y" value={t.heroPosY} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('heroPosY', v)} />

      <TweakSection label="画像サイズ / Image Scale" />
      <TweakSlider label="ズーム" value={t.heroScale} min={0.8} max={2.0} step={0.01} unit="×"
        onChange={v => setTweak('heroScale', v)} />
      <TweakSlider label="幅" value={t.heroWidth} min={50} max={150} step={1} unit="%"
        onChange={v => setTweak('heroWidth', v)} />
      <TweakSlider label="高さ" value={t.heroHeight} min={50} max={150} step={1} unit="%"
        onChange={v => setTweak('heroHeight', v)} />

      <TweakSection label="画像ルック / Image Look" />
      <TweakSlider label="明るさ" value={t.heroBrightness} min={0.2} max={1.2} step={0.02}
        onChange={v => setTweak('heroBrightness', v)} />
      <TweakToggle label="ドリフトアニメ" value={t.heroAnim}
        onChange={v => setTweak('heroAnim', v)} />

      <TweakSection label="メタ情報 / Meta (LOCATION・PRICE)" />
      <TweakSlider label="左右余白 X" value={t.metaPadX} min={0} max={20} step={0.5} unit="vw"
        onChange={v => setTweak('metaPadX', v)} />
      <TweakSlider label="下余白 Y" value={t.metaPadY} min={0} max={200} step={2} unit="px"
        onChange={v => setTweak('metaPadY', v)} />
      <TweakSlider label="文字サイズ" value={t.metaFontSize} min={8} max={24} step={0.5} unit="px"
        onChange={v => setTweak('metaFontSize', v)} />
      <TweakSlider label="字間" value={t.metaLetterSpacing} min={0} max={0.6} step={0.01} unit="em"
        onChange={v => setTweak('metaLetterSpacing', v)} />
      <TweakSlider label="行間" value={t.metaLineHeight} min={1} max={3} step={0.05}
        onChange={v => setTweak('metaLineHeight', v)} />

      <TweakSection label="📱 スマホ ─ レイアウトプリセット (≤720px)" />
      <TweakRadio label="レイアウト" value={t.mLayout}
        options={[
          { label: 'A:中央', value: 'overlay-center' },
          { label: 'B:上', value: 'overlay-top' },
          { label: 'C:下', value: 'overlay-bottom' },
          { label: 'D:文/画', value: 'split-text-image' },
          { label: 'E:画/文', value: 'split-image-text' }
        ]}
        onChange={v => setTweak('mLayout', v)} />

      <TweakSection label="📱 スマホ ─ ヒーロー画像" />
      <TweakSlider label="位置 水平 X" value={t.mPosX} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('mPosX', v)} />
      <TweakSlider label="位置 垂直 Y" value={t.mPosY} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('mPosY', v)} />
      <TweakSlider label="ズーム" value={t.mScale} min={0.8} max={2.0} step={0.01} unit="×"
        onChange={v => setTweak('mScale', v)} />
      <TweakSlider label="幅" value={t.mImgWidth} min={50} max={150} step={1} unit="%"
        onChange={v => setTweak('mImgWidth', v)} />
      <TweakSlider label="高さ" value={t.mImgHeight} min={50} max={150} step={1} unit="%"
        onChange={v => setTweak('mImgHeight', v)} />
      <TweakSlider label="上crop" value={t.mImgClipTop} min={0} max={80} step={0.5} unit="%"
        onChange={v => setTweak('mImgClipTop', v)} />
      <TweakSlider label="下crop" value={t.mImgClipBottom} min={0} max={80} step={0.5} unit="%"
        onChange={v => setTweak('mImgClipBottom', v)} />
      <TweakSlider label="明るさ" value={t.mBrightness} min={0.2} max={1.2} step={0.02}
        onChange={v => setTweak('mBrightness', v)} />
      <TweakToggle label="ヒーロー直下CTA「見学予約」表示" value={t.mHeroCtaVisible}
        onChange={v => setTweak('mHeroCtaVisible', v)} />

      <TweakSection label="📱 スマホ ─ セクション境界" />
      <TweakSlider label="ヒーロー高さ" value={t.mHeroHeight} min={50} max={150} step={1} unit="vh"
        onChange={v => setTweak('mHeroHeight', v)} />
      <TweakSlider label="ヒーロー下余白" value={t.mHeroMarginBottom} min={-300} max={200} step={2} unit="px"
        onChange={v => setTweak('mHeroMarginBottom', v)} />
      <TweakSlider label="次セクション上余白" value={t.mManifestoPaddingTop} min={0} max={200} step={2} unit="px"
        onChange={v => setTweak('mManifestoPaddingTop', v)} />
      <TweakSlider label="CTA下余白" value={t.mHeroBottomPadding} min={0} max={300} step={2} unit="px"
        onChange={v => setTweak('mHeroBottomPadding', v)} />
      <TweakSlider label="グラデ開始" value={t.mHeroFadeStart} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('mHeroFadeStart', v)} />
      <TweakSlider label="グラデ終了" value={t.mHeroFadeEnd} min={0} max={100} step={1} unit="%"
        onChange={v => setTweak('mHeroFadeEnd', v)} />

      <TweakSection label="📱 スマホ ─ アイブロウ (月額制スタディスペース)" />
      <TweakToggle label="表示" value={t.mEyebrowVisible}
        onChange={v => setTweak('mEyebrowVisible', v)} />
      <TweakSlider label="文字サイズ" value={t.mEyebrowSize} min={8} max={20} step={0.5} unit="px"
        onChange={v => setTweak('mEyebrowSize', v)} />
      <TweakSlider label="字間" value={t.mEyebrowSpacing} min={0} max={0.6} step={0.01} unit="em"
        onChange={v => setTweak('mEyebrowSpacing', v)} />
      <TweakSlider label="下余白(タイトルとの間)" value={t.mEyebrowMarginBottom} min={0} max={100} step={2} unit="px"
        onChange={v => setTweak('mEyebrowMarginBottom', v)} />
      <TweakSlider label="左端からの距離 (0=自動中央)" value={t.mEyebrowOffsetX} min={-100} max={360} step={2} unit="px"
        onChange={v => setTweak('mEyebrowOffsetX', v)} />

      <TweakSection label="📱 スマホ ─ メインメッセージ" />
      <TweakSlider label="文字サイズ" value={t.mTitleSize} min={4} max={16} step={0.5} unit="vw"
        onChange={v => setTweak('mTitleSize', v)} />
      <TweakSlider label="上余白" value={t.mTitleMarginTop} min={-200} max={200} step={2} unit="px"
        onChange={v => setTweak('mTitleMarginTop', v)} />
      <TweakSlider label="下余白" value={t.mTitleMarginBottom} min={-50} max={100} step={2} unit="px"
        onChange={v => setTweak('mTitleMarginBottom', v)} />
      <TweakSlider label="左端からの距離 (0=自動)" value={t.mTitleOffsetX} min={-100} max={360} step={2} unit="px"
        onChange={v => setTweak('mTitleOffsetX', v)} />
      <TweakRadio label="文字揃え" value={t.mTitleAlign}
        options={[
          { label: '左', value: 'left' },
          { label: '中', value: 'center' },
          { label: '右', value: 'right' }
        ]}
        onChange={v => setTweak('mTitleAlign', v)} />

      <TweakSection label="📱 スマホ ─ サブメッセージ" />
      <TweakSlider label="文字サイズ" value={t.mSubSize} min={10} max={22} step={0.5} unit="px"
        onChange={v => setTweak('mSubSize', v)} />
      <TweakSlider label="最大幅" value={t.mSubMaxW} min={200} max={500} step={10} unit="px"
        onChange={v => setTweak('mSubMaxW', v)} />
      <TweakSlider label="上余白(タイトルとの間)" value={t.mSubMarginTop} min={0} max={120} step={2} unit="px"
        onChange={v => setTweak('mSubMarginTop', v)} />
      <TweakSlider label="左端からの距離 (0=自動中央)" value={t.mSubOffsetX} min={-100} max={360} step={2} unit="px"
        onChange={v => setTweak('mSubOffsetX', v)} />
      <TweakRadio label="文字揃え" value={t.mSubAlign}
        options={[
          { label: '左', value: 'left' },
          { label: '中', value: 'center' },
          { label: '右', value: 'right' }
        ]}
        onChange={v => setTweak('mSubAlign', v)} />

      <TweakSection label="📱 スマホ ─ 全体レイアウト" />
      <TweakSlider label="左右余白" value={t.mPadX} min={0} max={64} step={2} unit="px"
        onChange={v => setTweak('mPadX', v)} />
      <TweakRadio label="文字揃え(共通デフォルト)" value={t.mTextAlign}
        options={[
          { label: '左', value: 'left' },
          { label: '中', value: 'center' },
          { label: '右', value: 'right' }
        ]}
        onChange={v => setTweak('mTextAlign', v)} />
      <TweakRadio label="縦位置" value={t.mJustify}
        options={[
          { label: '上', value: 'flex-start' },
          { label: '中', value: 'center' },
          { label: '下', value: 'flex-end' }
        ]}
        onChange={v => setTweak('mJustify', v)} />

      <TweakSection label=" " />
      <TweakButton label="📋 現在の値をコピー (JSON)" onClick={copyCurrent} />
      <TweakButton label="初期値にリセット (LS含む)" onClick={reset} secondary />
    </TweaksPanel>
  );
}

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