import { act, cleanup, render } from "@testing-library/react";
import * as React from "react";
import { afterEach, describe, expect, it, vi } from "vitest";

import { timelineModule } from "../../../modules/built-ins/timeline/timeline-module";
import { defineToolcraft } from "../../../schema/define-toolcraft";
import type { ToolcraftExternalStore } from "../../../state/toolcraft-external-store";
import { ToolcraftRoot } from "../../app-shell/toolcraft-root";
import { useToolcraftStore } from "../../app-shell/toolcraft-store-context";
import { ControlsPanel } from "../controls-panel";

const counters = vi.hoisted(() => ({
  commits: new Map<string, number>(),
  executions: new Map<string, number>(),
}));

function increment(counter: Map<string, number>, id: string): void {
  counter.set(id, (counter.get(id) ?? 0) + 1);
}

function CommitProbe({ id }: { id: string }): null {
  React.useLayoutEffect(() => {
    increment(counters.commits, id);
  });

  return null;
}

vi.mock("@repo/ui", async (importOriginal) => {
  const actual = await importOriginal<typeof import("@repo/ui")>();

  return {
    ...actual,
    PanelSection: (props: React.ComponentProps<typeof actual.PanelSection>) => (
      <>
        <CommitProbe id={`section:${String(props.title)}`} />
        <actual.PanelSection {...props} />
      </>
    ),
  };
});

vi.mock(
  "../renderers/controls-panel-basic-renderers",
  async (importOriginal) => {
    const actual =
      await importOriginal<
        typeof import("../renderers/controls-panel-basic-renderers")
      >();

    return {
      ...actual,
      renderBasicControl: (
        args: Parameters<typeof actual.renderBasicControl>[0],
      ): React.ReactNode => {
        increment(counters.executions, args.id);

        return (
          <>
            <CommitProbe id={`control:${args.id}`} />
            {actual.renderBasicControl(args)}
          </>
        );
      },
    };
  },
);

function CaptureStore({
  capture,
}: {
  capture: (store: ToolcraftExternalStore) => void;
}): null {
  capture(useToolcraftStore());
  return null;
}

function resetCounters(): void {
  counters.commits.clear();
  counters.executions.clear();
}

function count(counter: Map<string, number>, id: string): number {
  return counter.get(id) ?? 0;
}

function renderIsolationPanel(
  schema: ReturnType<typeof defineToolcraft>,
  initialState?: React.ComponentProps<typeof ToolcraftRoot>["initialState"],
): ToolcraftExternalStore {
  let store: ToolcraftExternalStore | undefined;

  render(
    <ToolcraftRoot initialState={initialState} schema={schema}>
      <CaptureStore
        capture={(value) => {
          store = value;
        }}
      />
      <ControlsPanel framed={false} />
    </ToolcraftRoot>,
  );

  if (!store) {
    throw new Error("Expected Toolcraft store to be captured.");
  }

  resetCounters();
  return store;
}

afterEach(() => {
  cleanup();
  resetCounters();
  window.localStorage.clear();
});

describe("ControlsPanel render isolation metadata", () => {
  it("isolates keyframe group and selection metadata by target", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: true },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-4",
                controls: {
                  alpha: {
                    applicability: { mode: "always" as const },
                    defaultValue: 10,
                    label: "Alpha",
                    max: 100,
                    min: 0,
                    target: "shape.alpha",
                    type: "slider",
                  },
                  beta: {
                    applicability: { mode: "always" as const },
                    defaultValue: 20,
                    label: "Beta",
                    max: 100,
                    min: 0,
                    target: "shape.beta",
                    type: "slider",
                  },
                },
                title: "Animation",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [timelineModule({ mode: "keyframes" })],
    });
    const store = renderIsolationPanel(schema, {
      timeline: {
        expanded: true,
        keyframeGroups: [
          {
            controlId: "shape.alpha",
            keyframes: [
              {
                controlId: "shape.alpha",
                controlLabel: "Alpha",
                id: "alpha-0",
                timeSeconds: 0,
                value: 10,
                valueLabel: "10",
              },
            ],
            label: "Alpha",
          },
          {
            controlId: "shape.beta",
            keyframes: [
              {
                controlId: "shape.beta",
                controlLabel: "Beta",
                id: "beta-0",
                timeSeconds: 0,
                value: 20,
                valueLabel: "20",
              },
            ],
            label: "Beta",
          },
        ],
      },
    });

    act(() => {
      store.dispatch({
        keyframeId: "alpha-0",
        type: "timeline.selectKeyframe",
      });
    });

    expect(count(counters.executions, "alpha")).toBe(1);
    expect(count(counters.commits, "control:alpha")).toBe(1);
    expect(count(counters.executions, "beta")).toBe(0);
    expect(count(counters.commits, "control:beta")).toBe(0);
    expect(count(counters.commits, "section:Animation")).toBe(0);

    resetCounters();
    act(() => {
      store.dispatch({ keyframeId: "beta-0", type: "timeline.selectKeyframe" });
    });
    resetCounters();
    act(() => {
      store.dispatch({
        easing: { type: "step" },
        keyframeId: "alpha-0",
        type: "timeline.changeKeyframeEasing",
      });
    });

    expect(count(counters.executions, "alpha")).toBe(1);
    expect(count(counters.commits, "control:alpha")).toBe(1);
    expect(count(counters.executions, "beta")).toBe(0);
    expect(count(counters.commits, "control:beta")).toBe(0);
    expect(count(counters.commits, "section:Animation")).toBe(0);
  });
});