// SRI — All Businesses + Pre-intake surfaces. Palette maps to the SRI green system.

const BZ_INTERNAL = {
  vendors: [
    { featured: true, logo: "SA", n: "Sandy Alexander", cat: "Print & signage · 3yr relationship", tag: { c: "active", t: "Active vendor" }, sig: { i: "sparkles", t: "Viewed by LA28 and NYNJ this week — 2 external orgs tracking this vendor" }, foot: "Last touchpoint 2d ago", right: "FIFA alum", entityId: "meridian" },
    { logo: "DS", n: "Doyle Security Services", cat: "Crowd management · 2yr relationship", tag: { c: "active", t: "Active vendor" }, sig: { i: "exchange", t: "Marketing searched \u201cevent sponsors\u201d — Doyle matches. Expansion signal." }, foot: "Contract expires 30d", right: "\u26a0 Renewal due", rightWarn: true },
    { logo: "MG", n: "MAG Resources", cat: "Staffing · 18mo relationship", tag: { c: "partner", t: "ICP match" }, sig: { i: "sparkles", t: "Fits your Sales ICP. Procurement relationship warm enough for a warm intro." }, foot: "Last touchpoint 1wk ago" },
  ],
  partners: [
    { logo: "LA", logoBlue: true, n: "LA28 Organizing Committee", cat: "Event org · Cross-org workspace active", tag: { c: "partner", t: "Partner" }, sig: { i: "share", t: "24 vendors shared · 3 open opportunities co-managed" }, foot: "Active 1h ago" },
    { logo: "NY", logoBlue: true, n: "NYNJ Host Committee", cat: "Event org · Cross-org workspace active", tag: { c: "partner", t: "Partner" }, sig: { i: "share", t: "61 vendors shared · FIFA alum network fully accessible" }, foot: "Active 4h ago" },
  ],
  preintake: [
    { logo: "AE", n: "Apex Event Group", cat: "Event production · Score 91", tag: { c: "intake", t: "Pre-intake" }, sig: { i: "clipboard", t: "Submitted via LA28 business interest form · 2h ago" }, foot: "Pending review", footIcon: "eye", score: "91" },
  ],
};
const BZ_EXTERNAL = [
  { logo: "EP", n: "Eventions Productions", cat: "Event production · Los Angeles", sig: { i: "sparkles", t: "In LA28 ecosystem · Worked with 3 orgs in your network" } },
  { logo: "KP", n: "Katalyst Productions", cat: "Experiential · FIFA alum", sig: { i: "star", t: "Worked with NYNJ Host Committee · Strong FIFA performance record" } },
  { logo: "MS", n: "Meridian Security Partners", cat: "Security · Multi-city event experience", sig: { i: "sparkles", t: "Submitted pre-intake for NYNJ — profile already enriched" } },
];

function BizCard({ c, onOpenEntity, ext }) {
  return (
    <div className={"bzCard" + (c.featured ? " isFeatured" : "")}
      onClick={c.entityId ? () => onOpenEntity(c.entityId) : undefined}
      style={c.entityId ? { cursor: "pointer" } : null}>
      {c.tag && <div className="bzRelBadge"><span className={"owTag t-" + c.tag.c}>{c.tag.t}</span></div>}
      <div className="bzCardTop">
        <div className={"bzLogo" + (ext ? " isExt" : "") + (c.logoBlue ? " isBlue" : "")}>{c.logo}</div>
        <div className="bzMeta">
          <div className="bzName">{c.n}</div>
          <div className="bzCat">{c.cat}</div>
        </div>
      </div>
      <div className="bzSignal"><Icon name={c.sig.i} size={12} />{c.sig.t}</div>
      <div className="bzFoot">
        {ext ? (
          <span className="bzExtPill"><Icon name="globe" size={11} /> Stimulus network</span>
        ) : (
          <span className="bzFootL"><Icon name={c.footIcon || "clock"} size={11} />{c.foot}</span>
        )}
        {ext ? (
          <button type="button" className="bzAddBtn">+ Add to your network</button>
        ) : c.score ? (
          <span className="owTag t-intake">Score {c.score}</span>
        ) : c.right ? (
          <span className={"bzRight" + (c.rightWarn ? " isWarn" : "")}>{c.right}</span>
        ) : null}
      </div>
    </div>
  );
}

