// @vitest-environment jsdom
/**
 * CellRenderer — DOM-validity regression: a <button> must never be rendered
 * inside a <button>.
 *
 * The editable cell wrapper is a <button> (click-to-edit). But the
 * intrinsically-interactive cell types — title/heading (record link),
 * relation (per-record chips), files (file chips) — render content that is
 * ITSELF a <button>. Wrapping them nested a button inside a button: invalid
 * HTML that made React report a hydration error ("<button> cannot be a
 * descendant of <button>") on every database table view, and broke click
 * targeting.
 *
 * The fix renders those types in a plain (non-button) container, so their
 * own controls own the clicks (they already stopPropagation). This test
 * pins the invariant for every interactive type AND guards the control
 * types (select/button) that must keep their wrapper.
 */
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

// CellRenderer imports its data hooks from use-database — stub the whole
// module so the test renders without the database query layer.
vi.mock("@/hooks/use-database", () => ({
  findOption: (options: { id: string }[] | undefined, id?: string) =>
    (options ?? []).find((o) => o.id === id),
  useRelations: () => ({
    data: [{ recordId: "r1", record: { id: "r1", title: "Linked record" } }]
  }),
  useUpdateRecord: () => ({ mutateAsync: vi.fn(), isPending: false })
}));

// File chips fetch metadata (GET /files/:id) — return a static image file.
vi.mock("@/lib/api", () => ({
  apiFetch: vi.fn(async () => ({
    data: {
      id: "f1",
      name: "attachment.png",
      size: 1024,
      mimeType: "image/png",
      url: "http://example.test/attachment.png",
      thumbnailUrl: null
    }
  }))
}));

import { CellRenderer } from "@/components/database/cell-renderer";
import { DatabaseProperty, RecordDto, RecordValue } from "@/hooks/use-database";

const record = {
  id: "rec1",
  databaseId: "db1",
  version: 1,
  title: "My Page",
  icon: null,
  properties: {},
  createdTime: null,
  lastEditedTime: null,
  createdAt: "2026-01-01T00:00:00.000Z",
  updatedAt: "2026-01-01T00:00:00.000Z"
} as unknown as RecordDto;

const prop = (p: Partial<DatabaseProperty> & { type: DatabaseProperty["type"]; name: string }): DatabaseProperty =>
  p as unknown as DatabaseProperty;

let container: HTMLDivElement;
let root: Root;

beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
  root = createRoot(container);
});

afterEach(() => {
  root.unmount();
  container.remove();
});

async function renderCell(property: DatabaseProperty, value?: RecordValue): Promise<HTMLDivElement> {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  act(() => {
    root.render(
      <QueryClientProvider client={qc}>
        <CellRenderer record={record} property={property} value={value} />
      </QueryClientProvider>
    );
  });
  // Flush any async query/cache updates inside act to avoid un-wrapped updates.
  await act(async () => {
    await new Promise((r) => setTimeout(r, 0));
  });
  return container;
}

async function renderCellWithEdit(
  property: DatabaseProperty,
  value: RecordValue,
  onEdit: (record: RecordDto, property: DatabaseProperty) => void
): Promise<HTMLDivElement> {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  act(() => {
    root.render(
      <QueryClientProvider client={qc}>
        <CellRenderer record={record} property={property} value={value} onEdit={onEdit} />
      </QueryClientProvider>
    );
  });
  await act(async () => {
    await new Promise((r) => setTimeout(r, 0));
  });
  return container;
}

/** Assert no <button> in `el` is a descendant of another <button>. */
function expectNoNestedButtons(el: HTMLElement): void {
  const bad = [...el.querySelectorAll("button")].filter((b) => b.closest("button") !== b);
  expect(bad, "found a <button> nested inside a <button>").toHaveLength(0);
}

describe("CellRenderer DOM validity (no <button> inside <button>)", () => {
  it("title cell: click-to-edit button wrapper with plain text inside (no nested button)", async () => {
    const el = await renderCell(
      prop({ type: "title", name: "Name", config: {} }),
      { text: "My Page" }
    );
    // The title cell is the click-to-edit wrapper (a <button>) again — this
    // is the primary way to rename a record. The value inside is plain text
    // (a <span>), NOT a nested "open page" button (that nested-button +
    // navigate-on-click behavior was the earlier bug).
    expect(el.firstElementChild?.tagName).toBe("BUTTON");
    const link = el.querySelector("button");
    expect(link, "exactly one button (the wrapper), no nested button").toBe(el.firstElementChild);
    expectNoNestedButtons(el);
    expect(el.querySelector("span")?.textContent).toContain("My Page");
  });

  it("title cell: clicking fires onEdit (the cell is editable)", async () => {
    const onEdit = vi.fn();
    const el = await renderCellWithEdit(
      prop({ type: "title", name: "Name", config: {} }),
      { text: "My Page" },
      onEdit
    );
    act(() => {
      (el.firstElementChild as HTMLButtonElement).click();
    });
    expect(onEdit).toHaveBeenCalledTimes(1);
  });

  it("title cell: empty value shows the 'Untitled' placeholder", async () => {
    const el = await renderCell(prop({ type: "title", name: "Name", config: {} }), { text: "" });
    expect(el.querySelector(".text-muted-foreground")?.textContent).toBe("Untitled");
  });

  it("relation cell: chips are top-level buttons, root is a container", async () => {
    const el = await renderCell(
      prop({ type: "relation", name: "Related", config: { targetDatabaseId: "db2" } }),
      { recordIds: ["r1"] }
    );
    expect(el.firstElementChild?.tagName).toBe("DIV");
    expect(el.querySelectorAll("button").length).toBeGreaterThan(0);
    expectNoNestedButtons(el);
  });

  it("files cell: file chip is a top-level button, root is a container", async () => {
    const el = await renderCell(
      prop({ type: "files", name: "Attachments", config: {} }),
      { fileIds: ["f1"] }
    );
    expect(el.firstElementChild?.tagName).toBe("DIV");
    expect(el.querySelector("button")).not.toBeNull();
    expectNoNestedButtons(el);
  });

  it("button-type property: the action chip is a single (non-nested) button", async () => {
    const el = await renderCell(
      prop({ type: "button", name: "Archive", config: { actions: [{ type: "set_property" }] } })
    );
    expect(el.querySelector("button")).not.toBeNull();
    expectNoNestedButtons(el);
  });

  it("control: editable select still uses the click-to-edit button wrapper", async () => {
    const el = await renderCell(
      prop({
        type: "select",
        name: "Status",
        config: { options: [{ id: "o1", name: "To Do", color: "default" }] }
      }),
      { optionId: "o1" }
    );
    // Editable non-interactive types keep the <button> wrapper.
    expect(el.firstElementChild?.tagName).toBe("BUTTON");
    expectNoNestedButtons(el);
  });
});