/* global React, ReactDOM, window */
// =======================================================================
//  App principal — composição, estado do carrinho, WhatsApp e renderização
// =======================================================================

// Nota: NÃO desestruturamos do window aqui em nível de módulo.
// O Babel standalone carrega os scripts de forma assíncrona, então
// dinner-drawer.jsx pode não ter executado ainda quando este arquivo
// é parseado. A desestruturação acontece dentro do componente App,
// no momento do render, quando todos os scripts já estão prontos.

function applyTheme(palette, fontPair, dark) {
  const root = document.documentElement;
  const PALETTES = window.PALETTES;
  const FONT_PAIRS = window.FONT_PAIRS;
  const pal = PALETTES[palette] || PALETTES.terracota;
  for (const [k, v] of Object.entries(pal.vars)) root.style.setProperty(k, v);
  const fp = FONT_PAIRS[fontPair] || FONT_PAIRS.cormorant;
  root.style.setProperty("--font-display", fp.display);
  root.style.setProperty("--font-body", fp.body);
  root.dataset.theme = dark ? "dark" : "";
}

function getWhatsappPhone() {
  const configured = window.ZUZU_JD_CONFIG?.whatsapp || window.ZUZU_JD?.whatsapp || "5531984732761";
  return String(configured).replace(/\D/g, "");
}

function openWhatsapp(message) {
  const phone = getWhatsappPhone();
  const url = `https://wa.me/${phone}?text=${encodeURIComponent(message.trim())}`;
  window.open(url, "_blank", "noopener,noreferrer");
}

