// Canvas Directions — stage subjects: what mounts on the stage.
// Every subject shows title · freshness (as of) · provenance affordance · direct actions.
// Loads after canvas-parts.jsx.

const CChip = (props) => { const C = (window.StimulusDesignSystem_bb8fa3 || {}).ConsentChip; return C ? React.createElement(C, props) : null; };

// ── Stage chrome — shared frame around every subject ────────────────────
function StageChrome({ title, asOf, provenance, actions, past, onReturnNow, children, label }) {
  const [showWhy, setShowWhy] = React.useState(false);
  return (
    <div className={"cvStage" + (past ? " isPast" : "")} data-screen-label={label || title}>
      {past && (
        <div className="cvPastBanner">
          <Icon name="history" size={13} />
          <span>Viewing past state — as of <b>{past}</b>. The live page kept moving without you.</span>
          <button type="button" onClick={onReturnNow}>Return to now</button>
        </div>
      )}
      <div className="cvStageHead">
        <div className="cvStageTitleWrap">
          <h2 className="cvStageTitle">{title}</h2>
          <span className="cvStageAsOf tabular">as of {asOf}</span>
          {provenance && (
            <span className="cvProv">
              <button type="button" onClick={() => setShowWhy(!showWhy)} title="Why am I seeing this?"></button>
              {showWhy && <span className="cvProvPop mono">{provenance}</span>}
            </span>
          )}
        </div>
        <div className="cvStageActs">{actions}</div>
      </div>
      <div className="cvStageBody">{children}</div>
    </div>
  );
}

function StageBtn({ children, primary, onClick }) {
  return <button type="button" className={primary ? "cvBtnPrimary" : "cvBtnQuiet"} onClick={onClick}>{children}</button>;
}

