import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { ProjectPropertiesPanel } from "@/app/editor/panels/ProjectPropertiesPanel";
import type { ProjectConfig } from "@/features/editor/state/editorStore";

let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<typeof vi.fn> };

beforeEach(() => {
  const baseConfig: ProjectConfig = {
    title: "프로젝트",
    slug: "project",
    canvasPreset: "full",
    canvasWidthPx: 1024,
    canvasBgColorHex: "#0f172a",
    bodyBgColorHex: "#020617",
    headHtml: "",
    trackingScript: "",
    // SEO 필드는 아직 구현 전이지만, TDD 를 위해 기본값 형태만 지정해 둔다.
    // 실제 타입 정의는 추후 15.1 구현에서 확장한다.
  } as ProjectConfig;

  mockState = {
    projectConfig: baseConfig,
    updateProjectConfig: vi.fn(),
  };
});

afterEach(() => {
  cleanup();
});

vi.mock("@/features/editor/state/editorStore", () => {
  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
  return {
    __esModule: true,
    useEditorStore,
  };
});

describe("ProjectPropertiesPanel SEO 메타", () => {
  it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("SEO 타이틀") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "새 SEO 타이틀" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ seoTitle: "새 SEO 타이틀" });
  });

  it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const textarea = screen.getByLabelText("메타 디스크립션") as HTMLTextAreaElement;

    fireEvent.change(textarea, { target: { value: "SEO 설명" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
      seoDescription: "SEO 설명",
    });
  });

  it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("OG/Twitter 이미지 URL") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "https://example.com/og.png" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
      seoOgImageUrl: "https://example.com/og.png",
    });
  });

  it("Canonical URL 입력을 변경하면 seoCanonicalUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("Canonical URL") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "https://example.com/landing" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
      seoCanonicalUrl: "https://example.com/landing",
    });
  });

  it("검색 노출 제어 체크박스를 토글하면 seoNoIndex 가 true 로 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const checkbox = screen.getByLabelText(
      "검색 엔진에 노출하지 않기 (noindex)",
    ) as HTMLInputElement;

    expect(checkbox.checked).toBe(false);

    fireEvent.click(checkbox);

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
      seoNoIndex: true,
    });
  });
});