// Partixauto main app
const _COMPANY = window.PARTIX_DATA.COMPANY;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tier": "premium",
  "accent": "#ff8a3d",
  "density": "regular",
  "showTikTok": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState("home");
  const [carId, setCarId] = React.useState(null);
  const [searchOpen, setSearchOpen] = React.useState(false);

  // Apply tweaks via CSS custom props on root
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // derive a darker dim accent
    document.documentElement.style.setProperty("--accent-dim", t.accent);
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.setAttribute("data-tier", t.tier);
  }, [t.accent, t.density, t.tier]);

  // Cmd+K to open search
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setSearchOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const nav = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openCar = (id) => {
    setCarId(id);
    setPage("car");
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  return (
    <>
      <Header page={page} onNav={nav} onOpenSearch={() => setSearchOpen(true)} company={_COMPANY} />
      {page === "home" && <HomePage onNav={nav} onOpenCar={openCar} onOpenSearch={() => setSearchOpen(true)} tier={t.tier} company={_COMPANY} />}
      {page === "catalog" && <CatalogPage onNav={nav} onOpenCar={openCar} tier={t.tier} />}
      {page === "car" && <CarDetailPage carId={carId} onNav={nav} tier={t.tier} company={_COMPANY} />}
      {page === "contact" && <ContactPage onNav={nav} company={_COMPANY} />}
      <Footer company={_COMPANY} onNav={nav} />

      {searchOpen && (
        <SearchOverlay onClose={() => setSearchOpen(false)} onOpenCar={openCar} onNav={nav} />
      )}

      <TweaksPanel title="Tweaks · Partixauto">
        <TweakSection label="Buget tier" />
        <TweakRadio
          label="Pachet"
          value={t.tier}
          options={[
            { value: "basic", label: "~500€" },
            { value: "premium", label: "~1000€" },
          ]}
          onChange={v => setTweak("tier", v)}
        />
        <div style={{
          fontSize: 11,
          color: "rgba(41,38,27,0.55)",
          lineHeight: 1.45,
          padding: "6px 8px",
          background: "rgba(0,0,0,0.04)",
          borderRadius: 6,
          marginTop: -4,
        }}>
          {t.tier === "basic"
            ? "Esential: home, catalog, pagina masina, contact. Search basic. Fara TikTok, fara FAQ, o singura poza pe masina."
            : "Premium: tot din basic + autocomplete, galerie multi-foto, TikTok strip, FAQ, filtre extinse, sugestii populare."}
        </div>

        <TweakSection label="Aspect" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#ff8a3d", "#e93838", "#f5c542", "#3aa6ff", "#6ec96e"]}
          onChange={v => setTweak("accent", v)}
        />
        <TweakRadio
          label="Densitate"
          value={t.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "regular", label: "Normal" },
            { value: "spacious", label: "Aerisit" },
          ]}
          onChange={v => setTweak("density", v)}
        />

        <TweakSection label="Demo nav" />
        <TweakButton label="Vezi pagina masina (Golf 5)" onClick={() => openCar("golf-5-2008-gri")} />
        <TweakButton label="Vezi catalog complet" onClick={() => nav("catalog")} secondary />
        <TweakButton label="Vezi pagina contact" onClick={() => nav("contact")} secondary />
        <TweakButton label="Deschide cautare (⌘K)" onClick={() => setSearchOpen(true)} secondary />
      </TweaksPanel>
    </>
  );
}

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