import { expect, test } from "bun:test";
import { renderToString } from "react-dom/server";
import LearnerLessonPreview from "../src/ui/learnerPreview";

const md = "# Intro\n\nHello ![pic](img/a.png)\n\n## Part two\n\nOnly this <b>part</b>.\n\n## Part three\n\nNot this.\n";
const draft = (rel: string) => `/api/studio/courses/c1/raw/${rel}`;

test("the studio preview renders through the learner LessonView, with draft URLs", () => {
  const html = renderToString(<LearnerLessonPreview courseId="c1" markdown={md} lesson={{ id: "l1", title: "Lesson one", type: "text" }} file="lessons/one.md" resolveCourseUrl={draft} resolveUrl={() => "/wrong"} />);
  expect(html).toContain('class="lr lr-lesson"');
  expect(html).toContain("Lesson one");
  expect(html).toContain('src="/api/studio/courses/c1/raw/lessons/img/a.png"');
  expect(html).not.toContain("/api/media/");
});

test("an anchored lesson previews only its section; a missing anchor says so", () => {
  const one = renderToString(<LearnerLessonPreview courseId="c1" markdown={md} lesson={{ id: "l1", title: "T", type: "text", anchor: "part-two" }} file="lessons/one.md" resolveCourseUrl={draft} resolveUrl={draft} />);
  expect(one).toContain("Only this");
  expect(one).not.toContain("Not this");
  const missing = renderToString(<LearnerLessonPreview courseId="c1" markdown={md} lesson={{ id: "l1", title: "T", type: "text", anchor: "nope" }} file="lessons/one.md" resolveCourseUrl={draft} resolveUrl={draft} />);
  expect(missing).toContain("was not found");
});

test("raw HTML in a draft is sanitised by the learner pipeline", () => {
  const html = renderToString(<LearnerLessonPreview courseId="c1" markdown={"# T\n\n<img src=x onerror=alert(1)><script>alert(2)</script>"} lesson={{ id: "l1", title: "T", type: "text" }} file="a.md" resolveCourseUrl={draft} resolveUrl={draft} />);
  expect(html).not.toContain("onerror");
  expect(html).not.toContain("<script>");
});