// =============================================================
// Sidebar / TopNav — desktop layout shell
// =============================================================

const XM_B = window.XM_BRAND || { name: "小抹", tagline: "our little universe", logoUrl: "../assets/app-icon.png" };

const NAV_ITEMS = [
  { id: "home",     label: "首页",    sub: "Home",         icon: "home" },
  { id: "album",    label: "相册",    sub: "Album",        icon: "album" },
  { id: "pet",      label: XM_B.name, sub: "Pet",          icon: "pet" },
  { id: "promises", label: "承诺",    sub: "Promises",     icon: "promise" },
  { id: "stories",  label: "故事本",  sub: "Stories",      icon: "story" },
];

// 电子宠物灰度：FEATURES.pet 为 false 时隐藏宠物入口。
const NAV_VISIBLE = NAV_ITEMS.filter(
  (i) => i.id !== "pet" || (window.XM_FEATURES && window.XM_FEATURES.pet)
);

const NavIcon = ({ name, on }) => {
  const c = on ? "#8B4F32" : "#B5946D";
  const stroke = { fill: "none", stroke: c, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "home":    return <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-3v-6h-8v6H5a2 2 0 0 1-2-2z"/></svg>;
    case "album":   return <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="8.5" cy="10.5" r="1.8"/><path d="M6 16.5l4.2-4.2 3.2 3.2 2.1-2.1 2.5 3.1"/></svg>;
    case "pet":     return <span className="xm-nav-pet-icon" style={{ width: 24, height: 24, display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: 8, background: on ? "#FFF1D4" : "rgba(255,253,246,0.55)", boxShadow: on ? "inset 0 0 0 2px #D9A256" : "inset 0 0 0 1px #ECDDC0" }}><img src="../assets/sprites/xiaomo-pet-nav.png" alt="" style={{ width: 24, height: 24, imageRendering: "pixelated" }}/></span>;
    case "promise": return <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}><path d="M5 4h11l3 3v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="m9 13 2.2 2.2L16 11"/></svg>;
    case "story":   return <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}><path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z"/><path d="M5 17a3 3 0 0 0 3 3"/><path d="M9 8h7M9 12h5"/></svg>;
    case "settings":return <svg width="22" height="22" viewBox="0 0 24 24" {...stroke}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    default:        return null;
  }
};

const Sidebar = ({ active, onNav, onSettings, settings }) => {
  const togetherDays = window.xm.util.daysSince(settings.togetherDate);
  return (
    <aside style={{
      width: 224, flexShrink: 0,
      background: "linear-gradient(180deg, #FBE3B0 0%, #FFF8DD 60%, #FFFDF6 100%)",
      borderRight: "1px solid rgba(217,162,86,0.32)",
      padding: "24px 16px", display: "flex", flexDirection: "column", gap: 18,
      position: "sticky", top: 0, height: "100vh", zIndex: 10,
    }}>
      {/* Brand */}
      <button onClick={() => onNav("home")} style={{ display: "flex", alignItems: "center", gap: 10, background: "transparent", border: "none", cursor: "pointer", padding: 4 }}>
        <img src={XM_B.logoUrl} style={{ width: 44, height: 44, filter: "drop-shadow(0 2px 6px rgba(184,133,46,0.25))" }} alt=""/>
        <div style={{ textAlign: "left" }}>
          <div style={{ font: "700 24px/1 'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: "#4A2A1A", letterSpacing: "0.06em" }}>{XM_B.name}</div>
          <div style={{ font: "600 11px 'Caveat', cursive", color: "#8B4F32", letterSpacing: "0.04em", marginTop: 3 }}>{XM_B.tagline}</div>
        </div>
      </button>

      {/* Day count card */}
      <div style={{
        background: "linear-gradient(135deg,#FFFDF6 0%,#FFF1D4 100%)",
        borderRadius: 18, padding: "14px 16px",
        boxShadow: "0 2px 10px rgba(217,162,86,0.20), inset 0 0 0 1px rgba(255,255,255,0.7)",
        border: "1px solid rgba(217,162,86,0.20)",
      }}>
        <div style={{ font: "600 10px 'Caveat', cursive", color: "#8B6B43", letterSpacing: "0.16em", textTransform: "uppercase" }}>Together</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 2 }}>
          <span style={{ font: "700 32px/1 'Quicksand', sans-serif", color: "#B8852E", fontVariantNumeric: "tabular-nums" }}>{togetherDays}</span>
          <span style={{ font: "500 13px 'Jiangcheng Yuan', sans-serif", color: "#6B4A2E" }}>天 ♡</span>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {NAV_VISIBLE.map((item) => {
          const on = active === item.id;
          return (
            <button key={item.id} onClick={() => onNav(item.id)} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "11px 14px", borderRadius: 16,
              background: on ? "#FFFDF6" : "transparent",
              boxShadow: on ? "0 4px 14px rgba(184,133,46,0.18), inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 0 2px rgba(217,162,86,0.30)" : "none",
              border: "none", cursor: "pointer", textAlign: "left",
              transition: "all 180ms",
            }}>
              <NavIcon name={item.icon} on={on}/>
              <div>
                <div style={{ font: "600 15px 'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: on ? "#4A2A1A" : "#6B4A2E", letterSpacing: "0.04em" }}>{item.label}</div>
                <div style={{ font: "600 10px 'Caveat', cursive", color: on ? "#B8852E" : "#B5946D", letterSpacing: "0.04em" }}>{item.sub}</div>
              </div>
            </button>
          );
        })}
      </nav>

      <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ height: 12, background: "url('../assets/wavy-divider.svg') center/100% 100% no-repeat", opacity: 0.5, filter: "hue-rotate(30deg) saturate(0.7)" }}/>
        <button onClick={onSettings} style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 12px", borderRadius: 14,
          background: "transparent", border: "none", cursor: "pointer", color: "#8B6B43",
          font: "500 13px 'Jiangcheng Yuan', 'PingFang SC', sans-serif",
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
          设置
        </button>
        <div style={{ font: "600 12px 'Caveat', cursive", color: "#B5946D", letterSpacing: "0.04em", textAlign: "center", padding: "0 4px" }}>made with ♡</div>
      </div>
    </aside>
  );
};

