(() => {
const { SidebarNav, TopBar, Card, NotificationItem, Button, Badge, Icon } = window.TaskFlowDesignSystem_dd53c2;

function NotificationPanel({ open, onClose, items = NOTIFS, onMarkRead }) {
  if (!open) return null;
  return (
    <>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
      <div style={{
        position: "absolute", top: 92, right: 12, width: "min(380px, calc(100vw - 24px))", maxWidth: "calc(100% - 24px)", zIndex: 40, background: "var(--white)",
        border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)",
        padding: 10, display: "flex", flexDirection: "column", gap: 2,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 8px 10px" }}>
          <span style={{ font: "var(--text-h3)", color: "var(--text-strong)" }}>Notifikasi</span>
          <Badge tone="teal">{items.filter((n) => n.unread).length} baru</Badge>
          <span style={{ marginLeft: "auto" }}><Button variant="ghost" size="sm" onClick={onMarkRead}>Tandai dibaca</Button></span>
        </div>
        <div style={{ maxHeight: "min(380px, 60dvh)", overflowY: "auto", WebkitOverflowScrolling: "touch" }}>
          {items.slice(0, 30).map((n, i) => <NotificationItem key={i} {...n}
            who={n.user != null ? nameOf(n.user) : undefined} whoRole={n.user != null ? roleOf(n.user) : undefined}
            whoSrc={n.user != null ? avatarOf(n.user) : undefined} tags={n.tags} />)}
        </div>
      </div>
    </>
  );
}

function AppShell({ role, meId = 0, page, onNavigate, title, breadcrumb, actions, children, onSignOut, notifs = NOTIFS, onMarkRead, verifyCount = 0, taskCount, onFab }) {
  const [bell, setBell] = React.useState(false);
  const bp = useBreakpoint();
  const compact = bp !== "desktop";
  const showFab = bp === "mobile" && !!onFab; // tablet+ already exposes Create Task in the top bar
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => { if (!compact) setDrawer(false); }, [compact]);
  // Setiap ganti halaman, area konten kembali ke atas (tanpa scrollIntoView).
  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = 0;
    const id = requestAnimationFrame(() => { el.scrollTop = 0; });
    const late = setTimeout(() => { el.scrollTop = 0; }, 180);
    return () => { cancelAnimationFrame(id); clearTimeout(late); };
  }, [page]);
  const adminMenu = [
    { label: "Menu", items: [
      { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
      { id: "tasks", label: "Task List", icon: "clipboard-list", badge: taskCount != null ? taskCount : TASKS.length },
      { id: "verify", label: "Task Verification", icon: "shield-check", badge: verifyCount || undefined },
      { id: "add", label: "Add New Task", icon: "circle-plus" },
      { id: "report", label: "Report", icon: "chart-pie" },
      { id: "audit", label: "Log Activity", icon: "history" },
      { id: "calendar", label: "Calendar", icon: "calendar-days" },
      { id: "document", label: "Document", icon: "folder-open" },
      { id: "absen", label: "Absen Marketing", icon: "map-pin-check" },
    ]},
    { label: "Account", items: [
      { id: "users", label: "Manajemen User", icon: "users" },
      { id: "profile", label: "Profile", icon: "user" },
      { id: "signout", label: "Sign Out", icon: "log-out" },
    ]},
  ];
  const userMenu = [
    { label: "Menu", items: [
      { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
      { id: "tasks", label: "Task List", icon: "clipboard-list", badge: taskCount != null ? undefined : 3 },
      { id: "calendar", label: "Calendar", icon: "calendar-days" },
      { id: "document", label: "Document", icon: "folder-open" },
    ]},
    { label: "Account", items: [
      { id: "profile", label: "Profile", icon: "user" },
      { id: "signout", label: "Sign Out", icon: "log-out" },
    ]},
  ];
  const marketingMenu = [
    { label: "Menu", items: [
      { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
      { id: "tasks", label: "Task List", icon: "clipboard-list", badge: taskCount != null ? undefined : 2 },
      { id: "absen", label: "Absen", icon: "map-pin-check" },
      { id: "calendar", label: "Calendar", icon: "calendar-days" },
      { id: "document", label: "Document", icon: "folder-open" },
    ]},
    { label: "Account", items: [
      { id: "profile", label: "Profile", icon: "user" },
      { id: "signout", label: "Sign Out", icon: "log-out" },
    ]},
  ];
  const me = { name: nameOf(meId), role: roleOf(meId), src: avatarOf(meId) };

  const sidebar = (
      <SidebarNav
        brand="Klinik BBMC"
        logoSrc={LOGO_URL}
        activeId={page}
        sections={role === "admin" ? adminMenu : role === "marketing" ? marketingMenu : userMenu}
        onSelect={(id) => { setDrawer(false); return id === "signout" ? onSignOut() : onNavigate(id); }}
        footer={
          <Card tint="teal" padding={12} bordered={false} style={{ display: "flex", gap: 10, alignItems: "center" }}>
            {avatarOf(meId)
              ? <img src={avatarOf(meId)} alt={me.name} style={{ width: 34, height: 34, borderRadius: "50%", objectFit: "cover", flex: "0 0 auto" }} />
              : <span style={{ width: 34, height: 34, flex: "0 0 auto", borderRadius: "50%", background: "var(--gradient-teal)", color: "var(--white)", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "var(--fw-extrabold) 13px/1 var(--font-display)" }}>
                  {String(me.name || "?").split(" ").map((w) => w[0]).slice(0, 2).join("")}
                </span>}
            <span style={{ display: "flex", flexDirection: "column" }}>
              <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.2 var(--font-body)", color: "var(--text-strong)" }}>{me.name}</span>
              <span style={{ font: "var(--text-caption)", color: "var(--teal-700)" }}>{me.role}</span>
            </span>
          </Card>
        }
      />
  );

  return (
    <div style={{ display: "flex", height: "100%", background: "var(--surface-page)", position: "relative", overflow: "hidden" }}>
      {!compact && sidebar}
      {compact && drawer && (
        <>
          <div onClick={() => setDrawer(false)} style={{ position: "absolute", inset: 0, background: "rgba(20,32,27,.42)", zIndex: 60 }} />
          <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, zIndex: 61, boxShadow: "var(--shadow-xl)" }}>{sidebar}</div>
        </>
      )}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative", background: "linear-gradient(160deg, rgba(19,168,140,.42) 0%, rgba(45,182,125,.30) 22%, rgba(125,194,66,.20) 46%, rgba(242,245,243,.96) 82%)" }}>
        <TopBar title={title} breadcrumb={compact ? undefined : breadcrumb} notificationCount={notifs.filter((n) => n.unread).length}
          user={me} actions={actions} compact={compact} onMenu={compact ? () => setDrawer(true) : undefined}
          onBellClick={() => setBell((b) => !b)} />
        <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", WebkitOverflowScrolling: "touch", padding: compact ? 12 : "var(--gutter-page)", paddingTop: compact ? 10 : 16, paddingBottom: showFab ? 92 : compact ? 12 : "var(--gutter-page)" }}>{children}</div>
        {showFab && (
          <button type="button" onClick={onFab} aria-label="Create Task"
            style={{ position: "absolute", right: 16, bottom: 18, width: 56, height: 56, borderRadius: "var(--radius-circle)", border: "none", cursor: "pointer", background: "var(--gradient-teal)", color: "var(--white)", boxShadow: "var(--shadow-float)", display: "inline-flex", alignItems: "center", justifyContent: "center", zIndex: 45 }}>
            <Icon name="plus" size={26} color="var(--white)" />
          </button>
        )}
        <NotificationPanel open={bell} onClose={() => setBell(false)} items={notifs} onMarkRead={onMarkRead} />
      </div>
    </div>
  );
}
Object.assign(window, { AppShell, NotificationPanel });

})();