import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { PrivateZoneVideoPostCard } from "../private-zone-video-post-card";

const basePost = {
  postId: "11111111-1111-1111-1111-111111111111",
  characterId: "maya-tan",
  caption: "Only for you.",
  posterUrl: "https://storage.example/poster.jpg?token=short",
  mediaType: "video" as const,
  videoUrl: null,
  videoMimeType: "video/mp4",
  videoSizeBytes: 1024,
  durationSeconds: 18,
  unlockCostCredits: 100,
  currency: "credits" as const,
  locked: true,
  unlocked: false,
  availableForNewUnlock: true,
  publishedAt: "2026-07-24T10:00:00+00:00",
};

describe("PrivateZoneVideoPostCard", () => {
  it("shows caption and poster but no video source while locked", () => {
    const html = renderToStaticMarkup(
      <PrivateZoneVideoPostCard
        post={basePost}
        displayName="Maya"
        avatarUrl="/images/avatar.png"
        index={0}
        isUnlocking={false}
        onUnlock={() => undefined}
        onPlaybackError={() => undefined}
      />,
    );

    expect(html).toContain("Only for you.");
    expect(html).toContain("poster.jpg");
    expect(html).toContain("Unlock for 100 credits");
    expect(html).not.toContain("<video");
  });

  it("renders an inline controlled video only after unlock", () => {
    const html = renderToStaticMarkup(
      <PrivateZoneVideoPostCard
        post={{
          ...basePost,
          locked: false,
          unlocked: true,
          videoUrl: "https://storage.example/video.mp4?token=short",
        }}
        displayName="Maya"
        avatarUrl="/images/avatar.png"
        index={0}
        isUnlocking={false}
        onUnlock={() => undefined}
        onPlaybackError={() => undefined}
      />,
    );

    expect(html).toContain("<video");
    expect(html).toContain("controls");
    expect(html).toContain("playsInline");
    expect(html).not.toContain("autoplay");
  });
});
