// WORTH platform sweep — shared app navigation, per platform.
// These express the OS conventions: iOS bottom tab bar, Material 3 nav bar +
// FAB, desktop left nav rail + insight rail. All reference WORTH tokens.

// ── iOS bottom tab bar ──────────────────────────────────────────────────────
function IOSTabBar({ active = "wealth" }) {
  const tabs = [
    { id: "wealth", label: "Wealth", icon: "pie-chart" },
    { id: "chat", label: "Chat", icon: "message-circle" },
    { id: "sharpen", label: "Sharpen", icon: "trending-up" },
    { id: "you", label: "You", icon: "user" },
  ];
  return (
    <div style={{
      flexShrink: 0, display: "flex", borderTop: "1px solid var(--line)",
      background: "color-mix(in srgb, var(--paper) 82%, transparent)",
      backdropFilter: "blur(18px)", padding: "8px 8px 4px",
    }}>
      {tabs.map((t) => {
        const on = t.id === active;
        return (
          <div key={t.id} style={{
            flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
            color: on ? "var(--ink)" : "var(--faint)",
          }}>
            <Icon name={t.icon} size={24} stroke={on ? 2.2 : 1.9} />
            <span style={{ fontFamily: "var(--font-text)", fontSize: 10.5, fontWeight: on ? 600 : 500, letterSpacing: "0.01em" }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── Android Material 3 bottom nav bar (pill indicator behind active icon) ────
function AndroidNavBar({ active = "wealth" }) {
  const tabs = [
    { id: "wealth", label: "Wealth", icon: "pie-chart" },
    { id: "chat", label: "Chat", icon: "message-circle" },
    { id: "sharpen", label: "Sharpen", icon: "trending-up" },
    { id: "you", label: "You", icon: "user" },
  ];
  return (
    <div style={{
      flexShrink: 0, display: "flex", borderTop: "1px solid var(--line)",
      background: "var(--panel)", padding: "10px 4px 12px",
    }}>
      {tabs.map((t) => {
        const on = t.id === active;
        return (
          <div key={t.id} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
            <div style={{
              width: 60, height: 30, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center",
              background: on ? "var(--gold-soft)" : "transparent", color: on ? "var(--ink)" : "var(--muted)",
            }}>
              <Icon name={t.icon} size={22} stroke={on ? 2.2 : 1.9} />
            </div>
            <span style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: on ? 700 : 500, color: on ? "var(--ink)" : "var(--muted)" }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

function AndroidFAB({ label = "Add", icon = "plus", bottom = 92, intelligence = false }) {
  return (
    <div style={{
      position: "absolute", right: 18, bottom, zIndex: 5,
      display: "flex", alignItems: "center", gap: 9, height: 56, padding: "0 22px", borderRadius: 18,
      background: intelligence ? "var(--teal-ink)" : "var(--charcoal)", color: intelligence ? "#fff" : "var(--charcoal-fg)",
      boxShadow: "0 10px 28px rgba(31,28,20,0.30)", fontFamily: "var(--font-text)", fontSize: 15, fontWeight: 600,
    }}>
      <Icon name={icon} size={22} stroke={2.2} />
      {label}
    </div>
  );
}

// ── Desktop left nav rail ────────────────────────────────────────────────────
function DesktopSidebar({ active = "wealth", theme = "light" }) {
  const { Wordmark } = window.WORTHDesignSystem_70d33b;
  const items = [
    { id: "wealth", label: "Wealth map", icon: "pie-chart" },
    { id: "chat", label: "Ask WORTH", icon: "message-circle" },
    { id: "sharpen", label: "Sharpen", icon: "trending-up" },
    { id: "documents", label: "Documents", icon: "file-text" },
    { id: "settings", label: "Settings", icon: "settings" },
  ];
  return (
    <div style={{
      width: 244, flexShrink: 0, borderRight: "1px solid var(--line)", background: "var(--panel)",
      display: "flex", flexDirection: "column", padding: "22px 16px 18px",
    }}>
      <div style={{ padding: "0 8px 22px" }}><Wordmark size="md" night={theme === "dark"} /></div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map((it) => {
          const on = it.id === active;
          return (
            <div key={it.id} style={{
              display: "flex", alignItems: "center", gap: 12, padding: "11px 12px", borderRadius: 12,
              background: on ? "var(--panel-soft)" : "transparent", color: on ? "var(--ink)" : "var(--muted)",
              fontFamily: "var(--font-text)", fontSize: 14.5, fontWeight: on ? 600 : 500,
            }}>
              <Icon name={it.icon} size={19} stroke={on ? 2.1 : 1.9} />
              {it.label}
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 11, padding: "10px 10px", borderTop: "1px solid var(--line)", paddingTop: 16 }}>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: "var(--panel-soft)", display: "grid", placeItems: "center", color: "var(--ink-soft)", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15 }}>D</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: "var(--font-text)", fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>David Halpern</div>
          <div style={{ fontFamily: "var(--font-text)", fontSize: 11.5, color: "var(--muted)" }}>Private · £2.34M</div>
        </div>
      </div>
    </div>
  );
}

// Section kicker used across desktop/tablet panels
function Kicker({ children, color = "var(--muted)", style = {} }) {
  return (
    <div style={{
      fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em",
      textTransform: "uppercase", color, ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { IOSTabBar, AndroidNavBar, AndroidFAB, DesktopSidebar, Kicker });