/* global React, ReactDOM, Logo, LogoMark, Icon */
const { useState, useEffect, useCallback, useRef, createContext, useContext } = React;

// ---------- Photo placeholder ----------
function Photo({ tone, label, icon = "sun", className = "", style, showSun = true, src, alt = "", position = "center" }) {
  return (
    <div className={`ph ${src ? "has-img" : ""} ${className}`} style={{ ...style, ...(tone ? { ["--cream-200"]: tone } : {}), ["--photo-position"]: position }}>
      {src && <img className="ph-img" src={src} alt={alt} loading="lazy" />}
      {!src && showSun && <div className="ph-sun" />}
      {!src && <span className="ph-ico"><Icon name={icon} size={46} stroke={1.6} /></span>}
      {label && <span className="ph-tag">{label}</span>}
    </div>
  );
}

// ---------- App context (cart + routing + toast) ----------
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);

function loadCart() {
  try { return JSON.parse(localStorage.getItem("break_cart") || "[]"); } catch { return []; }
}
function lineTotal(it) { return it.unit * it.qty; }

function AppProvider({ children }) {
  const [route, setRoute] = useState(window.location.hash.replace("#", "") || "/");
  const [cart, setCart] = useState(loadCart);
  const [cartOpen, setCartOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const toastTimer = useRef(null);

  useEffect(() => {
    const onHash = () => { setRoute(window.location.hash.replace("#", "") || "/"); window.scrollTo({ top: 0 }); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useEffect(() => { localStorage.setItem("break_cart", JSON.stringify(cart)); }, [cart]);

  const nav = useCallback((to) => { window.location.hash = to; }, []);
  const showToast = useCallback((msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2400);
  }, []);

  const addItem = useCallback((item) => {
    setCart((c) => [...c, { ...item, lineId: Date.now() + Math.random().toString(36).slice(2, 6) }]);
    showToast(`${item.name} adicionado ao carrinho`);
  }, [showToast]);
  const setQty = useCallback((lineId, qty) => {
    setCart((c) => qty <= 0 ? c.filter((i) => i.lineId !== lineId) : c.map((i) => i.lineId === lineId ? { ...i, qty } : i));
  }, []);
  const removeItem = useCallback((lineId) => setCart((c) => c.filter((i) => i.lineId !== lineId)), []);
  const clearCart = useCallback(() => setCart([]), []);

  const count = cart.reduce((s, i) => s + i.qty, 0);
  const subtotal = cart.reduce((s, i) => s + lineTotal(i), 0);

  const value = { route, nav, cart, addItem, setQty, removeItem, clearCart, count, subtotal,
    cartOpen, setCartOpen, showToast };
  return <AppCtx.Provider value={value}>{children}{toast && <Toast msg={toast} />}</AppCtx.Provider>;
}

function Toast({ msg }) {
  return <div className="toast"><Icon name="check" size={18} /> {msg}</div>;
}

// ---------- Nav ----------
function Nav() {
  const { nav, count, setCartOpen, route } = useApp();
  const [mobile, setMobile] = useState(false);
  const links = [["/", "Início"], ["/cardapio", "Cardápio"], ["/sobre", "Sobre"], ["/checkout", "Pedido"], ["/contabilidad", "Caja"]];
  const go = (e, to) => { e.preventDefault(); nav(to); setMobile(false); };
  useEffect(() => {
    if (!mobile) return undefined;
    const previousOverflow = document.body.style.overflow;
    const onKey = (event) => {
      if (event.key === "Escape") setMobile(false);
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKey);
    };
  }, [mobile]);

  const mobileMenu = mobile ? ReactDOM.createPortal(
    <div className="mobile-menu" role="dialog" aria-modal="true" aria-label="Menu">
      <button className="modal-x" style={{ position: "absolute", top: 20, right: 20 }} onClick={() => setMobile(false)}><Icon name="x" size={20} /></button>
      {links.map(([to, label]) => <a key={to} href={"#" + to} onClick={(e) => go(e, to)}>{label}</a>)}
    </div>,
    document.body
  ) : null;

  return (
    <>
      <header className="nav">
        <div className="wrap nav-inner">
          <Logo size={38} onClick={(e) => go(e, "/")} />
          <nav className="nav-links">
            {links.map(([to, label]) => (
              <a key={to} href={"#" + to} onClick={(e) => go(e, to)}
                className={"nav-link" + ((route === to || (to !== "/" && route.startsWith(to))) ? " active" : "")}>{label}</a>
            ))}
          </nav>
          <div className="nav-right">
            <button className="cart-btn" onClick={() => setCartOpen(true)} aria-label="Abrir carrinho">
              <Icon name="bag" size={19} /><span className="lbl">Carrinho</span>
              {count > 0 && <span className="cart-badge">{count}</span>}
            </button>
            <button className="nav-burger" onClick={() => setMobile(true)} aria-label="Menu"><Icon name="menu" size={22} /></button>
          </div>
        </div>
      </header>
      {mobileMenu}
    </>
  );
}

// ---------- Cart drawer ----------
function CartDrawer() {
  const { cart, cartOpen, setCartOpen, setQty, removeItem, subtotal, nav, count } = useApp();
  if (!cartOpen) return null;
  return (
    <>
      <div className="drawer-overlay" onClick={() => setCartOpen(false)} />
      <aside className="drawer" role="dialog" aria-label="Carrinho">
        <div className="drawer-head">
          <h3>Seu pedido {count > 0 && <span className="badge-amber" style={{ verticalAlign: "middle" }}>{count}</span>}</h3>
          <button className="modal-x" style={{ position: "static", boxShadow: "none", background: "var(--cream-100)" }} onClick={() => setCartOpen(false)}><Icon name="x" size={18} /></button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ? (
            <div className="empty-cart">
              <div style={{ marginBottom: 14, opacity: .5 }}><Icon name="bag2" size={50} stroke={1.4} /></div>
              <p style={{ fontWeight: 600, color: "var(--pine)" }}>Seu carrinho está vazio</p>
              <p style={{ fontSize: 14, marginTop: 6 }}>Que tal um Break Praiano?</p>
              <button className="btn btn-amber btn-sm mt" onClick={() => { setCartOpen(false); nav("/cardapio"); }}>Ver cardápio</button>
            </div>
          ) : cart.map((it) => (
            <div className="citem" key={it.lineId}>
              <Photo className="citem-photo" tone={it.tone} icon="sun" showSun src={it.image} alt="" />
              <div className="citem-mid">
                <h4>{it.name}</h4>
                {it.note && <div className="sub">{it.note}</div>}
                <div className="citem-foot">
                  <div className="mini-step">
                    <button onClick={() => setQty(it.lineId, it.qty - 1)}><Icon name="minus" size={14} /></button>
                    <span>{it.qty}</span>
                    <button onClick={() => setQty(it.lineId, it.qty + 1)}><Icon name="plus" size={14} /></button>
                  </div>
                  <strong style={{ fontFamily: "var(--font-d)", color: "var(--pine)" }}>R$ {(it.unit * it.qty).toFixed(0)}</strong>
                </div>
              </div>
              <button onClick={() => removeItem(it.lineId)} style={{ color: "var(--muted)", alignSelf: "flex-start" }} aria-label="Remover"><Icon name="trash" size={17} /></button>
            </div>
          ))}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="row-line"><span>Subtotal</span><span style={{ color: "var(--pine)", fontWeight: 600 }}>R$ {subtotal.toFixed(0)}</span></div>
            <div className="row-line" style={{ fontSize: 13, marginBottom: 14 }}><span>Entrega calculada no checkout</span></div>
            <button className="btn btn-pine btn-block btn-lg" onClick={() => { setCartOpen(false); nav("/checkout"); }}>
              Finalizar pedido <Icon name="arrow" size={18} />
            </button>
          </div>
        )}
      </aside>
    </>
  );
}

