// app.jsx — Moliterni Motos: rotas, tema/tweaks, montagem geral

const ACCENTS = { laranja: 47, âmbar: 75, vermelho: 25, dourado: 90 };

// Aparência fixa (painel de tweaks removido): claro, laranja, cantos 6px
const THEME = { tema: "claro", acento: "laranja", cantos: 6 };

function useHashRoute() {
  const parse = () => {
    const h = (window.location.hash || "#/").replace(/^#/, "");
    const parts = h.split("/").filter(Boolean);
    if (parts[0] === "admin") return { view: "admin" };
    if (parts[0] === "v" && parts[1]) return { view: "detail", id: parts[1] };
    return { view: "home" };
  };
  const [route, setRoute] = React.useState(parse);
  React.useEffect(() => {
    const onChange = () => setRoute(parse());
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  const navigate = (to, id) => {
    if (to === "home") window.location.hash = "#/";
    else if (to === "admin") window.location.hash = "#/admin";
    else if (to === "detail") window.location.hash = "#/v/" + id;
  };
  return [route, navigate];
}

function App() {
  const t = THEME;
  const store = useVehicleStore();
  const [route, navigate] = useHashRoute();
  const [scheduling, setScheduling] = React.useState(null);

  // aplica tweaks de tema
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.tema === "claro" ? "light" : "dark");
    root.style.setProperty("--accent-h", ACCENTS[t.acento] || 47);
    root.style.setProperty("--radius", (t.cantos ?? 16) + "px");
  }, [t.tema, t.acento, t.cantos]);

  const featured = React.useMemo(() => {
    const av = store.vehicles.filter((v) => v.status !== "vendido");
    return av.find((v) => v.destaque) || av.find((v) => v.status === "oferta") || av[0];
  }, [store.vehicles]);

  const selected = route.view === "detail" ? store.vehicles.find((v) => v.id === route.id) : null;
  React.useEffect(() => {
    if (route.view === "detail" && !selected && store.mode !== "loading") navigate("home");
  }, [route.view, route.id, selected, store.mode]);

  const openVehicle = (v) => navigate("detail", v.id);
  const scrollToEstoque = () => {
    const el = document.getElementById("estoque");
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };

  let content;
  if (route.view === "admin") {
    content = <AdminArea store={store} onExit={() => navigate("home")} />;
  } else if (route.view === "detail" && selected) {
    content = (
      <>
        <Header navigate={navigate} view={route.view} />
        <VehicleDetail vehicle={selected} onBack={() => navigate("home")} onSchedule={setScheduling} />
        <Footer />
      </>
    );
  } else {
    content = (
      <>
        <Header navigate={navigate} view={route.view} />
        <Hero featured={featured} onOpen={openVehicle} scrollToEstoque={scrollToEstoque} />
        <Catalog vehicles={store.vehicles} onOpen={openVehicle} />
        <Footer />
      </>
    );
  }

  return (
    <>
      {content}
      <SchedulingModal open={!!scheduling} onClose={() => setScheduling(null)} vehicle={scheduling} />
    </>
  );
}

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