// Shared language constants + hover-dropdown selector for sub-pages
// (adapters, faq, blog). The home page has its own copy in sections.jsx.

const LANGUAGES = [
  { code: "tr", label: "Türkçe" },
  { code: "en", label: "English" },
  { code: "de", label: "Deutsch" },
  { code: "fr", label: "Français" },
  { code: "es", label: "Español" },
  { code: "ru", label: "Русский" },
  { code: "pl", label: "Polski" },
  { code: "ar", label: "العربية" },
];

function LanguageMenu({ lang, setLang }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);

  const onEnter = () => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setOpen(true);
  };
  const onLeave = () => {
    closeTimer.current = setTimeout(() => setOpen(false), 120);
  };

  const current = LANGUAGES.find(l => l.code === lang) || LANGUAGES[0];

  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave}
      style={{ position: "relative", fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>
      <button
        aria-haspopup="listbox" aria-expanded={open}
        style={{
          display: "flex", alignItems: "center", gap: 8,
          padding: "7px 12px", borderRadius: 8,
          border: "1px solid var(--line-2)", color: "var(--fg)",
          background: open ? "color-mix(in oklab, var(--fg) 6%, transparent)" : "transparent",
          letterSpacing: ".04em", transition: "background .12s ease, border-color .12s ease",
        }}>
        <span style={{ fontWeight: 700, color: "var(--accent)" }}>{current.code.toUpperCase()}</span>
        <span style={{ color: "var(--fg-dim)" }}>{current.label}</span>
        <svg width="10" height="10" viewBox="0 0 10 10" style={{ transition: "transform .15s ease", transform: open ? "rotate(180deg)" : "none" }}>
          <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>

      {open && (
        <div role="listbox"
          style={{
            position: "absolute", top: "calc(100% + 8px)", right: 0,
            minWidth: 180, padding: 6,
            background: "var(--bg-2)",
            border: "1px solid var(--line-2)", borderRadius: 10,
            boxShadow: "0 20px 60px -20px rgba(0,0,0,.6)",
            zIndex: 200,
          }}>
          {LANGUAGES.map(l => {
            const active = lang === l.code;
            return (
              <button key={l.code} role="option" aria-selected={active}
                onClick={() => {
                  // Path-based çok dilli sayfalardaysa URL'i de güncelle ki her dilin
                  // kendi indekslenebilir URL'i olsun (SEO için kritik).
                  try {
                    const path = window.location.pathname;
                    // /{lang}/blog/{slug} → /{newLang}/blog/{slug}
                    let m = path.match(/^\/(?:tr|en|de|fr|es|ru|pl|ar)\/blog\/([a-z0-9-]+)\/?$/);
                    if (m) { window.location.href = "/" + l.code + "/blog/" + m[1]; return; }
                    // /{lang}/blog → /{newLang}/blog
                    m = path.match(/^\/(?:tr|en|de|fr|es|ru|pl|ar)\/(blog|faq|adapters)\/?$/);
                    if (m) { window.location.href = "/" + l.code + "/" + m[1]; return; }
                  } catch (e) {}
                  setLang(l.code); setOpen(false);
                }}
                style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  width: "100%", padding: "8px 10px", borderRadius: 6,
                  background: active ? "color-mix(in oklab, var(--accent) 14%, transparent)" : "transparent",
                  color: active ? "var(--accent)" : "var(--fg)",
                  fontWeight: active ? 600 : 500, letterSpacing: ".02em",
                  textAlign: "left", transition: "background .1s ease",
                }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "color-mix(in oklab, var(--fg) 6%, transparent)"; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
                <span>{l.label}</span>
                <span style={{ fontSize: 10, opacity: .7, marginLeft: 12 }}>{l.code.toUpperCase()}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

// Unified language storage: all pages read/write the same key the home page
// uses (obdthink.tweaks.v2). On first run we migrate the legacy obd_lang key
// if present so users don't lose their existing preference.
const TWEAKS_KEY = "obdthink.tweaks.v2";
const SUPPORTED_LANGS = ["tr", "en", "de", "fr", "es", "ru", "pl", "ar"];

function detectBrowserLang() {
  try {
    const list = navigator.languages && navigator.languages.length
      ? navigator.languages : [navigator.language || "en"];
    for (const l of list) {
      const code = (l || "").slice(0, 2).toLowerCase();
      if (SUPPORTED_LANGS.includes(code)) return code;
    }
  } catch (e) {}
  return "en";
}

function readSharedLang() {
  try {
    const raw = localStorage.getItem(TWEAKS_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      if (parsed && typeof parsed.language === "string") return parsed.language;
    }
  } catch (e) {}
  // legacy fallback, then browser language detection
  return localStorage.getItem("obd_lang") || detectBrowserLang();
}

function writeSharedLang(lang) {
  try {
    let obj = {};
    const raw = localStorage.getItem(TWEAKS_KEY);
    if (raw) {
      try { obj = JSON.parse(raw) || {}; } catch (e) { obj = {}; }
    }
    obj.language = lang;
    localStorage.setItem(TWEAKS_KEY, JSON.stringify(obj));
  } catch (e) {}
}

Object.assign(window, { LANGUAGES, LanguageMenu, readSharedLang, writeSharedLang });