function AllBusinesses({ onOpenEntity }) {
  const [net, setNet] = React.useState("internal");
  return (
    <div className="bzRoot">
      <div className="bzHead">
        <p className="bzHeadDesc">Your vendor network and the broader Stimulus ecosystem — internal relationships and external discovery in one place.</p>
        <div className="bzHeadBtns">
          <button type="button" className="owBtn owBtnGhost"><Icon name="download" size={12} /> Export</button>
          <button type="button" className="owBtn owBtnPrimary"><Icon name="plus" size={12} /> Add business</button>
        </div>
      </div>

      <div className="bzNetToggle">
        <button type="button" className={"bzNetBtn" + (net === "internal" ? " isOn" : "")} onClick={() => setNet("internal")}>
          <Icon name="building" size={13} /> Your network <span className="bzNetCount">284</span></button>
        <button type="button" className={"bzNetBtn" + (net === "external" ? " isOn" : "")} onClick={() => setNet("external")}>
          <Icon name="globe" size={13} /> Stimulus network <span className="bzNetCount">12.4k</span></button>
      </div>

      <div className="bzToolbar">
        <div className="bzSearch"><Icon name="search" size={14} /><input type="text" placeholder="Filter businesses…" /></div>
        <select className="owSelect"><option>All categories</option><option>Production</option><option>Security</option><option>Staffing</option><option>Technology</option></select>
        {net === "internal" && <select className="owSelect"><option>All statuses</option><option>Active vendor</option><option>Partner</option><option>ICP match</option><option>Pre-intake</option></select>}
        <div className="bzViewToggle">
          <button type="button" className="bzVtBtn isOn"><Icon name="grid" size={14} /></button>
          <button type="button" className="bzVtBtn"><Icon name="list" size={14} /></button>
        </div>
      </div>

      {net === "internal" ? (
        <React.Fragment>
          <div className="owSectionLabel">Active vendor relationships <span className="bzCountMut">(18)</span></div>
          <div className="bzGrid">{BZ_INTERNAL.vendors.map((c, i) => <BizCard key={i} c={c} onOpenEntity={onOpenEntity} />)}</div>
          <div className="owSectionLabel">Partners &amp; co-sell <span className="bzCountMut">(6)</span></div>
          <div className="bzGrid">{BZ_INTERNAL.partners.map((c, i) => <BizCard key={i} c={c} onOpenEntity={onOpenEntity} />)}</div>
          <div className="owSectionLabel">In sourcing <span className="bzCountMut">(24)</span></div>
          <div className="bzGrid">{BZ_INTERNAL.preintake.map((c, i) => <BizCard key={i} c={c} onOpenEntity={onOpenEntity} />)}</div>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <div className="bzExtBanner"><Icon name="globe" size={14} /><span>Businesses in the Stimulus network not yet in your org's network. Add any business to bring it into your workspace and start tracking the relationship.</span></div>
          <div className="owSectionLabel">Recommended for your org <span className="bzCountMut">(based on your categories and event history)</span></div>
          <div className="bzGrid">{BZ_EXTERNAL.map((c, i) => <BizCard key={i} c={c} ext onOpenEntity={onOpenEntity} />)}</div>
        </React.Fragment>
      )}
    </div>
  );
}