// ── Businesses table — two buckets in one surface ────────────────────────
function BusinessesTable({ rows, selection, onToggle, onOpenEntity }) {
  const buckets = [
    { key: "systems", label: "In your systems", sub: "imported from portals, ERP, spreadsheets" },
    { key: "interest", label: "Shown interest", sub: "interest form, email, events, referrals — pre-intake" },
  ];
  return (
    <div className="cvTableWrap">
      {buckets.map((b) => {
        const brs = rows.filter((r) => r.bucket === b.key);
        if (brs.length === 0) return null;
        return (
          <div key={b.key} className="cvBucket">
            <div className="cvBucketHead">
              <span>{b.label}</span>
              <span className="cvBucketSub">{b.sub}</span>
              <span className="cvBucketN tabular">{brs.length}</span>
            </div>
            <table className="cvTable">
              <thead>
                <tr>
                  <th className="cvThCheck"></th><th>Business</th><th>Origin</th><th>Stage</th>
                  <th className="cvThNum">Strength</th><th>Last touch</th><th>Visibility</th>
                </tr>
              </thead>
              <tbody>
                {brs.map((r) => (
                  <tr key={r.id} className={selection.includes(r.id) ? "isSel" : ""}>
                    <td className="cvThCheck">
                      <input type="checkbox" checked={selection.includes(r.id)}
                        onChange={() => onToggle(r.id)} aria-label={"Select " + r.name} />
                    </td>
                    <td>
                      <button type="button" className="cvBizName" onClick={() => r.entity && onOpenEntity(r.id)}>
                        {r.name}{r.warmPath && <span className="cvWarmDot" title="Warm intro available"></span>}
                      </button>
                      <span className="cvBizDomain">{r.domain}</span>
                    </td>
                    <td className="cvCellMut">{r.origin}</td>
                    <td>{r.stage}</td>
                    <td className="cvThNum"><StrengthCell score={r.strength} trend={r.trend} why={r.why} /></td>
                    <td className="cvCellMut">{r.lastTouch}</td>
                    <td><CChip level={r.consent} size="inline" grantedBy={r.grantedBy} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      })}
    </div>
  );
}

// ── Re-engagement shortlist — the demo jewel ─────────────────────────────
function Shortlist({ rows, onShare, onOpenEntity, shared }) {
  return (
    <div className="cvShortlist">
      <div className="cvShortIntro">
        Dormant and never-contacted relationships, ranked by how much history you would be re-opening.
        {shared && <span className="cvShortShared"><CChip level="shared" size="inline" /> Shared to Legacy Sports workspace</span>}
      </div>
      {rows.map((r, i) => (
        <div key={r.id} className="cvShortRow">
          <span className="cvShortRank tabular">{i + 1}</span>
          <div className="cvShortMain">
            <button type="button" className="cvBizName" onClick={() => r.entity && onOpenEntity(r.id)}>{r.name}</button>
            <div className="cvShortWhy">{r.why}</div>
            {r.warmPath && <WarmPath path={window.CanvasData.meridian.warmPath} />}
          </div>
          <div className="cvShortMeta">
            {r.dormantSince
              ? <span className="cvShortDorm">Quiet since <b>{r.dormantSince}</b></span>
              : <span className="cvShortDorm cvShortLive">Active thread</span>}
            <span className="cvCellMut">{r.lastTouch}</span>
          </div>
          <StrengthCell score={r.strength} trend={r.trend} why={r.why} />
        </div>
      ))}
    </div>
  );
}

// ── Entity profile — Meridian ────────────────────────────────────────────
function EntityProfile({ e }) {
  return (
    <div className="cvEntity">
      <div className="cvEntityHead">
        <div>
          <div className="cvEntityName">{e.name}</div>
          <div className="cvEntityMeta">
            <span>{e.domain}</span>
            <span className="mono cvEntityId">{e.stimId}</span>
            <span className="cvEntityStage">{e.stage}</span>
          </div>
          <div className="cvEntityOrigin">{e.origin}</div>
        </div>
        <div className="cvEntityScore">
          <span className="cvEntityScoreN tabular">{e.strength.score}</span>
          <span className="cvEntityScoreRead">{e.strength.read}</span>
          <div className="cvEntityScoreWhy">
            {e.strength.why.map((w) => <div key={w}>· {w}</div>)}
          </div>
        </div>
      </div>

      <WarmPath path={e.warmPath} defaultOpen />

      <div className="cvEntityCols">
        <div className="cvEntityFacts">
          <div className="cvSectionH">What we know</div>
          {e.facts.map((f) => (
            <div key={f.id} className={"cvFact" + (f.locked ? " isLocked" : "")}>
              {f.locked ? (
                <div className="cvFactValue cvFactLock">
                  <Icon name="lock" size={13} />
                  <span>A fact exists here — not shared with you.</span>
                </div>
              ) : (
                <div className="cvFactValue">{f.value}</div>
              )}
              <div className="cvFactDesc">
                <span>{f.name}</span>
                <CChip level={f.consent} size="inline" grantedBy={f.grantedBy} />
                {f.conf != null && !f.locked && <span className="mono cvFactConf">conf {f.conf.toFixed(2)}</span>}
                {f.note && <span className="cvFactNote">{f.note}</span>}
              </div>
            </div>
          ))}
        </div>
        <div className="cvEntitySide">
          <div className="cvSectionH">Signals</div>
          {e.signals.map((s) => <div key={s} className="cvSignal">{s}</div>)}
          <div className="cvSectionH" style={{ marginTop: 16 }}>The journey</div>
          <div className="cvJourney">
            {e.journey.map((m, i) => (
              <div key={m.t + m.e} className="cvJRow">
                <div className="cvJRail">
                  <span className={"cvJDot" + (i === e.journey.length - 1 ? " isNow" : "")}></span>
                  {i < e.journey.length - 1 && <span className="cvJLine"></span>}
                </div>
                <div className="cvJMain">
                  <div className="cvJTop">
                    <span className="cvJDate tabular">{m.t}</span>
                    <span className="cvJStage">{m.stage}</span>
                  </div>
                  <div className="cvJEvent">{m.e}</div>
                  <div className="cvJWhy mono">{m.why}</div>
                </div>
                <div className="cvJScore">
                  <span className="tabular cvJScoreN">{m.s}</span>
                  {m.d && <span className="cvJDelta tabular">{m.d}</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Relationship intelligence — network graph ───────────────────────────
const RG_NODES = [
  { id: "org", label: "Your org", type: "self", x: 320, y: 210, r: 34 },
  { id: "meridian", label: "Sandy Alexander", type: "vendor", x: 150, y: 96, r: 22, sub: "Active vendor · 3yr", strength: 0.92 },
  { id: "doyle", label: "Doyle Security", type: "vendor", x: 118, y: 236, r: 20, sub: "Active vendor · 2yr · renewal due", strength: 0.74 },
  { id: "mag", label: "MAG Resources", type: "icp", x: 176, y: 342, r: 18, sub: "ICP match · warm intro ready", strength: 0.61 },
  { id: "la28", label: "LA28", type: "partner", x: 486, y: 92, r: 24, sub: "Partner org · 24 shared vendors", strength: 0.88 },
  { id: "nynj", label: "NYNJ Host Cmte", type: "partner", x: 540, y: 210, r: 22, sub: "Partner org · 61 shared vendors", strength: 0.83 },
  { id: "eventions", label: "Eventions", type: "network", x: 470, y: 336, r: 17, sub: "Stimulus network · not yet added", strength: 0.34 },
  { id: "katalyst", label: "Katalyst", type: "network", x: 356, y: 372, r: 16, sub: "Stimulus network · FIFA alum", strength: 0.3 },
];
const RG_EDGES = [
  ["org", "meridian", 0.92], ["org", "doyle", 0.74], ["org", "mag", 0.61],
  ["org", "la28", 0.88], ["org", "nynj", 0.83], ["org", "eventions", 0.34], ["org", "katalyst", 0.3],
  ["la28", "meridian", 0.5], ["nynj", "katalyst", 0.42], ["la28", "eventions", 0.4], ["meridian", "mag", 0.3],
];
const RG_COLORS = { self: "var(--green-9)", vendor: "#1D9E75", partner: "#0C447C", icp: "#854F0B", network: "var(--muted-foreground)" };
const RG_LEGEND = [
  { type: "vendor", label: "Active vendors" }, { type: "partner", label: "Partner orgs" },
  { type: "icp", label: "ICP matches" }, { type: "network", label: "Network (not added)" },
];

function RelationshipGraph() {
  const [hot, setHot] = React.useState(null);
  const byId = React.useMemo(() => Object.fromEntries(RG_NODES.map((n) => [n.id, n])), []);
  const active = hot || "org";
  const isLit = (id) => id === active || RG_EDGES.some((e) => (e[0] === active && e[1] === id) || (e[1] === active && e[0] === id));
  const focus = byId[hot] || null;
  return (
    <div className="cvReportSection cvIn">
      <div className="cvSectionH">Relationship intelligence</div>
      <div className="rgWrap">
        <div className="rgCanvas">
          <svg viewBox="0 0 640 420" className="rgSvg" role="img" aria-label="Relationship network graph">
            {RG_EDGES.map(([a, b, w]) => {
              const na = byId[a], nb = byId[b];
              const lit = a === active || b === active;
              return <line key={a + b} x1={na.x} y1={na.y} x2={nb.x} y2={nb.y}
                stroke={lit ? "var(--green-9)" : "var(--border-strong)"} strokeWidth={1 + w * (lit ? 4 : 2.5)}
                strokeOpacity={lit ? 0.55 : 0.28} strokeLinecap="round" />;
            })}
            {RG_NODES.map((n) => {
              const lit = isLit(n.id);
              return (
                <g key={n.id} className="rgNode" opacity={lit ? 1 : 0.32}
                  onMouseEnter={() => n.id !== "org" && setHot(n.id)} onMouseLeave={() => setHot(null)}
                  style={{ cursor: n.id === "org" ? "default" : "pointer" }}>
                  <circle cx={n.x} cy={n.y} r={n.r} fill={RG_COLORS[n.type]}
                    stroke={n.id === active ? "var(--foreground)" : "var(--card)"} strokeWidth={n.id === active ? 2.5 : 2} />
                  {n.type === "network" && <circle cx={n.x} cy={n.y} r={n.r} fill="none" stroke={RG_COLORS.network} strokeWidth="1.5" strokeDasharray="3 3" />}
                  <text x={n.x} y={n.y + n.r + 13} textAnchor="middle" className="rgLabel"
                    fill={lit ? "var(--foreground)" : "var(--muted-foreground)"}>{n.label}</text>
                </g>
              );
            })}
          </svg>
          <div className="rgLegend">
            {RG_LEGEND.map((l) => (
              <span key={l.type} className="rgLegendItem"><span className="rgSwatch" style={{ background: RG_COLORS[l.type] }}></span>{l.label}</span>
            ))}
          </div>
        </div>
        <div className="rgAside">
          {focus ? (
            <React.Fragment>
              <div className="rgAsideType" style={{ color: RG_COLORS[focus.type] }}>{RG_LEGEND.find((l) => l.type === focus.type) ? RG_LEGEND.find((l) => l.type === focus.type).label : "Relationship"}</div>
              <div className="rgAsideName">{focus.label}</div>
              <div className="rgAsideSub">{focus.sub}</div>
              <div className="rgBar"><span className="rgBarLabel">Relationship strength</span>
                <div className="rgBarTrack"><div className="rgBarFill" style={{ width: Math.round(focus.strength * 100) + "%" }}></div></div>
                <span className="rgBarVal tabular">{Math.round(focus.strength * 100)}%</span>
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="rgAsideType" style={{ color: "var(--green-11)" }}>Your relationship graph</div>
              <div className="rgAsideName">7 direct relationships</div>
              <div className="rgAsideSub">3 active vendors, 2 partner orgs sharing 85 vendors, and 2 network businesses not yet added. Hover any node to trace who connects to whom.</div>
              <div className="rgStats">
                <div className="rgStat"><span className="rgStatN tabular">85</span><span className="rgStatL">shared via partners</span></div>
                <div className="rgStat"><span className="rgStatN tabular">1</span><span className="rgStatL">warm intro ready</span></div>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Composed report (rung 2) — assembles progressively ──────────────────
function ReportView({ report, built, personalize, onPersonalize }) {
  const visible = report.sections.filter((s) =>
    personalize === "sales" ? (s.audience === "sales" || s.id === "headline") : true);
  return (
    <div className="cvReport">
      <div className="cvReportBand">
        <div className="cvReportTitle">{report.title}</div>
        <div className="cvReportSub">{report.subtitle}</div>
        <div className="cvReportLens">
          <span>Lens</span>
          <button type="button" className={personalize === "all" ? "on" : ""} onClick={() => onPersonalize("all")}>Everything</button>
          <button type="button" className={personalize === "sales" ? "on" : ""} onClick={() => onPersonalize("sales")}>Only sales impact</button>
        </div>
      </div>
      {built > 0 && <RelationshipGraph />}
      {visible.map((s, i) => {
        const isBuilt = i < built;
        if (!isBuilt) return (
          <div key={s.id} className="cvReportSkel" aria-hidden="true">
            <div className="cvSkelLine" style={{ width: "34%" }}></div>
            <div className="cvSkelLine" style={{ width: "88%" }}></div>
            <div className="cvSkelLine" style={{ width: "72%" }}></div>
          </div>
        );
        if (s.kind === "metrics") return (
          <div key={s.id} className="cvReportSection cvIn">
            <div className="cvSectionH">{s.title}</div>
            <div className="cvReportMetrics">
              {s.items.map((m) => (
                <div key={m.label} className="cvReportMetric">
                  <span className="cvReportN tabular">{m.n}</span>
                  <span className="cvReportL">{m.label}</span>
                  <span className="cvReportS">{m.sub}</span>
                </div>
              ))}
            </div>
          </div>
        );
        return (
          <div key={s.id} className="cvReportSection cvIn">
            <div className="cvSectionH">{s.title}</div>
            {s.rows.map((r) => (
              <div key={r.t} className="cvReportRow">
                <span className="cvReportRowT">{r.t}</span>
                <span className="cvReportRowD">{r.d}</span>
              </div>
            ))}
          </div>
        );
      })}
      {built < visible.length && <div className="cvReportBuilding">Assembling — {built} of {visible.length} sections</div>}
    </div>
  );
}

// ── Opportunity workspace (compact) ──────────────────────────────────────
function OpportunityBoard({ onOpenEntity }) {
  return (
    <div className="cvOpp">
      <div className="cvOppCard">
        <div className="cvOppTitle">Opening-ceremony catering — RFX</div>
        <div className="cvOppMeta"><span>Open · responses due Aug 15</span><span className="cvCellMut">Owner: you</span></div>
        <div className="cvSectionH" style={{ marginTop: 12 }}>Match candidates</div>
        {[
          { id: "meridian", n: "Meridian Catering Co.", why: "FIFA venue history at scale · certs current · warm path via Sam Cole", s: 41 },
          { id: "skyline", n: "Skyline AV & Staging", why: "Adjacent scope: staging + power for banquet venues · shared crew leads", s: 38 },
          { id: "pacifica", n: "Pacifica Food Group", why: "Two meetings in 2025 · certs current · no venue record at this scale", s: 33 },
        ].map((m) => (
          <div key={m.id} className="cvOppMatch">
            <button type="button" className="cvBizName" onClick={() => onOpenEntity(m.id)}>{m.n}</button>
            <span className="cvOppWhy">{m.why}</span>
            <span className="tabular cvOppS">{m.s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Share spaces — cross-org rows carry consent + provenance ─────────────
function SharedSpaces({ shortlistShared }) {
  return (
    <div className="cvShared">
      <div className="cvSharedCard">
        <div className="cvSharedHead">
          <span className="cvSharedName">LA28 ↔ Legacy Sports Partners</span>
          <CChip level="shared" />
        </div>
        <div className="cvSharedRule">Joint sourcing · LA28's own facts only · <b>no re-export</b></div>
        <div className="cvSectionH" style={{ marginTop: 12 }}>Shared into this workspace</div>
        {shortlistShared && (
          <div className="cvSharedRow">
            <span className="cvSharedRowT">Q3 caterers — shortlist · 12 businesses</span>
            <span className="cvCellMut">shared today · 0 opens so far</span>
          </div>
        )}
        <div className="cvSharedRow">
          <span className="cvSharedRowT">LA28 venue requirements · 4 facts</span>
          <span className="cvCellMut">shared Jun 20 · opened 41 times · every open is on the record</span>
        </div>
        <div className="cvSharedRow">
          <span className="cvSharedRowT">Sustainability criteria · 2 facts</span>
          <span className="cvCellMut">shared Jun 20 · opened 8 times</span>
        </div>
        {!shortlistShared && <div className="cvSharedEmptyHint">Nothing else is shared. Anything you add here crosses an org boundary and will ask for your approval first.</div>}
      </div>
    </div>
  );
}

// ── Home / daily brief ───────────────────────────────────────────────────
function HomeBrief({ role, onAsk }) {
  const items = role === "sam" ? [
    { t: "Marco Silva opened your last email twice yesterday", d: "Meridian founder · your strength 84 · a nudge now lands warm", a: "Draft the nudge" },
    { t: "Procurement's shortlist carries 2 of your relationships", d: "Q3 caterers · your intro could accelerate both", a: "See which ones" },
    { t: "Skyline AV meeting notes are unfiled", d: "Tuesday's meeting · filing keeps the strength score honest", a: "File them" },
  ] : [
    { t: "Share to Legacy Sports awaits your approval", d: "12 businesses · paused since 9:14 AM · nothing crosses without you", a: "Review it" },
    { t: "9 catering vendors have been quiet since 2024", d: "FIFA-era relationships going cold · re-engagement window open", a: "See the nine" },
    { t: "Meridian's FIFA contract window is closing", d: "from imported terms · warm path available via Sam Cole", a: "Open Meridian" },
  ];
  return (
    <div className="cvBrief">
      <div className="cvBriefH">Three things before 10 AM</div>
      {items.map((it) => (
        <div key={it.t} className="cvBriefRow">
          <div className="cvBriefMain">
            <span className="cvBriefT">{it.t}</span>
            <span className="cvBriefD">{it.d}</span>
          </div>
          <button type="button" className="cvBtnQuiet" onClick={() => onAsk(it.a)}>{it.a}</button>
        </div>
      ))}
    </div>
  );
}

// ── Day-zero empty desk — honest absence, one next action ────────────────
function EmptyDesk({ feature }) {
  const copy = {
    home: ["Your desk is quiet because nothing has arrived yet.", "Two sources are still connecting. The first brief writes itself the morning after your first import lands."],
    businesses: ["No businesses yet.", "Connect a portal, ERP export, or spreadsheet — imports land here with their origin attached."],
    opportunities: ["No opportunities yet.", "Your first RFX or project mounts here, with match candidates as they're found."],
    shared: ["Nothing is shared yet.", "Share spaces appear when you open one with a partner org. Nothing crosses without your approval."],
    reports: ["No report yet.", "The first monthly report assembles after thirty days of activity — real numbers only."],
  }[feature] || ["Nothing here yet.", ""];
  return (
    <div className="cvEmpty">
      <div className="cvEmptyGlyph" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 8 8"><path d="M1 7 7 4 1 1v2.4L4.4 4 1 4.6Z" fill="currentColor"></path></svg>
      </div>
      <div className="cvEmptyT">{copy[0]}</div>
      <div className="cvEmptyD">{copy[1]}</div>
      <div className="cvEmptySources">
        <div className="cvEmptySrc"><span className="cvEmptySrcDot isOn"></span> Email — connected · reading 1,204 threads</div>
        <div className="cvEmptySrc"><span className="cvEmptySrcDot isRun"></span> Vendor portal — importing · 213 of 460 records</div>
        <div className="cvEmptySrc"><span className="cvEmptySrcDot"></span> ERP export — not connected</div>
      </div>
      <button type="button" className="cvBtnPrimary">Connect ERP export</button>
    </div>
  );
}

Object.assign(window, {
  StageChrome, StageBtn, BusinessesTable, Shortlist, EntityProfile,
  ReportView, OpportunityBoard, SharedSpaces, HomeBrief, EmptyDesk,
});