// MEET2 — Tweaks panel for the conservative homepage.
// Lets the user hot-swap palette, body font, heading font, hero photo tone,
// and surfacing-level density. Persists via __edit_mode_set_keys.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#faf7f2", "#b8945a", "#d4a8a4", "#2a2620"],
  "headingFont": "serif-tc",
  "bodyFont": "sans-tc",
  "heroTone": "pink",
  "spacious": false
}/*EDITMODE-END*/;

const PALETTES = [
  ["#faf7f2", "#b8945a", "#d4a8a4", "#2a2620"], // Cream + Champagne + Dusty Pink (default)
  ["#f5efe6", "#a37a3c", "#c89a78", "#1f1a14"], // Warmer terracotta
  ["#f7f3ec", "#8a7e5a", "#b9a896", "#2a2620"], // Muted olive-gold
  ["#fbf6f3", "#c4878a", "#e6c4a8", "#33231e"], // Rose-forward
  ["#f4f1ec", "#6b5e4a", "#a39280", "#1a1612"], // Editorial earth tones
];

const HEAD_FONTS = {
  "serif-tc":  '"Noto Serif TC","Cormorant Garamond",serif',
  "serif-en":  '"Cormorant Garamond","Noto Serif TC",serif',
  "sans-tc":   '"Noto Sans TC","Inter",sans-serif',
};
const BODY_FONTS = {
  "sans-tc":   '"Noto Sans TC","Inter",sans-serif',
  "serif-tc":  '"Noto Serif TC","Cormorant Garamond",serif',
  "inter":     '"Inter","Noto Sans TC",sans-serif',
};

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

  // Apply tweaks to :root each render.
  useEffect(() => {
    const r = document.documentElement;
    const [bg, gold, pink, ink] = t.palette;
    r.style.setProperty('--bg', bg);
    r.style.setProperty('--bg-elev', '#ffffff');
    r.style.setProperty('--bg-tint',  mix(bg, ink, 0.06));
    r.style.setProperty('--bg-pink',  mix(pink, '#ffffff', 0.4));
    r.style.setProperty('--bg-deep',  ink);
    r.style.setProperty('--gold', gold);
    r.style.setProperty('--gold-soft', mix(gold, '#ffffff', 0.45));
    r.style.setProperty('--gold-deep', mix(gold, ink, 0.4));
    r.style.setProperty('--pink', pink);
    r.style.setProperty('--pink-deep', mix(pink, ink, 0.45));
    r.style.setProperty('--ink', ink);
    r.style.setProperty('--ink-2', mix(ink, bg, 0.45));
    r.style.setProperty('--ink-3', mix(ink, bg, 0.65));

    r.style.setProperty('--font-heading', HEAD_FONTS[t.headingFont] || HEAD_FONTS["serif-tc"]);
    r.style.setProperty('--font-body',    BODY_FONTS[t.bodyFont]    || BODY_FONTS["sans-tc"]);
    r.style.setProperty('--s-9',  t.spacious ? '128px' : '96px');
    r.style.setProperty('--s-10', t.spacious ? '160px' : '128px');
  }, [t]);

  // Re-tone all hero photos
  useEffect(() => {
    document.querySelectorAll('.va-hero-image .m-photo').forEach(el => el.setAttribute('data-tone', t.heroTone));
  }, [t.heroTone]);

  return (
    <TweaksPanel title="Tweaks · 覓 MEET2">
      <TweakSection label="Palette" />
      <TweakColor label="配色組合" value={t.palette}
        options={PALETTES} onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="標題字體" value={t.headingFont}
        options={[
          { value: 'serif-tc', label: '思源宋體 TC（默認）' },
          { value: 'serif-en', label: 'Cormorant 為主' },
          { value: 'sans-tc',  label: '思源黑體 TC' },
        ]}
        onChange={(v) => setTweak('headingFont', v)} />
      <TweakSelect label="內文字體" value={t.bodyFont}
        options={[
          { value: 'sans-tc',  label: '思源黑體 TC（默認）' },
          { value: 'serif-tc', label: '思源宋體 TC' },
          { value: 'inter',    label: 'Inter（西文優先）' },
        ]}
        onChange={(v) => setTweak('bodyFont', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Hero 圖片色調" value={t.heroTone}
        options={['pink','gold','cream']}
        onChange={(v) => setTweak('heroTone', v)} />
      <TweakToggle label="寬鬆留白" value={t.spacious}
        onChange={(v) => setTweak('spacious', v)} />
    </TweaksPanel>
  );
}

// ── tiny color mixer ──────────────────────────────────────
function mix(a, b, t) {
  const pa = parse(a), pb = parse(b);
  const r = Math.round(pa[0] + (pb[0]-pa[0])*t);
  const g = Math.round(pa[1] + (pb[1]-pa[1])*t);
  const bl= Math.round(pa[2] + (pb[2]-pa[2])*t);
  return `rgb(${r}, ${g}, ${bl})`;
}
function parse(c) {
  c = c.replace('#','');
  if (c.length === 3) c = c.split('').map(x=>x+x).join('');
  return [parseInt(c.slice(0,2),16), parseInt(c.slice(2,4),16), parseInt(c.slice(4,6),16)];
}

window.MeetTweaks = MeetTweaks;