// install.jsx — Install modal + Library + Teams + Collection + Publish

const { useState: useStateI, useEffect: useEffectI } = React;

// ─────────────────────────────────────── INSTALL MODAL ───────────────────────────────────────
// Mock list of the user's IrisGo agents — in a real product this comes from
// the user's workspace. Kept short so the picker stays a single column.
const USER_AGENTS = [
  { id: "iris-main",   name: "Iris",          role: "Personal assistant",   emoji: "🌿" },
  { id: "scout",       name: "Scout",         role: "Research agent",       emoji: "🔭" },
  { id: "ledger",      name: "Ledger",        role: "Finance ops",          emoji: "📒" },
  { id: "drafter",     name: "Drafter",       role: "Writing assistant",    emoji: "✍️" },
];

function InstallModal({ skill, open, onClose, onConfirm }) {
  const [target, setTarget] = useStateI("all");        // "all" | "specific"
  const [agentId, setAgentId] = useStateI(USER_AGENTS[0].id);
  const [env, setEnv] = useStateI(null);
  const [version, setVersion] = useStateI("latest");
  const [autoUpdate, setAutoUpdate] = useStateI(true);
  const [phase, setPhase] = useStateI("config"); // config | installing | success

  useEffectI(() => {
    if (open) {
      setPhase("config");
      setEnv(skill?.compatibility?.[0] || null);
      setVersion("latest");
      setAutoUpdate(true);
      setTarget("all");
      setAgentId(USER_AGENTS[0].id);
    }
  }, [open, skill]);

  if (!open || !skill) return null;

  const handleInstall = () => {
    setPhase("installing");
    setTimeout(() => setPhase("success"), 1100);
  };

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(15,17,21,0.42)",
      zIndex: 90, display: "flex", justifyContent: "center", alignItems: "flex-start",
      paddingTop: "8vh",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 540, maxWidth: "92vw",
        background: "var(--bg)", borderRadius: 16,
        boxShadow: "var(--sh-pop)",
        overflow: "hidden", display: "flex", flexDirection: "column",
        maxHeight: "84vh",
      }}>
        {/* Header */}
        <div className="row gap-3" style={{ padding: 18, borderBottom: "1px solid var(--line)", alignItems: "flex-start" }}>
          <SkillAvatar skill={skill} size={44} />
          <div className="grow col" style={{ minWidth: 0 }}>
            <div style={{ font: "600 16px/1.2 var(--font-display)" }}>
              {phase === "success" ? "Installed" : phase === "installing" ? "Installing…" : "Install skill"}
            </div>
            <div className="meta">{skill.name} · {skill.author}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.X size={14} /></button>
        </div>

        {/* CONFIG */}
        {phase === "config" && (
          <div className="col gap-5 scroll-thin" style={{ padding: 22, overflow: "auto" }}>
            {/* Target */}
            <div className="col gap-2">
              <div className="eyebrow">Install to</div>
              <div className="row gap-2 wrap">
                {[
                  { id: "all", label: "All my agents", sub: `${USER_AGENTS.length} agents`, icon: "Users" },
                  { id: "specific", label: "A specific agent", sub: "Choose one below", icon: "User" },
                ].map(t => {
                  const G = I[t.icon];
                  const active = target === t.id;
                  return (
                    <button key={t.id} onClick={() => setTarget(t.id)} className="unstyled"
                      style={{
                        flex: "1 1 150px", padding: 12,
                        border: "1px solid " + (active ? "var(--ink)" : "var(--line-strong)"),
                        background: active ? "var(--bg-muted)" : "var(--bg)",
                        borderRadius: 10,
                        display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start",
                        cursor: "pointer",
                      }}>
                      <G size={14} style={{ color: active ? "var(--ink)" : "var(--ink-3)" }} />
                      <div style={{ font: "500 13px/1.2 var(--font-sans)" }}>{t.label}</div>
                      <div className="meta">{t.sub}</div>
                    </button>
                  );
                })}
              </div>

              {target === "specific" && (
                <div className="card col" style={{ padding: 0, marginTop: 6 }}>
                  {USER_AGENTS.map((a, i) => {
                    const active = agentId === a.id;
                    return (
                      <button key={a.id} onClick={() => setAgentId(a.id)} className="unstyled"
                        style={{
                          display: "flex", alignItems: "center", gap: 12,
                          padding: "10px 14px", textAlign: "left",
                          borderTop: i ? "1px solid var(--line-soft)" : "none",
                          background: active ? "var(--accent-soft)" : "transparent",
                          cursor: "pointer",
                        }}>
                        <span style={{
                          width: 28, height: 28, borderRadius: 8,
                          background: "var(--bg-muted)", display: "inline-flex",
                          alignItems: "center", justifyContent: "center", fontSize: 14,
                        }}>{a.emoji}</span>
                        <div className="col grow" style={{ minWidth: 0 }}>
                          <div style={{ font: "500 13px/1.2 var(--font-sans)" }}>{a.name}</div>
                          <div className="meta">{a.role}</div>
                        </div>
                        {active && <I.Check size={14} style={{ color: "var(--accent)" }} />}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>

            {/* Environment */}
            {skill.compatibility.length > 1 && (
              <div className="col gap-2">
                <div className="eyebrow">Environment</div>
                <FilterChips
                  value={env}
                  options={skill.compatibility}
                  onChange={(v) => setEnv(v)}
                />
              </div>
            )}

            {/* Version */}
            <div className="col gap-2">
              <div className="eyebrow">Version</div>
              <div className="row gap-2">
                {[
                  { id: "latest", label: `Latest (${skill.version})`, sub: "Auto-update minor" },
                  { id: "pin", label: `Pin ${skill.version}`, sub: "Manual update" },
                ].map(v => {
                  const active = version === v.id;
                  return (
                    <button key={v.id} onClick={() => setVersion(v.id)} className="unstyled"
                      style={{
                        flex: 1, padding: 12,
                        border: "1px solid " + (active ? "var(--ink)" : "var(--line-strong)"),
                        background: active ? "var(--bg-muted)" : "var(--bg)",
                        borderRadius: 10, display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start", cursor: "pointer",
                      }}>
                      <div style={{ font: "500 13px/1.2 var(--font-sans)" }}>{v.label}</div>
                      <div className="meta">{v.sub}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Permissions summary */}
            <div className="col gap-2">
              <div className="eyebrow">This skill will be allowed to</div>
              <div className="card col" style={{ padding: 0 }}>
                {skill.permissions.map((p, i) => (
                  <div key={p} className="row gap-3" style={{
                    padding: "10px 14px",
                    borderTop: i ? "1px solid var(--line-soft)" : "none",
                    alignItems: "center",
                  }}>
                    <I.Check size={14} style={{ color: "var(--green-600)", flex: "0 0 auto" }} />
                    <span className="body-sm" style={{ color: "var(--ink-1)" }}>{p}</span>
                  </div>
                ))}
              </div>
              <div className="meta">Permissions are scoped to this skill and revoked on uninstall.</div>
            </div>

            <div className="row between" style={{ paddingTop: 4, borderTop: "1px solid var(--line)", marginTop: 4 }}>
              <label className="row gap-2" style={{ cursor: "pointer", paddingTop: 12 }}>
                <input type="checkbox" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)}
                  style={{ accentColor: "var(--accent)" }} />
                <span className="body-sm">Notify me about new versions</span>
              </label>
            </div>
          </div>
        )}

        {phase === "installing" && (
          <div className="col gap-4 center" style={{ padding: 56 }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--bg-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Spinner />
            </div>
            <div className="col gap-1 center">
              <div style={{ font: "500 14px/1.3 var(--font-sans)" }}>Installing {skill.name}…</div>
              <div className="meta">Verifying signatures · resolving dependencies · registering permissions</div>
            </div>
          </div>
        )}

        {phase === "success" && (
          <div className="col gap-4" style={{ padding: 24 }}>
            <div className="row gap-3 center">
              <span style={{ width: 36, height: 36, borderRadius: 999, background: "var(--green-50)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <I.Check size={18} />
              </span>
              <div className="col">
                <div style={{ font: "600 15px/1.2 var(--font-display)" }}>
                  {target === "all" ? "Installed for all your agents" : `Installed for ${USER_AGENTS.find(a => a.id === agentId)?.name}`}
                </div>
                <div className="meta">
                  {skill.name} v{skill.version} · {target === "all"
                    ? `${USER_AGENTS.length} agents`
                    : USER_AGENTS.find(a => a.id === agentId)?.role}
                </div>
              </div>
            </div>

            <div className="card col" style={{ padding: 0 }}>
              <div className="eyebrow" style={{ padding: "12px 14px 0" }}>Try it now</div>
              <div className="mono" style={{ padding: 14, color: "var(--ink-1)", fontSize: 12.5 }}>
                {skill.sample_input}
              </div>
              <div className="row gap-2" style={{ padding: "0 14px 14px" }}>
                <button className="btn btn-primary"><I.Play size={12} /> Run sample</button>
                <button className="btn">Open docs</button>
              </div>
            </div>

            <div className="col gap-2">
              <div className="eyebrow">Next steps</div>
              <NextStep icon="Play" t="Run it from chat" d="Type /run or just describe the task — your agent will pick this skill when it fits." />
              <NextStep icon="User" t={target === "all" ? "Scope to one agent later" : "Add to more agents"} d="Change scope anytime from Library → this skill → Agents." />
              <NextStep icon="Bookmark" t="Pair with related skills" d="Secret Scanner and Schema Migrator are commonly installed together." />
            </div>
          </div>
        )}

        {/* Footer */}
        {phase === "config" && (
          <div className="row gap-2 between" style={{ padding: "14px 18px", borderTop: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <span className="meta">{skill.pricing} · {skill.license}</span>
            <div className="row gap-2">
              <button className="btn" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" onClick={handleInstall}>Install {skill.name}</button>
            </div>
          </div>
        )}
        {phase === "success" && (
          <div className="row gap-2 between" style={{ padding: "14px 18px", borderTop: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <button className="btn-ghost btn" onClick={() => onConfirm(skill, "library")}>Go to library</button>
            <button className="btn btn-primary" onClick={() => onConfirm(skill, "close")}>Done</button>
          </div>
        )}
      </div>
    </div>
  );
}

function NextStep({ icon, t, d }) {
  const G = I[icon];
  return (
    <div className="row gap-3" style={{ padding: 12, border: "1px solid var(--line-soft)", borderRadius: 10, alignItems: "flex-start" }}>
      <span style={{ width: 26, height: 26, borderRadius: 6, background: "var(--iris-50)", color: "var(--iris-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}>
        <G size={13} />
      </span>
      <div className="col" style={{ minWidth: 0 }}>
        <div style={{ font: "500 13px/1.3 var(--font-sans)" }}>{t}</div>
        <div className="meta">{d}</div>
      </div>
    </div>
  );
}

function Spinner() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="var(--line-strong)" strokeWidth="2.5" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.9s" repeatCount="indefinite" />
      </path>
    </svg>
  );
}

// ─────────────────────────────────────── LIBRARY ───────────────────────────────────────
function LibraryScreen({ onOpen, onInstall, installedSet, savedSet }) {
  const [tab, setTab] = useStateI("installed");
  const installed = SKILLS.filter(s => installedSet.has(s.id));
  const saved = SKILLS.filter(s => savedSet.has(s.id));
  const updates = installed.filter(s => ["1 day ago","Yesterday","2 days ago"].includes(s.last_updated));

  const tabs = [
    ["installed", `Installed · ${installed.length}`],
    ["saved", `Saved · ${saved.length}`],
    ["updates", `Updates · ${updates.length}`],
    ["recent", "Recently used"],
  ];

  let list = installed;
  if (tab === "saved") list = saved;
  if (tab === "updates") list = updates;
  if (tab === "recent") list = installed.slice(0, 4);

  return (
    <div className="page col gap-6" style={{ padding: "32px 28px 56px" }}>
      <header className="col gap-2">
        <div className="row gap-2">
          <I.Library size={18} style={{ color: "var(--iris-600)" }} />
          <h1 className="h2" style={{ margin: 0 }}>Your library</h1>
        </div>
        <div className="body-sm text-3">Skills you've installed, saved, or had approved for your workspace.</div>
      </header>

      <div className="row" style={{ borderBottom: "1px solid var(--line)", gap: 4 }}>
        {tabs.map(([id, label]) => (
          <button key={id} className="unstyled" onClick={() => setTab(id)}
            style={{
              padding: "10px 12px", font: "500 13.5px/1 var(--font-sans)",
              color: tab === id ? "var(--ink)" : "var(--ink-3)",
              borderBottom: tab === id ? "2px solid var(--ink)" : "2px solid transparent",
              marginBottom: -1, cursor: "pointer",
            }}>{label}</button>
        ))}
      </div>

      {tab === "updates" && updates.length > 0 && (
        <div className="card row gap-3" style={{ padding: 14, background: "var(--iris-50)", borderColor: "var(--iris-200)", color: "var(--iris-800)" }}>
          <I.Sparkle size={14} />
          <div className="grow body-sm">{updates.length} {updates.length === 1 ? "skill has" : "skills have"} new versions available.</div>
          <button className="btn btn-sm btn-primary">Update all</button>
        </div>
      )}

      {list.length === 0 ? (
        <div className="card col gap-3 center" style={{ padding: 36, textAlign: "center" }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--bg-muted)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-3)" }}>
            <I.Library size={20} />
          </div>
          <div style={{ font: "600 16px/1.2 var(--font-display)" }}>Nothing here yet.</div>
          <div className="body-sm text-3">Install or save skills from Discover to see them here.</div>
        </div>
      ) : (
        <div className="col gap-2">
          {list.map(s => <SkillRow key={s.id} skill={s} onOpen={onOpen} onInstall={onInstall} installed={installedSet.has(s.id)} />)}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────── TEAMS ───────────────────────────────────────
function TeamsScreen({ onOpen, onInstall, onNav, installedSet }) {
  const approved = SKILLS.filter(s => s.team_approved);
  const pending = SKILLS.filter(s => !s.team_approved && s.badges.includes("verified")).slice(0, 2);

  return (
    <div className="page col gap-7" style={{ padding: "32px 28px 56px" }}>
      <header className="col gap-2">
        <div className="row gap-2 meta">
          <span>Acme workspace</span>
          <span style={{ color: "var(--ink-5)" }}>·</span>
          <span>27 members · 3 admins</span>
        </div>
        <h1 className="h2" style={{ margin: 0 }}>Workspace registry</h1>
        <div className="body-sm text-3" style={{ maxWidth: 620 }}>
          Skills approved for use across Acme. Members install with one click; admins approve, scope, and audit.
        </div>
      </header>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        <Stat label="Approved skills" value={approved.length} delta="+3 this month" />
        <Stat label="Pending review" value={pending.length} delta="2 awaiting" tone="amber" />
        <Stat label="Active installs" value="248" delta="+18 this week" />
        <Stat label="Members using" value="22 / 27" delta="81% adoption" />
      </div>

      <section className="col gap-4">
        <SectionHead
          title="Approved for Acme"
          subtitle="Members can install these without further review."
          action={<button className="btn btn-sm">Manage approvals</button>}
        />
        <div className="col gap-2">
          {approved.map(s => (
            <div key={s.id} className="card row gap-3" style={{ padding: 14, alignItems: "center" }}>
              <SkillAvatar skill={s} size={36} />
              <div className="grow col" style={{ minWidth: 0 }}>
                <div className="row gap-2" style={{ alignItems: "baseline" }}>
                  <span style={{ font: "600 14px/1.2 var(--font-display)" }}>{s.name}</span>
                  <Badge kind="team" compact />
                </div>
                <div className="body-sm text-2" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.one_liner}</div>
              </div>
              <div className="col" style={{ flex: "0 0 auto", textAlign: "right" }}>
                <span className="meta">Approved by @marina · 2w ago</span>
                <span className="meta">{Math.round(s.activation_rate * 27)} of 27 installed</span>
              </div>
              <button className="btn btn-sm" onClick={() => onOpen(s.id, { team: true })}>View</button>
            </div>
          ))}
        </div>
      </section>

      <section className="col gap-4">
        <SectionHead
          title="Pending approval"
          subtitle="Members requested these. Review permissions and approve, or scope to specific groups."
        />
        {pending.length === 0 ? (
          <div className="card body-sm text-3" style={{ padding: 18 }}>Nothing in the queue.</div>
        ) : pending.map(s => (
          <div key={s.id} className="card col gap-3" style={{ padding: 18 }}>
            <div className="row gap-3" style={{ alignItems: "flex-start" }}>
              <SkillAvatar skill={s} size={40} />
              <div className="grow col gap-1" style={{ minWidth: 0 }}>
                <div className="row gap-2" style={{ alignItems: "baseline" }}>
                  <span style={{ font: "600 14.5px/1.2 var(--font-display)" }}>{s.name}</span>
                  {s.badges.map(b => <Badge key={b} kind={b} compact />)}
                </div>
                <div className="body-sm" style={{ color: "var(--ink-2)" }}>{s.one_liner}</div>
                <div className="meta">Requested by @theo · {s.author}</div>
              </div>
              <div className="row gap-2">
                <button className="btn btn-sm" onClick={() => onOpen(s.id, { team: true })}>Review</button>
                <button className="btn btn-sm btn-primary">Approve</button>
              </div>
            </div>
            <div className="row gap-2 wrap" style={{ paddingTop: 10, borderTop: "1px solid var(--line-soft)" }}>
              {s.permissions.map(p => <span key={p} className="tag">{p}</span>)}
            </div>
          </div>
        ))}
      </section>

      <section className="col gap-4">
        <SectionHead title="Private skills" subtitle="Skills published only to your workspace." />
        <div className="card col" style={{ padding: 0 }}>
          {[
            { name: "Acme PII Redactor", desc: "Strips PII before logs leave the firewall.", author: "@security", v: "1.0.4", upd: "Yesterday" },
            { name: "Acme Billing Sync", desc: "Reconciles Stripe events with the warehouse.", author: "@platform", v: "0.6.0", upd: "1 week ago" },
          ].map((p, i) => (
            <div key={p.name} className="row gap-3" style={{
              padding: 14, borderTop: i ? "1px solid var(--line-soft)" : "none",
              alignItems: "center",
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 8,
                background: "var(--ink)", color: "#fff",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                font: "600 12px/1 var(--font-mono)",
              }}>AC</span>
              <div className="grow col" style={{ minWidth: 0 }}>
                <div className="row gap-2" style={{ alignItems: "baseline" }}>
                  <span style={{ font: "600 14px/1.2 var(--font-display)" }}>{p.name}</span>
                  <span className="badge" style={{ background: "var(--ink)", color: "#fff" }}>Private</span>
                </div>
                <div className="body-sm text-2">{p.desc}</div>
              </div>
              <div className="col" style={{ flex: "0 0 auto", textAlign: "right" }}>
                <span className="meta">v{p.v}</span>
                <span className="meta">Updated {p.upd}</span>
              </div>
              <button className="btn btn-sm">Manage</button>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Stat({ label, value, delta, tone }) {
  const c = tone === "amber" ? "var(--amber-700)" : "var(--ink-3)";
  return (
    <div className="card col gap-1" style={{ padding: 16 }}>
      <span className="meta">{label}</span>
      <span className="h2" style={{ margin: 0 }}>{value}</span>
      <span className="meta" style={{ color: c }}>{delta}</span>
    </div>
  );
}

// ─────────────────────────────────────── COLLECTION ───────────────────────────────────────
function CollectionScreen({ collectionId, onOpen, onInstall, installedSet, onNav }) {
  const c = COLLECTIONS.find(x => x.id === collectionId) || COLLECTIONS[0];
  // synth a list of skills for this collection
  const ids = {
    starter: ["pr-reviewer","spec-drafter","csv-analyst","meeting-recap","secret-scanner"],
    founder: ["spec-drafter","meeting-recap","competitive-scan","research-summarizer","ux-copy-editor","csv-analyst"],
    eng: ["pr-reviewer","secret-scanner","schema-migrator","deploy-agent","design-token-sync","csv-analyst"],
    research: ["research-summarizer","competitive-scan","spec-drafter"],
    secure: ["secret-scanner","incident-postmortem","schema-migrator","pr-reviewer","deploy-agent"],
  }[c.id] || [];
  const skills = ids.map(id => SKILLS_BY_ID[id]).filter(Boolean);

  return (
    <div>
      <div style={{
        background: `linear-gradient(135deg, ${c.tone[0]}, ${c.tone[1]})`,
        color: "#fff", padding: "48px 0",
      }}>
        <div className="page col gap-3">
          <div className="row gap-2">
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }} style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", font: "500 13px/1 var(--font-sans)" }}>← All collections</a>
          </div>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Collection · for {c.audience.toLowerCase()}</span>
          <h1 className="h1" style={{ margin: 0, color: "#fff", maxWidth: 720 }}>{c.title}</h1>
          <div className="body" style={{ color: "rgba(255,255,255,0.85)", maxWidth: 620, fontSize: 16 }}>{c.desc}</div>
          <div className="row gap-3 meta" style={{ color: "rgba(255,255,255,0.75)", marginTop: 8 }}>
            <span>{c.count} skills</span>
            <span>·</span>
            <span>Curated by {c.curator}</span>
          </div>
          <div className="row gap-2" style={{ marginTop: 12 }}>
            <button className="btn btn-lg" style={{ background: "#fff", color: c.tone[0], borderColor: "#fff" }}>
              Install all <I.Download size={14} />
            </button>
            <button className="btn btn-lg btn-ghost" style={{ color: "rgba(255,255,255,0.85)" }}>Save collection</button>
          </div>
        </div>
      </div>
      <div className="page" style={{ padding: "32px 28px 56px" }}>
        <div className="col gap-4">
          <SectionHead title="Skills in this collection" subtitle="Install individually or as a set." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
            {skills.map(s => <SkillCard key={s.id} skill={s} onOpen={onOpen} onInstall={onInstall} installed={installedSet.has(s.id)} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────── PUBLISH ───────────────────────────────────────
function PublishScreen() {
  return (
    <div className="page col gap-6" style={{ padding: "32px 28px 56px", maxWidth: 920 }}>
      <header className="col gap-2">
        <h1 className="h2" style={{ margin: 0 }}>Publish a skill</h1>
        <div className="body-sm text-3" style={{ maxWidth: 620 }}>
          Bring your agent capability to IrisGo. Publishing is free; verification and security review take ~3 business days.
        </div>
      </header>

      <div className="card col" style={{ padding: 0 }}>
        {[
          { i: "1", t: "Define metadata", d: "Name, one-liner, category, use cases, supported environments." , done: true},
          { i: "2", t: "Add invocation + samples", d: "Trigger, inputs, outputs, and 1–3 sample runs.", done: true },
          { i: "3", t: "Declare permissions", d: "Network, file system, and command execution scopes.", done: true },
          { i: "4", t: "Submit for security review", d: "Static analysis + behavioral run on a sandbox.", current: true },
          { i: "5", t: "Verify author identity", d: "Domain or org match. Optional but boosts trust score." },
          { i: "6", t: "Publish to public or workspace", d: "Choose visibility and rollout policy." },
        ].map((s, i) => (
          <div key={i} className="row gap-3" style={{
            padding: 16, borderTop: i ? "1px solid var(--line-soft)" : "none",
            alignItems: "flex-start",
            background: s.current ? "var(--iris-50)" : "transparent",
          }}>
            <span style={{
              width: 26, height: 26, borderRadius: 999,
              background: s.done ? "var(--green-600)" : s.current ? "var(--iris-600)" : "var(--bg-muted)",
              color: s.done || s.current ? "#fff" : "var(--ink-3)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              font: "600 12px/1 var(--font-mono)", flex: "0 0 auto",
            }}>{s.done ? <I.Check size={12} /> : s.i}</span>
            <div className="col grow">
              <div className="row gap-2" style={{ alignItems: "baseline" }}>
                <span style={{ font: "600 14px/1.2 var(--font-display)" }}>{s.t}</span>
                {s.done && <span className="meta" style={{ color: "var(--green-700)" }}>Done</span>}
                {s.current && <span className="meta" style={{ color: "var(--iris-700)" }}>In progress</span>}
              </div>
              <div className="body-sm text-2">{s.d}</div>
            </div>
            {s.current && <button className="btn btn-sm btn-primary">Continue</button>}
          </div>
        ))}
      </div>

      <div className="row gap-3 wrap">
        <a href="#" className="card hoverable" style={{ padding: 18, flex: "1 1 280px", display: "flex", flexDirection: "column", gap: 6, textDecoration: "none", color: "inherit" }}>
          <I.Doc size={16} style={{ color: "var(--ink-3)" }} />
          <div style={{ font: "600 14px/1.2 var(--font-display)" }}>Publishing guide</div>
          <div className="body-sm text-2">Format, naming, metadata, and review criteria.</div>
        </a>
        <a href="#" className="card hoverable" style={{ padding: 18, flex: "1 1 280px", display: "flex", flexDirection: "column", gap: 6, textDecoration: "none", color: "inherit" }}>
          <I.Shield size={16} style={{ color: "var(--ink-3)" }} />
          <div style={{ font: "600 14px/1.2 var(--font-display)" }}>Security review checklist</div>
          <div className="body-sm text-2">What we look for: permissions, network calls, command exec.</div>
        </a>
        <a href="#" className="card hoverable" style={{ padding: 18, flex: "1 1 280px", display: "flex", flexDirection: "column", gap: 6, textDecoration: "none", color: "inherit" }}>
          <I.Sparkle size={16} style={{ color: "var(--ink-3)" }} />
          <div style={{ font: "600 14px/1.2 var(--font-display)" }}>Trust badge policy</div>
          <div className="body-sm text-2">How verification, security, and team approval work.</div>
        </a>
      </div>
    </div>
  );
}

window.InstallModal = InstallModal;
window.LibraryScreen = LibraryScreen;
window.TeamsScreen = TeamsScreen;
window.CollectionScreen = CollectionScreen;
window.PublishScreen = PublishScreen;