// COSTA GLOSS — Tweaks panel
// Live customization: brand, fonts, theme, contact, integrations.

const CG_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8A24A",
  "fontPair": "fraunces-hanken",
  "dark": true,
  "phone": "+34 600 000 000",
  "managerPhone": "+34 600 000 000",
  "pixelId": "",
  "tgBotToken": "",
  "tgChatId": "",
  "capiEndpoint": ""
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#C8A24A",  // champagne gold (default)
  "#B59159",  // soft gold
  "#1A1815",  // graphite mono
  "#9F3A2A"   // burgundy
];

const FONT_PAIRS = {
  "fraunces-hanken": {
    label: "Fraunces + Hanken",
    display: '"Fraunces", "Cormorant Garamond", Georgia, serif',
    sans: '"Hanken Grotesk", system-ui, sans-serif'
  },
  "cormorant-manrope": {
    label: "Cormorant + Manrope",
    display: '"Cormorant Garamond", Georgia, serif',
    sans: '"Manrope", system-ui, sans-serif'
  },
  "marcellus-hanken": {
    label: "Marcellus + Hanken",
    display: '"Marcellus", Georgia, serif',
    sans: '"Hanken Grotesk", system-ui, sans-serif'
  },
  "italiana-sora": {
    label: "Italiana + Sora",
    display: '"Italiana", Georgia, serif',
    sans: '"Sora", system-ui, sans-serif'
  }
};

function applyTweaks(t) {
  const root = document.documentElement;
  // accent
  root.style.setProperty('--accent', t.accent);
  const r = parseInt(t.accent.slice(1, 3), 16);
  const g = parseInt(t.accent.slice(3, 5), 16);
  const b = parseInt(t.accent.slice(5, 7), 16);
  root.style.setProperty('--accent-soft', `rgba(${r},${g},${b},.12)`);
  // fonts
  const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS["cormorant-manrope"];
  root.style.setProperty('--font-display', pair.display);
  root.style.setProperty('--font-sans', pair.sans);
  // theme — Tweaks sets the default ONLY if the user hasn't made a manual
  // choice via the visible nav toggle (which sets window.__cgUserTheme).
  if (!window.__cgUserTheme) {
    document.body.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }
  // global config for app.js / fb-pixel.js / lead-router.js
  window.CG_CONFIG = Object.assign({}, window.CG_CONFIG, {
    phone: t.phone,
    managerPhone: t.managerPhone || t.phone,
    pixelId: t.pixelId,
    tgBotToken: t.tgBotToken,
    tgChatId: t.tgChatId,
    capiEndpoint: t.capiEndpoint
  });
  window.dispatchEvent(new Event('cg:configchange'));
}

// Apply defaults immediately, even before React mounts (so config is ready
// when DOMContentLoaded fires in app.js)
applyTweaks(CG_TWEAK_DEFAULTS);

function CGTweaks() {
  const [t, setTweak] = useTweaks(CG_TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyTweaks(t);
  }, [t.accent, t.fontPair, t.dark, t.phone, t.managerPhone, t.pixelId, t.tgBotToken, t.tgChatId, t.capiEndpoint]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSelect
        label="Font pair"
        value={t.fontPair}
        options={Object.entries(FONT_PAIRS).map(([id, p]) => ({ value: id, label: p.label }))}
        onChange={(v) => setTweak('fontPair', v)}
      />
      <TweakToggle
        label="Dark mode"
        value={t.dark}
        onChange={(v) => setTweak('dark', v)}
      />

      <TweakSection label="Contact" />
      <TweakText
        label="Display WhatsApp"
        value={t.phone}
        onChange={(v) => setTweak('phone', v)}
        placeholder="+34 600 000 000"
      />
      <TweakText
        label="Manager phone (leads)"
        value={t.managerPhone}
        onChange={(v) => setTweak('managerPhone', v)}
        placeholder="+34 600 000 000"
      />

      <TweakSection label="Facebook Pixel" />
      <TweakText
        label="Pixel ID"
        value={t.pixelId}
        onChange={(v) => setTweak('pixelId', v)}
        placeholder="123456789012345"
      />
      <TweakText
        label="CAPI endpoint (server)"
        value={t.capiEndpoint}
        onChange={(v) => setTweak('capiEndpoint', v)}
        placeholder="/api/capi"
      />

      <TweakSection label="Telegram bot" />
      <TweakText
        label="Bot token"
        value={t.tgBotToken}
        onChange={(v) => setTweak('tgBotToken', v)}
        placeholder="123:ABC-DEF..."
      />
      <TweakText
        label="Chat ID"
        value={t.tgChatId}
        onChange={(v) => setTweak('tgChatId', v)}
        placeholder="-1001234567890"
      />
    </TweaksPanel>
  );
}

// Mount into a dedicated root so it doesn't disturb static markup
const __cgTweaksMount = document.createElement('div');
__cgTweaksMount.id = 'cg-tweaks-root';
document.body.appendChild(__cgTweaksMount);
ReactDOM.createRoot(__cgTweaksMount).render(<CGTweaks />);