const { Logo, Icon } = window.EdvinDesignSystem_ae67eb;

const WRAP = { width: "100%", maxWidth: 720, margin: "0 auto", padding: "0 20px" };
const LIGHT = { fontWeight: 300, letterSpacing: "0.01em" };

function Badge({ n, tone }) {
  return (
    <span style={{
      position: "absolute", top: -5, right: -9, minWidth: 17, height: 17, padding: "0 5px",
      borderRadius: 9, background: tone === "red" ? "var(--edvin-red)" : "var(--edvin-green)",
      color: "#fff", fontSize: 10, fontWeight: 700, display: "grid", placeItems: "center", lineHeight: 1,
    }}>{n}</span>
  );
}

const GLYPHS = {
  bookmark: <path d="M5.6 2.9H18.4V21.1L12 15.4 5.6 21.1Z" />,
  help: <React.Fragment><path d="M8 8.5C8 6.2 9.8 4.3 12 4.3s4 1.9 4 4.2c0 2.5-2.2 3.1-3.3 4.1-.5.5-.7 1.1-.7 1.8v1.1" /><circle cx="12" cy="19.6" r=".9" fill="currentColor" stroke="none" /></React.Fragment>,
  cart: <React.Fragment><path d="M2.6 3.5H5.6L9 15.2H17.4L20.6 6.8H6.6" /><circle cx="10" cy="18.7" r="1.4" /><circle cx="16.6" cy="18.7" r="1.4" /></React.Fragment>,
};

function Glyph({ name, size = 23 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.35" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true" style={{ display: "block" }}>
      {GLYPHS[name]}
    </svg>
  );
}

function IconTab({ label, active, onClick, children }) {
  return (
    <button type="button" aria-label={label} onClick={onClick} style={{
      position: "relative", width: 44, height: 44, display: "grid", placeItems: "center",
      background: "none", border: "none", padding: 0, cursor: "pointer", lineHeight: 0,
      color: "var(--edvin-green)", opacity: active ? 1 : 0.82,
      transition: "color var(--duration-fast) var(--ease-standard)",
    }}>{children}</button>
  );
}

function HeaderBar({ cartCount, faveCount, onHome, onCart, onProfile, onHelp, view }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 20,
      background: "rgba(255,255,255,0.86)", backdropFilter: "saturate(180%) blur(20px)",
      WebkitBackdropFilter: "saturate(180%) blur(20px)",
      borderBottom: "0.5px solid rgba(0,0,0,0.12)",
    }}>
      <div style={{ ...WRAP, height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <button type="button" onClick={onHome} aria-label="Startseite" style={{ background: "none", border: "none", padding: 0, cursor: "pointer" }}>
          {(window.__resources && window.__resources.logo)
            ? <img src={window.__resources.logo} alt="Edvin" style={{ height: 39, width: "auto", display: "block" }} />
            : <Logo height={39} />}
        </button>
        <div style={{ display: "flex", alignItems: "center", gap: 4, marginRight: -8 }}>
          <IconTab label="Anleitung" active={view === "hilfe"} onClick={onHelp}>
            <Glyph name="help" />
          </IconTab>
          <IconTab label="Merkliste" active={view === "faves"} onClick={() => onProfile("faves")}>
            <span style={{ position: "relative", display: "inline-flex" }}>
              <Glyph name="bookmark" />{faveCount > 0 && <Badge n={faveCount} tone="green" />}
            </span>
          </IconTab>
          <IconTab label="Warenkorb" active={view === "warenkorb"} onClick={onCart}>
            <span style={{ position: "relative", display: "inline-flex" }}>
              <Glyph name="cart" />{cartCount > 0 && <Badge n={cartCount} tone="red" />}
            </span>
          </IconTab>
        </div>
      </div>
    </header>
  );
}

function StickyCartBar({ count, total, onClick }) {
  if (!count) return null;
  return (
    <div style={{
      position: "sticky", bottom: 0, zIndex: 15,
      background: "rgba(255,255,255,0.9)", backdropFilter: "saturate(180%) blur(20px)",
      WebkitBackdropFilter: "saturate(180%) blur(20px)", borderTop: "0.5px solid rgba(0,0,0,0.1)",
    }}>
      <div style={{ ...WRAP, padding: "10px 20px 14px" }}>
        <button type="button" onClick={onClick} style={{
          width: "100%", height: 54, border: "none", borderRadius: 12, cursor: "pointer",
          background: "var(--edvin-red)", color: "#fff", fontFamily: "var(--font-core)",
          display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 20px",
        }}>
          <span style={{ fontSize: 16, fontWeight: 400 }}>{count} {count === 1 ? "Flasche" : "Flaschen"}</span>
          <span style={{ fontSize: 16, fontWeight: 700 }}>Warenkorb · {window.TDOF.chf(total)}</span>
        </button>
      </div>
    </div>
  );
}

function AppShell({ children, ...props }) {
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--edvin-white)", fontFamily: "var(--font-core)", color: "var(--edvin-black)" }}>
      <HeaderBar {...props} />
      <main style={{ flex: 1 }}>{children}</main>
      <StickyCartBar count={props.cartCount} total={props.cartTotal} onClick={props.onCart} />
      {props.view !== "faves" && props.view !== "hilfe" && (
        <footer style={{ background: "var(--edvin-green)", color: "#fff", marginTop: 56 }}>
          <div style={{ ...WRAP, padding: "26px 20px", fontSize: 13, lineHeight: 1.6, opacity: .95 }}>
            Bestellwert bis CHF 180.– : Versandkosten CHF 9.90 pauschal. Ab CHF 180.– gratis.
            Abholung ab Mi, 10. Dezember. Nicht mit Monatsaktionen kumulierbar.
          </div>
        </footer>
      )}
    </div>
  );
}

Object.assign(window, { TdofAppShell: AppShell, TDOF_WRAP: WRAP, TDOF_LIGHT: LIGHT });