// ── Pre-intake ────────────────────────────────────────────────────────────
const PI_CHANNELS = [
  { key: "ev", icon: "calendar", label: "Events", n: "38", sub: "Eventbrite · signups", on: true },
  { key: "form", icon: "clipboard", label: "Interest forms", n: "61", sub: "Stimulus forms · links" },
  { key: "import", icon: "upload", label: "Imported", n: "44", sub: "Word · Airtable · CSV" },
  { key: "email", icon: "mail", label: "Email", n: "29", sub: "Inbound outreach" },
  { key: "social", icon: "linkedin", label: "Social", n: "12", sub: "LinkedIn" },
];
const PI_FORMS = [
  { n: "LA28 — Business Interest Form", url: "getstimulus.ai/forms/la28-business-interest", subs: "147", views: "2.4k" },
  { n: "FIFA World Cup 2026 — Vendor Interest Form", url: "getstimulus.ai/forms/fifa-wc26-vendor-interest", subs: "312", views: "5.1k" },
];
const PI_SUBS = [
  { av: "AE", n: "Apex Event Group", cat: "Event production · Los Angeles", src: { c: "form", i: "clipboard", t: "LA28 form" }, score: "91", sc: "hi", time: "2h ago", actions: ["approve", "match"] },
  { av: "MS", n: "Meridian Security Partners", cat: "Security services · New York", src: { c: "event", i: "calendar", t: "NYC Procurement Summit" }, score: "88", sc: "hi", time: "5h ago", actions: ["approve", "match"] },
  { av: "CS", n: "City Staffing Co.", cat: "Hospitality staffing · Philadelphia", src: { c: "import", i: "upload", t: "Airtable import" }, score: "72", sc: "mid", time: "1d ago", actions: ["approve", "match"] },
  { av: "TW", n: "Top Brand Worldwide", cat: "Experiential marketing · Chicago", src: { c: "email", i: "mail", t: "Inbound email" }, score: "68", sc: "mid", time: "2d ago", actions: ["approve", "match"] },
  { av: "RV", n: "Raven Visuals", cat: "Photography & video · Atlanta", src: { c: "social", i: "linkedin", t: "LinkedIn DM" }, score: "48", sc: "lo", time: "3d ago", actions: ["review"] },
];

