/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "navMode": "auto",
  "heroTreatment": "cinematic",
  "accent": "#C7AE7E",
  "density": "luxe",
  "showAccolade": true
}/*EDITMODE-END*/;

const ROUTES = ["home", "inventory", "brands", "vehicle", "sell", "export", "about", "contact"];

function App() {
  const [route, setRoute] = React.useState("home");
  const [currentVehicle, setCurrentVehicle] = React.useState(null);

  const [modalOpen, setModalOpen] = React.useState(false);
  const [modalMode, setModalMode] = React.useState("enquire");
  const [modalVehicle, setModalVehicle] = React.useState(null);

  const tweaksHook = (typeof useTweaks === "function") ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const t = tweaksHook[0];
  const setTweak = tweaksHook[1];

  // Apply accent via CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty("--champagne-deep", t.accent || "#B08D4F");
  }, [t.accent]);

  const navigate = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openVehicle = (v) => {
    setCurrentVehicle(v);
    setRoute("vehicle");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openEnquire = (mode = "enquire", vehicle = null) => {
    setModalMode(mode);
    setModalVehicle(vehicle);
    setModalOpen(true);
  };

  // Dark nav on hero-heavy pages
  const navDark =
    t.navMode === "always-dark" ||
    (t.navMode === "auto" && (route === "home" || route === "vehicle" || route === "sell" || route === "export" || route === "about" || route === "contact"));

  let screen;
  if (route === "home") screen = <HomeScreen navigate={navigate} onEnquire={openEnquire} openVehicle={openVehicle}/>;
  else if (route === "inventory") screen = <InventoryScreen navigate={navigate} openVehicle={openVehicle}/>;
  else if (route === "brands") screen = <BrandsScreen navigate={navigate} openVehicle={openVehicle}/>;
  else if (route === "vehicle") screen = <VehicleScreen vehicle={currentVehicle || window.VEHICLES[0]} navigate={navigate} openVehicle={openVehicle} onEnquire={openEnquire}/>;
  else if (route === "sell") screen = <SellScreen navigate={navigate} onEnquire={openEnquire}/>;
  else if (route === "export") screen = <ExportScreen navigate={navigate} onEnquire={openEnquire}/>;
  else if (route === "about") screen = <AboutScreen navigate={navigate} onEnquire={openEnquire}/>;
  else if (route === "contact") screen = <ContactScreen navigate={navigate} onEnquire={openEnquire}/>;

  return (
    <>
      <Nav route={route === "vehicle" ? null : route} navigate={navigate} dark={navDark}/>
      {screen}
      <Footer navigate={navigate}/>
      <CtaFab onEnquire={() => openEnquire("whatsapp", route === "vehicle" ? currentVehicle : null)}/>
      <EnquireModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        vehicle={modalVehicle}
        mode={modalMode}
      />

      {/* Tweaks */}
      {typeof TweaksPanel !== "undefined" && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Atmosphere">
            <TweakRadio
              label="Nav contrast"
              value={t.navMode}
              onChange={v => setTweak("navMode", v)}
              options={[
                { label: "Auto", value: "auto" },
                { label: "Dark", value: "always-dark" },
                { label: "Light", value: "always-light" },
              ]}
            />
            <TweakColor
              label="Metallic accent"
              value={t.accent}
              onChange={v => setTweak("accent", v)}
              options={["#B08D4F", "#C7AE7E", "#8E6F3B", "#B7B0A4", "#A4824A"]}
            />
            <TweakToggle
              label="Top Gear accolade strip"
              value={t.showAccolade}
              onChange={v => setTweak("showAccolade", v)}
            />
          </TweakSection>
          <TweakSection title="Quick navigation">
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 6}}>
              {["home", "inventory", "brands", "sell", "export", "about", "contact"].map(r => (
                <button key={r} onClick={() => navigate(r)}
                  style={{
                    padding: "8px 10px",
                    fontSize: 11,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                    background: route === r ? "var(--champagne-deep)" : "transparent",
                    color: route === r ? "#0B0D0F" : "inherit",
                    border: "1px solid currentColor",
                    cursor: "pointer",
                    fontFamily: "inherit",
                  }}>
                  {r}
                </button>
              ))}
            </div>
            <button
              onClick={() => openVehicle(window.VEHICLES[0])}
              style={{
                marginTop: 10, padding: "10px 12px", width:"100%",
                background: "var(--champagne-deep)", color:"#0B0D0F",
                fontSize: 11, letterSpacing: "0.16em", textTransform:"uppercase",
                border: 0, cursor:"pointer", fontFamily:"inherit"
              }}>
              Open vehicle detail →
            </button>
          </TweakSection>
          <TweakSection title="Enquiry modals">
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 6}}>
              {["enquire", "price", "export", "sell", "whatsapp"].map(m => (
                <button key={m} onClick={() => openEnquire(m, window.VEHICLES[0])}
                  style={{
                    padding: "8px 10px",
                    fontSize: 11,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                    background: "transparent",
                    color: "inherit",
                    border: "1px solid currentColor",
                    cursor: "pointer",
                    fontFamily: "inherit",
                  }}>
                  {m}
                </button>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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