import React from "react";
import { render, screen } from "@testing-library/react";
import { SortableTaskCard } from "@/app/(private)/dashboard/team/blackboard/page";
import { TooltipProvider } from "@/components/ui/tooltip";
import { describe, it, expect, vi, beforeEach } from "vitest";
import * as sortable from "@dnd-kit/sortable";

// Mock @dnd-kit/sortable
vi.mock("@dnd-kit/sortable", async () => {
  const actual = await vi.importActual("@dnd-kit/sortable");
  return {
    ...actual,
    useSortable: vi.fn(),
  };
});

describe("SortableTaskCard Interaction", () => {
  const mockTask = {
    id: "task-1",
    title: "Test Task",
    content: "Details",
    status: "todo" as const,
    priority: "normal" as const,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
    created_by: 1,
    assigned_to: null,
  };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("applies overlay classes when isOverlay is true", () => {
    vi.mocked(sortable.useSortable).mockReturnValue({
      attributes: {},
      listeners: {},
      setNodeRef: vi.fn(),
      transform: null,
      transition: null,
      isDragging: false,
    } as any);

    render(
      <TooltipProvider>
        <SortableTaskCard
          task={mockTask}
          onEdit={vi.fn()}
          onDelete={vi.fn()}
          isOverlay={true}
        />
      </TooltipProvider>
    );

    const card = screen.getByText("Test Task").closest(".rounded-lg");
    expect(card).toHaveClass("shadow-[0_25px_60px_-15px_rgba(0,0,0,0.3)]");
    expect(card).toHaveClass("scale-110");
    expect(card).toHaveClass("rotate-2");
    expect(card).toHaveClass("z-[100]");
    expect(card).toHaveClass("transition-transform");
    expect(card).toHaveClass("cursor-grab");
  });

  it("renders a ghost element when isDragging is true (and not overlay)", () => {
    vi.mocked(sortable.useSortable).mockReturnValue({
      attributes: {},
      listeners: {},
      setNodeRef: vi.fn(),
      transform: null,
      transition: null,
      isDragging: true,
    } as any);

    render(
      <TooltipProvider>
        <SortableTaskCard
          task={mockTask}
          onEdit={vi.fn()}
          onDelete={vi.fn()}
          isOverlay={false}
        />
      </TooltipProvider>
    );

    // The ghost element doesn't have the task title
    const ghost = screen.getByTestId("task-ghost");
    expect(ghost).toHaveClass("shadow-inner");
    expect(ghost).toHaveClass("bg-primary/5");
    expect(screen.queryByText("Test Task")).not.toBeInTheDocument();
  });
});