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

import {
  GuideImageExport,
  imageExportFileName,
} from "@/components/public/guide-image-export";
import { MaterialPoster } from "@/components/public/material-poster";
import { ConstellationImage } from "@/components/public/constellation-image";
import type { PublicGuide } from "@/lib/guides/queries";

describe("image export controls", () => {
  it("always offers both export modes even without notes", () => {
    const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png">No notes</GuideImageExport>);
    expect(html).toContain("ส่งออกภาพ");
    expect(html).toContain("ส่งออกภาพโดยไม่รวมโน้ต");
    expect(html).toContain("ไทย");
    expect(html).toContain("English");
    expect(html).toContain('data-language-flag="th"');
    expect(html).toContain('data-language-flag="en"');
    expect(html.match(/<button\b/gu)).toHaveLength(4);
  });

  it("shows only one export action when no-note export is disabled", () => {
    const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png" allowWithoutNotes={false}>Content</GuideImageExport>);
    expect(html).toContain("ส่งออกภาพ");
    expect(html).not.toContain("ส่งออกภาพโดยไม่รวมโน้ต");
    expect(html.match(/<button\b/gu)).toHaveLength(3);
  });

  it("hides the persistent language chooser when language is prompted on export", () => {
    const html = renderToStaticMarkup(
      <GuideImageExport
        fileName="guide.png"
        allowWithoutNotes={false}
        showLanguageSelector={false}
        promptForLanguage
      >
        Content
      </GuideImageExport>,
    );
    expect(html).not.toContain("ภาษาในภาพส่งออก");
    expect(html).not.toContain("English");
    expect(html.match(/<button\b/gu)).toHaveLength(1);
  });

  it("disables both modes when an export selection is empty", () => {
    const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png" disabled>No sections</GuideImageExport>);
    expect(html.match(/\sdisabled=""/gu)).toHaveLength(2);
  });

  it.each(["English note", "โน้ตภาษาไทย"])("marks constellation notes for omission regardless of language: %s", (note) => {
    const guide = { character: { name: "Raiden", splashImageUrl: "/splash.png" }, coverUrl: "/cover.png" } as PublicGuide;
    const group = { rows: [], note } as unknown as PublicGuide["constellationGroups"][number];
    const html = renderToStaticMarkup(createElement(ConstellationImage, { guide, group }));
    expect(html).toContain("Raiden’s Constellations");
    expect(html).not.toContain("กลุ่มดาวของ Raiden");
    expect(html).toContain("Team Damage");
    expect(html).toContain("ดาเมจทั้งทีม");
    expect(html).toContain('data-export-note="true"');
    expect(html).toContain(note);
  });
});

describe("image export filenames", () => {
  it("adds the selected language after the note variant", () => {
    expect(imageExportFileName("Raiden.png", "th", false)).toBe("Raiden-th.png");
    expect(imageExportFileName("Raiden.png", "en", true)).toBe("Raiden-without-notes-en.png");
  });

  it("can preserve English-only export filenames", () => {
    expect(imageExportFileName("Raiden-materials.png", "th", false, false)).toBe("Raiden-materials.png");
  });
});


describe("material poster text", () => {
  const props = {
    character: { name: "Raiden", nameCardImageUrl: null, baseStats: [], ascension: [], leveling: [] },
    characterArtUrl: null,
    artworkOffsetX: 0,
    artworkOffsetY: 0,
    artworkScale: 100,
    topColors: ["#000000", "#000000"] as [string, string],
    bottomColors: ["#000000", "#000000"] as [string, string],
  };

  it("always uses English, including on the website", () => {
    const html = renderToStaticMarkup(<MaterialPoster {...props} />);
    expect(html).toContain("MATERIALS");
    expect(html).toContain("LV.90");
    expect(html).not.toContain("วัสดุ");
    expect(html).not.toContain("เลเวล 90");
  });
});