import { describe, expect, it } from "vitest";
import {
  defineToolcraft,
  fireEvent,
  renderControlsPanelWithSchema,
  screen,
} from "../testing/controls-panel-test-utils";

describe("ControlsPanel media upload arbitrary files", () => {
  it("offers folder selection only for model source packages", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true, upload: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                source: {
                  assetKind: "model",
                  label: "Model",
                  target: "source.model",
                  type: "fileDrop",
                },
              },
              layout: "standalone",
              title: "Source",
            },
          ],
          title: "Generation Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);

    expect(screen.getByRole("button", { name: "Choose files" })).toBeTruthy();
    expect(screen.getByRole("button", { name: "Choose folder" })).toBeTruthy();
    expect(screen.getByLabelText("Click to upload a model folder")).toBeTruthy();
  });

  it("renders arbitrary file uploads as a sortable file list", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true, upload: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                source: {
                  assetKind: "file",
                  label: "Files",
                  multiple: true,
                  target: "input.files",
                  type: "fileDrop",
                },
              },
              layout: "standalone",
              title: "Input",
            },
          ],
          title: "Generation Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema, undefined, {
      layers: [
        { id: "layer-1", kind: "layer", name: "one", visible: true },
        { id: "layer-2", kind: "layer", name: "two", visible: true },
      ],
      mediaAssets: [
        {
          assetKind: "file",
          dataUrl: "data:text/plain;base64,b25l",
          fileName: "one.txt",
          id: "media-1",
          layerId: "layer-1",
          mimeType: "text/plain",
          position: { x: 0, y: 0 },
          sourceTarget: "input.files",
        },
        {
          assetKind: "file",
          dataUrl: "data:application/json;base64,e30=",
          fileName: "two.json",
          id: "media-2",
          layerId: "layer-2",
          mimeType: "application/json",
          position: { x: 0, y: 0 },
          sourceTarget: "input.files",
        },
      ],
      selectedLayerId: "layer-2",
    });

    const fileList = container.querySelector('[data-slot="file-upload-file-list"]');
    const fileRows = container.querySelectorAll('[data-slot="file-upload-file-item"]');
    const fileDividers = container.querySelectorAll('[data-slot="file-upload-file-divider"]');

    expect(fileList).toBeTruthy();
    expect(fileRows).toHaveLength(2);
    expect(fileDividers).toHaveLength(1);
    expect(screen.getByText("one.txt")).toBeTruthy();
    expect(screen.getByText("two.json")).toBeTruthy();
    expect(screen.getByText("one.txt").className).toContain("text-xs");
    expect(screen.getByText("one.txt").className).not.toContain("truncate");
    expect(screen.getByText("one.txt").className).toContain("mask-image");
    expect(screen.getByRole("button", { name: "Remove one.txt" })).toBeTruthy();
    expect(screen.getByRole("button", { name: "Add a new file" })).toBeTruthy();
    expect(fileRows[0]?.className).not.toContain("border-b");
    expect(fileRows[0]?.className).toContain("hover:bg");
    expect(fileDividers[0]?.className).toContain("var(--border)_5%");
    expect(fileRows[0]?.getAttribute("role")).toBeNull();
    expect(screen.getByRole("button", { name: "Reorder one.txt" })).toBeTruthy();

    fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));

    expect(screen.getByTestId("media-count").textContent).toBe("1");
    expect(screen.queryByText("two.json")).toBeNull();
  });

  it("renders the arbitrary file uploader empty state", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true, upload: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                source: {
                  assetKind: "file",
                  label: "Files",
                  target: "input.files",
                  type: "fileDrop",
                },
              },
              layout: "standalone",
              title: "Input",
            },
          ],
          title: "Generation Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);

    expect(screen.getByText("Click to upload a file")).toBeTruthy();
    expect(screen.getByText("or drag it onto the canvas")).toBeTruthy();
    expect(screen.queryByText("Click to upload an image")).toBeNull();
    expect(screen.queryByRole("button", { name: "Choose folder" })).toBeNull();
  });
});