import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import type { ReactNode } from "react";
import { afterEach, vi } from "vitest";

afterEach(() => {
  cleanup();
});

interface StubActionPanelAction {
  key: string;
  label: string;
  icon?: ReactNode;
  onClick?: () => void | Promise<void>;
  disabled?: boolean;
  loading?: boolean;
}

// Module-level so React lint rules don't flag the component as defined inside
// the `vi.mock` factory.
const StubActionPanel = ({
  title,
  actions,
  className,
}: {
  title: string;
  actions: StubActionPanelAction[];
  className?: string;
}) => (
  <section data-slot="action-panel" data-title={title} className={className}>
    {actions.map((a) => (
      <button
        key={a.key}
        type="button"
        onClick={() => {
          void a.onClick?.();
        }}
        disabled={Boolean(a.disabled) || Boolean(a.loading)}
        aria-busy={a.loading ? true : undefined}
      >
        {a.label}
      </button>
    ))}
  </section>
);

// @tailor-platform/app-shell >=1.3.0 wraps `ActionPanel` actions with
// `useRegisterCommandPaletteActions`, which throws unless rendered inside the
// `CommandPaletteProvider` that `AppShell` mounts. Standing up the full
// `AppShell` purely to satisfy the palette context in unit tests is overkill,
// so we swap `ActionPanel` for a minimal stub that preserves the externally
// observable behaviour the tests assert: every action renders as a button
// with the same label and onClick handler; `disabled`/`loading` are reflected
// via the `disabled` attribute (matching the real ActionPanel — disabled
// buttons stay in the DOM and `getAllByRole("button")` still picks them up).
vi.mock("@tailor-platform/app-shell", async (importOriginal) => {
  const actual = await importOriginal<typeof import("@tailor-platform/app-shell")>();
  return { ...actual, ActionPanel: StubActionPanel };
});