// ---------- App shell: Sidebar, Topbar, Mobile drawer ----------

const NAV_ITEMS = [
  { id: "dashboard", label: "Dashboard", icon: "Home" },
  { id: "projects",  label: "Projects",  icon: "Folder", badge: 12 },
  { id: "uploads",   label: "Uploads",   icon: "Upload" },
  { id: "clients",   label: "Clients",   icon: "Users" },
  { id: "inbox",     label: "Inbox",     icon: "Inbox", badge: 4 },
  { id: "calendar",  label: "Calendar",  icon: "Calendar" },
];

const NAV_SECONDARY = [
  { id: "apps",     label: "Apps",                   icon: "Apps", badge: 5 },
  { id: "portal",   label: "Client portal preview",  icon: "Eye" },
  { id: "settings", label: "Settings",               icon: "Settings" },
];

const Sidebar = ({ route, onNavigate, collapsed = false, mobileOpen = false, onCloseMobile }) => {
  return (
    <>
      {/* Mobile overlay */}
      {mobileOpen && (
        <div onClick={onCloseMobile} className="hd-sidebar-overlay" style={{ display: "block" }} />
      )}
      <aside
        className={mobileOpen ? "hd-sidebar mobile-open" : "hd-sidebar"}
        style={{
          width: collapsed ? 64 : 248,
          background: "#0B0F13",
          borderRight: "1px solid rgba(255,255,255,0.06)",
          display: "flex", flexDirection: "column",
          transition: "width 200ms ease",
          flexShrink: 0,
          position: "sticky", top: 0, height: "100vh",
          zIndex: 40,
        }}
      >
      {/* Workspace switcher */}
      <div style={{ padding: collapsed ? "18px 14px" : "18px 16px", borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
        <button
          onClick={() => onNavigate("landing")}
          style={{
            display: "flex", alignItems: "center", gap: 10, width: "100%",
            background: "transparent", border: "none", padding: 0,
            cursor: "pointer", color: "var(--white)", textAlign: "left",
          }}
        >
          <HDMark size={32} />
          {!collapsed && (
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--white)", letterSpacing: "-0.005em" }}>
                Winterhill Media
              </div>
              <div className="micro" style={{ color: "var(--warm-gray)", marginTop: 2, fontSize: 9.5 }}>
                AGENCY · PRO
              </div>
            </div>
          )}
          {!collapsed && <window.Icon.ChevronD size={14} color="var(--warm-gray)" />}
        </button>
      </div>

      {/* Quick action */}
      <div style={{ padding: collapsed ? "12px 12px 0" : "12px 16px 0" }}>
        <Button
          variant="primary"
          full
          icon={<window.Icon.Plus size={14} />}
          size="md"
          style={{ height: 36 }}
          onClick={() => window.dispatchEvent(new CustomEvent("hd-open-new-project"))}
        >
          {!collapsed && "New project"}
        </Button>
      </div>

      {/* Search */}
      {!collapsed && (
        <div style={{ padding: "12px 16px 0" }}>
          <button
            onClick={() => window.dispatchEvent(new CustomEvent("hd-open-search"))}
            style={{
              display: "flex", alignItems: "center", gap: 10, width: "100%",
              background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)",
              borderRadius: 8, padding: "8px 10px", color: "var(--warm-gray)",
              fontSize: 12.5, cursor: "pointer", fontFamily: "var(--sans)",
            }}>
            <window.Icon.Search size={14} />
            <span style={{ flex: 1, textAlign: "left" }}>Quick find…</span>
            <Kbd>⌘</Kbd><Kbd>K</Kbd>
          </button>
        </div>
      )}

      {/* Nav */}
      <nav style={{ padding: "18px 12px 12px", flex: 1, overflow: "auto" }}>
        {!collapsed && <div className="micro" style={{ color: "var(--warm-gray)", padding: "0 8px 8px", fontSize: 9.5 }}>WORKSPACE</div>}
        {NAV_ITEMS.map(item => (
          <NavItem key={item.id} item={item} active={route === item.id} onClick={() => onNavigate(item.id)} collapsed={collapsed} />
        ))}

        {!collapsed && <div className="micro" style={{ color: "var(--warm-gray)", padding: "16px 8px 8px", fontSize: 9.5 }}>OTHER</div>}
        {NAV_SECONDARY.map(item => (
          <NavItem key={item.id} item={item} active={route === item.id} onClick={() => onNavigate(item.id)} collapsed={collapsed} />
        ))}
      </nav>

      {/* Status panel */}
      {!collapsed && (
        <div style={{ padding: 16, borderTop: "1px solid rgba(255,255,255,0.05)" }}>
          <div style={{
            background: "rgba(29,78,216,0.07)",
            border: "1px solid rgba(29,78,216,0.20)",
            borderRadius: 10, padding: 12,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--harbor-2)" }} className="hd-pulse" />
              <div className="micro" style={{ color: "var(--harbor-2)", fontSize: 9.5 }}>PORTAL ACTIVE</div>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--white)", lineHeight: 1.5 }}>
              4 client reviews waiting on Winterhill.
            </div>
            <button
              onClick={() => onNavigate("portal")}
              style={{
              background: "transparent", border: "none", padding: 0,
              marginTop: 8, color: "#9CC1FF", fontSize: 12, fontWeight: 500,
              display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer",
            }}>
              Open queue <window.Icon.ChevronR size={11} />
            </button>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 4px 0" }}>
            <Avatar initials="WM" accent="harbor" size={28} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 500, color: "var(--white)" }}>Winona Mendez</div>
              <div style={{ fontSize: 10.5, color: "var(--warm-gray)" }}>Studio lead</div>
            </div>
            <window.IconButton iconName="Settings" label="Settings" />
          </div>
        </div>
      )}
      </aside>
    </>
  );
};

