/* Atlas — Overview / combined explorer
 * Tree view of all dimensions and their work groups, with a detail pane.
 */

const { useState: useStateE, useMemo: useMemoE } = React;

function ExplorerScreen() {
  const { go, viewDate, setDrawer } = window.useApp();
  const [activeWg, setActiveWg] = useStateE(null);
  const [filter, setFilter] = useStateE("");
  const [expanded, setExpanded] = useStateE(() => new Set(window.WORK_GROUPS.map(g => g.id)));
  const [collapsedDims, setCollapsedDims] = useStateE(() => new Set());

  const stats = window.orgStats(viewDate);
  const stats30 = window.orgStats(new Date(viewDate.getTime() - 1000*60*60*24*30));
  const delta = stats.total - stats30.total;

  const toggle = (id) => {
    setExpanded(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };
  const toggleDim = (dimId) => {
    setCollapsedDims(prev => {
      const next = new Set(prev);
      if (next.has(dimId)) next.delete(dimId); else next.add(dimId);
      return next;
    });
  };

  const collapseAll = () => {
    setExpanded(new Set());
    setCollapsedDims(new Set(window.DIMENSIONS.map(d => d.id)));
  };
  const expandAll = () => {
    setExpanded(new Set(window.WORK_GROUPS.map(g => g.id)));
    setCollapsedDims(new Set());
  };

  const selectedWg = activeWg ? window.wgById[activeWg] : null;
  const selectedMembers = selectedWg ? window.workGroupMembersAt(selectedWg.id, viewDate) : [];

  return (
    <>
      <TopBar crumbs={["Organisation", "Overview"]} />
      <TTRibbon />
      <div className="page" style={{ paddingBottom: 24 }}>
        <PageHead
          eyebrow="Organisation"
          title="Atlas — the live organisation"
          meta={
            <>
              <span>{stats.total} people · {stats.emp} employees · {stats.con} contractors</span>
              <span className="muted">·</span>
              <span>As of <strong>{window.dstr(viewDate)}</strong></span>
            </>
          }
          actions={
            <>
              <button className="btn" onClick={() => go("matrix")}><Icon name="dashboard" />Matrix view</button>
              <button className="btn" onClick={() => setDrawer({ kind: "hire" })}><Icon name="plus" />Onboard</button>
            </>
          }
        />

        <div className="stat-strip">
          <Stat label="Headcount"
            value={stats.total}
            meta={<>
              <span className={delta >= 0 ? "stat-delta-pos" : "stat-delta-neg"}>{delta >= 0 ? "+" : ""}{delta}</span>
              <span className="muted">vs 30 days ago</span>
            </>}
            bar={{ emp: stats.emp, con: stats.con }} />
          <Stat label="Employees" value={stats.emp}
            meta={<><span className="muted">{Math.round(stats.emp / stats.total * 100)}% of headcount</span></>} />
          <Stat label="Contractors" value={stats.con}
            meta={<><span className="muted">{Math.round(stats.con / stats.total * 100)}% of headcount</span></>} />
          <Stat label="Monthly contractor spend" value={window.moneyK(stats.monthlySpend)}
            meta={<><span className="muted">avg €{Math.round(stats.monthlySpend / Math.max(stats.con, 1)).toLocaleString("en-GB")} / contractor</span></>} />
        </div>

        <div className="explorer explorer-2col">
          <section className="exp-tree">
            <div className="exp-tree-head">
              <div>
                <span className="eyebrow">Browse</span>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 2 }}>Work groups</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{window.WORK_GROUPS.length} groups across {window.DIMENSIONS.length} categories</div>
              </div>
              <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                <div className="search-pill" style={{ minWidth: 220 }}>
                  <Icon name="search" />
                  <input style={{ border: 0, outline: 0, background: "transparent", flex: 1, fontSize: 12 }} value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter work groups…" />
                </div>
                <button className="btn btn-icon btn-ghost" title="Collapse all" onClick={collapseAll}><Icon name="chevron-up" /></button>
                <button className="btn btn-icon btn-ghost" title="Expand all" onClick={expandAll}><Icon name="chevron-down" /></button>
              </div>
            </div>

            <div className="exp-tree-body">
              {window.DIMENSIONS.map(dim => {
                const dimCollapsed = collapsedDims.has(dim.id);
                const roots = window.rootWorkGroups(dim.id);
                const tot = window.dimensionTotals(dim.id, viewDate);
                return (
                  <div key={dim.id} className="exp-dim-section">
                    <div className="exp-dim-h" onClick={() => toggleDim(dim.id)}>
                      <Icon name={dimCollapsed ? "chevron-right" : "chevron-down"} style={{ width: 14, height: 14, color: "var(--fg-3)", flexShrink: 0 }} />
                      <span className="exp-dim-h-dot" style={{ background: dim.tint }} />
                      <span className="exp-dim-h-name">{dim.name}</span>
                      <span className="exp-dim-h-desc">{dim.description}</span>
                      <span className="exp-dim-h-count">{tot.total} people · {window.fteN(tot.fte)} FTE</span>
                    </div>
                    {!dimCollapsed && (
                      <div className="exp-dim-children">
                        {roots.map(root => (
                          <ExpNode key={root.id} group={root} depth={0}
                            expanded={expanded} toggle={toggle}
                            activeWg={activeWg} setActiveWg={setActiveWg}
                            viewDate={viewDate} filter={filter}
                            dimTint={dim.tint}
                          />
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </section>

          <aside className="exp-detail">
            {!selectedWg && (
              <div className="exp-detail-empty">
                <Icon name="user-multiple" style={{ width: 24, height: 24, color: "var(--fg-4)" }} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 18, margin: "12px 0 4px 0", fontWeight: 600 }}>Select a work group</h3>
                <p style={{ color: "var(--fg-3)", fontSize: 12, margin: 0, maxWidth: 220 }}>Click any group in the tree to see members, sub-groups, and a quick economic summary.</p>
              </div>
            )}
            {selectedWg && (
              <ExpDetail wg={selectedWg} members={selectedMembers} viewDate={viewDate} go={go} setDrawer={setDrawer} />
            )}
          </aside>
        </div>
      </div>
    </>
  );
}
window.ExplorerScreen = ExplorerScreen;

function ExpNode({ group, depth, expanded, toggle, activeWg, setActiveWg, viewDate, filter, dimTint }) {
  const kids = window.childWorkGroups(group.id);
  const isOpen = expanded.has(group.id);
  const t = window.workGroupTotals(group.id, viewDate);
  const direct = window.peopleAt(viewDate).filter(x => (x.assignment.allocations || []).some(a => a.groupId === group.id));
  const owner = window.pById[group.ownerId];

  const fl = filter.toLowerCase();
  const matchesFilter = !fl || group.name.toLowerCase().includes(fl) ||
    kids.some(k => k.name.toLowerCase().includes(fl));
  if (filter && !matchesFilter) return null;

  const isActive = activeWg === group.id;

  return (
    <div className="exp-node">
      <div className={`exp-row ${isActive ? "active" : ""}`} style={{ paddingLeft: 8 + depth * 18 }} onClick={() => setActiveWg(group.id)}>
        <button className="exp-caret" onClick={(e) => { e.stopPropagation(); if (kids.length) toggle(group.id); }} style={{ visibility: kids.length ? "visible" : "hidden" }}>
          <Icon name={isOpen ? "chevron-down" : "chevron-right"} style={{ width: 12, height: 12 }} />
        </button>
        <span className="exp-row-bullet" style={{ background: depth === 0 ? dimTint : "var(--mf-aubergine-500)" }} />
        <span className="exp-row-name">{group.name}</span>
        {kids.length > 0 && <span className="exp-row-tag">{kids.length} sub</span>}
        <span className="exp-row-spacer" />
        <span className="exp-row-owner" title={owner?.name}>{owner ? <Avatar person={owner} /> : null}</span>
        <span className="exp-row-bar">
          <span className="exp-row-bar-track">
            <span className="seg-emp" style={{ width: `${(t.emp/Math.max(t.total,1))*100}%` }} />
            <span className="seg-con" style={{ width: `${(t.con/Math.max(t.total,1))*100}%` }} />
          </span>
        </span>
        <span className="exp-row-count">{t.total}</span>
        {direct.length !== t.total && kids.length > 0 && (
          <span className="exp-row-direct" title={`${direct.length} directly in this group`}>·{direct.length}</span>
        )}
      </div>
      {isOpen && kids.length > 0 && (
        <div className="exp-children">
          {kids.map(k => (
            <ExpNode key={k.id} group={k} depth={depth + 1}
              expanded={expanded} toggle={toggle}
              activeWg={activeWg} setActiveWg={setActiveWg}
              viewDate={viewDate} filter={filter}
              dimTint={dimTint}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function ExpDetail({ wg, members, viewDate, go, setDrawer }) {
  const owner = window.pById[wg.ownerId];
  const t = { total: members.length, emp: members.filter(m => m.person.kind === "employee").length, con: members.filter(m => m.person.kind === "contractor").length };
  const fte = members.reduce((s, m) => s + (m.pct || 0), 0) / 100;
  const breadcrumb = window.workGroupBreadcrumb(wg.id);
  const monthly = members.filter(m => m.person.kind === "contractor").reduce((s, m) => s + m.person.dailyRate * m.person.daysPerWeek * 4.33 * (m.pct / 100), 0);
  const dim = window.dimById[wg.dimensionId];
  const kids = window.childWorkGroups(wg.id);

  return (
    <div className="exp-detail-body">
      <div style={{ padding: "16px 16px 0 16px" }}>
        <span className="eyebrow" style={{ color: dim.tint }}>{dim.name}</span>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, lineHeight: 1.15, marginTop: 2 }}>{wg.name}</div>
        {breadcrumb.length > 1 && (
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
            {breadcrumb.slice(0, -1).map(b => b.name).join(" / ")}
          </div>
        )}
        <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
          <button className="btn" onClick={() => go("team", { id: wg.id })}>Open page<Icon name="arrow-right" /></button>
          <button className="btn" onClick={() => setDrawer({ kind: "hire", payload: { groupId: wg.id } })}><Icon name="plus" />Hire</button>
          <button className="btn btn-icon btn-ghost"><Icon name="more-horizontal" /></button>
        </div>
      </div>

      <div className="exp-stat-row">
        <div className="exp-stat"><div className="exp-stat-label">People</div><div className="exp-stat-val">{t.total}</div></div>
        <div className="exp-stat"><div className="exp-stat-label">FTE</div><div className="exp-stat-val">{window.fteN(fte)}</div></div>
        <div className="exp-stat"><div className="exp-stat-label">Contractors</div><div className="exp-stat-val">{t.con}</div></div>
        <div className="exp-stat"><div className="exp-stat-label">Monthly cost</div><div className="exp-stat-val">{window.moneyK(monthly)}</div></div>
      </div>

      <div className="exp-meta">
        <Row k="Owner" v={owner ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }} onClick={() => go("person", { id: owner.id })}><Avatar person={owner} />{owner.name}</span> : "—"} />
        <Row k="Category" v={dim.name} />
        <Row k="Parent" v={wg.parentId ? <a onClick={() => go("team", { id: wg.parentId })} style={{ color: "var(--mf-watermelon-900)", cursor: "pointer" }}>{window.wgById[wg.parentId]?.name}</a> : "—"} />
        <Row k="Sub-groups" v={kids.length === 0 ? "—" : kids.map(k => k.name).join(", ")} />
      </div>

      <div className="exp-section-divider">Members · {members.length}</div>
      <div className="exp-member-list">
        {members.length === 0 && <div style={{ padding: "12px 16px", color: "var(--fg-4)", fontSize: 12 }}>No active members.</div>}
        {members.slice(0, 24).map(m => (
          <div key={m.person.id} onClick={() => go("person", { id: m.person.id })} className="exp-member">
            <Avatar person={m.person} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.person.name}</div>
              <div className="muted" style={{ fontSize: 11 }}>{m.assignment.role}</div>
            </div>
            {m.pct < 100 && (
              <span className="chip" style={{ background: "var(--mf-watermelon-200)", color: "var(--mf-watermelon-900)", fontSize: 10, fontWeight: 600 }}>{m.pct}%</span>
            )}
            <KindChip kind={m.person.kind} />
          </div>
        ))}
        {members.length > 24 && <div style={{ padding: "8px 16px", fontSize: 11, color: "var(--fg-3)" }}>+ {members.length - 24} more</div>}
      </div>
    </div>
  );
}