function App() {
  // Desestrutura do window aqui — todos os scripts já executaram neste ponto
  const {
    Nav, Hero, Boxes, Dinner, Footer,
    BoxModal, CartDrawer, DinnerDrawer, Toast,
    PALETTES, FONT_PAIRS, BOXES, DINNER,
    useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakText, TweakSelect,
  } = window;

  const [t, setTweak] = useTweaks(window.__TWEAKS__);

  React.useEffect(() => {
    applyTheme(t.palette, t.fontPair, t.dark);
  }, [t.palette, t.fontPair, t.dark]);

  // carrinho / encomenda
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [dinnerOpen, setDinnerOpen] = React.useState(false);
  const [modalId, setModalId] = React.useState(null);
  const [deliveryMode, setDeliveryMode] = React.useState("entrega"); // entrega | retirada
  const [selDay, setSelDay] = React.useState(12);
  const [selWindow, setSelWindow] = React.useState("09h — 10h");
  const [selPeriod, setSelPeriod] = React.useState("Manhã");
  const [toast, setToast] = React.useState(null);

  function add(id) {
    setCart((prev) => {
      const ex = prev.find((c) => c.id === id);
      if (ex) return prev.map((c) => c.id === id ? { ...c, qty: c.qty + 1 } : c);
      return [...prev, { id, qty: 1 }];
    });
    const b = BOXES.find((bb) => bb.id === id);
    if (b) {
      setToast(`${b.name} foi para a caixinha`);
      setTimeout(() => setToast(null), 1800);
    }
  }

  function inc(id) { setCart((p) => p.map((c) => c.id === id ? { ...c, qty: c.qty + 1 } : c)); }
  function dec(id) { setCart((p) => p.flatMap((c) => c.id === id ? (c.qty > 1 ? [{ ...c, qty: c.qty - 1 }] : []) : [c])); }
  function rm(id) { setCart((p) => p.filter((c) => c.id !== id)); }

  // Abre o DinnerDrawer automaticamente se a pessoa veio do sistema de reservas
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const hash   = window.location.hash;
    if (params.get("origem") === "reserva-jantar" || hash.includes("origem=reserva-jantar")) {
      setDinnerOpen(true);
      // Rola suavemente até a seção do jantar
      setTimeout(() => {
        const el = document.getElementById("jantar");
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 400);
    }
  }, []);

  function reserveDinner() {
    setDinnerOpen(true);
  }

  // Prazo de encomenda: até 09/06/2026 às 23h59
  const ORDER_DEADLINE = new Date('2026-06-09T23:59:00-03:00');

  function isOrderOpen() {
    return new Date() <= ORDER_DEADLINE;
  }

  function checkout() {
    if (!isOrderOpen()) {
      setToast('Encomendas encerradas em 09/06 às 23h59. Fale com a gente pelo WhatsApp.');
      setTimeout(() => setToast(null), 4000);
      return;
    }
    const orderLines = cart.map((item) => {
      const product = BOXES.find((b) => b.id === item.id);
      if (!product) return null;
      return `• ${product.name} — ${item.qty} unidade(s)`;
    }).filter(Boolean);

    if (!orderLines.length) return;

    const dateLine = selDay ? `${String(selDay).padStart(2, "0")}/06/2026` : "";
    const logisticsBlock = deliveryMode === "retirada"
      ? `Data de retirada: ${dateLine}\nHorário de retirada: ${selWindow}`
      : `Data de entrega: ${dateLine}\nPeríodo: manhã (08h–12h)\nEndereço de entrega com CEP, complemento e bairro:`;

    const message = `
Olá, Zuzunely! Gostaria de fazer uma encomenda para o Junho sem pressa. Seguem os dados do pedido:

Nome de quem está enviando:
Seu telefone:

Nome do destinatário:
Telefone do destinatário:

${logisticsBlock}

Pedido:
${orderLines.join("\n")}

Deseja cartão? Coloque a mensagem aqui:


Pedidos de encomenda podem ser pagos via Pix ou link de cartão, no ato do pedido.
Por gentileza, aguarde a soma total, incluindo o frete quando houver, para realizar o pagamento.
`;

    openWhatsapp(message);
  }

  function shopFocus() {
    const el = document.getElementById("caixas");
    if (!el) return;
    el.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  const cartCount = cart.reduce((a, c) => a + c.qty, 0);
  const dateStr = selDay ? `${selDay}` : null;
  const showTweaks = !!window.ZUZU_JD_CONFIG?.editMode || document.body.classList.contains("logged-in");

  return (
    <>
      <Nav cartCount={cartCount} onCartOpen={() => setCartOpen(true)} headline={t.headline} />
      <Hero headline={t.headline} onShop={shopFocus} onReserve={reserveDinner} />
      <Boxes onAdd={add} cart={cart} />
      <Dinner onReserve={reserveDinner} />
      <WhatsAppSection />
      <Footer />

      <BoxModal
        openId={modalId}
        onClose={() => setModalId(null)}
        onAdd={(id) => { add(id); setModalId(null); setCartOpen(true); }}
        inCart={!!cart.find((c) => c.id === modalId)}
      />

      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        onInc={inc}
        onDec={dec}
        onRemove={rm}
        deliveryMode={deliveryMode}
        setDeliveryMode={setDeliveryMode}
        date={dateStr}
        pickupWindow={selWindow}
        deliveryPeriod={selPeriod}
        onDeliveryPeriodChange={setSelPeriod}
        onCheckout={checkout}
      />

      <Toast msg={toast} on={!!toast} />

      <DinnerDrawer open={dinnerOpen} onClose={() => setDinnerOpen(false)} />

      {showTweaks && (
        <TweaksPanel title="Tweaks · Junho sem pressa">
          <TweakSection label="Paleta">
            <TweakRadio
              label="Direção visual"
              value={t.palette}
              onChange={(v) => setTweak("palette", v)}
              options={Object.entries(PALETTES).map(([k, p]) => ({ value: k, label: p.label }))}
            />
            <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
              {Object.entries(PALETTES).map(([k, p]) => (
                <button
                  key={k}
                  onClick={() => setTweak("palette", k)}
                  style={{
                    flex: 1,
                    display: "flex",
                    height: 36,
                    border: t.palette === k ? "1.5px solid currentColor" : "1px solid rgba(0,0,0,0.15)",
                    cursor: "pointer",
                    background: "transparent",
                    padding: 0,
                    overflow: "hidden",
                  }}
                  aria-label={p.label}
                >
                  {p.swatches.map((c, i) => (
                    <span key={i} style={{ flex: 1, background: c }} />
                  ))}
                </button>
              ))}
            </div>
          </TweakSection>

          <TweakSection label="Tipografia">
            <TweakSelect
              label="Par de fontes"
              value={t.fontPair}
              onChange={(v) => setTweak("fontPair", v)}
              options={Object.entries(FONT_PAIRS).map(([k, p]) => ({ value: k, label: p.label }))}
            />
          </TweakSection>

          <TweakSection label="Modo">
            <TweakToggle
              label="Modo escuro"
              value={t.dark}
              onChange={(v) => setTweak("dark", v)}
            />
          </TweakSection>

          <TweakSection label="Copy do headline">
            <TweakText
              label="Headline"
              value={t.headline}
              onChange={(v) => setTweak("headline", v)}
              placeholder="Junho sem pressa"
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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