const NavItem = ({ item, active, onClick, collapsed }) => {
  const IconComp = window.Icon[item.icon];
  return (
    <button
      onClick={onClick}
      className={active ? "" : "hd-nav-item"}
      style={{
        display: "flex", alignItems: "center", gap: 10, width: "100%",
        padding: collapsed ? "8px" : "8px 10px",
        justifyContent: collapsed ? "center" : "flex-start",
        background: active ? "rgba(29,78,216,0.12)" : "transparent",
        border: active ? "1px solid rgba(29,78,216,0.30)" : "1px solid transparent",
        borderRadius: 8, marginBottom: 2,
        color: active ? "var(--white)" : "rgba(250,250,250,0.62)",
        fontFamily: "var(--sans)", fontSize: 13, fontWeight: active ? 500 : 400,
        cursor: "pointer", transition: "color 120ms ease",
        position: "relative",
      }}
    >
      <IconComp size={15} />
      {!collapsed && <span style={{ flex: 1, textAlign: "left" }}>{item.label}</span>}
      {!collapsed && item.badge && (
        <span style={{
          fontSize: 10.5, padding: "1px 7px", borderRadius: 99,
          background: active ? "rgba(29,78,216,0.30)" : "rgba(255,255,255,0.06)",
          color: active ? "#CFE0FF" : "var(--warm-gray)",
          fontWeight: 500,
        }}>{item.badge}</span>
      )}
    </button>
  );
};

