// mb-shell.jsx — app chrome: TabBar, bottom Sheet, top header

const TABS = [
  { id: "home",      label: "Home",    icon: "home" },
  { id: "descobrir", label: "Explorar",icon: "map" },
  { id: "blog",      label: "Blog",    icon: "book" },
  { id: "shop",      label: "Lojas",   icon: "search" },
  { id: "perfil",    label: "Perfil",  icon: "user" },
];

function TabBar({ tab, onTab, cartCount }) {
  return (
    <div style={{
      position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 800,
      /* safe-area para iPhones com barra home */
      paddingBottom: "max(18px, env(safe-area-inset-bottom, 18px))",
      paddingTop: 8,
      background: "linear-gradient(to top, var(--surface) 72%, transparent)",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-around", alignItems: "flex-end",
        padding: "0 8px",
      }}>
        {TABS.map(t => {
          const on = tab === t.id;
          return (
            <button key={t.id} onClick={() => onTab(t.id)} style={{
              background: "none", border: "none", cursor: "pointer", flex: 1,
              display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
              color: on ? "var(--brand)" : "var(--muted)", position: "relative", padding: "4px 0",
            }}>
              <div style={{ position: "relative" }}>
                <Icon name={t.icon} size={24} sw={on ? 2.2 : 1.9} />
                {t.id === "shop" && cartCount > 0 && (
                  <span style={{
                    position: "absolute", top: -6, right: -8, minWidth: 16, height: 16,
                    borderRadius: 999, background: "var(--turbo-grad)", color: "#fff",
                    font: "700 10px var(--ui)", display: "flex", alignItems: "center", justifyContent: "center",
                    padding: "0 3px", border: "2px solid var(--surface)",
                  }}>{cartCount}</span>
                )}
              </div>
              <span style={{ font: `${on ? 700 : 600} 10.5px var(--ui)` }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// Bottom sheet
function Sheet({ open, onClose, children, title, maxH = "80%" }) {
  const [mounted, setMounted] = React.useState(open);
  React.useEffect(() => {
    if (open) setMounted(true);
    else { const t = setTimeout(() => setMounted(false), 280); return () => clearTimeout(t); }
  }, [open]);
  if (!mounted) return null;
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 1100 }}>
      <div onClick={onClose} style={{
        position: "absolute", inset: 0, background: "rgba(16,18,45,.42)",
        opacity: open ? 1 : 0, transition: "opacity .28s", backdropFilter: "blur(1.5px)",
      }} />
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0, maxHeight: maxH,
        background: "var(--surface)", borderRadius: "26px 26px 0 0",
        transform: open ? "translateY(0)" : "translateY(102%)",
        transition: "transform .3s cubic-bezier(.22,1,.36,1)",
        display: "flex", flexDirection: "column", overflow: "hidden",
        boxShadow: "0 -10px 40px rgba(16,18,45,.2)",
      }}>
        <div style={{ padding: "10px 0 4px", display: "flex", justifyContent: "center" }}>
          <div style={{ width: 40, height: 5, borderRadius: 999, background: "var(--line)" }} />
        </div>
        {title && (
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 20px 12px" }}>
            <h3 style={{ margin: 0, font: "700 19px var(--ui)", color: "var(--text)" }}>{title}</h3>
            <IconBtn name="close" onClick={onClose} size={32} bg="var(--bg)" />
          </div>
        )}
        <div style={{ overflow: "auto", padding: "0 20px 28px", WebkitOverflowScrolling: "touch" }}>{children}</div>
      </div>
    </div>
  );
}

// Full-screen pushed view (store, product, checkout...) sliding from right
// Termina em bottom: TAB_H para que a barra de navegação fique sempre visível.
// Os CTAs fixos (position:absolute, bottom:0) dentro das telas ficam naturalmente
// logo acima do menu, e as áreas roláveis já têm paddingBottom: TAB_H.
const _PUSHED_BOTTOM = (typeof TAB_H !== "undefined") ? TAB_H : "72px";

function Pushed({ open, children }) {
  return (
    <div style={{
      position: "absolute",
      top: 0, left: 0, right: 0, bottom: _PUSHED_BOTTOM,
      zIndex: 1000, background: "var(--bg)",
      transform: open ? "translateX(0)" : "translateX(100%)",
      transition: "transform .32s cubic-bezier(.4,0,.2,1)",
      display: "flex", flexDirection: "column", pointerEvents: open ? "auto" : "none",
      boxShadow: open ? "-12px 0 40px rgba(16,18,45,.12)" : "none",
    }}>
      {children}
    </div>
  );
}

// Generic top bar for pushed views (overlaps content, glass)
function TopBar({ title, onBack, right, transparent }) {
  return (
    <div style={{
      position: transparent ? "absolute" : "relative", top: 0, left: 0, right: 0, zIndex: 5,
      paddingTop: 52, paddingBottom: 10, padding: "52px 14px 10px",
      display: "flex", alignItems: "center", gap: 12,
      background: transparent ? "transparent" : "var(--surface)",
      borderBottom: transparent ? "none" : "1px solid var(--line)",
    }}>
      <IconBtn name="arrowL" onClick={onBack} size={40}
        bg={transparent ? "rgba(255,255,255,.92)" : "var(--bg)"} />
      {title && <h2 style={{ flex: 1, margin: 0, font: "700 18px var(--ui)", color: "var(--text)" }}>{title}</h2>}
      {!title && <div style={{ flex: 1 }} />}
      {right}
    </div>
  );
}

Object.assign(window, { TABS, TabBar, Sheet, Pushed, TopBar });