import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import ComplaintCard, { type Complaint } from "@/components/complaints/ComplaintCard";

function buildComplaint(overrides: Partial<Complaint> = {}): Complaint {
  return {
    id: 1,
    title: "تأخر في الصيانة",
    complain_number: "CMP-1001",
    created_at: "2026-01-15T10:00:00.000Z",
    status: "new",
    status_translation: "جديدة",
    ...overrides,
  };
}

describe("ComplaintCard", () => {
  it("renders as a native button with type=button", () => {
    render(<ComplaintCard complaint={buildComplaint()} onClick={vi.fn()} />);

    const cardButton = screen.getByRole("button", { name: /تأخر في الصيانة/i });
    expect(cardButton).toHaveAttribute("type", "button");
  });

  it("invokes the supplied action on mouse click", async () => {
    const onClick = vi.fn();
    const user = userEvent.setup();

    render(<ComplaintCard complaint={buildComplaint()} onClick={onClick} />);

    await user.click(screen.getByRole("button", { name: /تأخر في الصيانة/i }));

    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it("exposes native keyboard activation through button semantics", () => {
    render(<ComplaintCard complaint={buildComplaint()} onClick={vi.fn()} />);

    const cardButton = screen.getByRole("button", { name: /تأخر في الصيانة/i });
    expect(cardButton.tagName).toBe("BUTTON");
    expect(cardButton).not.toHaveAttribute("role", "button");
  });

  it("renders the complaint number and localized date", () => {
    render(
      <ComplaintCard
        complaint={buildComplaint({
          complain_number: "CMP-2042",
          created_at: "2026-03-10T08:00:00.000Z",
        })}
        onClick={vi.fn()}
      />,
    );

    expect(screen.getByText("رقم الشكوى: CMP-2042")).toBeInTheDocument();
    expect(
      screen.getByText(
        new Date("2026-03-10T08:00:00.000Z").toLocaleDateString("ar-EG", {
          year: "numeric",
          month: "short",
          day: "numeric",
        }),
      ),
    ).toBeInTheDocument();
  });

  it.each([
    ["new", "جديدة", "text-[#FCD704]"],
    ["in_progress", "قيد المعالجة", "text-blue-400"],
    ["resolved", "تم الحل", "text-green-400"],
    ["closed", "مغلقة", "text-gray-400"],
    ["unknown", "غير معروف", "text-gray-400"],
  ] as const)(
    "renders the %s status badge",
    (status, statusTranslation, expectedClass) => {
      render(
        <ComplaintCard
          complaint={buildComplaint({
            status,
            status_translation: statusTranslation,
          })}
          onClick={vi.fn()}
        />,
      );

      const badge = screen.getByText(`● ${statusTranslation}`);
      expect(badge.className).toContain(expectedClass);
    },
  );
});