// Sidebar + main content wrapper for every non-editor route.
function AppLayout({ sidebarProps, children }) {
  return (
    <div className="app">
      <Sidebar {...sidebarProps} />
      <main className="main">
        <div className="main-inner">{children}</div>
      </main>
    </div>
  );
}

// Shell-shaped placeholder shown while the app is waiting on a network
// round trip before it knows what to render (gate status, auth) — same
// silhouette as AppLayout so there's no layout jump once the real content
// swaps in, just a blank flash.
function AppLayoutSkeleton() {
  return (
    <div className="app">
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="skeleton-bar" style={{ width: 44, height: 44, borderRadius: 10 }}></div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 8 }}>
          {[72, 58, 64, 50].map((w, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px" }}>
              <div className="skeleton-bar" style={{ width: 18, height: 18, borderRadius: 5, flexShrink: 0 }}></div>
              <div className="skeleton-bar" style={{ width: `${w}%`, height: 12 }}></div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }}></div>
        <div className="skeleton-bar" style={{ height: 96, borderRadius: 14, marginBottom: 12 }}></div>
        <div className="skeleton-bar" style={{ height: 40, borderRadius: 999 }}></div>
      </aside>
      <main className="main">
        <div className="main-inner">
          <div className="skeleton-bar" style={{ width: 160, height: 12, borderRadius: 4 }}></div>
          <div className="skeleton-bar" style={{ width: "42%", height: 34, borderRadius: 6, marginTop: 14 }}></div>
          <div className="skeleton-bar" style={{ width: "68%", height: 16, borderRadius: 4, marginTop: 16 }}></div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 40 }}>
            {[0, 1, 2].map((i) => (
              <div key={i} className="skeleton-bar" style={{ height: 160, borderRadius: 14 }}></div>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}