import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { TaskDrawer } from "./TaskDrawer";
import type { TaskDetail } from "../api";

const DETAIL: TaskDetail = {
  ok: true,
  thread_id: "aaaa1111bbbb",
  short_id: "aaaa1111",
  task: "remediate CVE-2026-1",
  status: "done",
  current_phase: "done",
  partial: false,
  timeline: [
    { from_phase: null, to_phase: "intake", entered_at: "2026-06-23T00:00:00+00:00", exited_at: "2026-06-23T00:00:01+00:00", duration_s: 1, status: "active", note: null, cost_usd: 0 },
    { from_phase: "intake", to_phase: "plan", entered_at: "2026-06-23T00:00:01+00:00", exited_at: null, duration_s: null, status: "active", note: null, cost_usd: 0.12 },
  ],
  qa_history: [{ turn: 0, answer: "scope it" }],
  review_verdicts: [],
  plan: { summary: "do the thing" },
  cost_by_stage: { plan: 0.12 },
  total_usd: 0.12,
};

describe("TaskDrawer", () => {
  it("renders the timeline steps with the task description and spend", () => {
    render(<TaskDrawer detail={DETAIL} loading={false} error={null} onClose={() => {}} />);
    expect(screen.getByText("remediate CVE-2026-1")).toBeInTheDocument();
    expect(screen.getByText("intake")).toBeInTheDocument();
    expect(screen.getByText("plan")).toBeInTheDocument();
    expect(screen.getByText("in progress")).toBeInTheDocument(); // open final step
    expect(screen.getByText(/spend \$0\.12/)).toBeInTheDocument();
  });

  it("shows a partial-history banner when partial", () => {
    render(
      <TaskDrawer
        detail={{ ...DETAIL, partial: true }}
        loading={false}
        error={null}
        onClose={() => {}}
      />,
    );
    expect(screen.getByText(/Partial history/)).toBeInTheDocument();
  });

  it("renders nothing when idle (no detail, not loading)", () => {
    const { container } = render(
      <TaskDrawer detail={null} loading={false} error={null} onClose={() => {}} />,
    );
    expect(container).toBeEmptyDOMElement();
  });
});