/* Screens — overview (hero), teams listing, functions, reporting, people, events, costs, timeline */

const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS } = React;

/* ===================================================================
 * ORG OVERVIEW (hero)
 * ================================================================ */
function OverviewScreen() {
  const { viewDate, go } = window.useApp();
  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 upcoming = window.eventsBetween(viewDate, window.addMonths(viewDate, 3)).slice(0, 6);

  return (
    <>
      <TopBar crumbs={["Organisation", "Overview"]} />
      <TTRibbon />
      <div className="page">
        <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("overview")}><Icon name="dashboard" />Overview</button>
              <button className="btn" onClick={() => go("timeline")}><Icon name="arrow-left" />Time machine</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>

        <OverviewMatrix />

        <div style={{ height: 18 }} />
        <div className="col2">
          <UpcomingMovements />
          <FunctionOwnersCard />
        </div>
      </div>
    </>);

}
window.OverviewScreen = OverviewScreen;

/* ---- Matrix view: functions × work groups (all dimensions, stacked) ---- */
function OverviewMatrix() {
  const { viewDate, go } = window.useApp();
  const [highlight, setHighlight] = useStateS(null); // {fn, group}

  return (
    <div className="card" style={{ overflow: "hidden" }} data-comment-anchor="1fa31cf08c-div-93-7">
      <div className="card-head">
        <div className="card-title"><Icon name="dashboard" />Headcount by function and work group</div>
        <div className="muted" style={{ fontSize: 11 }}>
          <span className="chip-dot emp" style={{ display: "inline-block", marginRight: 4 }} />Employees
          <span style={{ marginLeft: 10 }}>
            <span className="chip-dot con" style={{ display: "inline-block", marginRight: 4 }} />Contractors
          </span>
        </div>
      </div>
      <div style={{ overflowX: "auto" }}>
        <table className="matrix">
          <thead>
            <tr>
              <th className="col-h" style={{ minWidth: 240 }}>
                <span className="col-fn-count">Function →</span>
                <span className="col-fn-name" style={{ fontFamily: "var(--font-display)" }}>Work group ↓</span>
              </th>
              {window.FUNCTIONS.map((fn) => {
                const t = window.functionTotals(fn.id, viewDate);
                return (
                  <th key={fn.id} className="col-h" style={{ minWidth: 120 }}>
                    <span className="col-fn-name">{fn.name}</span>
                    <span className="col-fn-count">{t.total} · {t.emp}e / {t.con}c</span>
                  </th>
                );
              })}
              <th className="col-h" style={{ minWidth: 96 }}>
                <span className="col-fn-name">Total</span>
                <span className="col-fn-count">By group</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {window.DIMENSIONS.map((dim, dimIdx) => (
              <DimensionSection key={dim.id} dim={dim} dimIdx={dimIdx}
                viewDate={viewDate} go={go}
                highlight={highlight} setHighlight={setHighlight} />
            ))}
          </tbody>
        </table>
      </div>
      <div className="card-foot">
        <Icon name="info-circle" /> Each section is one organisational dimension. People belong to one work group <em>per dimension</em>, so the same person can appear in <strong>Bubble</strong>, <strong>Country</strong> and <strong>Other</strong> at the same time. Click any cell to drill in.
      </div>
    </div>
  );
}