// =============================================================
// Mobile: TopBar + BottomNav
// =============================================================

const TopBar = ({ onSettings }) => {
  return (
    <header className="xm-topbar" style={{
      position: "sticky", top: 0, zIndex: 90,
      paddingTop: "env(safe-area-inset-top)",
      background: "rgba(255,253,246,0.88)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      borderBottom: "1px solid rgba(217,162,86,0.20)",
    }}>
      <div style={{
        height: 52, display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 14px", gap: 10,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <img src={XM_B.logoUrl} style={{ width: 30, height: 30 }} alt=""/>
          <div style={{ font: "700 17px 'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: "#4A2A1A", letterSpacing: "0.06em" }}>{XM_B.name}</div>
        </div>

        <button onClick={onSettings} aria-label="设置" style={{
          width: 40, height: 40, borderRadius: 999, border: "none", cursor: "pointer",
          background: "transparent", color: "#8B6B43",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
        </button>
      </div>
    </header>
  );
};

const BottomNav = ({ active, onNav }) => {
  return (
    <nav className="xm-bottomnav" aria-label="主导航" style={{
      position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 100,
      background: "rgba(255,253,246,0.94)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      borderTop: "1px solid rgba(217,162,86,0.22)",
      paddingBottom: "env(safe-area-inset-bottom)",
      boxShadow: "0 -4px 20px rgba(184,133,46,0.10)",
    }}>
      <div style={{ display: "flex", height: 64, alignItems: "stretch" }}>
        {NAV_VISIBLE.map((item) => {
          const on = active === item.id;
          const isPet = item.id === "pet";
          return (
            <button key={item.id} onClick={() => onNav(item.id)} style={{
              flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
              gap: isPet ? 2 : 3, padding: "6px 4px",
              background: "transparent", border: "none", cursor: "pointer",
              position: "relative",
            }}>
              {isPet ? (
                <img src="../assets/sprites/xiaomo-pet-nav.png" alt="小抹" style={{
                  width: 48, height: 48, borderRadius: "50%",
                  border: on ? "2.5px solid #D9A256" : "2px solid #FFFDF6",
                  boxShadow: on
                    ? "0 6px 18px rgba(217,162,86,0.55), 0 0 0 1px rgba(217,162,86,0.35)"
                    : "0 3px 10px rgba(184,133,46,0.35)",
                  imageRendering: "pixelated",
                  background: "#FFFDF6",
                }}/>
              ) : (
                <NavIcon name={item.icon} on={on}/>
              )}
              {!isPet && (
                <span style={{
                  font: "600 11px 'Jiangcheng Yuan', 'PingFang SC', sans-serif",
                  color: on ? "#8B4F32" : "#B5946D",
                  letterSpacing: "0.04em",
                }}>{item.label}</span>
              )}
              {on && <span style={{
                position: "absolute", bottom: 6, width: 4, height: 4, borderRadius: 999,
                background: "#D9A256",
              }}/>}
            </button>
          );
        })}
      </div>
    </nav>
  );
};

Object.assign(window, { Sidebar, NAV_ITEMS, TopBar, BottomNav });