import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import type { TaskDerivation } from "./derive";
import TaskPanel from "./TaskPanel";

const base: TaskDerivation = { todos: [], subagents: [], workingTools: [] };

describe("TaskPanel", () => {
	it("empty state", () => {
		render(<TaskPanel tasks={base} />);
		expect(screen.getByText("No tasks yet.")).toBeInTheDocument();
	});

	it("todo rows render icons per status and deleted styling", () => {
		const tasks: TaskDerivation = {
			...base,
			todos: [
				{ content: "write tests", status: "pending", deleted: false },
				{ content: "run them", status: "in-progress", deleted: false },
				{ content: "ship it", status: "completed", deleted: false },
				{ content: "old task", status: "pending", deleted: true },
			],
		};
		const { container } = render(<TaskPanel tasks={tasks} />);
		expect(container.querySelector(".todo-icon.pending")?.textContent).toBe(
			"○",
		);
		expect(container.querySelector(".todo-icon.in-progress")?.textContent).toBe(
			"◺",
		);
		expect(container.querySelector(".todo-icon.completed")?.textContent).toBe(
			"●",
		);
		const deleted = container.querySelector(
			".todo-item.deleted .todo-text",
		) as HTMLElement;
		expect(deleted).not.toBeNull();
		expect(deleted.style.textDecoration).toContain("line-through");
	});

	it("subagent rows: running spinner, done check, failed cross", () => {
		const tasks: TaskDerivation = {
			...base,
			subagents: [
				{ key: "a", name: "scout", running: true, isError: false },
				{ key: "b", name: "worker", running: false, isError: false },
				{ key: "c", name: "reviewer", running: false, isError: true },
			],
		};
		render(<TaskPanel tasks={tasks} />);
		expect(screen.getByLabelText("running")).toBeInTheDocument();
		expect(screen.getByText("scout")).toBeInTheDocument();
		expect(screen.getByText("running")).toBeInTheDocument();
		expect(screen.getByText("✓")).toBeInTheDocument();
		expect(screen.getByText("✕")).toBeInTheDocument();
		expect(screen.getByText("done")).toBeInTheDocument();
		expect(screen.getByText("failed")).toBeInTheDocument();
	});

	it("working tools section", () => {
		const tasks: TaskDerivation = {
			...base,
			workingTools: [
				{
					id: "c1",
					name: "bash",
					args: "ls",
					running: true,
					isError: false,
					preview: "",
				},
			],
		};
		render(<TaskPanel tasks={tasks} />);
		expect(screen.getByText("Working")).toBeInTheDocument();
		expect(screen.getByText("bash…")).toBeInTheDocument();
	});

	it("sections appear only when populated", () => {
		const { rerender, queryByText } = render(
			<TaskPanel
				tasks={{
					...base,
					todos: [{ content: "t", status: "pending", deleted: false }],
				}}
			/>,
		);
		expect(queryByText("Tasks")).not.toBeNull();
		expect(queryByText("Subagents")).toBeNull();
		expect(queryByText("Working")).toBeNull();
		rerender(
			<TaskPanel
				tasks={{
					...base,
					subagents: [{ key: "a", name: "s", running: false, isError: false }],
				}}
			/>,
		);
		expect(queryByText("Tasks")).toBeNull();
		expect(queryByText("Subagents")).not.toBeNull();
	});
});