/* Atlas — AssistantsList
 * Work-group tree rail. In Atlas this is the left list of work groups grouped
 * by category (Bubble / Country / Other), the equivalent of an "assistants"
 * rail in a chat-style workspace.
 */
function AssistantsList({ selectedGroup, onSelectGroup = () => {} }) {
  const categories = [
    {
      id: "bubble",
      name: "Bubble",
      desc: "Product bubbles",
      tint: "var(--at-cat-1)",
      groups: [
        { id: "wealth", name: "Wealth", count: 6, owner: "Marco Ferraro" },
        { id: "pension", name: "Pension", count: 3, owner: "Federico Romano" },
        { id: "acq", name: "Acquisition", count: 4, owner: "Clara Bianchi" },
        { id: "core", name: "Core", count: 5, owner: "Giorgia Romano" },
        { id: "omnibus", name: "Omnibus", count: 4, owner: "Matteo Greco" },
      ],
    },
    {
      id: "country",
      name: "Country",
      desc: "Payroll / entity",
      tint: "var(--at-cat-2)",
      groups: [
        { id: "italy", name: "Italy", count: 18, owner: "Riccardo Conti" },
        { id: "uk", name: "United Kingdom", count: 7, owner: "Marco Ferraro" },
      ],
    },
    {
      id: "other",
      name: "Other",
      desc: "Cross-cutting",
      tint: "var(--at-cat-3)",
      groups: [
        { id: "aiorg", name: "AI Org Efficiency", count: 4, owner: "Marco Ferraro" },
        { id: "compliance", name: "Compliance", count: 2, owner: "Sofia D'Amico" },
        { id: "engmgmt", name: "Eng Management", count: 5, owner: "Elena Russo" },
      ],
    },
  ];

  return (
    <aside className="atk-rail">
      <div className="atk-rail-head">
        <span className="atk-eyebrow">Organisation</span>
        <div className="atk-rail-title">Work groups</div>
        <div className="atk-rail-meta">11 groups · 30 people</div>
      </div>

      <div className="atk-rail-body">
        {categories.map((cat) => (
          <section key={cat.id} className="atk-rail-cat">
            <header className="atk-rail-cat-h">
              <span className="atk-rail-cat-dot" style={{ background: cat.tint }} />
              <div className="atk-rail-cat-name">{cat.name}</div>
              <div className="atk-rail-cat-desc">{cat.desc}</div>
              <div className="atk-rail-cat-count">{cat.groups.length}</div>
            </header>
            {cat.groups.map((g) => {
              const active = selectedGroup === g.id;
              return (
                <button
                  key={g.id}
                  type="button"
                  className={"atk-rail-row" + (active ? " is-active" : "")}
                  onClick={() => onSelectGroup(g.id)}
                >
                  <span className="atk-rail-row-bullet" style={{ background: cat.tint }} />
                  <span className="atk-rail-row-name">{g.name}</span>
                  <span className="atk-rail-row-owner">{g.owner}</span>
                  <span className="atk-rail-row-count">{g.count}</span>
                </button>
              );
            })}
          </section>
        ))}
      </div>
    </aside>
  );
}

window.AssistantsList = AssistantsList;
globalThis.AssistantsList = AssistantsList;