/* ============================================================
   Vela — app shell (sidebar + topbar) · Direction B identity
   Dark navy command sidebar · electric blue→cyan · cyan signals
   ============================================================ */
(function () {
  const NAV = [
    { key: "queue", label: "Action queue", icon: "inbox" },
    { key: "cases", label: "Cases",        icon: "folder" },
    { key: "templates", label: "Templates", icon: "template" },
  ];

  function Sidebar({ route, go }) {
    const { admin, cases } = window.VELA;
    const needsYou = cases.filter((c) => c.queue).length;
    return (
      <aside style={{ width: 236, flexShrink: 0, background: "var(--ink)", color: "var(--ink-inv)", display: "flex", flexDirection: "column", height: "100%" }}>
        {/* brand */}
        <div style={{ padding: "20px 20px 18px", display: "flex", alignItems: "center", gap: 11 }}>
          <VelaMark size={28} gradient onDark color="#EAF1FB" />
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-.01em", color: "#fff" }}>Vela</div>
            <div style={{ fontSize: 9, letterSpacing: ".22em", textTransform: "uppercase", color: "rgba(234,241,251,.45)", marginTop: 4 }}>Broker desk</div>
          </div>
        </div>

        <nav style={{ padding: "4px 12px", display: "flex", flexDirection: "column", gap: 2 }}>
          {NAV.map((n) => {
            const active = route.name === n.key || (n.key === "cases" && route.name === "case");
            return (
              <button key={n.key} className="focusable" onClick={() => go({ name: n.key })}
                style={{ display: "flex", alignItems: "center", gap: 12, width: "100%", padding: "10px 12px", border: 0, borderRadius: 9, textAlign: "left",
                  background: active ? "rgba(234,241,251,.10)" : "transparent", color: active ? "#fff" : "rgba(234,241,251,.6)",
                  fontSize: 13.5, fontWeight: active ? 600 : 500, cursor: "pointer", transition: "all .14s ease", position: "relative" }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "#fff"; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "rgba(234,241,251,.6)"; }}>
                {active && <span style={{ position: "absolute", left: -12, top: 8, bottom: 8, width: 2.5, background: "var(--cyan)", borderRadius: "0 3px 3px 0" }} />}
                <Icon name={n.icon} size={18} stroke={active ? 2 : 1.7} />
                <span style={{ flex: 1 }}>{n.label}</span>
                {n.key === "queue" && needsYou > 0 && (
                  <span className="mono" style={{ minWidth: 20, height: 20, padding: "0 6px", borderRadius: 999, background: active ? "var(--cyan)" : "rgba(234,241,251,.14)", color: active ? "#04222b" : "rgba(234,241,251,.7)", fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{needsYou}</span>
                )}
              </button>
            );
          })}
        </nav>

        <div style={{ flex: 1 }} />

        {/* WhatsApp agent status */}
        <div style={{ margin: "0 14px 12px", padding: "12px 14px", borderRadius: 13, background: "rgba(6,182,212,.12)", border: "1px solid rgba(6,182,212,.28)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
            <Icon name="sparkles" size={14} style={{ color: "var(--cyan)", flexShrink: 0 }} />
            <span style={{ fontSize: 11.5, fontWeight: 600, color: "#fff", whiteSpace: "nowrap" }}>WhatsApp agent</span>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--cyan)", marginLeft: "auto", boxShadow: "0 0 0 3px rgba(6,182,212,.22)" }} />
          </div>
          <div style={{ fontSize: 11.5, lineHeight: 1.5, color: "rgba(234,241,251,.7)" }}>
            Live · collecting on <span className="mono" style={{ color: "#fff", fontWeight: 600 }}>4</span> active cases.
          </div>
        </div>

        {/* admin */}
        <div style={{ padding: "12px 14px", borderTop: "1px solid rgba(234,241,251,.1)", display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 34, height: 34, borderRadius: 10, background: "linear-gradient(135deg, var(--gold), var(--cyan))", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>{admin.initials}</div>
          <div style={{ lineHeight: 1.3, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{admin.name}</div>
            <div style={{ fontSize: 10.5, color: "rgba(234,241,251,.5)" }}>{admin.agency}</div>
          </div>
        </div>
      </aside>
    );
  }

  function Topbar({ title, crumb, go, children, search, onSearch }) {
    return (
      <header style={{ height: 64, flexShrink: 0, borderBottom: "1px solid var(--line)", background: "rgba(255,255,255,.85)", backdropFilter: "blur(8px)",
        display: "flex", alignItems: "center", padding: "0 28px", gap: 18, position: "sticky", top: 0, zIndex: 20 }}>
        <div style={{ minWidth: 0, flex: "1 1 auto" }}>
          {crumb && (
            <button onClick={() => go({ name: crumb.to })} className="btn-quiet" style={{ display: "inline-flex", alignItems: "center", gap: 5, border: 0, background: "none", padding: "2px 4px", borderRadius: 5, fontSize: 12, color: "var(--ink-3)", marginBottom: 1, marginLeft: -4, whiteSpace: "nowrap" }}>
              <Icon name="chevL" size={13} /> {crumb.label}
            </button>
          )}
          <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-.02em", color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</div>
        </div>

        <div style={{ flex: "0 0 auto", display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, height: 38, padding: "0 13px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 9, width: 250, color: "var(--ink-4)" }}>
            <Icon name="search" size={16} />
            <input value={search || ""} onChange={(e) => onSearch && onSearch(e.target.value)} placeholder="Search borrower or case…" style={{ border: 0, background: "none", outline: "none", fontSize: 13, width: "100%", color: "var(--ink)", whiteSpace: "nowrap" }} />
            <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)", border: "1px solid var(--line)", borderRadius: 4, padding: "1px 5px", whiteSpace: "nowrap" }}>⌘K</span>
          </div>
          {children}
          <button className="btn-quiet focusable" style={{ position: "relative", width: 38, height: 38, borderRadius: 9, border: "1px solid var(--line)", background: "var(--surface)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-2)" }}>
            <Icon name="bell" size={17} />
            <span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, background: "var(--gold)", borderRadius: "50%", border: "1.5px solid var(--surface)" }} />
          </button>
        </div>
      </header>
    );
  }

  window.Shell = { Sidebar, Topbar, NAV };
})();