import { describe, it, expect } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";

describe("ColorPickerField - 테마", () => {
  it("HEX 텍스트 인풋은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
    render(
      <ColorPickerField
        label="색상"
        ariaLabelColorInput="컬러 입력"
        ariaLabelHexInput="HEX 입력"
        value="#ff0000"
        onChange={() => {}}
        palette={TEXT_COLOR_PALETTE}
      />,
    );

    const hexInput = screen.getByLabelText("HEX 입력") as HTMLInputElement;
    const className = hexInput.getAttribute("class") ?? "";

    // 라이트 모드: 흰 배경 + 어두운 텍스트
    expect(className).toContain("bg-white");
    expect(className).toContain("text-slate-900");
    // 다크 모드: 다크 배경 + 밝은 텍스트
    expect(className).toContain("dark:bg-slate-900");
    expect(className).toContain("dark:text-slate-100");
  });

  it("팔레트 드롭다운 요약 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
    render(
      <ColorPickerField
        label="색상"
        ariaLabelColorInput="컬러 입력"
        ariaLabelHexInput="HEX 입력"
        value="#ff0000"
        onChange={() => {}}
        palette={TEXT_COLOR_PALETTE}
      />,
    );

    const [label] = screen.getAllByText("색상 팔레트");
    const button = label.closest("button") as HTMLButtonElement | null;
    expect(button).not.toBeNull();

    const className = button!.getAttribute("class") ?? "";

    // 라이트 모드: 밝은 배경 + 어두운 텍스트
    expect(className).toContain("bg-white");
    expect(className).toContain("text-slate-900");
    // 다크 모드: 다크 배경 + 밝은 텍스트
    expect(className).toContain("dark:bg-slate-900");
    expect(className).toContain("dark:text-slate-100");
  });

  it("팔레트 드롭다운 항목은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
    render(
      <ColorPickerField
        label="색상"
        ariaLabelColorInput="컬러 입력"
        ariaLabelHexInput="HEX 입력"
        value="#ff0000"
        onChange={() => {}}
        palette={TEXT_COLOR_PALETTE}
      />, 
    );

    // 드롭다운을 연다
    const [label] = screen.getAllByText("색상 팔레트");
    const toggleButton = label.closest("button") as HTMLButtonElement | null;
    expect(toggleButton).not.toBeNull();
    fireEvent.click(toggleButton!);

    // 팔레트 첫 항목 버튼을 찾는다 (TEXT_COLOR_PALETTE[0] 라벨과 동기화)
    const firstItem = TEXT_COLOR_PALETTE[0];
    const itemButton = screen.getByRole("button", { name: firstItem.label }) as HTMLButtonElement;
    const className = itemButton.getAttribute("class") ?? "";

    // 라이트 모드: 흰 배경 + 어두운 텍스트
    expect(className).toContain("bg-white");
    expect(className).toContain("text-slate-900");
    // 다크 모드: 다크 배경 + 밝은 텍스트
    expect(className).toContain("dark:bg-slate-900");
    expect(className).toContain("dark:text-slate-100");

    // 색상 불렛(span)은 테두리를 가져야 한다 (흰색/투명 색상도 배경과 구분되도록)
    const bullet = itemButton.querySelector("span span") as HTMLSpanElement | null;
    expect(bullet).not.toBeNull();
    const bulletClass = bullet!.getAttribute("class") ?? "";
    expect(bulletClass).toContain("rounded-full");
    expect(bulletClass).toContain("border");
    expect(bulletClass).toContain("border-slate-300");
    expect(bulletClass).toContain("dark:border-slate-700");
  });
});