import { describe, expect, it } from "vitest";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { readFileSync } from "node:fs";
import { getSessionMuted, isAutoplayBlocked, setSessionMuted } from "@/lib/autoplay";
import { VideoPlayer } from "@/components/VideoPlayer";

describe("session mute choice", () => {
  it("starts muted and keeps the person's choice", () => {
    expect(getSessionMuted()).toBe(true);
    setSessionMuted(false);
    expect(getSessionMuted()).toBe(false);
    setSessionMuted(true);
    expect(getSessionMuted()).toBe(true);
  });
});

describe("autoplay refusal", () => {
  it("only counts the browser's NotAllowedError", () => {
    expect(isAutoplayBlocked({ name: "NotAllowedError" })).toBe(true);
    expect(isAutoplayBlocked({ name: "AbortError" })).toBe(false);
    expect(isAutoplayBlocked(null)).toBe(false);
    expect(isAutoplayBlocked("NotAllowedError")).toBe(false);
  });
});

describe("VideoPlayer", () => {
  it("is inline and not muted unless asked (desktop unchanged)", () => {
    const html = renderToStaticMarkup(createElement(VideoPlayer, { mp4Url: "https://cdn/v.mp4", poster: null, label: "v" }));
    expect(html).toContain("playsInline");
    expect(html).toContain("controls");
    expect(html).not.toContain("muted");
  });
  it("renders muted inline video for the mobile autoplay", () => {
    const html = renderToStaticMarkup(createElement(VideoPlayer, { mp4Url: "https://cdn/v.mp4", poster: null, label: "v", controls: false, muted: true }));
    expect(html).toContain("muted");
    expect(html).not.toContain("controls");
  });
});

describe("mobile autoplay styles", () => {
  it("has a frosted mute button", () => {
    const css = readFileSync("src/styles/mobile.css", "utf8");
    expect(css).toMatch(/\.slide-mute \{[^}]*backdrop-filter/);
  });
});