/* Tweaks controller — mounts the floating panel, applies live changes */
const { useEffect } = React;

const PALETTES = {
  balanced: {
    label: "Equilibrado (tech + eco)",
    "--tech-violet": "#6b4eff",
    "--tech-magenta": "#ff3d8c",
    "--tech-cyan": "#58e6ff",
    "--eco-moss": "#2f5d44",
    "--eco-sage": "#8aa896",
    "--eco-clay": "#b7794a",
  },
  vivid: {
    label: "Vibrante",
    "--tech-violet": "#7c3aed",
    "--tech-magenta": "#ec4899",
    "--tech-cyan": "#22d3ee",
    "--eco-moss": "#15803d",
    "--eco-sage": "#86efac",
    "--eco-clay": "#ea580c",
  },
  earthy: {
    label: "Terroso / sóbrio",
    "--tech-violet": "#4f46e5",
    "--tech-magenta": "#be185d",
    "--tech-cyan": "#0ea5e9",
    "--eco-moss": "#365314",
    "--eco-sage": "#a3a380",
    "--eco-clay": "#92400e",
  },
  noir: {
    label: "Editorial / mono",
    "--tech-violet": "#1f1f1f",
    "--tech-magenta": "#dc2626",
    "--tech-cyan": "#facc15",
    "--eco-moss": "#1c2e1f",
    "--eco-sage": "#9ca3af",
    "--eco-clay": "#78350f",
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.balanced;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => {
    if (k.startsWith("--")) root.style.setProperty(k, v);
  });
}

function applyHeadline(text) {
  // Headline is split across three spans; we replace text inside the
  // .tech-word + .eco-word and the tail accordingly when the user
  // edits the headline. We accept the format "A & B — tail" or split
  // by the first '&' / 'e' / 'and'.
  const heroTitle = document.querySelector(".hero-title");
  if (!heroTitle) return;
  // Find a separator: prefer '&', then '+', then ' e '
  let sep = /\s*&\s*|\s*\+\s*|\s+e\s+/i;
  const dashSplit = text.split(/—|--|–/);
  const head = (dashSplit[0] || "").trim();
  const tail = (dashSplit[1] || "").trim();
  const parts = head.split(sep);
  const tech = (parts[0] || "Crescimento").trim();
  const eco = (parts[1] || "conformidade").trim();

  const techEl = heroTitle.querySelector(".tech-word");
  const ecoEl = heroTitle.querySelector(".eco-word .underline-eco");
  const tailEl = heroTitle.querySelector(".serif.ital");
  if (techEl) techEl.textContent = tech;
  if (ecoEl) ecoEl.textContent = eco;
  if (tailEl && tail) tailEl.textContent = "— " + tail.replace(/^—\s*/, "");
}

function applyDarkHero(on) {
  const hero = document.querySelector(".hero");
  if (!hero) return;
  if (on) {
    hero.style.background = "var(--tech-ink)";
    hero.style.color = "var(--paper)";
    document.querySelector(".hero-orn .grid-bg").style.opacity = "0.25";
    document.querySelectorAll(".hero-title .tech-word").forEach(e => e.style.color = "#fff");
    const lede = document.querySelector(".hero-lede");
    if (lede) lede.style.color = "rgba(246,243,236,0.85)";
    const eyebrow = document.querySelector(".hero-eyebrow");
    if (eyebrow) { eyebrow.style.background = "rgba(255,255,255,0.04)"; eyebrow.style.color = "#fff"; }
  } else {
    hero.style.background = "";
    hero.style.color = "";
    document.querySelector(".hero-orn .grid-bg").style.opacity = "";
    document.querySelectorAll(".hero-title .tech-word").forEach(e => e.style.color = "");
    const lede = document.querySelector(".hero-lede");
    if (lede) lede.style.color = "";
    const eyebrow = document.querySelector(".hero-eyebrow");
    if (eyebrow) { eyebrow.style.background = ""; eyebrow.style.color = ""; }
  }
}

function applyStrip(on) {
  const strip = document.querySelector(".hero-strip");
  if (strip) strip.style.display = on ? "" : "none";
}

function TweaksApp() {
  const defaults = window.__MILET_TWEAKS || {
    palette: "balanced",
    headline: "Crescimento & conformidade — no mesmo time.",
    darkHero: false,
    showStrip: true,
  };
  const [t, setTweak] = useTweaks(defaults);

  // Apply initial state once on mount, then re-apply whenever a tweak changes.
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { applyHeadline(t.headline); }, [t.headline]);
  useEffect(() => { applyDarkHero(t.darkHero); }, [t.darkHero]);
  useEffect(() => { applyStrip(t.showStrip); }, [t.showStrip]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidade visual">
        <TweakSelect
          label="Paleta"
          value={t.palette}
          options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.label }))}
          onChange={(v) => setTweak("palette", v)}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakText
          label="Headline (& separa, — antes do complemento)"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakToggle
          label="Hero em modo escuro"
          value={t.darkHero}
          onChange={(v) => setTweak("darkHero", v)}
        />
        <TweakToggle
          label="Mostrar faixa de setores"
          value={t.showStrip}
          onChange={(v) => setTweak("showStrip", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const __mount = document.createElement("div");
__mount.id = "__tweaks_root";
document.body.appendChild(__mount);
ReactDOM.createRoot(__mount).render(<TweaksApp />);