import type { PickedElementPayload } from "@t3tools/contracts";
import { describe, expect, it } from "vite-plus/test";

import {
  appendElementContextsToPrompt,
  buildElementContextBlock,
  type ElementContextSelection,
  elementContextDedupKey,
  extractTrailingElementContexts,
  formatElementContextLabel,
  formatElementContextSourceLabel,
  newElementContextId,
  normalizeElementContextSelection,
} from "./elementContext";

function makePayload(overrides?: Partial<PickedElementPayload>): PickedElementPayload {
  return {
    pageUrl: "https://example.com/dashboard",
    pageTitle: "Dashboard",
    tagName: "BUTTON",
    selector: "button.submit",
    htmlPreview: '<button class="submit">Save</button>',
    componentName: "SubmitButton",
    source: {
      functionName: "SubmitButton",
      fileName: "/repo/src/Button.tsx",
      lineNumber: 12,
      columnNumber: 5,
    },
    stack: [
      {
        functionName: "SubmitButton",
        fileName: "/repo/src/Button.tsx",
        lineNumber: 12,
        columnNumber: 5,
      },
    ],
    styles: ".submit { color: white; }",
    pickedAt: "2026-05-03T18:00:00.000Z",
    ...overrides,
  };
}

function makeSelection(overrides?: Partial<ElementContextSelection>): ElementContextSelection {
  return {
    pageUrl: "https://example.com/dashboard",
    pageTitle: "Dashboard",
    tagName: "button",
    selector: "button.submit",
    htmlPreview: '<button class="submit">Save</button>',
    componentName: "SubmitButton",
    source: {
      functionName: "SubmitButton",
      fileName: "/repo/src/Button.tsx",
      lineNumber: 12,
      columnNumber: 5,
    },
    styles: ".submit { color: white; }",
    ...overrides,
  };
}

describe("normalizeElementContextSelection", () => {
  it("lowercases the tag, trims strings, and prefers `source` over `stack[0]`", () => {
    const result = normalizeElementContextSelection(
      makePayload({
        tagName: "  Button  ",
        pageUrl: "  https://example.com  ",
        pageTitle: "  Dashboard  ",
        selector: "   ",
        componentName: "   ",
        source: {
          functionName: " Outer ",
          fileName: " /repo/Outer.tsx ",
          lineNumber: 7,
          columnNumber: 0,
        },
        stack: [
          {
            functionName: "Inner",
            fileName: "/repo/Inner.tsx",
            lineNumber: 99,
            columnNumber: 9,
          },
        ],
      }),
    );
    expect(result).not.toBeNull();
    expect(result?.tagName).toBe("button");
    expect(result?.pageUrl).toBe("https://example.com");
    expect(result?.pageTitle).toBe("Dashboard");
    expect(result?.selector).toBeNull();
    expect(result?.componentName).toBeNull();
    expect(result?.source).toEqual({
      functionName: "Outer",
      fileName: "/repo/Outer.tsx",
      lineNumber: 7,
      columnNumber: 0,
    });
  });

  it("returns null when pageUrl or tagName is empty", () => {
    expect(normalizeElementContextSelection(makePayload({ pageUrl: "" }))).toBeNull();
    expect(normalizeElementContextSelection(makePayload({ tagName: "   " }))).toBeNull();
  });

  it("clamps oversized htmlPreview / styles so we don't blow localStorage", () => {
    const huge = "x".repeat(10_000);
    const result = normalizeElementContextSelection(
      makePayload({ htmlPreview: huge, styles: huge }),
    );
    expect(result).not.toBeNull();
    expect(result!.htmlPreview.length).toBeLessThanOrEqual(4000);
    expect(result!.styles.length).toBeLessThanOrEqual(4000);
    // Truncated values should end with the ellipsis sentinel
    expect(result!.htmlPreview.endsWith("…")).toBe(true);
    expect(result!.styles.endsWith("…")).toBe(true);
  });

  it("normalizes Windows line endings inside html/styles", () => {
    const result = normalizeElementContextSelection(
      makePayload({ htmlPreview: "<a>\r\nhi\r\n</a>", styles: ".a {\r\n  color: red;\r\n}" }),
    );
    expect(result?.htmlPreview).toBe("<a>\nhi\n</a>");
    expect(result?.styles).toBe(".a {\n  color: red;\n}");
  });

  it("falls back to stack[0] when payload.source is null", () => {
    const result = normalizeElementContextSelection(
      makePayload({
        source: null,
        stack: [
          {
            functionName: "FromStack",
            fileName: "/repo/FromStack.tsx",
            lineNumber: 3,
            columnNumber: null,
          },
        ],
      }),
    );
    expect(result?.source).toEqual({
      functionName: "FromStack",
      fileName: "/repo/FromStack.tsx",
      lineNumber: 3,
      columnNumber: null,
    });
  });
});

