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";

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("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("폼 블록과 컨트롤러 필드 블록들은 정적 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");
  });

  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",
        },
      } 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");
  });

  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");
  });

  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: "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("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");
  });
});