function PreIntake({ onOpenEntity }) {
  return (
    <div className="piRoot">
      <div className="bzHead">
        <p className="bzHeadDesc">Every business that expressed interest before your formal process — from events, forms, imports, and outreach. All in one place.</p>
        <div className="bzHeadBtns">
          <button type="button" className="owBtn owBtnGhost"><Icon name="plus" size={12} /> New interest form</button>
          <button type="button" className="owBtn owBtnPrimary">Review all</button>
        </div>
      </div>

      <div className="owSectionLabel">Capture channels — where business interest is coming from</div>
      <div className="piChannels">
        {PI_CHANNELS.map((c) => (
          <div key={c.key} className={"piCh" + (c.on ? " isOn" : "")}>
            <div className={"piChIcon is-" + c.key}><Icon name={c.icon} size={14} /></div>
            <div className="piChLabel">{c.label}</div>
            <div className="piChCount tabular">{c.n}</div>
            <div className="piChSub">{c.sub}</div>
          </div>
        ))}
      </div>

      <div className="piFormsHead">
        <div className="owSectionLabel" style={{ margin: 0 }}>Your active interest forms — shareable links</div>
        <button type="button" className="owBtn owBtnGhost" style={{ padding: "4px 10px" }}><Icon name="plus" size={11} /> New form</button>
      </div>
      {PI_FORMS.map((f, i) => (
        <div key={i} className="piForm">
          <div className="piFormAv"><Icon name="bolt" size={13} /></div>
          <div>
            <div className="piFormName">{f.n}</div>
            <div className="piFormUrl mono">{f.url}</div>
          </div>
          <div className="piFormRight">
            <div className="piFormStat"><div className="piFormStatV tabular">{f.subs}</div><div className="piFormStatL">submissions</div></div>
            <div className="piFormStat"><div className="piFormStatV tabular">{f.views}</div><div className="piFormStatL">views</div></div>
            <div className="piFormBtns">
              <button type="button" className="piCopyBtn"><Icon name="copy" size={11} /> Copy link</button>
              <button type="button" className="piEmbedBtn">Embed on site</button>
            </div>
          </div>
        </div>
      ))}

      <div className="piSubsHead">
        <div className="owSectionLabel" style={{ margin: 0 }}>All submissions <span className="bzCountMut">(184 pending review)</span></div>
        <div className="piSubsFilters">
          <select className="owSelect" style={{ minWidth: 0 }}><option>All channels</option><option>Events</option><option>Forms</option><option>Imported</option><option>Email</option></select>
          <select className="owSelect" style={{ minWidth: 0 }}><option>All scores</option><option>80+</option><option>60–79</option><option>Below 60</option></select>
        </div>
      </div>
      {PI_SUBS.map((s, i) => (
        <div key={i} className="piSub">
          <div className="piSubAv">{s.av}</div>
          <div className="piSubInfo">
            <div className="piSubName">{s.n}</div>
            <div className="piSubCat">{s.cat}</div>
          </div>
          <span className={"piSrcChip is-" + s.src.c}><Icon name={s.src.i} size={11} /> {s.src.t}</span>
          <div className={"piScore is-" + s.sc}>{s.score}</div>
          <div className="piSubTime">{s.time}</div>
          <div className="piSubActions">
            {s.actions.includes("approve") && <button type="button" className="piSaBtn isApprove">Approve to profile</button>}
            {s.actions.includes("match") && <button type="button" className="piSaBtn">Match to opp</button>}
            {s.actions.includes("review") && <button type="button" className="piSaBtn">Review</button>}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Lists ──────────────────────────────────────────────────────────────────
const LI_LISTS = [
  { icon: "shield", n: "Security vendors — MetLife Stadium", count: "14 businesses", views: "34 views", upd: "Updated 2h ago",
    badge: { i: "share", t: "Shared with NYNJ" } },
  { icon: "sparkles", n: "Event production — LA28 opening weekend", count: "9 businesses", views: "18 views", upd: "Updated 1d ago",
    badge: { i: "share", t: "Shared with LA28" } },
  { icon: "users", n: "ICP matches — vendors who could be customers", count: "11 businesses", views: "6 views", upd: "Updated today",
    badge: { i: "building", t: "Sales team", green: true } },
  { icon: "star", n: "FIFA World Cup alumni — top performers", count: "22 businesses", views: "91 views", upd: "Updated 3d ago",
    badge: { i: "share", t: "Shared with LA28 · NYNJ" } },
];

function Lists({ onOpenEntity }) {
  return (
    <div className="liRoot">
      <div className="bzHead">
        <p className="bzHeadDesc"><strong>Lists — share the right businesses with the right people.</strong> Curated groups of businesses shared internally with teams or externally with partner orgs. Every share is tracked — who received it, who viewed it, and which profiles generated interest.</p>
        <div className="bzHeadBtns">
          <button type="button" className="owBtn owBtnPrimary"><Icon name="plus" size={12} /> New list</button>
        </div>
      </div>
      <div className="liGrid">
        {LI_LISTS.map((l, i) => (
          <div key={i} className="liCard">
            <div className="liTop">
              <div className="liIcon"><Icon name={l.icon} size={14} /></div>
              <div>
                <div className="liName">{l.n}</div>
                <div className="liCount">{l.count}</div>
              </div>
            </div>
            <div className="liMeta">
              <span className="liMetaItem"><Icon name="eye" size={11} />{l.views}</span>
              <span className="liMetaItem"><Icon name="clock" size={11} />{l.upd}</span>
              <span className={"liShared" + (l.badge.green ? " isGreen" : "")}><Icon name={l.badge.i} size={11} />{l.badge.t}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { AllBusinesses, PreIntake, Lists });