describe("formatElementContextLabel", () => {
  it("prefers component name over tag name", () => {
    expect(formatElementContextLabel(makeSelection())).toBe("<SubmitButton>");
  });

  it("falls back to tag name when no component name is present", () => {
    expect(formatElementContextLabel(makeSelection({ componentName: null }))).toBe("<button>");
  });

  it("truncates very long tag names", () => {
    const tagName = "custom-".concat("x".repeat(60));
    const result = formatElementContextLabel(makeSelection({ componentName: null, tagName }));
    expect(result.length).toBeLessThan(tagName.length);
    expect(result.endsWith("…>")).toBe(true);
  });
});

describe("formatElementContextSourceLabel", () => {
  it("renders basename + line number", () => {
    expect(formatElementContextSourceLabel(makeSelection())).toBe("Button.tsx:12");
  });

  it("returns null when source has no fileName", () => {
    expect(formatElementContextSourceLabel(makeSelection({ source: null }))).toBeNull();
  });

  it("omits line number when missing", () => {
    expect(
      formatElementContextSourceLabel(
        makeSelection({
          source: {
            functionName: null,
            fileName: "/a/b/Foo.tsx",
            lineNumber: null,
            columnNumber: null,
          },
        }),
      ),
    ).toBe("Foo.tsx");
  });
});

describe("elementContextDedupKey", () => {
  it("treats picks of the same element on the same page as duplicates", () => {
    const first = makeSelection();
    const second = makeSelection({ htmlPreview: "different preview", styles: "different styles" });
    expect(elementContextDedupKey(first)).toBe(elementContextDedupKey(second));
  });

  it("differentiates picks with different selectors", () => {
    expect(elementContextDedupKey(makeSelection())).not.toBe(
      elementContextDedupKey(makeSelection({ selector: "button.cancel" })),
    );
  });

  it("differentiates picks with different page urls", () => {
    expect(elementContextDedupKey(makeSelection())).not.toBe(
      elementContextDedupKey(makeSelection({ pageUrl: "https://example.com/other" })),
    );
  });
});

describe("buildElementContextBlock + appendElementContextsToPrompt", () => {
  it("returns empty string for empty contexts", () => {
    expect(buildElementContextBlock([])).toBe("");
    expect(appendElementContextsToPrompt("Hello", [])).toBe("Hello");
  });

  it("serializes a context with header / url / selector / source / html / styles", () => {
    const block = buildElementContextBlock([makeSelection()]);
    expect(block.startsWith("<element_context>")).toBe(true);
    expect(block.endsWith("</element_context>")).toBe(true);
    expect(block).toContain("- <SubmitButton> (Button.tsx:12):");
    expect(block).toContain("  url: https://example.com/dashboard");
    expect(block).toContain("  selector: button.submit");
    expect(block).toContain("  source: /repo/src/Button.tsx:12:5");
    expect(block).toContain("  html:");
    expect(block).toContain("  styles:");
  });

  it("appends with a blank line separator when prompt has text", () => {
    expect(appendElementContextsToPrompt("Investigate this", [makeSelection()])).toBe(
      [
        "Investigate this",
        "",
        "<element_context>",
        "- <SubmitButton> (Button.tsx:12):",
        "  url: https://example.com/dashboard",
        "  selector: button.submit",
        "  source: /repo/src/Button.tsx:12:5",
        "  html:",
        '  <button class="submit">Save</button>',
        "  styles:",
        "  .submit { color: white; }",
        "</element_context>",
      ].join("\n"),
    );
  });

  it("emits no leading blank when prompt is empty", () => {
    expect(
      appendElementContextsToPrompt("", [makeSelection()]).startsWith("<element_context>"),
    ).toBe(true);
  });
});

describe("extractTrailingElementContexts", () => {
  it("round-trips appendElementContextsToPrompt and recovers prompt + entries", () => {
    const prompt = appendElementContextsToPrompt("Investigate this", [
      makeSelection(),
      makeSelection({ selector: "button.cancel", componentName: "CancelButton" }),
    ]);
    const result = extractTrailingElementContexts(prompt);
    expect(result.promptText).toBe("Investigate this");
    expect(result.contextCount).toBe(2);
    expect(result.contexts.map((c) => c.header)).toEqual([
      "<SubmitButton> (Button.tsx:12)",
      "<CancelButton> (Button.tsx:12)",
    ]);
    expect(result.contexts[0]?.body).toContain("url: https://example.com/dashboard");
    expect(result.contexts[0]?.body).toContain("selector: button.submit");
  });

  it("returns the original prompt unchanged when no trailing block exists", () => {
    expect(extractTrailingElementContexts("hi")).toEqual({
      promptText: "hi",
      contextCount: 0,
      contexts: [],
    });
  });
});

describe("newElementContextId", () => {
  it("returns a non-empty string with the element prefix", () => {
    const id = newElementContextId();
    expect(id.startsWith("el_")).toBe(true);
    expect(id.length).toBeGreaterThan(3);
  });

  it("returns unique ids on repeated calls", () => {
    const ids = new Set(Array.from({ length: 10 }, () => newElementContextId()));
    expect(ids.size).toBe(10);
  });
});