// DANOVI — 갤러리 Tweaks
// 작품 갤러리의 타일 표현만 조절합니다. 사이트의 나머지 규칙(레드 5원칙·서체·여백)은
// 건드리지 않습니다. 값은 CSS 변수로만 전달하고, 기본값은 지금 화면과 동일합니다.
// 기본값은 works.html 의 EDITMODE 블록에서 옵니다 (호스트가 그 블록을 디스크에 다시 씁니다).
const DANOVI_TWEAK_DEFAULTS = window.DANOVI_TWEAK_DEFAULTS;

const RATIO_MAP = { '1:1': '1 / 1', '4:5': '4 / 5', '3:4': '3 / 4', '16:9': '16 / 9' };
const ACCENTS = ['#ee4028', '#1f6feb', '#16181a', '#2f5140'];

function GalleryTweaks() {
  const [t, setTweak] = useTweaks(DANOVI_TWEAK_DEFAULTS);

  // 값 → CSS 변수. 갤러리 CSS 가 var() 로 읽습니다.
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--twk-tile-fit', t.tileFit);
    r.style.setProperty('--twk-tile-ratio', RATIO_MAP[t.tileRatio] || '1 / 1');
    r.style.setProperty('--twk-cols', String(t.cols));
    r.style.setProperty('--twk-gap', t.gap + 'px');
    r.style.setProperty('--twk-tile-bg', t.tileBg);
    r.style.setProperty('--twk-accent', t.accent);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="타일" />
      <TweakRadio
        label="맞춤 방식"
        value={t.tileFit}
        options={['cover', 'contain']}
        onChange={v => setTweak('tileFit', v)}
      />
      <TweakRadio
        label="비율"
        value={t.tileRatio}
        options={['1:1', '4:5', '3:4']}
        onChange={v => setTweak('tileRatio', v)}
      />
      <TweakColor
        label="여백 색"
        value={t.tileBg}
        options={['#f6f5f2', '#ffffff', '#16181a']}
        onChange={v => setTweak('tileBg', v)}
      />

      <TweakSection label="그리드" />
      <TweakRadio
        label="열 수"
        value={t.cols}
        options={[4, 3, 2]}
        onChange={v => setTweak('cols', Number(v))}
      />
      <TweakSlider
        label="간격"
        value={t.gap}
        min={0}
        max={24}
        step={1}
        unit="px"
        onChange={v => setTweak('gap', v)}
      />

      <TweakSection label="액센트" />
      <TweakColor
        label="레드 포인트"
        value={t.accent}
        options={ACCENTS}
        onChange={v => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

Object.assign(window, { GalleryTweaks, DANOVI_TWEAK_DEFAULTS });