/* Wa by Elivate — App shell: Sidebar + Topbar */

const NAV = [
  { group: "Workspace", items: [
    { id: "dashboard", label: "Dashboard", icon: "dashboard" },
    { id: "automations", label: "Automations", icon: "bolt" },
    { id: "groups", label: "Groups", icon: "users" },
    { id: "send", label: "Send message", icon: "send" },
  ]},
  { group: "Account", items: [
    { id: "logs", label: "Activity log", icon: "logs" },
    { id: "connection", label: "Connection", icon: "link" },
    { id: "settings", label: "Settings", icon: "settings" },
  ]},
];

function Sidebar({ route, go, status }) {
  const { account } = window.WaData;
  const connected = status?.status === "connected";
  const number = status?.number || account.number;
  const [counts, setCounts] = React.useState({ automations: null, groups: null });

  React.useEffect(() => {
    let alive = true;
    Promise.all([
      window.WaApi.automations().catch(() => []),
      window.WaApi.groups().catch(() => []),
    ]).then(([rules, groups]) => {
      if (alive) setCounts({ automations: rules.length, groups: groups.length });
    });
    return () => { alive = false; };
  }, [status?.status]);
  return (
    <aside className="sidebar">
      <div className="brand-row">
        <div className="brand-mark"><img src="elivate-icon.png" alt="Wa" /></div>
        <div className="brand-name">Wa <span className="by">by Elivate</span></div>
      </div>

      {NAV.map((g) => (
        <div key={g.group}>
          <div className="nav-group-label">{g.group}</div>
          {g.items.map((it) => {
            const I = Icons[it.icon];
            const active = route === it.id;
            return (
              <button key={it.id} className={"nav-item" + (active ? " active" : "")} onClick={() => go(it.id)}>
                <I />
                <span>{it.label}</span>
                {counts[it.id] !== null && counts[it.id] !== undefined && <span className="nav-badge">{counts[it.id]}</span>}
              </button>
            );
          })}
        </div>
      ))}

      <div className="sidebar-foot">
        <button className="conn-chip" style={{ width: "100%" }} onClick={() => go("connection")}>
          <div className="av">ES</div>
          <div className="meta">
            <div className="num">{number}</div>
            <div className="st" style={{ color: connected ? "var(--green)" : "var(--amber)" }}><span className={"dot " + (connected ? "green" : "amber")}></span> {connected ? "Connected" : "Waiting"}</div>
          </div>
        </button>
      </div>
    </aside>
  );
}

const PAGE_TITLES = {
  dashboard:   ["Dashboard", "Overview of your WhatsApp automation"],
  automations: ["Automations", "Rules that run against incoming events"],
  builder:     ["Automation builder", "Trigger → Match → Scope → Action"],
  groups:      ["Groups", "Groups your linked account belongs to"],
  send:        ["Send message", "Send to a contact or group on demand"],
  logs:        ["Activity log", "Live event & action stream"],
  connection:  ["Connection", "Link a WhatsApp account via Linked Devices"],
  settings:    ["Settings", "Account safety & platform configuration"],
};

function Topbar({ route, right, titleOverride }) {
  const [title, sub] = PAGE_TITLES[route] || ["", ""];
  return (
    <header className="topbar">
      <h1>{titleOverride || title}</h1>
      <span className="crumb-sub">{sub}</span>
      <div className="topbar-spacer"></div>
      {right}
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar });