import {
  fireEvent,
  render,
  screen,
  waitFor,
  within,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { Workbench } from "../../src/components/Workbench";

describe("authentication workbench", () => {
  it("switches independent workspaces and clears sensitive session state", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    expect(
      screen.getByRole("heading", { name: "Credential parameters" }),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: /OCRA challenge/iu }));
    expect(
      screen.getByRole("heading", { name: "OCRA suite and key" }),
    ).toBeInTheDocument();
    await user.click(
      screen.getByRole("button", { name: /WebAuthn \/ Passkeys/iu }),
    );
    expect(
      screen.getByRole("heading", { name: "WebAuthn structure" }),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "Clear session" }));
    expect(
      screen.getByRole("heading", { name: "WebAuthn structure" }),
    ).toBeInTheDocument();
  });

  it("keeps live ceremonies disabled on the shared/non-dedicated origin", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(
      screen.getByRole("button", { name: /WebAuthn \/ Passkeys/iu }),
    );
    await user.click(screen.getByRole("button", { name: "Live ceremony" }));
    expect(screen.getByText("Inspect only")).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: "Create test credential" }),
    ).toBeDisabled();
  });

  it("generates a TOTP at an absolute wall-clock time in an explicit timezone", async () => {
    const user = userEvent.setup();
    render(<Workbench />);

    fireEvent.change(screen.getByLabelText("Base32 secret"), {
      target: { value: "GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ" },
    });
    fireEvent.change(screen.getByLabelText("Account"), {
      target: { value: "rfc-vector" },
    });
    await user.click(screen.getByRole("button", { name: "Show secret" }));
    await waitFor(() =>
      expect(
        (screen.getByLabelText("Provisioning URI") as HTMLTextAreaElement)
          .value,
      ).toContain("secret=GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ"),
    );
    await user.selectOptions(screen.getByLabelText("Digits"), "8");
    await user.click(screen.getByRole("button", { name: "Point in time" }));
    fireEvent.change(screen.getByLabelText("Local date and time"), {
      target: { value: "1970-01-01T00:00:59" },
    });
    fireEvent.change(screen.getByLabelText("IANA timezone"), {
      target: { value: "UTC" },
    });

    expect(screen.getByLabelText("Local date and time")).toHaveValue(
      "1970-01-01T00:00:59.000",
    );
    expect(screen.getByLabelText("IANA timezone")).toHaveValue("UTC");
    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
    expect(screen.getByText("1970-01-01T00:00:59.000Z")).toBeInTheDocument();
    expect(
      within(screen.getByText("TOTP counter").parentElement!).getByText("1"),
    ).toBeInTheDocument();
    await waitFor(() =>
      expect(document.querySelector(".code-display")).toHaveTextContent(
        "942 870 82",
      ),
    );
  });

  it("renders the new OTP diagnostics and attestation workspaces", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByRole("button", { name: "Drift & timeline" }));
    expect(
      screen.getByRole("heading", { name: "OTP timeline" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "Clock-drift finder" }),
    ).toBeInTheDocument();

    await user.click(
      screen.getByRole("button", { name: /WebAuthn \/ Passkeys/iu }),
    );
    await user.click(
      screen.getByRole("button", { name: "Attestation verifier" }),
    );
    expect(
      screen.getByRole("heading", { name: "Attestation evidence" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "FIDO Metadata BLOB" }),
    ).toBeInTheDocument();
  });
});