// ---------- Footer ----------
function Footer() {
  const { nav } = useApp();
  const go = (e, to) => { e.preventDefault(); nav(to); };
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo size={40} variant="cream" />
            <p style={{ marginTop: 18, fontSize: 14.5, color: "rgba(251,239,215,.7)", maxWidth: "32ch" }}>
              Sanduíches artesanais feitos na hora, com ingredientes fresquinhos. Do nascer ao pôr do sol em Búzios.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              <span className="pill-note" style={{ background: "rgba(251,239,215,.1)", color: "var(--cream-50)", boxShadow: "none" }}><Icon name="clock" size={15} /> 11h – 23h</span>
            </div>
          </div>
          <div>
            <h4>Navegar</h4>
            <a href="#/" onClick={(e) => go(e, "/")}>Início</a>
            <a href="#/cardapio" onClick={(e) => go(e, "/cardapio")}>Cardápio</a>
            <a href="#/sobre" onClick={(e) => go(e, "/sobre")}>Sobre nós</a>
            <a href="#/checkout" onClick={(e) => go(e, "/checkout")}>Fazer pedido</a>
          </div>
          <div>
            <h4>Contato</h4>
            <li><Icon name="whats" size={15} style={{ verticalAlign: "-3px", marginRight: 6 }} />(22) 99999-0000</li>
            <li><Icon name="pin" size={15} style={{ verticalAlign: "-3px", marginRight: 6 }} />Rua das Pedras, Búzios</li>
            <a href="#/">@break.buzios</a>
          </div>
          <div>
            <h4>Receba novidades</h4>
            <p style={{ fontSize: 14, color: "rgba(251,239,215,.7)", marginBottom: 12 }}>Promoções e combos da semana no seu e-mail.</p>
            <div style={{ display: "flex", gap: 8 }}>
              <input className="input" placeholder="seu@email.com" style={{ background: "rgba(251,239,215,.1)", border: "1px solid rgba(251,239,215,.2)", color: "var(--cream-50)" }} />
              <button className="btn btn-amber btn-sm">OK</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Break Sanduíches Búzios. Todos os direitos reservados.</span>
          <span>Feito com sol e mar 🌅</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Photo, AppCtx, useApp, AppProvider, Nav, CartDrawer, Footer, lineTotal });