// SRI — Opportunity Workspace surface: six-persona lens switcher.
// Data lives in sri-opp-data.js (window.SRIOppPersonas). Palette maps to the SRI green system.
function OpportunityWorkspace({ onOpenEntity }) {
  const personas = window.SRIOppPersonas || [];
  const [cur, setCur] = React.useState(0);
  const [tab, setTab] = React.useState("work");
  const p = personas[cur];
  if (!p) return null;

  const dotClass = (d) => "owDot" + (d === "warn" ? " isWarn" : d === "red" ? " isRed" : "");

  const renderMeta = (m, i) => {
    if (m.tag) return <span key={i} className={"owTag t-" + m.tag.tag}>{m.tag.t}</span>;
    return <span key={i} className="owMeta">{m.icon && <Icon name={m.icon === "warn" ? "alert" : m.icon} size={11} />}{m.t}</span>;
  };

  const renderCard = (c, i) => (
    <div key={i} className={"owCard" + (c.pinned ? " isPinned" : "")}
      onClick={c.entityId ? () => onOpenEntity(c.entityId) : undefined}
      style={c.entityId ? { cursor: "pointer" } : null}>
      <div className="owCardTop">
        <div className="owCardTitle">{c.title}</div>
        <span className={"owTag t-" + c.tag.c}>{c.tag.t}</span>
      </div>
      <div className="owCardDesc">{c.desc}</div>
      {c.meta && <div className="owCardMeta">{c.meta.map(renderMeta)}</div>}
      {c.warmth && (
        <div className="owBarRow">
          <span className="owBarLabel">Relationship warmth</span>
          <div className="owBarTrack"><div className="owBarFill" style={{ width: c.warmth.pct + "%", background: c.warmth.color === "warn" ? "#EF9F27" : "#1D9E75" }}></div></div>
          <span className="owBarVal">{c.warmth.val}</span>
        </div>
      )}
      {c.progress && (
        <div className="owBarRow">
          <span className="owBarLabel">{c.progress.label}</span>
          <div className="owBarTrack"><div className="owBarFill" style={{ width: c.progress.pct + "%", background: c.progress.color === "warn" ? "#EF9F27" : "#1D9E75" }}></div></div>
          <span className="owBarVal">{c.progress.val}</span>
        </div>
      )}
      <div className="owCardFoot">
        <span className="owMeta"><span className={dotClass(c.foot.dot)}></span>{c.foot.t}</span>
        <span className="owFootTime">{c.foot.time}</span>
      </div>
    </div>
  );

  const renderBlock = (b, i) => {
    if (b.type === "label") return <div key={i} className="owSectionLabel">{b.text}</div>;
    if (b.type === "signals") return (
      <div key={i} className="owSignals">
        {b.items.map((s, j) => (
          <div key={j} className="owSignal">
            <div className={"owSigIcon is-" + s.icon}><Icon name={s.g === "warn" ? "alert" : s.g} size={13} /></div>
            <div>
              <div className="owSigTitle">{s.title}</div>
              <div className="owSigBody">{s.body}</div>
              <div className="owSigTime">{s.time}</div>
            </div>
          </div>
        ))}
      </div>
    );
    if (b.type === "cards") return <div key={i} className="owCards">{b.items.map(renderCard)}</div>;
    return null;
  };

  return (
    <div className="owRoot">
      <div className="owPersonaBar">
        <span className="owPersonaLabel">Viewing as</span>
        <div className="owPills">
          {personas.map((pp, i) => (
            <button key={pp.key} type="button" className={"owPill" + (i === cur ? " isOn" : "")}
              onClick={() => { setCur(i); setTab("work"); }}>{pp.pill}</button>
          ))}
        </div>
      </div>

      <div className="owCtx"><strong>{p.ctxLead}</strong> {p.ctx}</div>

      <div className="owActions">
        <button type="button" className="owBtn owBtnGhost">{p.b1}</button>
        <button type="button" className="owBtn owBtnPrimary">{p.b2}</button>
      </div>

      <div className="owKpis">
        {p.kpis.map((k, i) => (
          <div key={i} className={"owKpi" + (k.c ? " is-" + k.c : "")}>
            <div className="owKpiLabel">{k.l}</div>
            <div className="owKpiValue tabular">{k.v}</div>
            <div className="owKpiSub">{k.s}</div>
          </div>
        ))}
      </div>

      <div className="owTabs">
        <button type="button" className={"owTab" + (tab === "work" ? " isOn" : "")} onClick={() => setTab("work")}>
          {p.t1}<span className="owBadge">{p.t1c}</span></button>
        <button type="button" className={"owTab" + (tab === "shared" ? " isOn" : "")} onClick={() => setTab("shared")}>
          Shared workspaces<span className="owBadge">{p.t2c}</span></button>
        <button type="button" className={"owTab" + (tab === "arch" ? " isOn" : "")} onClick={() => setTab("arch")}>Archived</button>
      </div>

      {tab === "work" && (
        <div>
          {p.toolbar && (
            <div className="owToolbar">
              {p.toolbar.map((sel, i) => (
                <select key={i} className="owSelect">{sel.map((o) => <option key={o}>{o}</option>)}</select>
              ))}
            </div>
          )}
          {p.work.map(renderBlock)}
        </div>
      )}

      {tab === "shared" && (
        <div>
          <div className="owShDesc">{p.shd}</div>
          <div className="owWsGrid">
            {p.ws.map((w, i) => w.add ? (
              <div key={i} className="owWs isDashed">
                <Icon name="plus" size={20} />
                <div className="owWsName isMuted">{w.n}</div>
                <div className="owWsSub">{w.s}</div>
                <button type="button" className="owOpenBtn" style={{ marginTop: 4 }}>Send invite</button>
              </div>
            ) : (
              <div key={i} className="owWs">
                <div className="owWsHead">
                  <div className={"owWsAv" + (w.int ? " isInternal" : "")}>{w.av}</div>
                  <div>
                    <div className="owWsName">{w.n}</div>
                    <div className="owWsSub">{w.s}</div>
                  </div>
                </div>
                <div className="owWsStats">
                  <div className="owWsStat"><div className="owWsStatV tabular">{w.v1}</div><div className="owWsStatL">{w.l1}</div></div>
                  <div className="owWsStat"><div className="owWsStatV tabular">{w.v2}</div><div className="owWsStatL">{w.l2}</div></div>
                </div>
                <div className="owWsFoot">
                  <span className="owWsFootL"><Icon name="clock" size={11} />{w.f}</span>
                  <button type="button" className="owOpenBtn">Open workspace</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "arch" && (
        <div className="owArch">
          <Icon name="list" size={24} />
          <div className="owArchT">Archived opportunities</div>
          <div className="owArchD">Completed sourcing and engagements stored here for reference and reporting.</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { OpportunityWorkspace });