function DimensionSection({ dim, dimIdx, viewDate, go, highlight, setHighlight }) {
  const roots = window.rootWorkGroups(dim.id);
  const total = window.dimensionTotals(dim.id, viewDate);
  const colCount = window.FUNCTIONS.length + 2;

  const renderCell = (group, fn) => {
    const c = window.matrixCell(group.id, fn.id, viewDate);
    const t = c.emp + c.con;
    const isHl = highlight && (highlight.fn === fn.id || highlight.group === group.id);
    return (
      <td key={fn.id}
        className={`cell ${t === 0 ? "cell-empty" : ""} ${isHl ? "is-highlight" : ""}`}
        onMouseEnter={() => setHighlight({ fn: fn.id, group: group.id })}
        onMouseLeave={() => setHighlight(null)}>
        <div className="cell-num">{t === 0 ? "—" : t}</div>
        {t > 0 && (
          <>
            <div className="cell-split">
              <div className="seg-emp" style={{ width: `${(c.empFte / c.fte) * 100}%` }} />
              <div className="seg-con" style={{ width: `${(c.conFte / c.fte) * 100}%` }} />
            </div>
            <div className="cell-meta">
              <span style={{ color: "var(--fg-2)", fontWeight: 500 }}>{window.fteN(c.fte)} FTE</span>
            </div>
            <div className="cell-fte">
              <span className="dot emp" style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "var(--mf-aubergine-900)", marginRight: 4 }} />{c.emp}p
              <span style={{ marginLeft: 8 }}>
                <span className="dot con" style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "var(--mf-watermelon-900)", marginRight: 4 }} />{c.con}p
              </span>
            </div>
          </>
        )}
      </td>
    );
  };

  return (
    <>
      <tr className="dim-sep">
        <td colSpan={colCount}>
          <div className="dim-sep-inner">
            <span className="dim-sep-dot" style={{ background: dim.tint }} />
            <span className="dim-sep-name">{dim.name}</span>
            <span className="dim-sep-desc">{dim.description}</span>
            <span className="dim-sep-count">{total.total} people · {window.fteN(total.fte)} FTE · {roots.length} root group{roots.length === 1 ? "" : "s"}</span>
          </div>
        </td>
      </tr>
      {roots.map((root) => {
        const children = window.childWorkGroups(root.id);
        return (
          <React.Fragment key={root.id}>
            <tr>
              <td className="row-h" onClick={() => go("team", { id: root.id })} style={{ cursor: "pointer" }}>
                <div className="row-team">
                  <span className="team-bullet" style={{ background: dim.tint }} />
                  <span>{root.name}</span>
                  {children.length > 0 && <span className="row-meta">· {children.length} sub</span>}
                </div>
              </td>
              {window.FUNCTIONS.map((fn) => renderCell(root, fn))}
              <td className="cell">
                <div className="cell-num">{window.workGroupTotals(root.id, viewDate).total}</div>
                <div className="cell-fte">{window.fteN(window.workGroupTotals(root.id, viewDate).fte)} FTE</div>
              </td>
            </tr>
            {children.map((child) => (
              <tr key={child.id} className="sub-row">
                <td className="row-h" onClick={() => go("team", { id: child.id })} style={{ cursor: "pointer" }}>
                  <div className="row-team">
                    <span className="team-bullet" />
                    <span>{child.name}</span>
                  </div>
                </td>
                {window.FUNCTIONS.map((fn) => renderCell(child, fn))}
                <td className="cell">
                  <div className="cell-num">{window.workGroupTotals(child.id, viewDate).total}</div>
                  <div className="cell-fte">{window.fteN(window.workGroupTotals(child.id, viewDate).fte)} FTE</div>
                </td>
              </tr>
            ))}
          </React.Fragment>
        );
      })}
      <tr className="dim-subtotal">
        <td className="row-h">Subtotal · {dim.name}</td>
        {window.FUNCTIONS.map((fn) => {
          const ids = window.WORK_GROUPS.filter(g => g.dimensionId === dim.id).map(g => g.id);
          const inFn = window.peopleAt(viewDate).filter(x => x.assignment.functionId === fn.id).map(x => ({
            person: x.person,
            pct: (x.assignment.allocations || []).filter(a => ids.includes(a.groupId)).reduce((s, a) => s + a.pct, 0),
          })).filter(x => x.pct > 0);
          const fte = inFn.reduce((s, m) => s + m.pct, 0) / 100;
          return (
            <td key={fn.id} className="cell">
              <div className="cell-num">{inFn.length}</div>
              {inFn.length > 0 && <div className="cell-fte">{window.fteN(fte)} FTE</div>}
            </td>
          );
        })}
        <td className="cell">
          <div className="cell-num">{total.total}</div>
          <div className="cell-fte">{window.fteN(total.fte)} FTE</div>
        </td>
      </tr>
    </>
  );
}

