import { GlobalRegistrator } from "@happy-dom/global-registrator";
if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

import { expect, test } from "bun:test";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { createSeedDataset } from "../../domain/seed.ts";
import { monthView } from "../../domain/views.ts";
import { store } from "../../store/index.ts";
import { MonthPieShowcase } from "./MonthPieShowcase.tsx";

test("hiding the breakdown stays remembered after remount and leaves its control reachable", () => {
  localStorage.removeItem("budget2:show-month-breakdown");
  const data = createSeedDataset("2026-09");
  const original = { get: store.get, subscribe: store.subscribe };
  store.get = () => data;
  store.subscribe = () => () => {};
  const container = document.createElement("div");
  let root = createRoot(container);
  const render = () => root.render(<MonthPieShowcase view={monthView(data, "2026-09")} baseCurrency="DKK" />);
  try {
    act(render);
    const toggle = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
    expect(toggle).not.toBeNull();
    expect(toggle.checked).toBe(true);
    act(() => toggle.click());
    expect(container.querySelector('svg[role="img"]')).toBeNull();
    act(() => root.unmount());
    root = createRoot(container);
    act(render);
    const remembered = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
    expect(remembered.checked).toBe(false);
    act(() => remembered.click());
    expect(container.querySelector('svg[role="img"]')).not.toBeNull();
  } finally {
    act(() => root.unmount());
    Object.assign(store, original);
    localStorage.removeItem("budget2:show-month-breakdown");
  }
});

test("pie showcase switches between spending and allocations", () => {
  const data = createSeedDataset("2026-09");
  data.posts[0]!.rules = [{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 250, currency: "DKK" } } }];
  data.months[0]!.income = { amount: 1000, currency: "DKK" };
  data.purchases.push({ id: "p", date: "2026-09", description: "Games", total: { amount: 50, currency: "DKK" }, splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }], schedule: null });
  const original = { get: store.get, subscribe: store.subscribe };
  store.get = () => data;
  store.subscribe = () => () => {};
  const container = document.createElement("div");
  const root = createRoot(container);
  try {
    act(() => root.render(<MonthPieShowcase view={monthView(data, "2026-09")} baseCurrency="DKK" />));
    expect(container.textContent).toContain("50.00 DKK");
    const allocation = [...container.querySelectorAll("button")].find((button) => button.textContent === "Allocated")!;
    act(() => allocation.click());
    expect(allocation.getAttribute("aria-pressed")).toBe("true");
    expect(container.textContent).toContain("250.00 DKK");
    expect(container.querySelector("svg[role='img']")).not.toBeNull();
  } finally {
    act(() => root.unmount());
    Object.assign(store, original);
  }
});