// Coffee Hub — Tweaks panel
// Exposes palette, hero motion, about layout, beans card style, board layout, tone.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "green-mint",
  "heroMotion": "video",
  "heroVideoUrl": "",
  "aboutLayout": "split",
  "beansStyle": "card",
  "journalLayout": "grid",
  "tone": "editorial",
  "showSectionMarks": true
}/*EDITMODE-END*/;

const PALETTES = {
  "green-mint": { name: "Green · Mint (기본)", cream: "#f7f4ed", green: "#24352e", mint: "#b1e0d4", clay: "#d4795c" },
  "brown-honey": { name: "Coffee Brown", cream: "#f1ebe0", green: "#3a2a1f", mint: "#e8b974", clay: "#8b5a3c" },
  "mono-warm": { name: "Mono · Warm Gray", cream: "#f4f1eb", green: "#1f1d1a", mint: "#d9d5cd", clay: "#a0926f" },
  "deep-forest": { name: "Deep Forest", cream: "#f0ece2", green: "#1e2a23", mint: "#9ec9b8", clay: "#c97b54" },
};

function applyPalette(p) {
  const root = document.documentElement;
  const pal = PALETTES[p] || PALETTES["green-mint"];
  root.style.setProperty('--cream', pal.cream);
  root.style.setProperty('--green', pal.green);
  root.style.setProperty('--ink', pal.green);
  root.style.setProperty('--mint', pal.mint);
  root.style.setProperty('--clay', pal.clay);
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  React.useEffect(() => {
    const hero = document.querySelector('.hero__media');
    const cell = document.querySelector('.drip__media');
    if (!hero) return;

    if (t.heroMotion === 'video') {
      // 기본 상태(heroVideoUrl 비어 있음)에서는 index.html의 랜덤 플레이리스트를 보존한다.
      // 커스텀 URL을 지정한 경우에만 해당 영상으로 교체.
      if (t.heroVideoUrl) {
        hero.innerHTML = `<video autoplay muted loop playsinline preload="metadata"><source src="${t.heroVideoUrl}" type="video/mp4"></video>`;
      }
    } else if (t.heroMotion === 'pan') {
      hero.innerHTML = `<img src="https://images.unsplash.com/photo-1591291621060-89264e398d40?auto=format&fit=crop&w=2400&q=80" alt="" style="animation: pan-left 28s ease-out forwards;">`;
    } else {
      hero.innerHTML = `<img src="https://images.unsplash.com/photo-1591291621060-89264e398d40?auto=format&fit=crop&w=2400&q=80" alt="" style="animation: zoom-slow 22s ease-out forwards;">`;
    }
  }, [t.heroMotion, t.heroVideoUrl]);

  React.useEffect(() => {
    const wrap = document.querySelector('.about-prev__wrap');
    if (!wrap) return;
    wrap.style.gridTemplateColumns = t.aboutLayout === 'stack' ? '1fr' : (t.aboutLayout === 'reverse' ? '0.95fr 1.05fr' : '1.05fr 0.95fr');
    const media = wrap.querySelector('.about-prev__media');
    if (media) media.style.order = t.aboutLayout === 'reverse' ? '2' : '0';
  }, [t.aboutLayout]);

  React.useEffect(() => {
    document.querySelectorAll('.bean-card').forEach(c => {
      c.dataset.style = t.beansStyle;
    });
    const grid = document.querySelector('.beans__grid');
    if (!grid) return;
    if (t.beansStyle === 'list') {
      grid.style.gridTemplateColumns = '1fr';
      document.querySelectorAll('.bean-card').forEach(c => {
        c.style.flexDirection = 'row';
        c.style.alignItems = 'stretch';
        const media = c.querySelector('.bean-card__media');
        if (media) { media.style.width = '180px'; media.style.flexShrink = '0'; media.style.aspectRatio = '1'; }
        const body = c.querySelector('.bean-card__body');
        if (body) body.style.flex = '1';
      });
    } else if (t.beansStyle === 'magazine') {
      grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
      grid.style.gap = '56px 48px';
      document.querySelectorAll('.bean-card').forEach(c => {
        c.style.flexDirection = 'column';
        const media = c.querySelector('.bean-card__media');
        if (media) { media.style.width = '100%'; media.style.aspectRatio = '4/3'; media.style.flexShrink = ''; }
        const body = c.querySelector('.bean-card__body');
        if (body) body.style.flex = '';
      });
    } else {
      grid.style.gridTemplateColumns = '';
      grid.style.gap = '';
      document.querySelectorAll('.bean-card').forEach(c => {
        c.style.flexDirection = ''; c.style.alignItems = '';
        const media = c.querySelector('.bean-card__media');
        if (media) { media.style.width = ''; media.style.flexShrink = ''; media.style.aspectRatio = ''; }
        const body = c.querySelector('.bean-card__body');
        if (body) body.style.flex = '';
      });
    }
  }, [t.beansStyle]);

  React.useEffect(() => {
    const grid = document.querySelector('.journal-pre__grid');
    if (!grid) return;
    if (t.journalLayout === 'text') {
      grid.style.gridTemplateColumns = '1fr';
      grid.style.gap = '32px';
      document.querySelectorAll('.journal-pre__card').forEach(c => {
        c.style.display = 'grid';
        c.style.gridTemplateColumns = '160px 1fr';
        c.style.gap = '32px';
        c.style.alignItems = 'baseline';
      });
    } else if (t.journalLayout === 'magazine') {
      grid.style.gridTemplateColumns = '2fr 1fr 1fr';
      grid.style.gap = '40px';
      document.querySelectorAll('.journal-pre__card').forEach((c, i) => {
        c.style.display = '';
        c.style.gridTemplateColumns = '';
        c.style.gap = '';
        c.style.alignItems = '';
        if (i === 0) {
          c.querySelector('h3').style.fontSize = 'clamp(28px, 2.6vw, 36px)';
        } else {
          c.querySelector('h3').style.fontSize = '';
        }
      });
    } else {
      grid.style.gridTemplateColumns = '';
      grid.style.gap = '';
      document.querySelectorAll('.journal-pre__card').forEach(c => {
        c.style.display = ''; c.style.gridTemplateColumns = ''; c.style.gap = ''; c.style.alignItems = '';
        const h = c.querySelector('h3'); if (h) h.style.fontSize = '';
      });
    }
  }, [t.journalLayout]);

  React.useEffect(() => {
    const body = document.body;
    body.classList.toggle('tone-warm', t.tone === 'warm');
    if (t.tone === 'warm') {
      document.documentElement.style.setProperty('--cream', '#f9f1e6');
      document.documentElement.style.setProperty('--cream-warm', '#f1e6d4');
    } else {
      applyPalette(t.palette);
    }
  }, [t.tone, t.palette]);

  React.useEffect(() => {
    document.querySelectorAll('.section-break').forEach(el => {
      el.style.display = t.showSectionMarks ? '' : 'none';
    });
  }, [t.showSectionMarks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette · 팔레트" />
      <TweakSelect
        label="컬러 시스템"
        value={t.palette}
        options={Object.keys(PALETTES).map(k => ({ value: k, label: PALETTES[k].name }))}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="Hero · 히어로" />
      <TweakRadio
        label="모션"
        value={t.heroMotion}
        options={[
          { value: 'video', label: '영상' },
          { value: 'pan', label: '팬' },
          { value: 'zoom', label: '줌' },
        ]}
        onChange={(v) => setTweak('heroMotion', v)}
      />
      <TweakText
        label="영상 URL (mp4)"
        value={t.heroVideoUrl}
        onChange={(v) => setTweak('heroVideoUrl', v)}
      />

      <TweakSection label="About · 대표 이야기" />
      <TweakRadio
        label="레이아웃"
        value={t.aboutLayout}
        options={[
          { value: 'split', label: '좌우' },
          { value: 'reverse', label: '뒤집기' },
          { value: 'stack', label: '세로' },
        ]}
        onChange={(v) => setTweak('aboutLayout', v)}
      />

      <TweakSection label="Beans · 원두 카드" />
      <TweakRadio
        label="스타일"
        value={t.beansStyle}
        options={[
          { value: 'card', label: '카드' },
          { value: 'list', label: '리스트' },
          { value: 'magazine', label: '매거진' },
        ]}
        onChange={(v) => setTweak('beansStyle', v)}
      />

      <TweakSection label="Journal · 게시판" />
      <TweakRadio
        label="레이아웃"
        value={t.journalLayout}
        options={[
          { value: 'grid', label: '그리드' },
          { value: 'text', label: '텍스트' },
          { value: 'magazine', label: '매거진' },
        ]}
        onChange={(v) => setTweak('journalLayout', v)}
      />

      <TweakSection label="Tone · 톤" />
      <TweakRadio
        label="분위기"
        value={t.tone}
        options={[
          { value: 'editorial', label: '절제' },
          { value: 'warm', label: '따뜻함' },
        ]}
        onChange={(v) => setTweak('tone', v)}
      />

      <TweakSection label="Detail · 디테일" />
      <TweakToggle
        label="섹션 구분 마크 (— 01 —)"
        value={t.showSectionMarks}
        onChange={(v) => setTweak('showSectionMarks', v)}
      />
    </TweaksPanel>
  );
}

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