/* ============================================================
   UVD CLUB — app (rota + carrinho + tweaks)
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "homeDir": "atelier",
  "accent": "#7C1D2B",
  "fontScale": 1
}/*EDITMODE-END*/;

function DirectionSwitcher({ value, onChange }) {
  const opts = [
    { id: "atelier", label: "Opção 01" },
    { id: "club", label: "Opção 02" },
    { id: "library", label: "Opção 03" },
  ];
  return (
    <div style={{
      position: "fixed", bottom: 22, left: "50%", transform: "translateX(-50%)", zIndex: 60,
      display: "flex", alignItems: "center", gap: 4, padding: 6,
      background: "rgba(43,35,30,0.92)", backdropFilter: "blur(8px)", borderRadius: 99,
      boxShadow: "0 8px 30px rgba(43,35,30,0.3)",
    }}>
      <span className="ui-label" style={{ fontSize: 10, color: "rgba(250,245,236,0.6)", padding: "0 10px 0 12px" }}>Home</span>
      {opts.map((o) => {
        const sel = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            border: "none", borderRadius: 99, padding: "9px 18px", cursor: "pointer",
            background: sel ? "var(--cream)" : "transparent",
            color: sel ? "var(--wine)" : "var(--cream)",
            fontFamily: "var(--sans-ui)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
            transition: "all .2s", display: "flex", alignItems: "center", lineHeight: 1.1,
          }}>
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: "home" }); // {name:'home'} | {name:'product', id}
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const { products, phrases } = window.UVD_DATA;

  // aplica tweaks ao :root
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--wine", t.accent);
    document.documentElement.style.setProperty("--fs-scale", t.fontScale);
  }, [t.accent, t.fontScale]);

  const addToCart = (p, opts) => {
    const o = opts || { color: p.colors[0].name, size: p.sizes[0], qty: 1 };
    const key = `${p.id}|${o.color}|${o.size}`;
    setCart((prev) => {
      const ex = prev.find((x) => x.key === key);
      if (ex) return prev.map((x) => x.key === key ? { ...x, qty: x.qty + o.qty } : x);
      return [...prev, { key, id: p.id, name: p.name, price: p.price, color: o.color, size: o.size, qty: o.qty, img: p.gallery[0].src }];
    });
    setCartOpen(true);
  };
  const removeFromCart = (key) => setCart((prev) => prev.filter((x) => x.key !== key));

  const openProduct = (id) => setRoute({ name: "product", id });
  const goHome = () => setRoute({ name: "home" });
  const onNav = (target) => {
    if (target === "home") { goHome(); return; }
    if (target === "Sobre") { goHome(); return; }
    // categorias → volta pra home (listagem não faz parte do escopo)
    goHome();
    setTimeout(() => window.scrollTo({ top: window.innerHeight * 0.9, behavior: "smooth" }), 60);
  };

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);
  const product = route.name === "product" ? products.find((p) => p.id === route.id) : null;

  return (
    <div>
      <AnnouncementBar />
      <Header cartCount={cartCount} onCart={() => setCartOpen(true)} onHome={goHome} onNav={onNav} menuVariant={route.name === "home" && t.homeDir === "atelier" ? "editorial" : "standard"} />

      {route.name === "home" ? (
        <Home dir={t.homeDir} products={products} phrases={phrases} onOpen={openProduct} onAdd={addToCart} onNav={onNav} />
      ) : (
        <ProductPage product={product} products={products} onOpen={openProduct} onAdd={addToCart} onNav={onNav} />
      )}

      <Footer />

      <MiniCart open={cartOpen} items={cart} onClose={() => setCartOpen(false)} onRemove={removeFromCart} onOpenProduct={openProduct} />

      {route.name === "home" && <DirectionSwitcher value={t.homeDir} onChange={(v) => setTweak("homeDir", v)} />}

      <TweaksPanel>
        <TweakSection label="Home" />
        <TweakRadio label="Direção" value={t.homeDir} options={[{ value: "atelier", label: "Opção 01" }, { value: "club", label: "Opção 02" }, { value: "library", label: "Opção 03" }]} onChange={(v) => setTweak("homeDir", v)} />
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent} options={["#7C1D2B", "#5E141F", "#9A3B33", "#6E7253", "#2B231E"]} onChange={(v) => setTweak("accent", v)} />
        <TweakSlider label="Escala do texto" value={t.fontScale} min={0.9} max={1.15} step={0.01} onChange={(v) => setTweak("fontScale", v)} />
      </TweaksPanel>
    </div>
  );
}

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