// @vitest-environment jsdom
//
// Test File 5 — inject.ts showAutofillSelector (T-I01–T-I16).
//
// IMPORTANT ARCHITECTURE NOTE: showAutofillSelector mounts its UI inside a
// CLOSED shadow root (host.attachShadow({ mode: "closed" })). Everything the
// brief wants to assert about the selector's interior — the entry list, arrow/
// Enter/Escape keyboard navigation, the search filter, the lazy GET_ENTRY load,
// the TOTP chip, focus-trapping, above/below placement, isTrusted gating — lives
// behind that closed boundary and is, by design, unreachable from any external
// script (including this test and even a page-context Playwright script).
//
// So this file asserts the ONLY externally-observable contract: the selector
// mounts a host into the document and the returned dismiss function tears it
// down. The interior behaviors are marked it.todo and routed to the Playwright
// e2e, which verifies them through their effects (fields getting filled, the
// host disappearing) rather than by reading the closed tree. The recommendation
// to add a test-only "open shadow" seam is recorded in INTEGRATION-CONTRACT.md.

import "./_setup"; // chrome mock + ResizeObserver polyfill
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { showAutofillSelector } from "../../content/inject";
import { makeInput } from "./_setup";

const ENTRIES = [
  { id: "e1", title: "Acme", username: "alice@example.com" },
  { id: "e2", title: "Acme Admin", username: "root@example.com" },
];

// The host is a position:fixed div with the max z-index; closed shadow means we
// can only see the host, never its contents.
function selectorHost(): HTMLElement | null {
  return document.body.querySelector<HTMLElement>('div[style*="2147483647"]');
}

beforeEach(() => {
  document.body.innerHTML = "";
});
afterEach(() => {
  document.body.innerHTML = "";
});

describe("T-I01: mount + dismiss (the observable contract)", () => {
  // T-I01: opening the selector mounts a host into the document and returns a
  // dismiss function.
  it("T-I01: showAutofillSelector mounts a host and returns a dismiss fn", () => {
    const anchor = makeInput({ type: "password" });
    const dismiss = showAutofillSelector(anchor, ENTRIES, vi.fn());
    expect(typeof dismiss).toBe("function");
    expect(selectorHost()).not.toBeNull();
    dismiss();
  });

  // Dismiss tears the host back down — the closed shadow goes with it. Teardown
  // is animated: dismiss() schedules host.remove() ~130ms later, so we wait it
  // out rather than asserting synchronously.
  it("T-I05/T-I06 (teardown half): the returned dismiss removes the host", async () => {
    const anchor = makeInput({ type: "password" });
    const dismiss = showAutofillSelector(anchor, ENTRIES, vi.fn());
    expect(selectorHost()).not.toBeNull();
    dismiss();
    await new Promise((r) => setTimeout(r, 180));
    expect(selectorHost()).toBeNull();
  });

  // The host mounts even in locked mode (the unlock prompt is also closed-shadow).
  it("T-I01b: locked-mode open also mounts a host", () => {
    const anchor = makeInput({ type: "password" });
    const dismiss = showAutofillSelector(anchor, [], vi.fn(), { locked: true });
    expect(selectorHost()).not.toBeNull();
    dismiss();
  });

  // Re-opening dismisses any previous host the caller forgot — but the caller
  // (index.ts) owns currentDismiss, so here we just confirm two opens leave two
  // hosts unless dismissed, proving each open is independent.
  it("T-I01c: each open creates its own host (caller owns single-instance policy)", () => {
    const anchor = makeInput({ type: "password" });
    const d1 = showAutofillSelector(anchor, ENTRIES, vi.fn());
    const d2 = showAutofillSelector(anchor, ENTRIES, vi.fn());
    expect(document.body.querySelectorAll('div[style*="2147483647"]').length).toBe(2);
    d1();
    d2();
  });
});

// ── Closed-shadow internals → Playwright e2e (T-I02–T-I16) ───────────────────
// Each of these requires reading or interacting with the closed shadow tree.
// They are real test intents, documented here and implemented in
// content.real-page.e2e.test.ts where behavior is verified through effects.
describe("T-I02–T-I16: interior behavior (closed shadow → e2e)", () => {
  it.todo("T-I02: ArrowDown moves selection to the next entry");
  it.todo("T-I03: ArrowUp wraps from first to last entry");
  it.todo("T-I04: Enter selects the focused entry, fills, and closes");
  it.todo("T-I05: Escape closes the selector and fires the dismissal lock");
  it.todo("T-I06: click outside closes the selector and fires the dismissal lock");
  it.todo("T-I07: typing in the search box filters entries by title/domain");
  it.todo("T-I08: search lazily fires GET_ENTRY_FOR_FILL only on a user gesture (MV-2)");
  it.todo("T-I09: empty search results show the 'no matches' state");
  it.todo("T-I10: selector repositions on window scroll (stays anchored)");
  it.todo("T-I11: selector repositions on window resize");
  it.todo("T-I12: selector renders above the field when space below is insufficient");
  it.todo("T-I13: an entry with TOTP shows a live-countdown chip");
  it.todo("T-I14: an entry without TOTP shows no chip");
  it.todo("T-I15: keyboard nav is trapped — Tab cycles entries, does not escape to page");
  it.todo("T-I16: isTrusted — synthetic keyboard events do not trigger fill");
});