import "dotenv/config";
import { describe, it, expect } from "vitest";
import JSZip from "jszip";
import { promises as fs } from "fs";
import path from "path";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
import { buildStaticHtml } from "@/app/api/export/route";

const BASE_URL = "http://localhost";

// /api/export 라우트 TDD:
// - blocks + projectConfig 를 받아 HTML/CSS/JS 가 포함된 ZIP 을 반환해야 한다.
// - index.html 의 <title> 은 projectConfig.title 을 사용해야 한다.
// - ZIP 안에 builder.css 와 main.js 파일이 포함되어야 한다.

describe("/api/export", () => {
  it("POST /api/export 로 블록과 프로젝트 설정을 전송하면 기본 정적 ZIP 파일을 반환해야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "blk_test",
        type: "text",
        props: {
          text: "ZIP 내보내기 테스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "내보내기 테스트 페이지",
      slug: "export-test",
      canvasPreset: "full",
      canvasBgColorHex: "#ffffff",
      bodyBgColorHex: "#111111",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);
    expect(res.headers.get("Content-Type")).toBe("application/zip");

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    const cssEntry = zip.file("builder.css");
    const jsEntry = zip.file("main.js");

    expect(indexEntry).toBeTruthy();
    expect(cssEntry).toBeTruthy();
    expect(jsEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("<title>내보내기 테스트 페이지</title>");
    expect(html).toContain("ZIP 내보내기 테스트");
    // 캔버스 래퍼 배경색
    expect(html).toContain("background-color:#ffffff");
    // body 스타일: 배경색 + margin/padding 0
    expect(html).toContain('style="background-color:#111111;margin:0;padding:0;"');
  });

  it("canvasPreset / canvasWidthPx / 배경색은 정적 HTML 캔버스 wrapper 및 body 스타일에 반영되어야 한다", () => {
    const blocks: Block[] = [];

    const createConfig = (partial: Partial<ProjectConfig>): ProjectConfig => ({
      title: "캔버스 프리셋 테스트",
      slug: "canvas-preset-test",
      canvasPreset: "full",
      canvasBgColorHex: "#0f172a",
      bodyBgColorHex: "#020617",
      ...partial,
    });

    const htmlMobile = buildStaticHtml(blocks, createConfig({ canvasPreset: "mobile" }));
    expect(htmlMobile).toContain("max-width:390px;");

    const htmlTablet = buildStaticHtml(blocks, createConfig({ canvasPreset: "tablet" }));
    expect(htmlTablet).toContain("max-width:768px;");

    const htmlDesktop = buildStaticHtml(blocks, createConfig({ canvasPreset: "desktop" }));
    expect(htmlDesktop).toContain("max-width:1200px;");

    const htmlCustom = buildStaticHtml(blocks, createConfig({ canvasPreset: "custom", canvasWidthPx: 1024 }));
    expect(htmlCustom).toContain("max-width:1024px;");

    const htmlFull = buildStaticHtml(blocks, createConfig({ canvasPreset: "full" }));
    // full 프리셋에서 canvasWidthPx 가 없으면 max-width 스타일이 없어야 한다.
    expect(htmlFull).not.toContain("max-width:");

    // bodyBgColorHex / canvasBgColorHex 도 각각 body 및 캔버스 wrapper 스타일에 반영된다.
    const htmlColors = buildStaticHtml(
      blocks,
      createConfig({ canvasBgColorHex: "#111111", bodyBgColorHex: "#222222" }),
    );
    expect(htmlColors).toContain("background-color:#111111;");
    expect(htmlColors).toContain('style="background-color:#222222;margin:0;padding:0;"');
  });

  it("projectConfig.headHtml 과 trackingScript 는 index.html 의 head/body 에 그대로 포함되어야 한다", async () => {
    const blocks: Block[] = [];

    const projectConfig: ProjectConfig = {
      title: "헤드/트래킹 테스트",
      slug: "head-tracking-test",
      canvasPreset: "full",
      headHtml: '<meta name="robots" content="noindex" />',
      trackingScript: '<script>window.__TEST_TRACKING__ = true;<\/script>',
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    // head 커스텀 HTML
    expect(html).toContain('<meta name="robots" content="noindex" />');
    // body 하단 추적 스크립트
    expect(html).toContain('<script>window.__TEST_TRACKING__ = true;<\/script>');
  });

  it("index.html head 에는 기본 viewport 메타 태그가 포함되어야 한다", async () => {
    const blocks: Block[] = [];

    const projectConfig: ProjectConfig = {
      title: "뷰포트 메타 테스트",
      slug: "viewport-meta-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain(
      '<meta name="viewport" content="width=device-width, initial-scale=1" />',
    );
  });

  it("폼 블록과 컨트롤러 필드 블록들은 정적 HTML에서도 폼 요소로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "form_1",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          fields: [],
          fieldIds: ["input_name", "select_plan"],
          submitButtonId: null,
          formWidthMode: "full",
        },
      } as any,
      {
        id: "input_name",
        type: "formInput",
        props: {
          label: "이름",
          formFieldName: "name",
          required: true,
        },
      } as any,
      {
        id: "select_plan",
        type: "formSelect",
        props: {
          label: "플랜",
          formFieldName: "plan",
          options: [
            { label: "Basic", value: "basic" },
            { label: "Pro", value: "pro" },
          ],
          required: false,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "폼 내보내기 테스트",
      slug: "form-export-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");

    // form 요소와 기본 input/select 가 포함되어야 한다.
    expect(html).toContain("<form");
    expect(html).toContain("name=\"name\"");
    expect(html).toContain("name=\"plan\"");
    expect(html).toContain("<select");
    // required: formInput(name) 은 required, formSelect(plan) 은 required 가 없어야 한다.
    expect(html).toMatch(/name=\"name\"[^>]*required/);
    expect(html).not.toMatch(/name=\"plan\"[^>]*required/);
  });

  it("/api/image/:id 기반 이미지 URL은 ZIP 안 images/ 디렉터리로 복사되고 HTML에서 상대 경로로 치환되어야 한다", async () => {
    const imageId = `test-image-${Date.now()}`;
    const uploadDir = path.join(process.cwd(), "uploads");
    await fs.mkdir(uploadDir, { recursive: true });
    await fs.writeFile(path.join(uploadDir, imageId), Buffer.from("dummy-image"));

    const blocks: Block[] = [
      {
        id: "blk_image",
        type: "image",
        props: {
          src: `/api/image/${imageId}`,
          alt: "테스트 이미지",
          align: "center",
          widthMode: "auto",
          borderRadius: "md",
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "이미지 내보내기 테스트",
      slug: "image-export-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);
    const buffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(buffer);

    const imageEntry = zip.file(`images/${imageId}`);
    expect(imageEntry).toBeTruthy();

    const imageBytes = await imageEntry!.async("nodebuffer");
    expect(imageBytes.length).toBeGreaterThan(0);

    const html = await zip.file("index.html")!.async("string");
    expect(html).toContain(`src="./images/${imageId}"`);
    expect(html).not.toContain(`/api/image/${imageId}`);
  });

  it("divider 블록은 정적 HTML에서 구분선 요소로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "divider_1",
        type: "divider",
        props: {
          align: "center",
          thickness: "medium",
          widthMode: "full",
          colorHex: "#123456",
          marginYPx: 32,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "divider 테스트",
      slug: "divider-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("<hr");
    expect(html).toContain("pb-divider");
    // 스타일 검증: medium 두께, 지정 색상, marginYPx 기반 여백이 style 속성에 포함되어야 한다.
    expect(html).toContain("border-bottom:2px solid #123456");
    expect(html).toContain("margin:32px 0;");
  });

  it("image 블록은 정적 HTML에서 카드 스타일(배경/너비/둥글기)이 반영되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "image_1",
        type: "image",
        props: {
          src: "/images/example.png",
          alt: "카드 이미지",
          align: "center",
          widthMode: "fixed",
          widthPx: 480,
          borderRadiusPx: 32,
          backgroundColorCustom: "#123456",
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "image 스타일 테스트",
      slug: "image-style-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    // 이미지 태그가 존재해야 한다.
    expect(html).toContain('<img src="/images/example.png"');
    // 카드 배경색이 wrapper div style 에 반영되어야 한다.
    expect(html).toContain("background-color:#123456");
    // 고정 너비/둥글기 스타일이 img style 에 반영되어야 한다.
    expect(html).toContain("width:480px");
    expect(html).toContain("border-radius:32px");
  });

  it("list 블록은 정적 HTML에서 리스트 요소로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "list_1",
        type: "list",
        props: {
          items: ["Item 1", "Item 2"],
          ordered: false,
          align: "left",
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "list 테스트",
      slug: "list-test",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("<ul");
    expect(html).toContain("<li>Item 1</li>");
    expect(html).toContain("<li>Item 2</li>");
  });

  it("formInput 단독 블록은 입력 필드로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "input_standalone",
        type: "formInput",
        props: {
          label: "이름",
          formFieldName: "name",
          required: true,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "formInput 단독 테스트",
      slug: "form-input-standalone",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("<input");
    expect(html).toContain("name=\"name\"");
    expect(html).toContain("이름");
  });

  it("formSelect 단독 블록은 셀렉트 박스로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "select_standalone",
        type: "formSelect",
        props: {
          label: "플랜",
          formFieldName: "plan",
          options: [
            { label: "Basic", value: "basic" },
            { label: "Pro", value: "pro" },
          ],
          required: false,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "formSelect 단독 테스트",
      slug: "form-select-standalone",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("<select");
    expect(html).toContain("<option value=\"basic\">Basic</option>");
    expect(html).toContain("<option value=\"pro\">Pro</option>");
  });

  it("formCheckbox 단독 블록은 체크박스 그룹으로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "checkbox_standalone",
        type: "formCheckbox",
        props: {
          groupLabel: "관심사",
          formFieldName: "interests",
          options: [
            { label: "뉴스", value: "news" },
            { label: "업데이트", value: "updates" },
          ],
          required: false,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "formCheckbox 단독 테스트",
      slug: "form-checkbox-standalone",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("type=\"checkbox\"");
    expect(html).toContain("뉴스");
    expect(html).toContain("업데이트");
  });

  it("formRadio 단독 블록은 라디오 그룹으로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "radio_standalone",
        type: "formRadio",
        props: {
          groupLabel: "플랜",
          formFieldName: "plan",
          options: [
            { label: "Basic", value: "basic" },
            { label: "Pro", value: "pro" },
          ],
          required: false,
        },
      } as any,
    ];

    const projectConfig: ProjectConfig = {
      title: "formRadio 단독 테스트",
      slug: "form-radio-standalone",
      canvasPreset: "full",
    };

    const payload = { blocks, projectConfig };

    const { POST: handleExport } = await import("@/app/api/export/route");

    const res = await handleExport(
      new Request(`${BASE_URL}/api/export`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }),
    );

    expect(res.status).toBe(200);

    const arrayBuffer = await res.arrayBuffer();
    const zip = await JSZip.loadAsync(arrayBuffer);

    const indexEntry = zip.file("index.html");
    expect(indexEntry).toBeTruthy();

    const html = await indexEntry!.async("string");
    expect(html).toContain("type=\"radio\"");
    expect(html).toContain("Basic");
    expect(html).toContain("Pro");
  });

  describe("템플릿 섹션 정적 export", () => {
    function createIdFactory() {
      let i = 0;
      return () => `tpl_${++i}`;
    }

    async function exportTemplateHtml(blocks: Block[]): Promise<string> {
      const projectConfig: ProjectConfig = {
        title: "템플릿 export 테스트",
        slug: "template-export-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      return html;
    }

    it("Hero 템플릿 섹션은 export HTML 에 기본 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => {
      const sectionId = "hero_section_export";
      const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() });

      const html = await exportTemplateHtml(blocks as Block[]);

      expect(html).toContain("Hero 제목을 여기에 입력하세요");
      expect(html).toContain("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.");
      expect(html).toContain("지금 시작하기");
    });

    it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => {
      const sectionId = "features_section_export";
      const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() });

      const html = await exportTemplateHtml(blocks as Block[]);

      expect(html).toContain("Feature 1 제목");
      expect(html).toContain("Feature 2 제목");
      expect(html).toContain("Feature 3 제목");

      const descText = "해당 기능을 간단히 설명하는 텍스트입니다.";
      const occurrences = html.split(descText).length - 1;
      expect(occurrences).toBeGreaterThanOrEqual(3);
    });

    it("CTA 템플릿 섹션은 export HTML 에 CTA 본문 텍스트와 버튼 라벨을 포함해야 한다", async () => {
      const sectionId = "cta_section_export";
      const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() });

      const html = await exportTemplateHtml(blocks as Block[]);

      expect(html).toContain("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.");
      expect(html).toContain("CTA 버튼");
    });
  });

  describe("스타일 테스트", () => {
    it("text 블록은 pb 텍스트 스타일 클래스를 포함해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "text_styled",
          type: "text",
          props: {
            text: "스타일 테스트",
            align: "center",
            size: "base",
            fontSizeMode: "scale",
            fontSizeScale: "lg",
            lineHeightMode: "scale",
            lineHeightScale: "relaxed",
            fontWeightMode: "scale",
            fontWeightScale: "semibold",
            colorMode: "palette",
            colorPalette: "strong",
            underline: true,
            italic: true,
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "텍스트 스타일 테스트",
        slug: "text-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("스타일 테스트");
      expect(html).toContain("pb-text-center");
      expect(html).toContain("pb-text-lg");
      expect(html).toContain("pb-leading-relaxed");
      expect(html).toContain("pb-font-semibold");
      expect(html).toContain("pb-text-color-strong");
      expect(html).toContain("pb-underline");
      expect(html).toContain("pb-italic");
    });

    it("기본 텍스트 블록은 프리뷰처럼 흰 글자와 줄바꿈 유지 스타일을 사용해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "text_default",
          type: "text",
          props: {
            text: "첫 줄\n둘째 줄",
            align: "left",
            size: "base",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "텍스트 기본 스타일 테스트",
        slug: "text-default-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("첫 줄");
      expect(html).toContain("둘째 줄");
      expect(html).toContain("pb-text-color-strong");
      expect(html).toContain("pb-whitespace-pre-wrap");
    });

    it("custom 색상을 가진 텍스트 블록은 정적 HTML에서도 같은 색상을 사용해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "text_custom_color",
          type: "text",
          props: {
            text: "커스텀 색상 텍스트",
            align: "left",
            size: "base",
            colorMode: "custom",
            colorCustom: "#ff0000",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "텍스트 색상 커스텀 테스트",
        slug: "text-custom-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("커스텀 색상 텍스트");
      expect(html).toContain("color:#ff0000");
    });

    it("backgroundColorCustom 이 지정된 텍스트 블록은 정적 HTML에서 같은 배경색을 사용해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "text_bg_custom",
          type: "text",
          props: {
            text: "배경색 있는 텍스트",
            align: "left",
            size: "base",
            backgroundColorCustom: "#123456",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "텍스트 배경색 테스트",
        slug: "text-bg-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("배경색 있는 텍스트");
      expect(html).toContain("background-color:#123456");
    });

    it("backgroundColorCustom 이 지정된 리스트 블록은 정적 HTML에서 리스트 컨테이너 배경색을 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "list_bg_custom",
          type: "list",
          props: {
            items: ["아이템 1"],
            ordered: false,
            align: "left",
            backgroundColorCustom: "#00ff88",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "리스트 배경색 테스트",
        slug: "list-bg-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("아이템 1");
      expect(html).toContain("background-color:#00ff88");
    });

    it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_bg_custom",
          type: "form",
          props: {
            kind: "contact",
            submitTarget: "internal",
            fields: [],
            fieldIds: [],
            formWidthMode: "auto",
            backgroundColorCustom: "#111111",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 배경색 테스트",
        slug: "form-bg-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("<form");
      expect(html).toContain("background-color:#111111");
    });

    it("backgroundColorCustom 이 지정된 섹션 블록은 정적 HTML에서 섹션 요소 배경색을 인라인 스타일로 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "sec_1",
          type: "section",
          props: {
            background: "default",
            paddingY: "md",
            columns: [{ id: "sec_1_col_1", span: 12 }],
            backgroundColorCustom: "#123456",
          },
        } as any,
        {
          id: "sec_1_text",
          type: "text",
          sectionId: "sec_1",
          columnId: "sec_1_col_1",
          props: {
            text: "섹션 안 텍스트",
            align: "left",
            size: "base",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "섹션 배경색 테스트",
        slug: "section-bg-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("섹션 안 텍스트");
      expect(html).toContain("class=\"pb-section");
      expect(html).toContain("background-color:#123456");
    });

    it("formInput 블록의 textColorCustom 은 정적 HTML에서 input 텍스트 색상 스타일로 반영되어야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_input_color",
          type: "formInput",
          props: {
            label: "이메일",
            formFieldName: "email",
            required: true,
            textColorCustom: "#123456",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 입력 텍스트 색상 테스트",
        slug: "form-input-text-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"email\"");
      expect(html).toContain("color:#123456");
    });

    it("formSelect 블록의 textColorCustom 은 정적 HTML에서 select 텍스트 색상 스타일로 반영되어야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_select_color_export",
          type: "formSelect",
          props: {
            label: "플랜",
            formFieldName: "plan",
            options: [
              { label: "Basic", value: "basic" },
              { label: "Pro", value: "pro" },
            ],
            textColorCustom: "#00ff88",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 셀렉트 텍스트 색상 테스트",
        slug: "form-select-text-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"plan\"");
      expect(html).toContain("color:#00ff88");
    });

    it("formCheckbox 블록의 textColorCustom 은 정적 HTML에서 그룹/옵션 텍스트 색상 스타일로 반영되어야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_checkbox_color_export",
          type: "formCheckbox",
          props: {
            groupLabel: "기능",
            formFieldName: "features",
            options: [{ label: "옵션 1", value: "opt1" }],
            textColorCustom: "#8800ff",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 체크박스 텍스트 색상 테스트",
        slug: "form-checkbox-text-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"features\"");
      expect(html).toContain("color:#8800ff");
    });

    it("formRadio 블록의 textColorCustom 은 정적 HTML에서 그룹/옵션 텍스트 색상 스타일로 반영되어야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_radio_color_export",
          type: "formRadio",
          props: {
            groupLabel: "플랜",
            formFieldName: "plan",
            options: [{ label: "A 플랜", value: "a" }],
            textColorCustom: "#ff9900",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 라디오 텍스트 색상 테스트",
        slug: "form-radio-text-color-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"plan\"");
      expect(html).toContain("color:#ff9900");
    });

    it("formInput 블록은 스타일 속성으로 필드 배경/보더/패딩/너비/둥글기를 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_input_styles_export",
          type: "formInput",
          props: {
            label: "이메일",
            formFieldName: "email",
            required: true,
            widthMode: "fixed",
            widthPx: 320,
            paddingX: 16,
            paddingY: 8,
            textColorCustom: "#112233",
            fillColorCustom: "#123456",
            strokeColorCustom: "#ff0000",
            borderRadius: "lg",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 입력 스타일 테스트",
        slug: "form-input-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"email\"");
      expect(html).toContain("width:320px");
      expect(html).toContain("padding-left:16px");
      expect(html).toContain("padding-right:16px");
      expect(html).toContain("padding-top:8px");
      expect(html).toContain("padding-bottom:8px");
      expect(html).toContain("background-color:#123456");
      expect(html).toContain("border-color:#ff0000");
      expect(html).toContain("border-radius:6px");
    });

    it("formSelect 블록은 스타일 속성으로 셀렉트 배경/보더/패딩/너비/둥글기를 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_select_styles_export",
          type: "formSelect",
          props: {
            label: "카테고리",
            formFieldName: "category",
            options: [
              { label: "옵션 A", value: "a" },
              { label: "옵션 B", value: "b" },
            ],
            widthMode: "fixed",
            widthPx: 240,
            paddingX: 16,
            paddingY: 8,
            textColorCustom: "#00ff00",
            fillColorCustom: "#123456",
            strokeColorCustom: "#ff0000",
            borderRadius: "lg",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 셀렉트 스타일 테스트",
        slug: "form-select-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"category\"");
      expect(html).toContain("width:240px");
      expect(html).toContain("padding-left:16px");
      expect(html).toContain("padding-right:16px");
      expect(html).toContain("padding-top:8px");
      expect(html).toContain("padding-bottom:8px");
      expect(html).toContain("background-color:#123456");
      expect(html).toContain("border-color:#ff0000");
      expect(html).toContain("border-radius:6px");
    });

    it("formCheckbox 블록은 스타일 속성으로 옵션 컨테이너 배경/보더/패딩/둥글기를 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_checkbox_styles_export",
          type: "formCheckbox",
          props: {
            groupLabel: "기능",
            formFieldName: "features",
            options: [{ label: "옵션 1", value: "opt1" }],
            paddingX: 8,
            paddingY: 4,
            textColorCustom: "#ffffff",
            fillColorCustom: "#123456",
            strokeColorCustom: "#ff0000",
            borderRadius: "lg",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 체크박스 스타일 테스트",
        slug: "form-checkbox-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"features\"");
      expect(html).toContain("padding-left:8px");
      expect(html).toContain("padding-right:8px");
      expect(html).toContain("padding-top:4px");
      expect(html).toContain("padding-bottom:4px");
      expect(html).toContain("background-color:#123456");
      expect(html).toContain("border-color:#ff0000");
      expect(html).toContain("border-radius:6px");
    });

    it("formRadio 블록은 스타일 속성으로 옵션 컨테이너 배경/보더/패딩/둥글기를 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_radio_styles_export",
          type: "formRadio",
          props: {
            groupLabel: "플랜",
            formFieldName: "plan",
            options: [{ label: "플랜 A", value: "a" }],
            paddingX: 8,
            paddingY: 4,
            textColorCustom: "#ffffff",
            fillColorCustom: "#123456",
            strokeColorCustom: "#ff0000",
            borderRadius: "lg",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "폼 라디오 스타일 테스트",
        slug: "form-radio-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("name=\"plan\"");
      expect(html).toContain("padding-left:8px");
      expect(html).toContain("padding-right:8px");
      expect(html).toContain("padding-top:4px");
      expect(html).toContain("padding-bottom:4px");
      expect(html).toContain("background-color:#123456");
      expect(html).toContain("border-color:#ff0000");
      expect(html).toContain("border-radius:6px");
    });

    it("버튼 블록은 버튼 스타일 클래스를 포함해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "button_styled",
          type: "button",
          props: {
            label: "클릭",
            href: "#",
            align: "center",
            size: "md",
            variant: "solid",
            colorPalette: "primary",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "버튼 스타일 테스트",
        slug: "button-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("클릭");
      expect(html).toContain("pb-text-center");
      expect(html).toContain("pb-btn-base");
      expect(html).toContain("pb-btn-size-md");
      expect(html).toContain("pb-btn-variant-solid-primary");
    });

    it("버튼 블록의 커스텀 스타일은 style 속성으로 반영되어야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "button_custom_styles",
          type: "button",
          props: {
            label: "스타일 버튼",
            href: "#",
            align: "left",
            widthMode: "fixed",
            widthPx: 240,
            paddingX: 16,
            paddingY: 8,
            fillColorCustom: "#123456",
            strokeColorCustom: "#ff0000",
            textColorCustom: "#00ff00",
          },
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "버튼 커스텀 스타일 테스트",
        slug: "button-custom-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      // widthMode=fixed, widthPx, paddingX/paddingY, fillColorCustom, strokeColorCustom, textColorCustom 이 style 속성에 포함되어야 한다.
      expect(html).toContain("width:240px");
      expect(html).toContain("padding-left:16px");
      expect(html).toContain("padding-right:16px");
      expect(html).toContain("padding-top:8px");
      expect(html).toContain("padding-bottom:8px");
      expect(html).toContain("background-color:#123456");
      expect(html).toContain("border-color:#ff0000");
      expect(html).toContain("color:#00ff00");
    });

    it("section 블록은 배경/패딩 토큰을 pb-section 클래스 조합으로 반영해야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "sec_1",
          type: "section",
          props: {
            background: "primary",
            paddingY: "lg",
            columns: [
              {
                id: "sec_1_col_1",
                span: 12,
              },
            ],
            maxWidthMode: "normal",
            gapX: "md",
            alignItems: "top",
          },
        } as any,
        {
          id: "sec_1_text",
          type: "text",
          props: {
            text: "섹션 텍스트",
            align: "left",
            size: "base",
          },
          sectionId: "sec_1",
          columnId: "sec_1_col_1",
        } as any,
      ];

      const projectConfig: ProjectConfig = {
        title: "섹션 스타일 테스트",
        slug: "section-style-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const indexEntry = zip.file("index.html");
      expect(indexEntry).toBeTruthy();

      const html = await indexEntry!.async("string");
      expect(html).toContain("pb-section");
      expect(html).toContain("pb-section-bg-primary");
      expect(html).toContain("pb-section-py-lg");
    });

    it("builder.css 는 리스트/섹션 유틸리티 클래스를 포함해야 한다", async () => {
      const blocks: Block[] = [];

      const projectConfig: ProjectConfig = {
        title: "CSS 유틸리티 테스트",
        slug: "css-utility-test",
        canvasPreset: "full",
      };

      const payload = { blocks, projectConfig };

      const { POST: handleExport } = await import("@/app/api/export/route");

      const res = await handleExport(
        new Request(`${BASE_URL}/api/export`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }),
      );

      expect(res.status).toBe(200);

      const arrayBuffer = await res.arrayBuffer();
      const zip = await JSZip.loadAsync(arrayBuffer);

      const cssEntry = zip.file("builder.css");
      expect(cssEntry).toBeTruthy();

      const css = await cssEntry!.async("string");
      expect(css).toContain(".pb-section-bg-default");
      expect(css).toContain(".pb-section-py-md");
      expect(css).toContain(".pb-list");
      expect(css).toContain(".pb-whitespace-pre-wrap");
      expect(css).toContain("color: var(--pb-color-text-strong)");
    });
  });
});