/* ============================================================
   Sa93View — Tweaks app (React island)
   Renders the floating Tweaks panel and applies every tweak to
   the live page. The rest of the page is plain HTML/CSS/JS.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "purple",
  "headlineFont": "Oxanium",
  "radius": 18,
  "heroShade": 0.78,
  "marqueeSpeed": 38,
  "headlineMain": "42K Channels. 115K Movies.",
  "headlineAccent": "One Subscription.",
  "heroSub": "Live TV, movies, series and every major sport in 4K & HD — on any device. Free trial, no card needed.",
  "heroCta": "Start Free Trial",
  "serverCount": "25",
  "serverCity": "United States",
  "showMarquee": true,
  "showDevices": true,
  "showServers": true,
  "showApps": true,
  "showGband": true,
  "showCounters": true,
  "showReviews": true,
  "showFaq": true
}/*EDITMODE-END*/;

const PALETTES = [
  ["#6A79FA", "#5623D8"], // purple (default)
  ["#38BDF8", "#1D4ED8"], // blue
  ["#FB7185", "#E11D48"], // crimson
  ["#10B981", "#047857"], // emerald
  ["#F59E0B", "#D97706"]  // amber
];
const PALETTE_KEYS = ["purple", "blue", "crimson", "emerald", "amber"];

function paletteFromColors(colors) {
  var i = PALETTES.findIndex(function (p) { return p[0].toLowerCase() === String(colors[0]).toLowerCase(); });
  return PALETTE_KEYS[i < 0 ? 0 : i];
}

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

  // Apply every tweak to the document whenever values change.
  React.useEffect(function () {
    const root = document.documentElement;
    document.body.setAttribute("data-palette", t.palette);
    root.style.setProperty("--ff-display", '"' + t.headlineFont + '", system-ui, sans-serif');
    root.style.setProperty("--radius", t.radius + "px");
    root.style.setProperty("--hero-mid", String(t.heroShade));
    root.style.setProperty("--hero-top", String(Math.max(0, t.heroShade - 0.23).toFixed(2)));
    root.style.setProperty("--marquee-dur", t.marqueeSpeed + "s");

    const setText = function (sel, val) {
      document.querySelectorAll(sel).forEach(function (el) { el.textContent = val; });
    };
    setText('[data-tweak="headlineMain"]', t.headlineMain);
    setText('[data-tweak="headlineAccent"]', t.headlineAccent);
    setText('[data-tweak="heroSub"]', t.heroSub);
    setText('[data-tweak="heroCta"]', t.heroCta);
    setText('#serverCount', t.serverCount);
    setText('#serverOnline', t.serverCount);
    setText('#serverCity', t.serverCity);
    if (typeof window.__sa93HighlightCity === "function") window.__sa93HighlightCity(t.serverCity);

    const toggle = function (sel, show) {
      document.querySelectorAll(sel).forEach(function (el) {
        el.setAttribute("data-hide", show ? "false" : "true");
      });
    };
    toggle('.marquee', t.showMarquee);
    toggle('[data-tweak-section="devices"]', t.showDevices);
    toggle('[data-tweak-section="servers"]', t.showServers);
    toggle('[data-tweak-section="apps"]', t.showApps);
    toggle('[data-tweak-section="gband"]', t.showGband);
    toggle('[data-tweak-section="counters"]', t.showCounters);
    toggle('#reviews', t.showReviews);
    toggle('#faq', t.showFaq);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakColor label="Color palette" value={PALETTES[PALETTE_KEYS.indexOf(t.palette)] || PALETTES[0]}
        options={PALETTES}
        onChange={function (v) { setTweak("palette", paletteFromColors(v)); }} />
      <TweakSelect label="Headline font" value={t.headlineFont}
        options={["Oxanium", "Sora", "Poppins", "Manrope"]}
        onChange={function (v) { setTweak("headlineFont", v); }} />
      <TweakSlider label="Corner radius" value={t.radius} min={4} max={28} unit="px"
        onChange={function (v) { setTweak("radius", v); }} />

      <TweakSection label="Hero" />
      <TweakSlider label="Background darkness" value={Math.round(t.heroShade * 100)} min={30} max={95} unit="%"
        onChange={function (v) { setTweak("heroShade", v / 100); }} />
      <TweakText label="Headline" value={t.headlineMain}
        onChange={function (v) { setTweak("headlineMain", v); }} />
      <TweakText label="Accent line" value={t.headlineAccent}
        onChange={function (v) { setTweak("headlineAccent", v); }} />
      <TweakText label="Subheadline" value={t.heroSub}
        onChange={function (v) { setTweak("heroSub", v); }} />
      <TweakText label="Primary button" value={t.heroCta}
        onChange={function (v) { setTweak("heroCta", v); }} />

      <TweakSection label="Content" />
      <TweakText label="Servers count" value={t.serverCount}
        onChange={function (v) { setTweak("serverCount", v); }} />
      <TweakSelect label="Featured city" value={t.serverCity}
        options={["United States", "Canada", "Brazil", "France", "Sweden", "China", "South Africa", "Indonesia", "Australia"]}
        onChange={function (v) { setTweak("serverCity", v); }} />
      <TweakSlider label="Marquee speed" value={t.marqueeSpeed} min={12} max={70} unit="s"
        onChange={function (v) { setTweak("marqueeSpeed", v); }} />

      <TweakSection label="Sections" />
      <TweakToggle label="City marquee" value={t.showMarquee} onChange={function (v) { setTweak("showMarquee", v); }} />
      <TweakToggle label="Compatible devices" value={t.showDevices} onChange={function (v) { setTweak("showDevices", v); }} />
      <TweakToggle label="Servers worldwide" value={t.showServers} onChange={function (v) { setTweak("showServers", v); }} />
      <TweakToggle label="IPTV apps" value={t.showApps} onChange={function (v) { setTweak("showApps", v); }} />
      <TweakToggle label="Global channels band" value={t.showGband} onChange={function (v) { setTweak("showGband", v); }} />
      <TweakToggle label="Stat counters" value={t.showCounters} onChange={function (v) { setTweak("showCounters", v); }} />
      <TweakToggle label="Reviews" value={t.showReviews} onChange={function (v) { setTweak("showReviews", v); }} />
      <TweakToggle label="FAQ" value={t.showFaq} onChange={function (v) { setTweak("showFaq", v); }} />
    </TweaksPanel>
  );
}

// Only mount the authoring panel in an editing context — never for real
// visitors on the production site (F-04). The host loads the page inside an
// iframe; localhost and an explicit ?edit flag also count. On the live,
// top-level site this whole block is a no-op, so no editor UI and no
// cross-origin message listener ship to visitors.
(function () {
  var editing = false;
  try {
    if (window.self !== window.top) {
      editing = true;                       // running inside the authoring host iframe
    } else {
      var h = location.hostname;
      if (h === "localhost" || h === "127.0.0.1" || /\.local$/.test(h)) editing = true;
      else if (/(?:[?&#])edit\b/.test(location.search + location.hash)) editing = true;
    }
  } catch (e) {
    editing = true;                         // cross-origin frame check threw → assume authoring
  }
  if (editing) {
    ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<App />);
  }
})();