// tweaks.jsx — shared tweaks panel for the Akceon promo site.
// Theme (light/dark), accent color, typography family.
// State persists across pages via localStorage so the user can navigate.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "marka-mavisi",
  "font": "system"
}/*EDITMODE-END*/;

const ACCENTS = {
  "marka-mavisi": {
    label: "Marka mavisi",
    deep: "#1B2A4E",
    accent: "#3B9CD9",
    soft: "rgba(59, 156, 217, 0.10)",
    stroke: "rgba(59, 156, 217, 0.35)",
  },
  "lacivert":     {
    label: "Lacivert mono",
    deep: "#0F1A33",
    accent: "#1B2A4E",
    soft: "rgba(27, 42, 78, 0.10)",
    stroke: "rgba(27, 42, 78, 0.35)",
  },
  "amber":        {
    label: "Endüstri amber",
    deep: "#7c5a0a",
    accent: "#f59e0b",
    soft: "rgba(245, 158, 11, 0.10)",
    stroke: "rgba(245, 158, 11, 0.35)",
  },
  "kirmizi":      {
    label: "Kritik kırmızı",
    deep: "#7f1d1d",
    accent: "#dc2626",
    soft: "rgba(220, 38, 38, 0.10)",
    stroke: "rgba(220, 38, 38, 0.35)",
  },
};

const FONTS = {
  "system": {
    label: "Sistem (HMI'a sadık)",
    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    display: 'inherit',
    google: null,
  },
  "saira": {
    label: "Saira (geniş geometrik)",
    family: '"Saira", -apple-system, sans-serif',
    display: '"Saira", -apple-system, sans-serif',
    google: "Saira:wght@400;500;600;700",
  },
  "chakra": {
    label: "Chakra Petch (teknik)",
    family: '"Chakra Petch", -apple-system, sans-serif',
    display: '"Chakra Petch", -apple-system, sans-serif',
    google: "Chakra+Petch:wght@400;500;600;700",
  },
};

const LS_KEY = "akceon-site-tweaks";

// Preload google fonts referenced by any tweak option so switching is instant.
function preloadFonts() {
  const fams = Object.values(FONTS).map(f => f.google).filter(Boolean);
  if (!fams.length) return;
  const href = "https://fonts.googleapis.com/css2?" + fams.map(f => "family=" + f).join("&") + "&display=swap";
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  document.head.appendChild(link);
}

function applyTweaks(t) {
  // Theme
  document.documentElement.setAttribute("data-theme", t.theme === "dark" ? "dark" : "light");

  // Accent
  const a = ACCENTS[t.accent] || ACCENTS["marka-mavisi"];
  const root = document.documentElement.style;
  root.setProperty("--accent",        a.accent);
  root.setProperty("--accent-deep",   a.deep);
  root.setProperty("--accent-soft",   a.soft);
  root.setProperty("--accent-stroke", a.stroke);

  // Font
  const f = FONTS[t.font] || FONTS["system"];
  root.setProperty("--font-sans",    f.family);
  root.setProperty("--font-display", f.display === "inherit" ? f.family : f.display);
}

// Apply persisted tweaks BEFORE React mounts, so there's no flash.
(function bootstrap() {
  preloadFonts();
  try {
    const saved = JSON.parse(localStorage.getItem(LS_KEY) || "null");
    if (saved) {
      applyTweaks({ ...TWEAK_DEFAULTS, ...saved });
    } else {
      applyTweaks(TWEAK_DEFAULTS);
    }
  } catch (e) {
    applyTweaks(TWEAK_DEFAULTS);
  }
})();

function App() {
  const initial = React.useMemo(() => {
    try {
      const saved = JSON.parse(localStorage.getItem(LS_KEY) || "null");
      return { ...TWEAK_DEFAULTS, ...(saved || {}) };
    } catch (e) {
      return { ...TWEAK_DEFAULTS };
    }
  }, []);

  // Use the panel's useTweaks for host protocol, but persist to localStorage on every change.
  const [t, setTweak] = useTweaks(initial);

  React.useEffect(() => {
    applyTweaks(t);
    try { localStorage.setItem(LS_KEY, JSON.stringify(t)); } catch (e) {}
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema" />
      <TweakRadio
        label="Görünüm"
        value={t.theme}
        options={[
          { value: "light", label: "Açık" },
          { value: "dark",  label: "Koyu" },
        ]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakSection label="Vurgu rengi" />
      <TweakColor
        label="Aksan"
        value={ACCENTS[t.accent]?.accent || ACCENTS["marka-mavisi"].accent}
        options={Object.values(ACCENTS).map(a => a.accent)}
        onChange={(hex) => {
          const key = Object.keys(ACCENTS).find(k => ACCENTS[k].accent === hex) || "marka-mavisi";
          setTweak("accent", key);
        }}
      />
      <div className="twk-row" style={{ marginTop: -4, color: "rgba(41,38,27,0.55)", fontSize: 11 }}>
        {ACCENTS[t.accent]?.label}
      </div>
      <TweakSection label="Tipografi" />
      <TweakSelect
        label="Yazı ailesi"
        value={t.font}
        options={Object.entries(FONTS).map(([k, v]) => ({ value: k, label: v.label }))}
        onChange={(v) => setTweak("font", v)}
      />
    </TweaksPanel>
  );
}

// Mount
const __twkRoot = document.createElement("div");
__twkRoot.id = "__akceon_tweaks_root";
document.body.appendChild(__twkRoot);
ReactDOM.createRoot(__twkRoot).render(<App />);