function UpcomingMovements() {
  const { viewDate, go, setDrawer } = window.useApp();
  const past = window.eventsBetween(window.addMonths(viewDate, -2), viewDate).slice(-6).reverse();
  const future = window.eventsBetween(viewDate, window.addMonths(viewDate, 6)).slice(0, 8);

  const EventRow = ({ ev, when }) => {
    const p = window.pById[ev.personId];
    const isFuture = ev.date > viewDate;
    const icons = { hire: "user", move: "exchange", role: "user-advisor", manager: "arrow-turn", extend: "arrow-right", end: "cancel-circle", allocate: "settings-sliders" };
    return (
      <div style={{ display: "grid", gridTemplateColumns: "92px 24px 1fr auto", gap: 10, padding: "8px 14px", borderBottom: "1px solid var(--border-subtle)", alignItems: "center", fontSize: 12 }}>
        <span style={{ fontVariantNumeric: "tabular-nums", color: isFuture ? "#8C5E12" : "var(--fg-3)" }}>{window.dstr(ev.date)}</span>
        <Icon name={icons[ev.type] || "info-circle"} style={{ color: isFuture ? "#C58A2C" : "var(--fg-4)" }} />
        <div>
          <strong style={{ fontWeight: 500 }}>{p?.name}</strong>
          {ev.type === "hire" && <> joins <strong>{window.wgById[ev.payload?.allocations?.[0]?.groupId]?.name || "the organisation"}</strong> as {ev.payload?.role}</>}
          {ev.type === "move" && <> moves from <strong>{window.wgById[ev.payload?.fromGroup]?.name}</strong> → <strong>{window.wgById[ev.payload?.toGroup]?.name}</strong></>}
          {ev.type === "allocate" && <> re-allocates capacity {ev.payload?.note ? <span className="muted">· {ev.payload.note}</span> : null}</>}
          {ev.type === "role" && <> · {ev.payload?.from} → {ev.payload?.to}</>}
          {ev.type === "end" && <> · contract ends ({ev.payload?.reason || "—"})</>}
        </div>
        <button className="btn btn-ghost" style={{ height: 22, padding: "0 6px" }} onClick={() => go("person", { id: p.id })}>
          <Icon name="arrow-right" />
        </button>
      </div>);

  };

  return (
    <div className="card">
      <div className="card-head">
        <div className="card-title"><Icon name="invoice" />Movements</div>
        <div style={{ display: "flex", gap: 6 }}>
          <button className="btn btn-ghost" onClick={() => setDrawer({ kind: "hire" })}><Icon name="plus" />Log event</button>
        </div>
      </div>
      <div style={{ padding: "10px 14px 6px 14px", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "#8C5E12" }}>Planned · next 6 months</div>
      {future.length === 0 && <div style={{ padding: 14, color: "var(--fg-4)", fontSize: 12 }}>No planned changes.</div>}
      {future.map((ev) => <EventRow key={ev.id} ev={ev} />)}
      <div style={{ padding: "10px 14px 6px 14px", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-4)" }}>Recent · last 2 months</div>
      {past.length === 0 && <div style={{ padding: 14, color: "var(--fg-4)", fontSize: 12 }}>No recent changes.</div>}
      {past.map((ev) => <EventRow key={ev.id} ev={ev} />)}
    </div>);

}

/* ---- Function owners panel ---- */
function FunctionOwnersCard() {
  const { go, viewDate } = window.useApp();
  return (
    <div className="card">
      <div className="card-head">
        <div className="card-title"><Icon name="target" />Functions</div>
        <span className="muted" style={{ fontSize: 11 }}>{window.FUNCTIONS.length} active</span>
      </div>
      <div>
        {window.FUNCTIONS.map((fn) => {
          const t = window.functionTotals(fn.id, viewDate);
          const owner = window.pById[fn.ownerId];
          return (
            <div key={fn.id} onClick={() => go("function", { id: fn.id })}
            style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 10, padding: "10px 14px", borderBottom: "1px solid var(--border-subtle)", alignItems: "center", cursor: "pointer" }}>
              <div>
                <div style={{ fontWeight: 500, fontSize: 13 }}>{fn.name}</div>
                <div style={{ fontSize: 11, color: "var(--fg-3)", display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
                  <Avatar person={owner} size="sm" /> {owner?.name}
                </div>
              </div>
              <span className="chip chip-emp">{t.emp}</span>
              <span className="chip chip-con">{t.con}</span>
            </div>);

        })}
      </div>
    </div>);

}