import { fireEvent, render, screen } from "@testing-library/react";
import { beforeEach, expect, test, vi } from "vitest";

const mocks = vi.hoisted(() => ({
  page: null,
  reload: vi.fn(),
  reportLoading: vi.fn()
}));

vi.mock("@/app/timezone/TimeZoneProvider.jsx", () => ({
  useTimeZone: () => ({ formatMillis: () => "2026-07-11 10:30:00" })
}));

vi.mock("@/features/dashboard/hooks/useDashboardPage.js", () => ({
  useDashboardPage: () => mocks.page
}));

vi.mock("@/shared/ui/PageLoadBoundary.jsx", () => ({
  usePageLoadingStatus: mocks.reportLoading
}));

vi.mock("@/shared/charts/DistributionPieChart.jsx", () => ({
  DistributionPieChart: ({ ariaLabel, data }) => (
    <div aria-label={ariaLabel}>{data.map((item) => `${item.label}:${item.count}`).join("|")}</div>
  )
}));

import { DashboardUserProfile } from "./DashboardUserProfile.jsx";

beforeEach(() => {
  mocks.reload.mockReset();
  mocks.reportLoading.mockReset();
  mocks.page = {
    error: "",
    loading: false,
    overview: {
      activeUsers: 456,
      appCode: "lalu",
      appVersionDistribution: [
        { count: 300, key: "2.1.0", label: "2.1.0" },
        { count: 156, key: "2.0.9", label: "2.0.9" }
      ],
      genderDistribution: [
        { count: 700, key: "female", label: "女" },
        { count: 534, key: "male", label: "男" }
      ],
      newUsers: 32,
      totalUsers: 1234,
      updatedAtMs: 1783737000000
    },
    reload: mocks.reload
  };
});

test("renders the three user KPIs and both distribution charts with explicit metric scope", () => {
  render(<DashboardUserProfile />);

  expect(screen.getByText("总人数")).toBeInTheDocument();
  expect(screen.getByText("1,234")).toBeInTheDocument();
  expect(screen.getByText("当天新增")).toBeInTheDocument();
  expect(screen.getByText("32")).toBeInTheDocument();
  expect(screen.getByText("当前日活")).toBeInTheDocument();
  expect(screen.getByText("456")).toBeInTheDocument();
  expect(screen.getByText("性别人数分布")).toBeInTheDocument();
  expect(screen.getByLabelText("自然用户性别人数分布饼图")).toHaveTextContent("女:700|男:534");
  expect(screen.getByText("App 版本号人数分布")).toBeInTheDocument();
  expect(screen.getByText("自然用户 · 最近一次成功登录版本")).toBeInTheDocument();
  expect(screen.getByLabelText("自然用户最近一次成功登录 App 版本号人数分布饼图")).toHaveTextContent("2.1.0:300|2.0.9:156");
  expect(screen.getByText("数据更新时间 2026-07-11 10:30:00")).toBeInTheDocument();
  expect(mocks.reportLoading).toHaveBeenCalledWith(false);
});

test("shows a retryable error without removing the user profile section", () => {
  mocks.page = { error: "画像接口暂不可用", loading: false, overview: null, reload: mocks.reload };

  render(<DashboardUserProfile />);
  fireEvent.click(screen.getByRole("button", { name: "重试" }));

  expect(screen.getByRole("alert")).toHaveTextContent("画像接口暂不可用");
  expect(mocks.reload).toHaveBeenCalledTimes(1);
});

test("renders animated placeholders while loading and a stable empty state for an empty response", () => {
  mocks.page = { error: "", loading: true, overview: null, reload: mocks.reload };
  const { container, rerender } = render(<DashboardUserProfile />);

  expect(container.querySelectorAll(".dashboard-profile-skeleton__kpi")).toHaveLength(3);
  expect(container.querySelectorAll(".dashboard-profile-skeleton__chart")).toHaveLength(2);
  expect(mocks.reportLoading).toHaveBeenLastCalledWith(true);

  mocks.page = { error: "", loading: false, overview: null, reload: mocks.reload };
  rerender(<DashboardUserProfile />);
  expect(screen.getByRole("status")).toHaveTextContent("当前无数据");
});