// Topbar (within app)
const Topbar = ({ title, eyebrow, breadcrumbs, actions, tabs, activeTab, onTabChange, onOpenMobileMenu }) => {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 10,
      background: "rgba(8,12,16,0.85)",
      backdropFilter: "blur(16px)",
      borderBottom: "1px solid rgba(255,255,255,0.05)",
    }}>
      <div className="hd-topbar" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "16px 32px", gap: 16, minHeight: 68,
      }}>
        {/* Mobile menu */}
        <button
          onClick={onOpenMobileMenu}
          className="hd-mobile-only"
          style={{
            width: 36, height: 36, borderRadius: 8,
            background: "transparent", border: "1px solid rgba(255,255,255,0.10)",
            color: "var(--white)", cursor: "pointer",
            alignItems: "center", justifyContent: "center", flexShrink: 0,
          }}
          aria-label="Open menu"
        >
          <window.Icon.Menu size={16} />
        </button>

        <div style={{ minWidth: 0, flex: 1 }}>
          {breadcrumbs && (
            <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "var(--warm-gray)", marginBottom: 4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
              {breadcrumbs.map((b, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <window.Icon.ChevronR size={10} />}
                  <span style={{ color: i === breadcrumbs.length - 1 ? "var(--white)" : "var(--warm-gray)" }}>{b}</span>
                </React.Fragment>
              ))}
            </div>
          )}
          {eyebrow && !breadcrumbs && <div className="micro" style={{ color: "var(--warm-gray)", marginBottom: 4 }}>{eyebrow}</div>}
          <h1 style={{
            margin: 0, fontSize: 20, fontWeight: 600, color: "var(--white)",
            letterSpacing: "-0.015em", fontFamily: "var(--sans)",
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>{title}</h1>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button
            onClick={() => window.dispatchEvent(new CustomEvent("hd-open-search"))}
            aria-label="Search"
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 10px", borderRadius: 8,
              background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)",
              color: "var(--warm-gray)", cursor: "pointer", fontFamily: "var(--sans)", fontSize: 12,
            }}
            className="md-hide"
          >
            <window.Icon.Search size={13} />
            <span>Quick find</span>
            <Kbd>⌘</Kbd><Kbd>K</Kbd>
          </button>
          {actions && (
            <span className="hd-topbar-actions-slot" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              {actions}
            </span>
          )}
          <button
            onClick={() => window.dispatchEvent(new CustomEvent("hd-open-notifications"))}
            aria-label="Notifications"
            style={{
              width: 32, height: 32, borderRadius: 8,
              background: "transparent", border: "1px solid rgba(255,255,255,0.08)",
              color: "var(--white)", cursor: "pointer", position: "relative",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}
          >
            <window.Icon.Bell size={15} />
            <span style={{
              position: "absolute", top: 6, right: 6,
              width: 7, height: 7, borderRadius: 99, background: "var(--harbor-2)",
              boxShadow: "0 0 0 2px var(--ink)",
            }} className="hd-pulse" />
          </button>
          <Avatar initials="WM" accent="harbor" size={32} />
        </div>
      </div>
      {tabs && (
        <div className="hd-topbar-tabs" style={{ display: "flex", gap: 4, padding: "0 32px", borderTop: "1px solid rgba(255,255,255,0.03)" }}>
          {tabs.map(t => (
            <button
              key={t.id}
              onClick={() => onTabChange(t.id)}
              style={{
                background: "transparent", border: "none",
                padding: "12px 14px", fontSize: 13,
                color: activeTab === t.id ? "var(--white)" : "var(--warm-gray)",
                fontWeight: activeTab === t.id ? 500 : 400,
                fontFamily: "var(--sans)",
                borderBottom: activeTab === t.id ? "2px solid var(--harbor)" : "2px solid transparent",
                marginBottom: -1,
                cursor: "pointer", transition: "color 120ms ease",
                display: "inline-flex", alignItems: "center", gap: 7,
              }}
              onMouseEnter={(e) => { if (activeTab !== t.id) e.currentTarget.style.color = "var(--white)"; }}
              onMouseLeave={(e) => { if (activeTab !== t.id) e.currentTarget.style.color = "var(--warm-gray)"; }}
            >
              {t.label}
              {t.count != null && (
                <span style={{
                  fontSize: 10.5, padding: "1px 6px", borderRadius: 99,
                  background: activeTab === t.id ? "rgba(29,78,216,0.18)" : "rgba(255,255,255,0.05)",
                  color: activeTab === t.id ? "#9CC1FF" : "var(--warm-gray)",
                  fontWeight: 500,
                }}>{t.count}</span>
              )}
            </button>
          ))}
        </div>
      )}
    </header>
  );
};

window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.NAV_ITEMS = NAV_ITEMS;