/* Tweaks panel - lets user switch theme / font / cta text */
// Tweaks uses React.useState directly

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "font": "noto",
  "ctaLabel": "ガリィの実験ログを読む"
}/*EDITMODE-END*/;

const THEMES = {
  light:   { label: 'Light (default)', body: '#FAFAF7', ink: '#0B1220' },
  cream:   { label: 'Cream paper',     body: '#F5F1E8', ink: '#101725' },
  dark:    { label: 'Dark log',        body: '#0B1220', ink: '#F3F3EE' },
};

const FONTS = {
  noto:    { label: 'Noto Sans JP',         stack: '"Noto Sans JP", system-ui, sans-serif' },
  zen:     { label: 'Zen Kaku Gothic New',  stack: '"Zen Kaku Gothic New", system-ui, sans-serif', gf: 'Zen+Kaku+Gothic+New:wght@400;500;700;900' },
  mplus:   { label: 'M PLUS 1p',            stack: '"M PLUS 1p", system-ui, sans-serif', gf: 'M+PLUS+1p:wght@400;500;700;900' },
};

const CTA_OPTIONS = [
  'ガリィの実験ログを読む',
  'LINEで友だち追加',
  '無料で登録する',
  '実験ログの裏側を覗く',
];

function applyTheme(theme) {
  const t = THEMES[theme] || THEMES.light;
  document.documentElement.style.setProperty('--body-bg', t.body);
  document.documentElement.style.setProperty('--body-ink', t.ink);
  document.body.classList.toggle('theme-dark', theme === 'dark');
  document.body.classList.toggle('theme-cream', theme === 'cream');
}

function applyFont(font) {
  const f = FONTS[font] || FONTS.noto;
  if (f.gf && !document.getElementById(`gf-${font}`)) {
    const link = document.createElement('link');
    link.id = `gf-${font}`;
    link.rel = 'stylesheet';
    link.href = `https://fonts.googleapis.com/css2?family=${f.gf}&display=swap`;
    document.head.appendChild(link);
  }
  document.body.style.fontFamily = f.stack;
}

function TweaksPanel({ state, setState, onClose }) {
  return (
    <div className="tweaks-enter fixed bottom-4 right-4 z-[60] w-[300px] rounded-xl bg-white ring-1 ring-black/10 shadow-[0_20px_60px_-10px_rgba(0,0,0,0.35)] text-ink-900 font-sans">
      <div className="flex items-center justify-between px-4 py-3 border-b border-black/8">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-line inline-block"></span>
          <span className="text-[13px] font-bold tracking-tight">Tweaks</span>
        </div>
        <button onClick={onClose} className="text-ink-400 hover:text-ink-900">
          <Icon.X size={16}/>
        </button>
      </div>

      <div className="px-4 py-4 space-y-4">
        {/* Theme */}
        <div>
          <div className="mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-2">Theme</div>
          <div className="grid grid-cols-3 gap-1.5">
            {Object.entries(THEMES).map(([k, v]) => (
              <button key={k} onClick={() => setState({ theme: k })}
                className={[
                  'rounded-md px-2 py-2 text-[11px] ring-1 text-left transition-all',
                  state.theme === k ? 'ring-ink-900 bg-ink-900 text-white' : 'ring-black/10 hover:ring-black/25 bg-white'
                ].join(' ')}>
                <div className="w-full h-4 rounded-sm mb-1.5" style={{ background: v.body, border: '1px solid rgba(0,0,0,0.08)' }}></div>
                <div className="leading-tight">{v.label}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Font */}
        <div>
          <div className="mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-2">Japanese font</div>
          <div className="space-y-1">
            {Object.entries(FONTS).map(([k, v]) => (
              <button key={k} onClick={() => setState({ font: k })}
                className={[
                  'w-full rounded-md px-3 py-2 text-left text-[13px] ring-1 transition-all flex items-center justify-between',
                  state.font === k ? 'ring-ink-900 bg-ink-900 text-white' : 'ring-black/10 hover:ring-black/25 bg-white'
                ].join(' ')}
                style={{ fontFamily: v.stack }}>
                <span>{v.label}</span>
                <span className="mono text-[10px] opacity-60">実験ログ</span>
              </button>
            ))}
          </div>
        </div>

        {/* CTA text */}
        <div>
          <div className="mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-2">CTA文言</div>
          <div className="space-y-1">
            {CTA_OPTIONS.map((opt) => (
              <button key={opt} onClick={() => setState({ ctaLabel: opt })}
                className={[
                  'w-full rounded-md px-3 py-2 text-left text-[12.5px] ring-1 transition-all',
                  state.ctaLabel === opt ? 'ring-line bg-line/10 text-ink-900' : 'ring-black/10 hover:ring-black/25 bg-white'
                ].join(' ')}>
                {opt}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TWEAK_DEFAULTS, TweaksPanel, applyTheme, applyFont });