/* global React, ReactDOM, Nav, Footer, Hero, RankingsStrip, ExpertiseSection, LeadershipFeature, InsightsTeaser, RegionMap, AwardsRow, ClosingCTA,
   ExpertisePage, PeoplePage, OfficesPage, InsightsPage, AboutPage, ContactPage, CareersPage,
   Modal, EnquiryForm, LawyerDetail, STRINGS,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor */
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "marine",
  "display": "cormorant",
  "locale": "en",
  "denseHero": false
}/*EDITMODE-END*/;

function App() {
  const [tweak, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState("home");
  const [modal, setModal] = useState(null); // { kind: 'enquiry' | 'lawyer', data: ... }

  const locale = tweak.locale;
  const t = STRINGS[locale] || STRINGS.en;

  // Apply attributes on documentElement
  useEffect(() => {
    document.documentElement.setAttribute("data-accent", tweak.accent);
    document.documentElement.setAttribute("data-display", tweak.display);
    document.documentElement.setAttribute("lang", locale === "ar" ? "ar" : "en");
    document.documentElement.setAttribute("dir", locale === "ar" ? "rtl" : "ltr");
  }, [tweak.accent, tweak.display, locale]);

  const navigate = useCallback((p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  const openEnquiry = useCallback((preset = {}) => {
    setModal({ kind: "enquiry", data: preset });
  }, []);
  const openLawyer = useCallback((p) => {
    setModal({ kind: "lawyer", data: p });
  }, []);
  const closeModal = useCallback(() => setModal(null), []);

  const pageContent = (() => {
    switch (page) {
      case "expertise":
        return <ExpertisePage navigate={navigate} onEnquire={openEnquiry} t={t} />;
      case "people":
        return <PeoplePage openLawyer={openLawyer} navigate={navigate} onEnquire={openEnquiry} t={t} />;
      case "offices":
        return <OfficesPage onEnquire={openEnquiry} t={t} />;
      case "insights":
        return <InsightsPage navigate={navigate} t={t} />;
      case "about":
        return <AboutPage onEnquire={openEnquiry} navigate={navigate} t={t} />;
      case "contact":
        return <ContactPage onEnquire={openEnquiry} t={t} />;
      case "careers":
        return <CareersPage onEnquire={openEnquiry} t={t} />;
      case "home":
      default:
        return (
          <main className="page-enter">
            <Hero navigate={navigate} onEnquire={openEnquiry} t={t} dense={tweak.denseHero} />
            <RankingsStrip t={t} />
            <ExpertiseSection navigate={navigate} t={t} />
            <LeadershipFeature openLawyer={openLawyer} navigate={navigate} t={t} />
            <InsightsTeaser navigate={navigate} t={t} />
            <RegionMap navigate={navigate} t={t} />
            <AwardsRow t={t} />
            <ClosingCTA onEnquire={openEnquiry} t={t} />
          </main>
        );
    }
  })();

  return (
    <React.Fragment>
      <Nav page={page} navigate={navigate} onEnquire={openEnquiry} locale={locale} setLocale={(l) => setTweak("locale", l)} t={t} />
      <div key={page}>{pageContent}</div>
      <Footer navigate={navigate} onEnquire={openEnquiry} t={t} />

      <Modal open={modal?.kind === "enquiry"} onClose={closeModal}>
        <EnquiryForm
          presetLawyer={modal?.data?.lawyer}
          presetPractice={modal?.data?.practice}
          presetOffice={modal?.data?.office}
          t={t}
        />
      </Modal>

      <Modal open={modal?.kind === "lawyer"} onClose={closeModal}>
        {modal?.data && (
          <LawyerDetail
            p={modal.data}
            onClose={closeModal}
            onEnquire={(p) => setModal({ kind: "enquiry", data: { lawyer: p.name, practice: p.practices[0], office: p.office } })}
            t={t}
          />
        )}
      </Modal>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Identity" />
        <TweakColor label="Accent" value={tweak.accent}
          options={[
            { value: "marine", color: "#1B3A52" },
            { value: "burgundy", color: "#6E2233" },
            { value: "brass", color: "#A88753" },
            { value: "forest", color: "#2F4A39" },
          ]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSelect label="Display face" value={tweak.display}
          options={[
            { value: "cormorant", label: "Cormorant" },
            { value: "playfair", label: "Playfair" },
          ]}
          onChange={(v) => setTweak("display", v)} />

        <TweakSection label="Locale" />
        <TweakRadio label="Language" value={tweak.locale}
          options={[
            { value: "en", label: "EN" },
            { value: "ar", label: "AR (RTL)" },
          ]}
          onChange={(v) => setTweak("locale", v)} />

        <TweakSection label="Layout" />
        <TweakToggle label="Dense hero" value={tweak.denseHero}
          onChange={(v) => setTweak("denseHero", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

// Tweak color options can be objects {value, color} — TweakColor expects either a hex string
// or an array of hexes. Wrap to support our value/color pattern:
(function patchTweakColor() {
  const orig = window.TweakColor;
  window.TweakColor = function (props) {
    const { options, value, onChange } = props;
    if (options && options.length && typeof options[0] === "object" && options[0].value !== undefined) {
      const hexOptions = options.map((o) => o.color);
      const hexValue = options.find((o) => o.value === value)?.color || hexOptions[0];
      return orig({ ...props, options: hexOptions, value: hexValue, onChange: (h) => onChange(options.find((o) => o.color === h)?.value) });
    }
    return orig(props);
  };
})();

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