// Workspace page — the org-level landing reached by clicking "CRF2" in the rail.
// A banner (the org identity) over a grid of Hub cards. Reuses the New-hub
// NHTemplateCard: live hubs render in colour and open the hub; the rest are
// "recommended" (shaded, not yet created). See app_evergreen.jsx (view==='workspace').

// Hub cards, grouped into three tiers:
//   active   — built and in use; the card opens the hub (id is the hub key).
//   planned  — identified from THIS org's chart (a department without a hub yet).
//   template — generic Proxa suggestions, shown as starting points.
// Only `active` cards are live/clickable; planned & template are shaded.
const WS_HUBS = [
  // ── Active (built) ──
  { tier: 'active', id: 'Finance', name: 'Finance', live: true,
    desc: 'Actuals in, forecast recomputed, board pack out — with assumptions owned.',
    icon: '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>' },
  { tier: 'active', id: 'Contracts', name: 'Customer', live: true,
    desc: 'Contracts, Salesforce and customer success in one representation.',
    icon: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>' },
  { tier: 'active', id: 'Diligence', name: 'Diligence', live: true,
    desc: 'A target modelled once — memo, model and checklist draw on the same state.',
    icon: '<path d="M9 2h6a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1z"/><path d="M9 4h6"/><path d="M8.5 12l2 2 4-4"/>' },
  { tier: 'active', id: 'Tenney North Park', name: 'Tenney North Park', live: true,
    desc: 'Pipeline, valuation and lease-up for a 125-unit multi-housing asset.',
    icon: '<path d="M3 21h18"/><path d="M5 21V5l8-3v19"/><path d="M19 21V10l-6-4"/><path d="M9 8h.01M9 12h.01M9 16h.01"/>' },

  // ── Planned (identified from the org chart) ──
  { tier: 'planned', id: 'operations', name: 'Operations',
    desc: 'Manufacturing and fulfillment across the Portland and Lebanon plants.',
    icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05"/><path d="M12 22.08V12"/>' },
  { tier: 'planned', id: 'sales', name: 'Sales',
    desc: 'The reasoning behind each deal, not just the shape of the pipeline.',
    icon: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>' },
  { tier: 'planned', id: 'people', name: 'People',
    desc: 'Roles, responsibilities and compensation — planning you can compute.',
    icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>' },
  { tier: 'planned', id: 'rd', name: 'R&D',
    desc: 'Product and process development with dependencies made explicit.',
    icon: '<path d="M9 2v6l-5 9a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-9V2"/><path d="M9 2h6"/><path d="M7 16h10"/>' },

  // ── Templates (generic suggestions) ──
  { tier: 'template', id: 'organization', name: 'Organization',
    desc: 'Every domain connected — a representation of the organization itself.',
    icon: '<circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v5M12 12H5v5M12 12h7v5"/>' },
  { tier: 'template', id: 'product', name: 'Product',
    desc: 'Roadmap, decisions and metrics with their dependencies made explicit.',
    icon: '<path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>' },
  { tier: 'template', id: 'asset', name: 'Asset',
    desc: 'Structure, cash flows, covenants and valuation — recomputed, not rebuilt.',
    icon: '<line x1="3" y1="22" x2="21" y2="22"/><polygon points="12 2 21 7 3 7"/><line x1="6" y1="10" x2="6" y2="18"/><line x1="10" y1="10" x2="10" y2="18"/><line x1="14" y1="10" x2="14" y2="18"/><line x1="18" y1="10" x2="18" y2="18"/>' },
];

// The three tiers, in display order, with a one-line rationale each.
const WS_HUB_SECTIONS = [
  { key: 'active',   label: 'Active',    sub: 'Built and in use.' },
  { key: 'planned',  label: 'Planned',   sub: 'Identified from your structure — not built yet.' },
  { key: 'template', label: 'Templates', sub: 'Generic starting points if you haven’t mapped your structure yet.' },
];

// ── Team ──────────────────────────────────────────────────────────────────
// Workspace-level membership: who can reach this workspace and at what level.
// Distinct from a hub's Settings → Users, which scopes permission per hub.
// People are the real Cascade Ridge leadership from hr/CascadeRidge-HR-Roster.xlsx
// (EMP-1001…EMP-1016), so the artifact owners on the hub pages resolve here.
const WS_ROLES = {
  owner:  { label: 'Owner',  tint: 'var(--accent-purple, #A374DB)' },
  admin:  { label: 'Admin',  tint: 'var(--accent-blue, #4378E0)' },
  editor: { label: 'Editor', tint: 'var(--accent-green, #52B26E)' },
  viewer: { label: 'Viewer', tint: 'var(--fg-light-muted, #A09792)' },
};

// `hubs` holds hub display names; a member with all three sees the whole workspace.
const WS_TEAM = [
  { id: 'EMP-1001', name: 'Linda Petrov',      title: 'CEO',                     role: 'owner',
    hubs: ['Finance', 'Customer', 'Tenney North Park'], seen: 'Active now',   seenTs: 100 },
  { id: 'EMP-1004', name: 'Trevor Garcia',     title: 'Controller',              role: 'admin',  you: true,
    photo: 'assets/avatar.jpg',
    hubs: ['Finance', 'Customer', 'Tenney North Park'], seen: 'Active now',   seenTs: 99 },
  { id: 'EMP-1002', name: 'Jose Patel',        title: 'CFO',                     role: 'admin',
    hubs: ['Finance', 'Customer', 'Tenney North Park'], seen: '2 hours ago',  seenTs: 95 },
  { id: 'EMP-1003', name: 'Monica Morales',    title: 'COO',                     role: 'admin',
    hubs: ['Finance', 'Tenney North Park'],             seen: 'Yesterday',    seenTs: 90 },
  { id: 'EMP-1015', name: 'Christina Costa',   title: 'VP, Sales',               role: 'editor',
    hubs: ['Finance', 'Customer'],                      seen: 'Yesterday',    seenTs: 88 },
  { id: 'EMP-1008', name: 'Nicole Novak',      title: 'Supply Chain Manager',    role: 'editor',
    hubs: ['Finance'],                                  seen: '3 days ago',   seenTs: 80 },
  { id: 'EMP-1005', name: 'Christina Vargas',  title: 'HR Manager',              role: 'editor',
    hubs: ['Finance'],                                  seen: '5 days ago',   seenTs: 74 },
  { id: 'EMP-1013', name: 'Christina Foster',  title: 'VP, R&D',                 role: 'editor',
    hubs: ['Finance'],                                  seen: '1 week ago',   seenTs: 68 },
  { id: 'EMP-1010', name: 'Olivia Hughes',     title: 'Plant Manager · Lebanon, TN',  role: 'viewer',
    hubs: ['Finance'],                                  seen: '2 weeks ago',  seenTs: 60 },
  { id: 'EMP-1009', name: 'Christina Mitchell', title: 'Plant Manager · Portland, OR', role: 'viewer',
    hubs: ['Finance'],                                  seen: '3 weeks ago',  seenTs: 54 },
  { id: 'EMP-1016', name: 'Trevor Sanchez',    title: 'Director of Sales',       role: 'editor', pending: true,
    hubs: ['Customer'],                                          seen: null,           seenTs: null },
];

// first.last@<workspace domain> — Cascade Ridge's is from COMPANY.md §1.
function wsEmail(name) {
  return name.toLowerCase().replace(/[^a-z\s]/g, '').trim().split(/\s+/).join('.')
    + '@' + wsEmailDomain();
}
function wsInitials(name) {
  const p = name.trim().split(/\s+/);
  return (p.length === 1 ? p[0].slice(0, 2) : p[0][0] + p[p.length - 1][0]).toUpperCase();
}

function WsTeamRow({ m }) {
  const role = WS_ROLES[m.role];
  // Two chips fit the column; a third would wrap, so collapse to one chip + "+N".
  const shown = m.hubs.length > 2 ? m.hubs.slice(0, 1) : m.hubs;
  const rest = m.hubs.length - shown.length;
  return (
    <div className="ws-team__row" role="row">
      <div className="ws-team__cell ws-team__cell--person" role="cell">
        {m.photo
          ? <span className="ws-team__av"><img src={m.photo} alt="" /></span>
          : <span className="ws-team__av">{wsInitials(m.name)}</span>}
        <span className="ws-team__who">
          <span className="ws-team__name">
            {m.name}
            {m.you && <span className="ws-team__tag">You</span>}
            {m.pending && <span className="ws-team__tag ws-team__tag--pending">Pending</span>}
          </span>
          <span className="ws-team__title">{m.title}</span>
        </span>
      </div>
      <div className="ws-team__cell ws-team__cell--email" role="cell">
        <span className="ws-team__email">{wsEmail(m.name)}</span>
      </div>
      <div className="ws-team__cell" role="cell">
        <span className="ws-team__role">
          <span className="ws-team__dot" style={{ background: role.tint }} />
          {role.label}
        </span>
      </div>
      <div className="ws-team__cell ws-team__cell--hubs" role="cell">
        {shown.map((h) => <span key={h} className="ws-team__hub">{h}</span>)}
        {rest > 0 && <span className="ws-team__hub ws-team__hub--more">+{rest}</span>}
      </div>
      <div className="ws-team__cell ws-team__cell--seen" role="cell">
        {m.pending
          ? <span className="ws-team__seen ws-team__seen--muted">Invite sent · awaiting</span>
          : <span className="ws-team__seen">{m.seen}</span>}
      </div>
    </div>
  );
}

function WsTeam() {
  const [q, setQ] = React.useState('');
  const [role, setRole] = React.useState('all');

  const rows = React.useMemo(() => {
    const needle = q.trim().toLowerCase();
    return wsTeam()
      .filter((m) => role === 'all' || m.role === role)
      .filter((m) => !needle || [m.name, m.title, wsEmail(m.name)]
        .some((f) => f.toLowerCase().includes(needle)))
      .slice()
      .sort((a, b) => (b.seenTs == null ? -Infinity : b.seenTs) - (a.seenTs == null ? -Infinity : a.seenTs));
  }, [q, role]);

  // Role filter chips carry their own counts so the row doubles as a breakdown.
  const FILTERS = [{ key: 'all', label: 'All' }]
    .concat(Object.keys(WS_ROLES).map((k) => ({ key: k, label: WS_ROLES[k].label })))
    .map((f) => ({ ...f, n: f.key === 'all' ? wsTeam().length : wsTeam().filter((m) => m.role === f.key).length }))
    .filter((f) => f.n > 0);

  return (
    <div className="ws-team">
      <div className="ws-team__bar">
        <div className="ws-team__search">
          <IconSearch size={15} />
          <input
            type="text" value={q} placeholder="Search members…"
            aria-label="Search members"
            onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="ws-team__filters" role="group" aria-label="Filter by role">
          {FILTERS.map((f) => (
            <button
              key={f.key} type="button"
              className={`ws-team__filter ${role === f.key ? 'is-active' : ''}`}
              aria-pressed={role === f.key}
              onClick={() => setRole(f.key)}>
              {f.label}<span className="ws-team__filter-n">{f.n}</span>
            </button>
          ))}
        </div>
        <button
          type="button" className="ws-team__invite"
          onClick={() => { if (window.toast) window.toast('Invites are disabled in the prototype'); }}>
          <IconPlus size={15} />Invite
        </button>
      </div>

      <div className="ws-team__table" role="table" aria-label="Workspace members">
        <div className="ws-team__head" role="row">
          <span role="columnheader">Member</span>
          <span role="columnheader">Email</span>
          <span role="columnheader">Role</span>
          <span role="columnheader">Hubs</span>
          <span role="columnheader">Last active</span>
        </div>
        {rows.length === 0
          ? <div className="ws-team__none">No members match that search.</div>
          : rows.map((m) => <WsTeamRow key={m.id} m={m} />)}
      </div>
    </div>
  );
}

// ── Org ───────────────────────────────────────────────────────────────────
// The org chart is a DATA PRODUCT in the worksheet shell, exactly like the
// Tools DPs (Calendar/Lists): the Data face is the department roster grid, the
// Artifact face is the traditional org chart drawn from it, plus Control/Context.
// One source array (WS_ORG) drives both faces — the chart is of DEPARTMENTS;
// each department's head resolves back to a real person in WS_TEAM by id.
const IconOrg = (p) => (
  <svg {...{ viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }}
    width={p.size || 16} height={p.size || 16}>
    <circle cx="12" cy="5" r="2" /><circle cx="5" cy="19" r="2" /><circle cx="19" cy="19" r="2" />
    <path d="M12 7v5M12 12H5v5M12 12h7v5" />
  </svg>
);

// parent is a department id (null at the top). head is an EMP id from WS_TEAM.
// hub names the associated Proxa hub (if the department has one built) — this is
// what the chart badge and the Data-face "Hub" column denote.
const WS_ORG = [
  { id: 'DEP-01', dept: 'Executive Office',  parent: null,     head: 'EMP-1001', focus: 'Leadership & strategy',        hc: 4 },
  { id: 'DEP-02', dept: 'Finance',           parent: 'DEP-01', head: 'EMP-1002', focus: 'Accounting, FP&A, treasury',   hc: 8,   hub: 'Finance' },
  { id: 'DEP-03', dept: 'Controllership',    parent: 'DEP-02', head: 'EMP-1004', focus: 'Close, controls, reporting',   hc: 5 },
  { id: 'DEP-04', dept: 'Operations',        parent: 'DEP-01', head: 'EMP-1003', focus: 'Manufacturing & fulfillment',  hc: 210 },
  { id: 'DEP-05', dept: 'Supply Chain',      parent: 'DEP-04', head: 'EMP-1008', focus: 'Procurement & logistics',      hc: 18 },
  { id: 'DEP-06', dept: 'Portland Plant · OR', parent: 'DEP-04', head: 'EMP-1009', focus: 'Co-packing — 5 lines',       hc: 95 },
  { id: 'DEP-07', dept: 'Lebanon Plant · TN',  parent: 'DEP-04', head: 'EMP-1010', focus: 'Co-packing — 4 lines',       hc: 88 },
  { id: 'DEP-08', dept: 'Sales',             parent: 'DEP-01', head: 'EMP-1015', focus: 'Accounts & pipeline',          hc: 12 },
  { id: 'DEP-09', dept: 'Customer',          parent: 'DEP-01', head: 'EMP-1016', focus: 'Contracts, CRM & success',     hc: 7,   hub: 'Customer' },
  { id: 'DEP-10', dept: 'People',            parent: 'DEP-01', head: 'EMP-1005', focus: 'Talent, payroll, safety',      hc: 6 },
  { id: 'DEP-11', dept: 'R&D',               parent: 'DEP-01', head: 'EMP-1013', focus: 'Product & process development', hc: 9 },
];

// ── Which workspace's content to render ───────────────────────────────────
// The arrays above are Cascade Ridge's. A domain pack with a `built` section
// (see domains.jsx — the HLA lab) supplies its own in the same row shapes, so
// every component below works unchanged. WorkspacePage sets this at the top of
// its render; only one workspace is on screen at a time.
let WS_DOMAIN = null;
function wsBuilt() {
  const p = WS_DOMAIN && window.proxaDomain ? window.proxaDomain(WS_DOMAIN) : null;
  return (p && p.built) || null;
}
function wsHubs() { const b = wsBuilt(); return b ? b.hubs : WS_HUBS; }
function wsTeam() { const b = wsBuilt(); return b ? b.team : WS_TEAM; }
function wsOrg() { const b = wsBuilt(); return b ? b.org : WS_ORG; }
function wsEmailDomain() { const b = wsBuilt(); return (b && b.emailDomain) || 'cascaderidgefoods.com'; }
// Each workspace's own identity mark (domains.jsx). Falls back to Cascade
// Ridge's so an un-domained workspace still renders something.
function wsMark(key) { return (window.proxaMark ? window.proxaMark(key) : null) || 'assets/crf-mark.svg?v=3'; }

const wsTeamById = (id) => wsTeam().find((m) => m.id === id) || {};

// Worksheet columns + rows (the Data face / data container behind the chart).
const WS_ORG_COLS = ['Department', 'Parent', 'Head', 'Focus', 'Headcount', 'Hub'];
function wsOrgRows() {
  const deptById = Object.fromEntries(wsOrg().map((d) => [d.id, d.dept]));
  return wsOrg().map((d) => [
    d.dept,
    d.parent ? deptById[d.parent] : '—',
    wsTeamById(d.head).name || d.head,
    d.focus,
    String(d.hc),
    d.hub || '—',
  ]);
}

// Assemble the department tree from the flat WS_ORG list.
function wsOrgTree() {
  const nodes = {};
  wsOrg().forEach((d) => {
    const h = wsTeamById(d.head);
    nodes[d.id] = { ...d, head: h.name || d.head, headTitle: h.title || '', kids: [] };
  });
  let root = null;
  wsOrg().forEach((d) => {
    if (d.parent && nodes[d.parent]) nodes[d.parent].kids.push(nodes[d.id]);
    else if (!d.parent) root = nodes[d.id];
  });
  return root;
}

function WsOrgNode({ n }) {
  return (
    <li className="orgc__li">
      <div className={`orgc__card ${n.hub ? 'has-hub' : ''}`} title={`${n.dept} · ${n.focus}`}>
        <span className="orgc__row">
          <span className="orgc__dept">{n.dept}</span>
          {n.hub && (
            <span className="orgc__hubtag" title={`Linked to the ${n.hub} hub`}>
              <IconCube size={12} />
            </span>
          )}
        </span>
        <span className="orgc__focus">{n.focus}</span>
        <span className="orgc__head">
          <IconOrg size={12} />{n.head}{n.headTitle ? ` · ${n.headTitle}` : ''}
        </span>
      </div>
      {n.kids.length > 0 && (
        <ul className="orgc__children">
          {n.kids.map((k) => <WsOrgNode key={k.id} n={k} />)}
        </ul>
      )}
    </li>
  );
}

// The Artifact face: a traditional top-down org chart of departments.
function WsOrgChart() {
  const root = React.useMemo(wsOrgTree, []);
  if (!root) return null;
  return (
    <div className="orgc">
      <ul className="orgc__root">
        <WsOrgNode n={root} />
      </ul>
    </div>
  );
}

// Same worksheet DP shell as the Tools DPs, but chart-first (Artifact face).
function WsOrg() {
  return (
    <window.ToolDP
      name="Org Chart" kindLabel="Company · structure" source="CascadeRidge-Org.xlsx"
      crumb="Cascade Ridge Foods / Workspace"
      author="Claude · maintained"
      cols={WS_ORG_COLS} rows={wsOrgRows()}
      initial="artifact"
      context={{
        what: 'The department structure for Cascade Ridge Foods — functions, their reporting lines, heads and headcount.',
        why: 'Gives every hub a shared, computable view of the org so ownership and approvals resolve to the right department.',
      }}>
      <WsOrgChart />
    </window.ToolDP>
  );
}

// Badge label/class per tier (shared by the card and list views).
function wsHubBadge(tier) {
  if (tier === 'planned') return { label: 'Planned', cls: 'planned' };
  if (tier === 'template') return { label: 'Template', cls: 'template' };
  return { label: 'Ready', cls: 'live' };
}

// Hub columns for the shared OutputsList (reuses the Dashboard's .lib table).
const WS_HUB_COLUMNS = [
  { header: 'Hub', render: (h) => (
      <div className="lib-title">
        <svg className="chev spacer" viewBox="0 0 24 24"></svg>
        <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
             strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: h.icon }} />
        <span className="nm">{h.name}</span>
      </div>) },
  { header: 'Description', render: (h) => <span style={{ color: 'var(--fg-muted, #615D5A)' }}>{h.desc}</span> },
  { header: 'Status', thClass: 'r', tdClass: 'r', render: (h) => {
      const b = wsHubBadge(h.tier);
      return <span className={`nh-card-badge ${b.cls}`}>{b.label}</span>;
    } },
];

// Card/List view toggle — reuses the hub Dashboard's .outputs-viewtoggle styling.
function WsViewToggle({ value, onChange }) {
  const opts = [
    ['card', 'Card', <><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /></>],
    ['list', 'List', <><line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" /><line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" /></>],
  ];
  return (
    <div className="outputs-viewtoggle" role="tablist" aria-label="View">
      {opts.map(([k, label, path]) => (
        <button
          key={k} type="button" title={`${label} view`} aria-label={`${label} view`}
          aria-selected={value === k}
          className={`outputs-viewbtn ${value === k ? 'is-active' : ''}`}
          onClick={() => onChange(k)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{path}</svg>
        </button>
      ))}
    </div>
  );
}

// Rich empty-state used for every workspace section: a hatched panel with an
// icon, title, one-line prompt and an "Add …" CTA (opens the assistant).
function WsSectionEmpty({ Icon, title, sub, ctaLabel, onCta, children }) {
  return (
    <div className="ws-hubs nh-wrap">
      <div className="ws-ftu">
        <div className="ws-ftu__ico"><Icon size={22} /></div>
        <div className="ws-ftu__title">{title}</div>
        <p className="ws-ftu__sub">{sub}</p>
        {ctaLabel && (
          <button type="button" className="ws-ftu__cta" onClick={() => onCta && onCta()}>
            <IconPlus size={16} />{ctaLabel}
          </button>
        )}
      </div>
      {children}
    </div>
  );
}

// Fallback icon for a draft hub whose name doesn't match a template (a cube).
const WS_DRAFT_ICON = '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05"/><path d="M12 22.08V12"/>';

// First-time-user Hubs surface for a brand-new (empty) workspace: the shared
// empty-state hero plus the generic Templates to start from. Clicking a
// template BUILDS it — a draft hub lands in the rail and the template flow
// opens (Model → Context). Built drafts render as live cards above Templates.
// Step 0 of an empty workspace: what are you modelling? The answer swaps the
// template set, the starting documents and the data products — the flow itself
// is identical either way (see domains.jsx).
function WsDomainPick({ onPick }) {
  const order = window.PROXA_DOMAIN_ORDER || ['company'];
  const packs = window.PROXA_DOMAINS || {};
  return (
    <div className="ws-hubs nh-wrap">
      <section className="ws-hubsec">
        <div className="ws-hubsec__head">
          <span className="ws-hubsec__title">What are you modelling?</span>
          <span className="ws-hubsec__sub">
            Claude needs to know the shape of the work before it can propose anything.
          </span>
        </div>
        <div className="ws-dompick">
          {order.map((key) => {
            const p = packs[key];
            if (!p) return null;
            return (
              <button type="button" className="ws-dom" key={key} onClick={() => onPick(key)}>
                <span className="ws-dom__name">{p.label}</span>
                <span className="ws-dom__blurb">{p.blurb}</span>
                <span className="ws-dom__eg">e.g. {p.modelLine}</span>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}

function WsHubsEmpty({ draftHubs = [], onOpenHub, onBuildFromTemplate, onGuide, domain, onPickDomain }) {
  const Card = window.NHTemplateCard;
  // No domain yet → ask what we're modelling before showing any template.
  if (!domain && onPickDomain) return <WsDomainPick onPick={onPickDomain} />;
  const pack = window.proxaDomain ? window.proxaDomain(domain) : null;
  // Templates come from the domain pack; WS_HUBS is the company fallback.
  const templates = pack
    ? pack.groups.flatMap((g) => g.items).map((t) => ({ ...t, live: false }))
    : wsHubs().filter((h) => h.tier === 'template');
  const templateSection = (
    <section className="ws-hubsec">
      <div className="ws-hubsec__head">
        <span className="ws-hubsec__title">Templates</span>
        <span className="ws-hubsec__count">{templates.length}</span>
        <span className="ws-hubsec__sub">Generic starting points — pick one and Claude builds it.</span>
      </div>
      <div className="nh-grid">
        {templates.map((h) => (
          <Card key={h.id} t={{ ...h, badgeLabel: 'Template', badgeClass: 'template' }}
            onPick={() => {}} onPropose={() => onBuildFromTemplate && onBuildFromTemplate(h.id, h.name)} />
        ))}
      </div>
    </section>
  );

  // Once the workspace has draft hubs, the hero yields to a Drafts section.
  if (draftHubs.length > 0) {
    return (
      <div className="ws-hubs nh-wrap">
        <section className="ws-hubsec">
          <div className="ws-hubsec__head">
            <span className="ws-hubsec__title">Drafts</span>
            <span className="ws-hubsec__count">{draftHubs.length}</span>
            <span className="ws-hubsec__sub">Being built — open one to continue.</span>
          </div>
          <div className="nh-grid">
            {draftHubs.map((name) => {
              const tpl = wsHubs().find((h) => h.tier === 'template' && name.indexOf(h.name) === 0);
              return (
                <Card key={name}
                  t={{ id: name, name, live: true,
                    desc: tpl ? tpl.desc : 'A new hub — upload sources and Claude proposes its data products.',
                    icon: tpl ? tpl.icon : WS_DRAFT_ICON }}
                  onPick={() => onOpenHub && onOpenHub(name)} />
              );
            })}
          </div>
        </section>
        {templateSection}
      </div>
    );
  }

  return (
    <WsSectionEmpty
      Icon={IconGrid} title="Start your workspace"
      sub={pack
        ? `Modelling ${pack.label.charAt(0).toLowerCase() + pack.label.slice(1)}. Upload the documents closest to the work and Claude proposes the first hub and its data structure — or begin from a template below.`
        : 'Tell Claude what you would like to model, or upload a website, spreadsheet, report or docs, and it proposes the first hub — or begin from a template below.'}
      ctaLabel="Add a Hub" onCta={() => onGuide && onGuide('hub')}>
      {templateSection}
    </WsSectionEmpty>
  );
}

// Empty-state body for the not-yet-built Workspace tabs (Context).
function WsEmpty({ Icon, title, sub }) {
  return (
    <div className="ws-empty">
      <div className="ws-empty__ico"><Icon size={22} /></div>
      <div className="ws-empty__title">{title}</div>
      <div className="ws-empty__sub">{sub}</div>
    </div>
  );
}

function WorkspacePage({ onOpenHub, onOpenSettings, onOpenAgentChat, onProposeHub,
  workspaces, activeWorkspaceId, onSwitchWorkspace, onCreateWorkspace, onRemoveWorkspace,
  draftHubs = [], onBuildFromTemplate, onCreateHub, onGuide, domain, onPickDomain, domainOf }) {
  const Card = window.NHTemplateCard;
  // Point the content resolvers at this workspace's domain before anything
  // below reads them (see WS_DOMAIN).
  WS_DOMAIN = domain || null;
  // Tabs behave like a hub's: a pill row switches the panel below. Graph/About
  // embed the existing full pages inline; their close/Esc returns to Hubs.
  const [tab, setTab] = React.useState('hubs');
  const [hubsView, setHubsView] = React.useState('card'); // 'card' | 'list'

  // Workspace switcher — state lives in the app (so the rail reflects it too).
  const wsList = workspaces || [{ id: 'cascade', name: 'Cascade Ridge Foods' }];
  const activeWs = activeWorkspaceId || 'cascade';
  const [wsMenu, setWsMenu] = React.useState(false);
  const activeWorkspace = wsList.find((w) => w.id === activeWs) || wsList[0];
  const isEmpty = !!activeWorkspace.empty;

  const PILLS = [
    { key: 'hubs', label: 'Hubs', Icon: IconGrid, count: isEmpty ? draftHubs.length : wsHubs().filter((h) => h.tier === 'active').length },
    { key: 'team', label: 'Team', Icon: IconUsers, count: isEmpty ? 0 : wsTeam().length },
    { key: 'org', label: 'Org', Icon: IconOrg, count: isEmpty ? 0 : wsOrg().length },  // departments
    { key: 'graph', label: 'Graph', Icon: IconGraph },
    { key: 'context', label: 'Context', Icon: IconInfo },
    { key: 'about', label: 'About', Icon: IconChip },
  ];
  return (
    <main className="main">
      <div className="ws-page">
        <div className="ws-actions">
          <button
            type="button"
            className="hubh-iconbtn"
            aria-label="Workspace settings"
            title="Settings"
            onClick={() => { if (onOpenSettings) onOpenSettings(); }}>
            <IconCog size={19} />
          </button>
          <button
            type="button"
            className="hubh-agentbtn desktop-only"
            aria-label="Open agent"
            title="Chat with agents"
            onClick={() => { if (onOpenAgentChat) onOpenAgentChat(); }}>
            <ProxaP size={22} color="#171412" />
          </button>
        </div>
        <header className="ws-banner">
          <div className="ws-banner__inner">
            <div className="ws-banner__eyebrow">
              <img className="ws-banner__mark" src={wsMark(domain)} alt="" aria-hidden="true" />
              Workspace
            </div>
            <div className="ws-switch">
              <button
                type="button" className="ws-switch__btn"
                aria-haspopup="menu" aria-expanded={wsMenu}
                onClick={() => setWsMenu((o) => !o)}>
                <h1 className="ws-banner__title">{activeWorkspace.name}</h1>
                <span className="ws-switch__caret"><IconChevronD size={22} /></span>
              </button>
              {wsMenu && (
                <React.Fragment>
                  <div className="ws-switch__scrim" onClick={() => setWsMenu(false)} aria-hidden="true" />
                  <div className="ws-switch__menu" role="menu">
                    <div className="ws-switch__head">Workspaces</div>
                    {wsList.map((w) => (
                      <div key={w.id} className="ws-switch__row">
                        <button
                          type="button" role="menuitem"
                          className={`ws-switch__item ${w.id === activeWs ? 'is-active' : ''}`}
                          onClick={() => { setWsMenu(false); if (onSwitchWorkspace) onSwitchWorkspace(w.id); }}>
                          <span className="ws-switch__ico">
                            {domainOf && wsMark(domainOf(w.id))
                              ? <img className="ws-switch__mark" src={wsMark(domainOf(w.id))} alt="" aria-hidden="true" />
                              : wsInitials(w.name)}
                          </span>
                          <span className="ws-switch__label">{w.name}</span>
                          {w.id === activeWs && <IconCheck size={15} />}
                        </button>
                        {!w.builtIn && onRemoveWorkspace && (
                          <button
                            type="button" className="ws-switch__del"
                            title={`Remove ${w.name}`} aria-label={`Remove ${w.name}`}
                            onClick={() => { setWsMenu(false); onRemoveWorkspace(w.id); }}>
                            <IconX size={14} />
                          </button>
                        )}
                      </div>
                    ))}
                    <div className="ws-switch__rule" role="separator" />
                    <button type="button" role="menuitem" className="ws-switch__new"
                      onClick={() => { setWsMenu(false); setTab('hubs'); if (onCreateWorkspace) onCreateWorkspace(); }}>
                      <IconPlus size={15} />New workspace
                    </button>
                  </div>
                </React.Fragment>
              )}
            </div>
          </div>
        </header>

        <nav className="ws-tabs outputs-pills" role="tablist" aria-label="Workspace sections">
          {PILLS.map((p) => (
            <button
              key={p.key} type="button" role="tab" aria-selected={tab === p.key}
              className={`outputs-pill ${tab === p.key ? 'is-active' : ''}`}
              onClick={() => setTab(p.key)}>
              <span className="outputs-pill__ico"><p.Icon size={16} /></span>
              <span className="outputs-pill__label">{p.label}</span>
              {p.count != null && <span className="outputs-pill__count">{p.count}</span>}
            </button>
          ))}
        </nav>

        <div className="ws-panel">
          {tab === 'hubs' && isEmpty && (
            <WsHubsEmpty draftHubs={draftHubs} onOpenHub={onOpenHub}
              onBuildFromTemplate={onBuildFromTemplate} onGuide={onGuide}
              domain={domain} onPickDomain={onPickDomain} />
          )}
          {tab === 'hubs' && !isEmpty && (
            <div className="ws-hubs nh-wrap">
              <div className="ws-hubs__bar">
                <WsViewToggle value={hubsView} onChange={setHubsView} />
              </div>
              {WS_HUB_SECTIONS.map((sec) => {
                const items = wsHubs().filter((h) => h.tier === sec.key);
                if (items.length === 0) return null;
                return (
                  <section className="ws-hubsec" key={sec.key}>
                    <div className="ws-hubsec__head">
                      <span className="ws-hubsec__title">{sec.label}</span>
                      <span className="ws-hubsec__count">{items.length}</span>
                      <span className="ws-hubsec__sub">{sec.sub}</span>
                    </div>
                    {hubsView === 'list'
                      ? <window.OutputsList
                          items={items}
                          columns={WS_HUB_COLUMNS}
                          hideHead
                          rowClass={() => 'click'}
                          onRowClick={(h) => (h.live ? onOpenHub(h.id) : onProposeHub && onProposeHub(h.name))} />
                      : <div className="nh-grid">
                          {items.map((h) => (
                            <Card
                              key={h.id}
                              t={{
                                ...h,
                                badgeLabel: h.tier === 'planned' ? 'Planned' : h.tier === 'template' ? 'Template' : undefined,
                                badgeClass: h.tier === 'planned' ? 'planned' : h.tier === 'template' ? 'template' : undefined,
                              }}
                              onPick={onOpenHub}
                              onPropose={h.live ? undefined : () => onProposeHub && onProposeHub(h.name)}
                            />
                          ))}
                        </div>}
                  </section>
                );
              })}
            </div>
          )}
          {tab === 'team' && (isEmpty
            ? <WsSectionEmpty Icon={IconUsers} title="Add your team"
                sub="Invite the people who work in this workspace and set what each of them can reach."
                ctaLabel="Add your Team" onCta={() => onGuide && onGuide('team')} />
            : <WsTeam />)}
          {tab === 'org' && (isEmpty
            ? <WsSectionEmpty Icon={IconOrg} title="Build your structure"
                sub="Upload a website, slide, sheet or napkin sketch and Claude drafts it for you to iterate on."
                ctaLabel="Add your Structure" onCta={() => onGuide && onGuide('org')} />
            : <div className="ws-org"><WsOrg /></div>)}
          {tab === 'graph' && (isEmpty
            ? <WsSectionEmpty Icon={IconGraph} title="Nothing to graph yet"
                sub="The connected view of your workspace appears once it has a hub or two."
                ctaLabel="Add a Hub" onCta={() => onGuide && onGuide('hub')} />
            : <div className="ws-embed ws-embed--graph"><ContextGraphPage key={domain} onBack={() => setTab('hubs')} domain={domain} /></div>)}
          {tab === 'context' && (
            <WsSectionEmpty Icon={IconInfo} title="Add shared context"
              sub="The context every hub in this workspace reads from — the judgment the data can’t hold — lives here."
              ctaLabel="Add Context" onCta={() => onGuide && onGuide('context')} />
          )}
          {tab === 'about' && (isEmpty
            ? <WsSectionEmpty Icon={IconChip} title="Write your About"
                sub="A short doc that tells anyone new what this workspace is and how to get started."
                ctaLabel="Add About" onCta={() => onGuide && onGuide('about')} />
            : <div className="ws-embed ws-embed--about"><AboutPage key={domain} onBack={() => setTab('hubs')} domain={domain} /></div>)}
        </div>
      </div>
    </main>
  );
}

window.WorkspacePage = WorkspacePage;