import { describe, expect, it } from "vitest";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { readFileSync } from "node:fs";
import { DiscoverPanelSheet, DiscoverSheet, featuredSubtitle, PANEL_CAROUSEL_SIZE } from "@/components/DiscoverSheet";
import { FIXTURE_DISCOVER } from "@/dev/fixtures";

const experts = FIXTURE_DISCOVER.featuredExperts;
const html = (el: ReturnType<typeof createElement>) => renderToStaticMarkup(el);

describe("featuredSubtitle", () => {
  it("names two experts and counts the rest", () => {
    const list = [{ displayName: "A" }, { displayName: "B" }, { displayName: "C" }, { displayName: "D" }];
    expect(featuredSubtitle(list)).toBe("A, B and 2 more");
    expect(featuredSubtitle(list.slice(0, 3))).toBe("A, B and 1 more");
  });
  it("reads plainly for short lists", () => {
    expect(featuredSubtitle([])).toBe("");
    expect(featuredSubtitle([{ displayName: "A" }])).toBe("A");
    expect(featuredSubtitle([{ displayName: "A" }, { displayName: "B" }])).toBe("A and B");
  });
});

describe("Discover sheet", () => {
  const out = html(createElement(DiscoverSheet, { experts, onOpen: () => {}, onClose: () => {} }));
  it("has three depth rows and the appearance switch", () => {
    expect(out).toContain("Discover");
    expect((out.match(/btn-depth"/g) ?? []).length).toBe(3);
    expect(out).toContain("Featured experts");
    expect(out).toContain("Trending minnects");
    expect(out).toContain("Find experts");
    expect(out).toContain('aria-label="Appearance"');
    expect(out).toContain("Dark");
    expect(out).toContain("Light");
    expect(out).toContain(featuredSubtitle(experts));
  });
});

describe("Discover panel sheets", () => {
  it("shows the featured carousel at 150px", () => {
    expect(PANEL_CAROUSEL_SIZE).toBe(150);
    const out = html(createElement(DiscoverPanelSheet, { panel: "featured", experts, trending: [], onClose: () => {} }));
    expect(out).toContain("--cfw:150px");
    expect(out).toContain('aria-label="Close"');
  });
  it("is 80% high", () => {
    const css = readFileSync("src/styles/sheet.css", "utf8");
    expect(css).toMatch(/\.sheet-panel\s*\{[^}]*height:\s*80%/);
  });
});