/* Main App — Deals on Wheels */
const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA } = React;

function App() {
  // Tweak defaults — accent + theme intensity + density
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "gold",
    "darkLevel": "noir",
    "displayFont": "Cormorant Infant",
    "showStockBanner": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Routing
  const [route, setRoute] = useStateA({ name: "home", data: null });
  const navigate = useCallbackA((name, data = null) => {
    setRoute({ name, data });
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  // Apply accent live
  useEffectA(() => {
    const root = document.documentElement;
    const accents = {
      gold: ["#C4A24A", "#8E732F", "#D9BC73"],
      signal: ["#FF4605", "#B53400", "#FF7D49"],
      platinum: ["#D9D2C0", "#8A8676", "#EFE9DA"],
    };
    const [g, deep, soft] = accents[t.accent] || accents.gold;
    root.style.setProperty("--gold", g);
    root.style.setProperty("--gold-deep", deep);
    root.style.setProperty("--gold-soft", soft);
  }, [t.accent]);

  useEffectA(() => {
    const root = document.documentElement;
    if (t.darkLevel === "midnight") {
      root.style.setProperty("--noir", "#040508");
      root.style.setProperty("--ink", "#0C0E12");
      root.style.setProperty("--ink-2", "#11141A");
    } else if (t.darkLevel === "graphite") {
      root.style.setProperty("--noir", "#16181C");
      root.style.setProperty("--ink", "#1E2227");
      root.style.setProperty("--ink-2", "#252A31");
    } else {
      root.style.setProperty("--noir", "#0B0D10");
      root.style.setProperty("--ink", "#15181C");
      root.style.setProperty("--ink-2", "#1B1F24");
    }
  }, [t.darkLevel]);

  useEffectA(() => {
    document.documentElement.style.setProperty("--display", `"${t.displayFont}", "Cormorant Garamond", serif`);
  }, [t.displayFont]);

  // Enquiry modal
  const [enquiry, setEnquiry] = useStateA({ open: false, vehicle: null, mode: "enquire" });
  const openEnquiry = (opts = {}) => setEnquiry({ open: true, vehicle: opts.vehicle || null, mode: opts.mode || "enquire" });
  const closeEnquiry = () => setEnquiry(e => ({ ...e, open: false }));

  // Render
  let page = null;
  switch (route.name) {
    case "inventory":
      page = <InventoryPage navigate={navigate} initialFilter={route.data} openEnquiry={openEnquiry} />;
      break;
    case "vehicle":
      page = <VehicleDetailPage vehicle={route.data} navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    case "sell":
      page = <SellPage navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    case "finance":
      page = <FinancePage navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    case "about":
      page = <AboutPage navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    case "contact":
      page = <ContactPage navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    case "metaverse":
      page = <MetaversePage navigate={navigate} openEnquiry={openEnquiry} />;
      break;
    default:
      page = <HomePage navigate={navigate} openEnquiry={openEnquiry} />;
  }

  const screenLabel =
    route.name === "vehicle"
      ? `Vehicle · ${route.data?.make || ""} ${route.data?.model || ""}`
      : route.name.charAt(0).toUpperCase() + route.name.slice(1);

  return (
    <>
      <div data-screen-label={screenLabel}>
        <Navbar route={route.name === "vehicle" ? "inventory" : route.name} navigate={navigate} theme="dark"
                onContact={() => openEnquiry({ mode: "contact" })} />
        {page}
        <Footer navigate={navigate} onContact={() => openEnquiry({ mode: "contact" })} />
      </div>

      <WhatsAppFab />
      <EnquiryModal open={enquiry.open} onClose={closeEnquiry} vehicle={enquiry.vehicle} mode={enquiry.mode} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent colour" />
        <TweakRadio
          label="Mode"
          value={t.accent}
          options={["gold", "signal", "platinum"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Dark mood" />
        <TweakRadio
          label="Tone"
          value={t.darkLevel}
          options={["midnight", "noir", "graphite"]}
          onChange={(v) => setTweak("darkLevel", v)}
        />
        <TweakSection label="Display font" />
        <TweakSelect
          label="Family"
          value={t.displayFont}
          options={[
            "Cormorant Infant",
            "Cormorant Garamond",
            "Playfair Display",
            "Bodoni Moda",
            "DM Serif Display",
            "Italiana",
          ]}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSection label="Quick nav" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, padding: "8px 0" }}>
          {[
            ["home", "Home"],
            ["inventory", "Inventory"],
            ["vehicle-demo", "Vehicle Page"],
            ["sell", "Sell / Trade"],
            ["finance", "Finance"],
            ["metaverse", "Virtual"],
            ["about", "About"],
            ["contact", "Contact"],
          ].map(([id, label]) => (
            <button key={id} className="unstyled-button"
                    onClick={() => id === "vehicle-demo" ? navigate("vehicle", VEHICLES[0]) : navigate(id)}
                    style={{
                      padding: "8px 10px",
                      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                      fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase",
                      background: "rgba(0,0,0,0.05)",
                      border: "1px solid rgba(0,0,0,0.1)",
                      color: "rgba(0,0,0,0.8)",
                      borderRadius: 4,
                      cursor: "pointer",
                    }}>{label}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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