/* Sentosa Marketplace - Seller Portal: sidebar + topbar chrome */

function Sidebar({ active, onNav }) {
  const items = [
    ["dashboard", "Dashboard", "layout-dashboard"],
    ["products", "Products", "package"],
    ["orders", "Orders", "receipt-text"],
    ["inventory", "Inventory", "boxes"],
    ["promotions", "Promotions", "tag"],
    ["reports", "Reports", "bar-chart-3"],
  ];
  return (
    <aside style={{ width: 248, background: "var(--black)", color: "#fff", display: "flex", flexDirection: "column", height: "100%", flex: "none" }}>
      <div style={{ padding: "20px 20px 16px", borderBottom: "1px solid #2a2a2a", display: "flex", alignItems: "center", gap: 10 }}>
        <Logo height={22} />
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".04em", color: "var(--orange-300)", border: "1px solid #3a3a3a", borderRadius: "var(--radius-sm)", padding: "2px 6px" }}>SELLER</span>
      </div>
      <nav style={{ padding: 12, display: "flex", flexDirection: "column", gap: 2, flex: 1 }}>
        {items.map(([k, label, ic]) => {
          const on = active === k;
          return (
            <button key={k} onClick={() => onNav(k)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: "var(--radius-md)", border: 0, cursor: "pointer",
              background: on ? "var(--action)" : "transparent", color: on ? "#fff" : "#C9C9C9", fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: on ? 600 : 500, textAlign: "left" }}>
              <Icon name={ic} size={19} />{label}
            </button>
          );
        })}
      </nav>
      <div style={{ padding: 16, borderTop: "1px solid #2a2a2a" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 999, background: "#2E6B7A", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>CC</div>
          <div style={{ lineHeight: 1.3, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Sentosa Cable Car</div>
            <div style={{ fontSize: 12, color: "#9A9A9A" }}>Partner · Seller</div>
          </div>
        </div>
      
        <a href="../../index.html" style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14,
          fontSize: 12.5, color: "#9A9A9A", textDecoration: "none", fontWeight: 500 }}>
          <Icon name="arrow-left" size={14} />Back to marketplace home
        </a>
      </div>
    </aside>
  );
}

function SellerTopBar({ title, action }) {
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 10, background: "var(--surface)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ padding: "0 32px", height: 64, display: "flex", alignItems: "center", gap: 16 }}>
        <h1 style={{ fontSize: "1.35rem", margin: 0 }}>{title}</h1>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
          <NotificationsButton items={SELLER_NOTIFICATIONS} />
          {action}
        </div>
      </div>
    </div>
  );
}

const SELLER_NOTIFICATIONS = [
  { icon: "receipt-text", title: "New order SDC-00482", body: "Wanderlust Travel · 40 × Cable Car Sky Pass · S$1,240.00", when: "Today, 14:22" },
  { icon: "alert-octagon", title: "Cable Car Night Pass sold out", body: "Allotment exhausted. Increase allotment or the product will stay unavailable.", when: "Today, 09:10" },
  { icon: "clipboard-check", title: "Sunset Cabin - Private is in SDC review", body: "Submitted 2 days ago. You will be notified when a decision is made.", when: "Yesterday" },
  { icon: "tag", title: "Promotion request pending", body: "Combo bundle saver is awaiting SDC approval.", when: "3 days ago" },
];

Object.assign(window, { Sidebar, SellerTopBar, SELLER_NOTIFICATIONS });