/* global React, ReactDOM,
   Navbar, Footer, WhatsAppFab, Ticker,
   HomePage, CommunitiesPage, CommunityPage, AgentPage, TeamPage, SellPage, ContactPage,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect, TweakToggle */

// ============================================================
// Tweak defaults
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F44842",
  "density": "editorial",
  "typePairing": "cormorant-inter",
  "gridLayout": "bento",
  "showSampleWatermark": true,
  "locale": "EN"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#F44842", // Espace coral-red (signature)
  "#13384A", // Marine deep blue
  "#B68A52", // Sand warm desert
  "#1A1919", // Pure ink (monochrome)
];

const TYPE_OPTIONS = [
  { label: "Cormorant + Inter", value: "cormorant-inter" },
  { label: "Tenor + Manrope",   value: "tenor-manrope" },
  { label: "Cormorant + Manrope", value: "cormorant-manrope" },
];

function applyType(pairing) {
  const map = {
    "cormorant-inter":     ['"Cormorant Garamond", "Times New Roman", serif', '"Inter", system-ui, sans-serif'],
    "tenor-manrope":       ['"Tenor Sans", "Cormorant Garamond", serif',       '"Manrope", system-ui, sans-serif'],
    "cormorant-manrope":   ['"Cormorant Garamond", serif',                     '"Manrope", system-ui, sans-serif'],
  };
  const [serif, sans] = map[pairing] || map["cormorant-inter"];
  document.documentElement.style.setProperty("--font-serif", serif);
  document.documentElement.style.setProperty("--font-sans", sans);
}

// ============================================================
// Tweaks Panel
// ============================================================
function EspaceTweaks({ tweaks, setTweak }) {
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
  }, [tweaks.accent]);
  React.useEffect(() => {
    document.body.setAttribute("data-density", tweaks.density);
  }, [tweaks.density]);
  React.useEffect(() => {
    applyType(tweaks.typePairing);
  }, [tweaks.typePairing]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent colour">
        <TweakColor
          label="Signature"
          value={tweaks.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio
          label="Rhythm"
          value={tweaks.density}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "compact",   label: "Compact" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
      <TweakSection label="Type pairing">
        <TweakSelect
          label="Fonts"
          value={tweaks.typePairing}
          options={TYPE_OPTIONS}
          onChange={(v) => setTweak("typePairing", v)}
        />
      </TweakSection>
      <TweakSection label="Notes">
        <div style={{ fontSize: 11, lineHeight: 1.5, color: "#6A6864", padding: "4px 0" }}>
          The signature is Espace coral-red, but we exposed three calmer alternatives —
          marine + sand for community pages, and a monochrome treatment for high-end villa
          microsites.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

// ============================================================
// Router (in-memory)
// ============================================================
function useRoute() {
  const [route, _setRoute] = React.useState({ name: "home" });
  const setRoute = React.useCallback((next) => {
    _setRoute(next);
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, []);
  return [route, setRoute];
}

// ============================================================
// Locale (visual demo only — full i18n is out of scope for prototype)
// ============================================================
function useLocale() {
  const [locale, _setLocale] = React.useState("EN");
  const setLocale = (L) => {
    _setLocale(L);
    if (L === "AR") document.documentElement.setAttribute("dir", "rtl");
    else document.documentElement.setAttribute("dir", "ltr");
    document.documentElement.setAttribute("lang", L.toLowerCase());
  };
  return [locale, setLocale];
}

// ============================================================
// App
// ============================================================
function App() {
  const [route, setRoute] = useRoute();
  const [locale, setLocale] = useLocale();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  let view;
  switch (route.name) {
    case "communities": view = <CommunitiesPage setRoute={setRoute} />; break;
    case "community":   view = <CommunityPage id={route.id} setRoute={setRoute} />; break;
    case "agent":       view = <AgentPage id={route.id} setRoute={setRoute} />; break;
    case "team":        view = <TeamPage setRoute={setRoute} />; break;
    case "sell":        view = <SellPage setRoute={setRoute} />; break;
    case "contact":     view = <ContactPage setRoute={setRoute} />; break;
    default:            view = <HomePage setRoute={setRoute} />;
  }

  return (
    <>
      <Navbar route={route} setRoute={setRoute} locale={locale} setLocale={setLocale} />
      {locale === "AR" && (
        <div style={{ background: "rgba(244,72,66,0.08)", borderBottom: "1px solid var(--line)", padding: "10px 0", fontSize: 12, textAlign: "center", color: "var(--ink-soft)" }}>
          AR locale toggled → layout mirrored RTL. Full Arabic copy ships in production from <code style={{ fontFamily: "var(--font-mono)" }}>messages/ar.json</code>.
        </div>
      )}
      {(locale === "RU" || locale === "ZH") && (
        <div style={{ background: "var(--stone)", borderBottom: "1px solid var(--line)", padding: "10px 0", fontSize: 12, textAlign: "center", color: "var(--muted)" }}>
          {locale} investor locale — production copy ships from <code style={{ fontFamily: "var(--font-mono)" }}>messages/{locale.toLowerCase()}.json</code>. UI chrome translated; long-form content stays EN in this prototype.
        </div>
      )}
      {view}
      <Footer setRoute={setRoute} />
      <WhatsAppFab />
      <EspaceTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);