// Shared elements: Icon, ScreenShell, BottomNav, GlassBar, etc.

const Icon = ({ name, className = "", filled = false, style }) => (
  <span
    className={`material-symbols-outlined ${filled ? "ico-fill" : ""} ${className}`}
    style={style}
  >
    {name}
  </span>
);

const GlassBar = ({ children, className = "", style }) => (
  <div
    className={`backdrop-blur-[24px] bg-surface/85 ${className}`}
    style={style}
  >
    {children}
  </div>
);

const ReadingProgress = ({ value = 0 }) => (
  <div className="relative h-[2px] w-full bg-surface-container-high/40 overflow-hidden">
    <div
      className="absolute inset-y-0 left-0"
      style={{
        width: `${value}%`,
        background: "linear-gradient(90deg, #1F3749 0%, #8A5A1E 55%, #EDC877 100%)",
        transition: "width 480ms cubic-bezier(0.22, 1, 0.36, 1)",
      }}
    />
  </div>
);

const BottomNav = ({ current, onNav, immersive = false, fade = true }) => {
  const items = [
    { key: "home", icon: "home", label: "Início" },
    { key: "modulos", icon: "auto_stories", label: "Módulos" },
    { key: "estudo", icon: "menu_book", label: "Estudo" },
    { key: "teologo", icon: "forum", label: "Dúvidas" },
  ];
  const bottomPadding = immersive
    ? "calc(env(safe-area-inset-bottom, 0px) + 12px)"
    : "2rem";

  return (
    <div className="absolute bottom-0 left-0 right-0 z-30 pointer-events-none">
      <div
        className="h-16 pointer-events-none"
        style={{
          background: fade
            ? "linear-gradient(to top, #FAF7F2 30%, rgba(250,247,242,0))"
            : "transparent",
        }}
      />
      <div
        className="px-4 pointer-events-auto"
        style={{ paddingBottom: bottomPadding }}
      >
        <GlassBar
          className="rounded-full ambient-lg flex items-center justify-between px-2 py-2 gap-1"
          style={{
            boxShadow:
              "0 12px 40px -12px rgba(31,55,73,0.22), 0 0 0 1px rgba(216,207,191,0.35)",
          }}
        >
          {items.map((it) => {
            const active = current === it.key;
            return (
              <button
                key={it.key}
                onClick={() => onNav(it.key)}
                className="relative flex flex-1 flex-col items-center justify-center py-1.5 px-2 rounded-full transition-all"
                style={{
                  background: active
                    ? "linear-gradient(135deg, #0C2530 0%, #1F3749 100%)"
                    : "transparent",
                  minWidth: 0,
                }}
              >
                <Icon
                  name={it.icon}
                  filled={active}
                  className={active ? "text-on-primary" : "text-on-surface-variant"}
                  style={{ fontSize: 20 }}
                />
                <span
                  className={`font-label text-[9px] tracking-[0.08em] uppercase mt-0.5 font-medium ${
                    active ? "text-on-primary" : "text-on-surface-variant"
                  }`}
                >
                  {it.label}
                </span>
              </button>
            );
          })}
        </GlassBar>
      </div>
    </div>
  );
};

const ScreenShell = ({ children, className = "", scroll = true }) => (
  <div
    className={`absolute inset-0 overflow-x-hidden ${scroll ? "overflow-y-auto" : "overflow-hidden"} ${className}`}
    style={{
      overscrollBehaviorY: scroll ? "contain" : "none",
      WebkitOverflowScrolling: scroll ? "touch" : "auto",
    }}
  >
    {children}
  </div>
);

const Chip = ({ children, variant = "default" }) => {
  const styles = {
    default: "bg-surface-container-high text-on-surface-variant",
    gold: "bg-secondary-container text-on-secondary-container",
    liturgical: "bg-primary/10 text-primary",
  };

  return (
    <span
      className={`inline-flex items-center gap-1 px-3 py-1 rounded-full font-label text-[11px] uppercase tracking-[0.15em] font-semibold ${styles[variant]}`}
    >
      {children}
    </span>
  );
};

const SectionTitle = ({ eyebrow, children }) => (
  <div>
    {eyebrow && (
      <div className="font-label text-[11px] tracking-[0.25em] uppercase text-secondary font-bold mb-2">
        {eyebrow}
      </div>
    )}
    <h2 className="font-headline text-[28px] leading-tight text-primary tracking-tight">
      {children}
    </h2>
  </div>
);

Object.assign(window, {
  Icon,
  GlassBar,
  ReadingProgress,
  BottomNav,
  ScreenShell,
  Chip,
  SectionTitle,
});