// CoolSouq Seller Dashboard — sidebar + topbar chrome.
const NSd = window.CoolSouqDesignSystem_f4ec4c;

const DIcon = ({ d, size = 19 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const DI = {
  grid: <DIcon d={<><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>} />,
  box: <DIcon d={<><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></>} />,
  inbox: <DIcon d={<><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5h13.2a2 2 0 0 1 1.8 1.1L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l1.6-5.9A2 2 0 0 1 5.4 5z"/></>} />,
  orders: <DIcon d={<><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 12h6M9 16h4"/></>} />,
  truck: <DIcon d={<><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7"/><circle cx="5.5" cy="18.5" r="2"/><circle cx="18.5" cy="18.5" r="2"/></>} />,
  chart: <DIcon d={<><path d="M3 3v18h18"/><path d="m7 14 3-4 3 3 4-6"/></>} />,
  settings: <DIcon d={<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 7 19.4a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H1a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 2.6 7a1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 2.6a1.7 1.7 0 0 0 1-1.5V1a2 2 0 0 1 4 0v.1A1.7 1.7 0 0 0 17 2.6a1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 2.8 1.7 1.7 0 0 0 1.6 1H23a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>} />,
  bell: <DIcon d={<><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>} size={18} />,
  plus: <DIcon d={<><path d="M12 5v14M5 12h14"/></>} size={17} />,
  search: <DIcon d={<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>} size={17} />,
};

function DashShell({ active, onNav, children, title, subtitle, action }) {
  const { Button } = NSd;
  const nav = [
    ["overview", "Overview", DI.grid],
    ["listings", "Listings", DI.box],
    ["leads", "Leads & RFQs", DI.inbox],
    ["orders", "Orders", DI.orders],
    ["logistics", "Logistics", DI.truck],
    ["analytics", "Analytics", DI.chart],
  ];
  return (
    <div style={{ display: "flex", minHeight: "100vh", background: "var(--bg-page)" }}>
      {/* Sidebar */}
      <aside className="theme-dark" style={{ width: 232, flexShrink: 0, background: "var(--slate-950)", borderInlineEnd: "1px solid var(--border-dark)", display: "flex", flexDirection: "column", position: "sticky", top: 0, height: "100vh" }}>
        <div style={{ padding: "20px 20px 16px", display: "flex", alignItems: "center", gap: 10 }}>
          <svg width="34" height="34" viewBox="0 0 48 48" fill="none"><rect width="48" height="48" rx="10" fill="#8FB81E"/><g stroke="#0E2A2E" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M24 8 V40"/><path d="M10.1 16 L37.9 32"/><path d="M37.9 16 L10.1 32"/></g><circle cx="24" cy="24" r="3" fill="#0E2A2E"/></svg>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, color: "var(--paper)", letterSpacing: "-0.01em" }}>CoolSouq</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-300)" }}>Seller Hub</div>
          </div>
        </div>
        <nav style={{ padding: "8px 12px", display: "flex", flexDirection: "column", gap: 2, flex: 1 }}>
          {nav.map(([k, label, icon]) => {
            const on = active === k;
            return (
              <button key={k} onClick={() => onNav(k)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 12px", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", textAlign: "start", fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: on ? 600 : 500, color: on ? "var(--slate-950)" : "var(--text-on-dark-muted)", background: on ? "var(--gold-400)" : "transparent", transition: "var(--t-color)" }}
                onMouseEnter={e => { if (!on) e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
                onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}>
                <span style={{ display: "inline-flex" }}>{icon}</span>{label}
              </button>
            );
          })}
        </nav>
        <div style={{ padding: 12, borderTop: "1px solid var(--border-dark)" }}>
          <button onClick={() => onNav("settings")} style={{ width: "100%", display: "flex", alignItems: "center", gap: 11, padding: "9px 12px", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: "transparent", color: "var(--text-on-dark-muted)", fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 500 }}>
            <span style={{ display: "inline-flex" }}>{DI.settings}</span>Settings
          </button>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", marginTop: 4 }}>
            <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--slate-700)", color: "var(--gold-300)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13 }}>GC</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, color: "var(--paper)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Gulf Cooling Trading</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, color: "var(--gold-300)" }}>Verified · Dubai</div>
            </div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        <header style={{ height: 64, borderBottom: "1px solid var(--border)", background: "var(--surface-card)", display: "flex", alignItems: "center", gap: 16, padding: "0 28px", position: "sticky", top: 0, zIndex: 20 }}>
          <div style={{ flex: 1 }}>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, color: "var(--text-strong)", margin: 0, letterSpacing: "-0.01em" }}>{title}</h1>
            {subtitle && <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 1 }}>{subtitle}</div>}
          </div>
          <div style={{ display: "flex", alignItems: "center", height: 38, width: 240, border: "1px solid var(--border-strong)", borderRadius: "var(--radius-control)", padding: "0 12px", gap: 8, color: "var(--text-faint)" }}>
            {DI.search}<input placeholder="Search listings, leads…" style={{ border: "none", outline: "none", flex: 1, fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-strong)", background: "transparent" }} />
          </div>
          <button style={{ width: 38, height: 38, borderRadius: "var(--radius-control)", border: "1px solid var(--border)", background: "var(--surface-card)", cursor: "pointer", color: "var(--text-body)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            {DI.bell}<span style={{ position: "absolute", top: 7, right: 8, width: 7, height: 7, borderRadius: 4, background: "var(--brand)", border: "1.5px solid var(--surface-card)" }} />
          </button>
          {action}
        </header>
        <main style={{ flex: 1, padding: "28px", overflow: "auto" }}>{children}</main>
      </div>
    </div>
  );
}
window.DashShell = DashShell;
window.DI = DI;
