import { describe, expect, test } from "bun:test";
import { renderToStaticMarkup } from "react-dom/server";
import { SessionCapabilityFrame } from "../../../components/session-capability-frame";

const props = {
  name: "Writing style",
  subtitle: "Reviewed library skill",
  logo: null,
  typeLabel: "Skill",
  description: "Plain-language release notes with consistent structure and tone.",
  skill: true,
  expanded: false,
  complete: false,
  actionLabel: "Review skill",
  note: "Skill content is reviewed separately from permission to use any integration.",
  onOpen: () => {},
  onClose: () => {},
};

describe("compact conversation card states", () => {
  test("suggestion has the preview hierarchy, monogram and reassurance", () => {
    const html = renderToStaticMarkup(<SessionCapabilityFrame {...props} />);
    expect(html).toContain('data-state="suggested"');
    expect(html).toContain("og-session-capability-shell");
    expect(html).toContain("Guidance only · no account access");
    expect(html).toContain("Review skill");
    expect(html).toContain('aria-hidden="true">WR</span>');
    expect(html).not.toContain("sparkles");
  });

  test("setup keeps the compact shell and its dialog opener without an inline form", () => {
    const html = renderToStaticMarkup(
      <SessionCapabilityFrame {...props} expanded>
        <form aria-label="Skill review" />
      </SessionCapabilityFrame>,
    );
    expect(html).toContain('data-state="setup"');
    expect(html.match(/<h3>/g)).toHaveLength(1);
    expect(html).not.toContain('aria-label="Skill review"');
    expect(html).toContain('aria-haspopup="dialog"');
    expect(html).toContain('aria-expanded="true"');
    expect(html).toContain(">Review skill</button>");
  });

  test("completed Skill state uses the shared completion shell and removes setup actions and disclaimer", () => {
    const html = renderToStaticMarkup(<SessionCapabilityFrame {...props} complete />);
    expect(html).toContain('role="status"');
    expect(html).toContain("Installed · Workspace");
    expect(html).toContain('data-state="complete"');
    expect(html).toContain("og-session-capability-shell");
    expect(html).not.toContain("<button");
    expect(html).not.toContain(props.note);
    expect(html).not.toContain("green");
  });

  test("completed connection states describe verified availability without promising agent execution", () => {
    const html = renderToStaticMarkup(<SessionCapabilityFrame {...props} skill={false} complete />);
    expect(html).toContain("Connected · Available in this conversation");
    expect(html).not.toContain("agent continues");
  });

  test("provider-specific completion copy and a busy opener stay truthful", () => {
    const connected = renderToStaticMarkup(
      <SessionCapabilityFrame
        {...props}
        skill={false}
        complete
        completeLabel="Connected to this workspace"
      />,
    );
    expect(connected).toContain("Connected to this workspace");
    expect(connected).not.toContain("Available in this conversation");
    const opening = renderToStaticMarkup(
      <SessionCapabilityFrame
        {...props}
        skill={false}
        busy
        opensDialog={false}
        actionLabel="Opening GitHub…"
      />,
    );
    expect(opening).toContain("Opening GitHub…");
    expect(opening).toContain('disabled=""');
    expect(opening).not.toContain('aria-haspopup="dialog"');
  });

  test("an unavailable action is explained in place of the button", () => {
    const html = renderToStaticMarkup(
      <SessionCapabilityFrame
        {...props}
        skill={false}
        actionUnavailable="Only workspace admins can connect GitHub."
        note="Ask a workspace admin to connect GitHub."
      />,
    );
    expect(html).toContain("Only workspace admins can connect GitHub.");
    expect(html).toContain('role="note"');
    expect(html).not.toContain("<button");
    expect(html).not.toContain("You choose what to authorize");
    expect(html).toContain("Ask a workspace admin to connect GitHub.");
  });

  test("host details render inside the card in both states", () => {
    for (const complete of [false, true]) {
      const html = renderToStaticMarkup(
        <SessionCapabilityFrame {...props} complete={complete} details={<ul data-details="" />} />,
      );
      const shell = html.slice(
        html.indexOf("og-session-capability-shell"),
        html.indexOf("</section>"),
      );
      expect(shell).toContain("data-details");
    }
  });
});