/* @vitest-environment jsdom */

import { act, render, screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { afterEach, expect, test, vi } from 'vitest';

import type {
  AuthUser,
  PublicUserSummary,
} from '../../../packages/shared/src/contracts/auth';
import type { ProfileReferralInviteCenterResponse } from '../../../packages/shared/src/contracts/runtime';
import { AuthUiContext } from '../auth/AuthUiContext';
import {
  RpgEntryHomeView,
  type RpgEntryHomeViewProps,
} from './RpgEntryHomeView';
import type { PlatformPublicGalleryCard } from './rpgEntryWorldPresentation';

const {
  mockBuildReferralCenter,
  mockGetRpgProfileReferralInviteCenter,
  mockGetRpgProfileWalletLedger,
  mockRedeemRpgProfileReferralInviteCode,
} = vi.hoisted(() => {
  const buildReferralCenter = (
    overrides: Partial<ProfileReferralInviteCenterResponse> = {},
  ): ProfileReferralInviteCenterResponse => ({
    inviteCode: 'SY12345678',
    inviteLinkPath: '/?inviteCode=SY12345678',
    invitedCount: 1,
    rewardedInviteCount: 1,
    todayInviterRewardCount: 1,
    todayInviterRewardRemaining: 9,
    rewardPoints: 30,
    invitedUsers: [
      {
        userId: 'user-2',
        displayName: '被邀请玩家',
        avatarUrl: null,
        boundAt: '2026-05-01T08:00:00Z',
      },
    ],
    hasRedeemedCode: false,
    boundInviterUserId: null,
    boundAt: null,
    updatedAt: '2026-05-01T08:00:00Z',
    ...overrides,
  });

  return {
    mockBuildReferralCenter: buildReferralCenter,
    mockGetRpgProfileReferralInviteCenter: vi.fn(async () =>
      buildReferralCenter(),
    ),
    mockRedeemRpgProfileReferralInviteCode: vi.fn(async () => ({
      center: buildReferralCenter({
        invitedUsers: [],
        hasRedeemedCode: true,
        boundInviterUserId: 'user-2',
        boundAt: '2026-05-01T08:00:00Z',
      }),
      inviteeRewardGranted: true,
      inviterRewardGranted: true,
      inviteeBalanceAfter: 30,
      inviterBalanceAfter: 30,
    })),
    mockGetRpgProfileWalletLedger: vi.fn(async () => ({
      entries: [
        {
          id: 'ledger-1',
          amountDelta: -1,
          balanceAfter: 29,
          sourceType: 'asset_operation_consume',
          createdAt: '2026-04-28T10:00:00Z',
        },
        {
          id: 'ledger-2',
          amountDelta: 30,
          balanceAfter: 30,
          sourceType: 'invite_invitee_reward',
          createdAt: '2026-04-28T09:00:00Z',
        },
      ],
    })),
  };
});

const {
  mockGetPublicAuthUserByCode,
  mockGetPublicAuthUserById,
  mockUpdateAuthProfile,
} = vi.hoisted(() => ({
  mockGetPublicAuthUserByCode: vi.fn(
    async (code: string): Promise<PublicUserSummary> => ({
      id: `id-${code}`,
      publicUserCode: code,
      displayName: '公开作者',
      avatarUrl: null,
    }),
  ),
  mockGetPublicAuthUserById: vi.fn(
    async (userId: string): Promise<PublicUserSummary> => ({
      id: userId,
      publicUserCode: `code-${userId}`,
      displayName: '公开作者',
      avatarUrl: null,
    }),
  ),
  mockUpdateAuthProfile: vi.fn(),
}));

vi.mock('../../services/authService', () => ({
  getPublicAuthUserByCode: mockGetPublicAuthUserByCode,
  getPublicAuthUserById: mockGetPublicAuthUserById,
  updateAuthProfile: mockUpdateAuthProfile,
}));

mockUpdateAuthProfile.mockResolvedValue({
  id: 'user-1',
  publicUserCode: '100001',
  username: 'tester',
  displayName: '测试玩家',
  avatarUrl: null,
  phoneNumberMasked: null,
  loginMethod: 'password',
  bindingStatus: 'active',
  wechatBound: false,
  createdAt: new Date().toISOString(),
});

vi.mock('../../services/rpg-entry/rpgProfileClient', () => ({
  getRpgProfileReferralInviteCenter: mockGetRpgProfileReferralInviteCenter,
  getRpgProfileWalletLedger: mockGetRpgProfileWalletLedger,
  redeemRpgProfileReferralInviteCode: mockRedeemRpgProfileReferralInviteCode,
  getRpgProfileRechargeCenter: vi.fn(async () => ({
    walletBalance: 0,
    membership: {
      status: 'normal',
      tier: 'normal',
      startedAt: null,
      expiresAt: null,
      updatedAt: null,
    },
    pointProducts: [
      {
        productId: 'points_60',
        title: '60光点',
        priceCents: 600,
        kind: 'points',
        pointsAmount: 60,
        bonusPoints: 60,
        durationDays: 0,
        badgeLabel: '首充双倍',
        description: '首充送60光点',
        tier: 'normal',
      },
    ],
    membershipProducts: [
      {
        productId: 'member_month',
        title: '月卡',
        priceCents: 2800,
        kind: 'membership',
        pointsAmount: 0,
        bonusPoints: 0,
        durationDays: 30,
        badgeLabel: '',
        description: '30天会员',
        tier: 'month',
      },
    ],
    benefits: [
      {
        benefitName: '免光点回合数',
        normalValue: '30',
        monthValue: '100',
        seasonValue: '100',
        yearValue: '100',
      },
    ],
    latestOrder: null,
    hasPointsRecharged: false,
  })),
  createRpgProfileRechargeOrder: vi.fn(async () => ({
    order: {
      orderId: 'order-1',
      productId: 'points_60',
      productTitle: '60光点',
      kind: 'points',
      amountCents: 600,
      status: 'paid',
      paymentChannel: 'mock',
      paidAt: '2026-04-25T10:00:00Z',
      createdAt: '2026-04-25T10:00:00Z',
      pointsDelta: 120,
      membershipExpiresAt: null,
    },
    center: {
      walletBalance: 120,
      membership: {
        status: 'normal',
        tier: 'normal',
        startedAt: null,
        expiresAt: null,
        updatedAt: null,
      },
      pointProducts: [],
      membershipProducts: [],
      benefits: [],
      latestOrder: null,
      hasPointsRecharged: true,
    },
  })),
}));

vi.mock('../ResolvedAssetImage', () => ({
  ResolvedAssetImage: ({
    src,
    alt,
    className,
    ...rest
  }: {
    src?: string | null;
    alt?: string;
    className?: string;
  }) =>
    src ? (
      <img src={src} alt={alt ?? ''} className={className} {...rest} />
    ) : null,
}));

const originalMatchMedia = window.matchMedia;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const originalCancelAnimationFrame = window.cancelAnimationFrame;
const puzzlePublicEntry = {
  sourceType: 'puzzle',
  workId: 'puzzle-work-public-1',
  profileId: 'puzzle-profile-public-1',
  publicWorkCode: 'PZ-EPUBLIC1',
  ownerUserId: 'user-2',
  authorDisplayName: '拼图玩家',
  worldName: '奇幻拼图',
  subtitle: '拼图关卡',
  summaryText: '一张用于公开分享的拼图作品。',
  coverImageSrc: null,
  themeTags: ['奇幻'],
  playCount: 20,
  remixCount: 5,
  likeCount: 12,
  visibility: 'published',
  publishedAt: '1777110165.990127Z',
  updatedAt: '2026-04-25T10:00:00.000Z',
} satisfies PlatformPublicGalleryCard;

const remixRankEntry = {
  ...puzzlePublicEntry,
  workId: 'puzzle-work-remix-rank',
  profileId: 'puzzle-profile-remix-rank',
  publicWorkCode: 'PZ-REMIX1',
  worldName: '改造高分拼图',
  playCount: 2,
  remixCount: 18,
  likeCount: 1,
  recentPlayCount7d: 0,
  publishedAt: '2026-04-25T11:00:00.000Z',
  updatedAt: '2026-04-25T11:00:00.000Z',
} satisfies PlatformPublicGalleryCard;

function buildCarouselPuzzleEntry(
  id: string,
  worldName: string,
  coverPrefix: string,
) {
  return {
    ...puzzlePublicEntry,
    workId: `puzzle-work-${id}`,
    profileId: `puzzle-profile-${id}`,
    publicWorkCode: `PZ-${id.toUpperCase()}`,
    worldName,
    coverImageSrc: `${coverPrefix}-fallback.png`,
    coverSlides: [
      {
        id: `${id}-cover-1`,
        imageSrc: `${coverPrefix}-1.png`,
        label: `${worldName} 1`,
      },
      {
        id: `${id}-cover-2`,
        imageSrc: `${coverPrefix}-2.png`,
        label: `${worldName} 2`,
      },
    ],
  } satisfies PlatformPublicGalleryCard;
}

const hotRankEntry = {
  ...puzzlePublicEntry,
  workId: 'puzzle-work-hot-rank',
  profileId: 'puzzle-profile-hot-rank',
  publicWorkCode: 'PZ-HOT001',
  worldName: '热门高分拼图',
  themeTags: ['奇幻', '机关'],
  playCount: 40,
  remixCount: 1,
  likeCount: 4,
  recentPlayCount7d: 0,
  publishedAt: '2026-04-24T10:00:00.000Z',
  updatedAt: '2026-04-24T10:00:00.000Z',
} satisfies PlatformPublicGalleryCard;

const newRankEntry = {
  ...puzzlePublicEntry,
  workId: 'puzzle-work-new-rank',
  profileId: 'puzzle-profile-new-rank',
  publicWorkCode: 'PZ-NEW001',
  worldName: '新品增长拼图',
  playCount: 1,
  remixCount: 0,
  likeCount: 0,
  recentPlayCount7d: 9,
  publishedAt: '2026-04-20T10:00:00.000Z',
  updatedAt: '2026-04-20T10:00:00.000Z',
} satisfies PlatformPublicGalleryCard;

const longTextRankEntry = {
  ...puzzlePublicEntry,
  workId: 'puzzle-work-long-text-rank',
  profileId: 'puzzle-profile-long-text-rank',
  publicWorkCode: 'PZ-LONG01',
  worldName: '关键词逍遥游拼图关卡',
  themeTags: ['逍遥游拼图', '古风机关'],
  playCount: 88,
  remixCount: 0,
  likeCount: 0,
  recentPlayCount7d: 0,
  publishedAt: '2026-04-29T10:00:00.000Z',
  updatedAt: '2026-04-29T10:00:00.000Z',
} satisfies PlatformPublicGalleryCard;

function mockDesktopLayout() {
  Object.defineProperty(window, 'matchMedia', {
    configurable: true,
    writable: true,
    value: vi.fn().mockImplementation(() => ({
      matches: true,
      media: '(min-width: 1024px)',
      onchange: null,
      addEventListener: vi.fn(),
      removeEventListener: vi.fn(),
      addListener: vi.fn(),
      removeListener: vi.fn(),
      dispatchEvent: vi.fn(),
    })),
  });
}

function renderProfileView(
  onRechargeSuccess = vi.fn(),
  profileDashboardOverrides: Partial<
    NonNullable<RpgEntryHomeViewProps['profileDashboard']>
  > = {},
  userOverrides: Partial<AuthUser> = {},
) {
  return render(
    <AuthUiContext.Provider
      value={{
        user: {
          id: 'user-1',
          publicUserCode: '100001',
          username: 'tester',
          displayName: '测试玩家',
          avatarUrl: null,
          phoneNumberMasked: null,
          loginMethod: 'password',
          bindingStatus: 'active',
          wechatBound: false,
          createdAt: new Date().toISOString(),
          ...userOverrides,
        },
        canAccessProtectedData: true,
        openLoginModal: vi.fn(),
        requireAuth: (action) => action(),
        openSettingsModal: vi.fn(),
        openAccountModal: vi.fn(),
        setCurrentUser: vi.fn(),
        logout: vi.fn(async () => undefined),
        musicVolume: 0.42,
        setMusicVolume: vi.fn(),
        platformTheme: 'light',
        setPlatformTheme: vi.fn(),
        isHydratingSettings: false,
        isPersistingSettings: false,
        settingsError: null,
      }}
    >
      <RpgEntryHomeView
        activeTab="profile"
        onTabChange={vi.fn()}
        hasSavedGame={false}
        savedSnapshot={null}
        saveEntries={[]}
        saveError={null}
        featuredEntries={[]}
        latestEntries={[]}
        myEntries={[]}
        historyEntries={[]}
        profileDashboard={{
          walletBalance: 0,
          totalPlayTimeMs: 0,
          playedWorldCount: 0,
          updatedAt: null,
          ...profileDashboardOverrides,
        }}
        isLoadingPlatform={false}
        isLoadingDashboard={false}
        isResumingSaveWorldKey={null}
        platformError={null}
        dashboardError={null}
        onContinueGame={vi.fn()}
        onResumeSave={vi.fn()}
        onOpenCreateWorld={vi.fn()}
        onOpenCreateTypePicker={vi.fn()}
        onOpenGalleryDetail={vi.fn()}
        onOpenLibraryDetail={vi.fn()}
        onSearchPublicCode={vi.fn()}
        onRechargeSuccess={onRechargeSuccess}
      />
    </AuthUiContext.Provider>,
  );
}

function renderLoggedOutHomeView(
  openLoginModal = vi.fn(),
  overrides: Partial<
    Pick<
      RpgEntryHomeViewProps,
      | 'featuredEntries'
      | 'latestEntries'
      | 'onOpenGalleryDetail'
      | 'onSearchPublicCode'
    >
  > = {},
) {
  return render(
    <AuthUiContext.Provider
      value={{
        user: null,
        canAccessProtectedData: false,
        openLoginModal,
        requireAuth: vi.fn(),
        openSettingsModal: vi.fn(),
        openAccountModal: vi.fn(),
        setCurrentUser: vi.fn(),
        logout: vi.fn(async () => undefined),
        musicVolume: 0.42,
        setMusicVolume: vi.fn(),
        platformTheme: 'light',
        setPlatformTheme: vi.fn(),
        isHydratingSettings: false,
        isPersistingSettings: false,
        settingsError: null,
      }}
    >
      <RpgEntryHomeView
        activeTab="home"
        onTabChange={vi.fn()}
        hasSavedGame={false}
        savedSnapshot={null}
        saveEntries={[]}
        saveError={null}
        featuredEntries={overrides.featuredEntries ?? []}
        latestEntries={overrides.latestEntries ?? []}
        myEntries={[]}
        historyEntries={[]}
        profileDashboard={null}
        isLoadingPlatform={false}
        isLoadingDashboard={false}
        isResumingSaveWorldKey={null}
        platformError={null}
        dashboardError={null}
        onContinueGame={vi.fn()}
        onResumeSave={vi.fn()}
        onOpenCreateWorld={vi.fn()}
        onOpenCreateTypePicker={vi.fn()}
        onOpenGalleryDetail={overrides.onOpenGalleryDetail ?? vi.fn()}
        onOpenLibraryDetail={vi.fn()}
        onSearchPublicCode={overrides.onSearchPublicCode ?? vi.fn()}
      />
    </AuthUiContext.Provider>,
  );
}

function renderStatefulLoggedOutHomeView(
  overrides: Partial<
    Pick<RpgEntryHomeViewProps, 'featuredEntries' | 'latestEntries'>
  > = {},
) {
  function StatefulLoggedOutHomeView() {
    const [activeTab, setActiveTab] =
      useState<RpgEntryHomeViewProps['activeTab']>('home');

    return (
      <AuthUiContext.Provider
        value={{
          user: null,
          canAccessProtectedData: false,
          openLoginModal: vi.fn(),
          requireAuth: vi.fn(),
          openSettingsModal: vi.fn(),
          openAccountModal: vi.fn(),
          setCurrentUser: vi.fn(),
          logout: vi.fn(async () => undefined),
          musicVolume: 0.42,
          setMusicVolume: vi.fn(),
          platformTheme: 'light',
          setPlatformTheme: vi.fn(),
          isHydratingSettings: false,
          isPersistingSettings: false,
          settingsError: null,
        }}
      >
        <RpgEntryHomeView
          activeTab={activeTab}
          onTabChange={setActiveTab}
          hasSavedGame={false}
          savedSnapshot={null}
          saveEntries={[]}
          saveError={null}
          featuredEntries={overrides.featuredEntries ?? []}
          latestEntries={overrides.latestEntries ?? []}
          myEntries={[]}
          historyEntries={[]}
          profileDashboard={null}
          isLoadingPlatform={false}
          isLoadingDashboard={false}
          isResumingSaveWorldKey={null}
          platformError={null}
          dashboardError={null}
          onContinueGame={vi.fn()}
          onResumeSave={vi.fn()}
          onOpenCreateWorld={vi.fn()}
          onOpenCreateTypePicker={vi.fn()}
          onOpenGalleryDetail={vi.fn()}
          onOpenLibraryDetail={vi.fn()}
          onSearchPublicCode={vi.fn()}
        />
      </AuthUiContext.Provider>
    );
  }

  return render(<StatefulLoggedOutHomeView />);
}

afterEach(() => {
  vi.useRealTimers();
  vi.clearAllMocks();
  mockGetRpgProfileReferralInviteCenter.mockResolvedValue(
    mockBuildReferralCenter(),
  );
  mockUpdateAuthProfile.mockResolvedValue({
    id: 'user-1',
    publicUserCode: '100001',
    username: 'tester',
    displayName: '测试玩家',
    avatarUrl: null,
    phoneNumberMasked: null,
    loginMethod: 'password',
    bindingStatus: 'active',
    wechatBound: false,
    createdAt: new Date().toISOString(),
  });
  Object.defineProperty(window, 'matchMedia', {
    configurable: true,
    writable: true,
    value: originalMatchMedia,
  });
  Object.defineProperty(window, 'requestAnimationFrame', {
    configurable: true,
    writable: true,
    value: originalRequestAnimationFrame,
  });
  Object.defineProperty(window, 'cancelAnimationFrame', {
    configurable: true,
    writable: true,
    value: originalCancelAnimationFrame,
  });
  Object.defineProperty(navigator, 'clipboard', {
    configurable: true,
    value: undefined,
  });
});

test('opens wallet ledger modal from narrative coin card', async () => {
  const user = userEvent.setup();

  renderProfileView();
  await user.click(screen.getByRole('button', { name: /光点\s*0/u }));

  expect(await screen.findByText('光点账单')).toBeTruthy();
  expect(mockGetRpgProfileWalletLedger).toHaveBeenCalledTimes(1);
  expect(screen.getByText('资产操作消耗')).toBeTruthy();
  expect(screen.getByText('-1')).toBeTruthy();
  expect(screen.getByText('填写邀请码奖励')).toBeTruthy();
  expect(screen.getByText('+30')).toBeTruthy();
});

test('profile total play time card always uses hours', () => {
  renderProfileView(vi.fn(), {
    totalPlayTimeMs: 90 * 60 * 1000,
  });

  const playTimeCard = screen.getByRole('button', {
    name: /游戏时长/u,
  });

  expect(within(playTimeCard).getByText('1.5小时')).toBeTruthy();
  expect(within(playTimeCard).queryByText('90分')).toBeNull();
});

test('profile played works card shows count unit', () => {
  renderProfileView(vi.fn(), {
    playedWorldCount: 1,
  });

  const playedCard = screen.getByRole('button', {
    name: /玩过\s*1个/u,
  });

  expect(within(playedCard).getByText('1个')).toBeTruthy();
});

test('desktop account entry uses saved avatar image when available', () => {
  mockDesktopLayout();
  const avatarUrl = 'data:image/png;base64,AAAA';

  renderProfileView(vi.fn(), {}, { avatarUrl });

  const accountEntry = screen.getByRole('button', { name: /测试玩家/u });
  const avatarImage = accountEntry.querySelector('img');
  expect(avatarImage?.getAttribute('src')).toBe(avatarUrl);
  expect(within(accountEntry).queryByText('测')).toBeNull();
});

test('wallet ledger modal shows empty and error states', async () => {
  const user = userEvent.setup();
  mockGetRpgProfileWalletLedger.mockResolvedValueOnce({ entries: [] });

  renderProfileView();
  await user.click(screen.getByRole('button', { name: /光点\s*0/u }));
  expect(await screen.findByText('暂无账单记录')).toBeTruthy();

  await user.click(screen.getByLabelText('关闭光点账单'));
  mockGetRpgProfileWalletLedger.mockRejectedValueOnce(new Error('加载失败'));
  await user.click(screen.getByRole('button', { name: /光点\s*0/u }));

  expect(await screen.findByText('加载失败')).toBeTruthy();
  expect(screen.getByText('重新加载')).toBeTruthy();
});

test('profile invite shortcut shows reward subtitle and invited users', async () => {
  const user = userEvent.setup();

  renderProfileView();

  const inviteButton = screen.getByRole('button', { name: /邀请好友/u });
  expect(within(inviteButton).getByText('双方得30')).toBeTruthy();

  const communityButton = screen.getByRole('button', { name: /玩家社区/u });
  expect(within(communityButton).getByText('每日领福利')).toBeTruthy();

  await user.click(inviteButton);

  expect(mockGetRpgProfileReferralInviteCenter).toHaveBeenCalledTimes(1);
  expect(
    await screen.findByText('邀请一个用户注册，双方都可以获得30光点。'),
  ).toBeTruthy();
  expect(screen.getByText('每日最多获得十次邀请奖励。')).toBeTruthy();
  expect(screen.getByText('成功邀请')).toBeTruthy();
  expect(screen.getByText('被邀请玩家')).toBeTruthy();
  expect(screen.queryByText('已奖')).toBeNull();
  expect(screen.queryByText('今日')).toBeNull();
});

test('profile redeem invite shortcut sits between invite and community for fresh accounts', async () => {
  renderProfileView();

  const inviteButton = screen.getByRole('button', { name: /邀请好友/u });
  const redeemButton = await screen.findByRole('button', {
    name: /填邀请码/u,
  });
  const communityButton = screen.getByRole('button', { name: /玩家社区/u });

  expect(
    inviteButton.compareDocumentPosition(redeemButton) &
      Node.DOCUMENT_POSITION_FOLLOWING,
  ).toBeTruthy();
  expect(
    redeemButton.compareDocumentPosition(communityButton) &
      Node.DOCUMENT_POSITION_FOLLOWING,
  ).toBeTruthy();
  expect(within(redeemButton).getByText('新用户奖励')).toBeTruthy();
});

test('profile redeem invite shortcut hides after redeemed or one day old', async () => {
  const user = userEvent.setup();

  mockGetRpgProfileReferralInviteCenter.mockResolvedValueOnce(
    mockBuildReferralCenter({
      invitedUsers: [],
      hasRedeemedCode: true,
      boundInviterUserId: 'user-2',
      boundAt: '2026-05-01T08:00:00Z',
    }),
  );
  const { unmount } = renderProfileView();
  await user.click(screen.getByRole('button', { name: /邀请好友/u }));
  await screen.findByText('成功邀请');
  const firstShortcutRegion = screen.getByRole('region', { name: '常用功能' });
  expect(
    within(firstShortcutRegion).queryByRole('button', { name: /填邀请码/u }),
  ).toBeNull();
  unmount();

  renderProfileView(vi.fn(), {}, { createdAt: '2026-04-01T00:00:00.000Z' });
  const expiredShortcutRegion = screen.getByRole('region', { name: '常用功能' });
  expect(
    within(expiredShortcutRegion).queryByRole('button', {
      name: /填邀请码/u,
    }),
  ).toBeNull();
});

test('profile redeem invite modal submits code and hides shortcut after success', async () => {
  const user = userEvent.setup();
  const onRechargeSuccess = vi.fn();

  renderProfileView(onRechargeSuccess);

  await user.click(await screen.findByRole('button', { name: /填邀请码/u }));
  const input = await screen.findByLabelText('邀请码');
  await user.type(input, 'spring-2026');
  await user.click(screen.getByRole('button', { name: '提交' }));

  await waitFor(() => {
    expect(mockRedeemRpgProfileReferralInviteCode).toHaveBeenCalledWith(
      'SPRING2026',
    );
  });
  expect(onRechargeSuccess).toHaveBeenCalledTimes(1);
  expect(await screen.findByText('已填写')).toBeTruthy();
  const shortcutRegion = screen.getByRole('region', { name: '常用功能' });
  expect(
    within(shortcutRegion).queryByRole('button', {
      name: /填邀请码/u,
    }),
  ).toBeNull();
});

test('opens reward code modal from profile action on mobile', async () => {
  const user = userEvent.setup();

  renderProfileView();
  await user.click(screen.getByRole('button', { name: /兑换码/u }));

  const modal = await screen.findByPlaceholderText('输入兑换码');
  expect(modal).toBeTruthy();
  expect(screen.getByRole('button', { name: '兑换' })).toBeTruthy();
  expect(screen.getByLabelText('关闭兑换码')).toBeTruthy();
});

test('shows a reachable login entry in logged out mobile shell', async () => {
  const user = userEvent.setup();
  const openLoginModal = vi.fn();

  renderLoggedOutHomeView(openLoginModal);
  await user.click(screen.getByRole('button', { name: '登录' }));

  expect(openLoginModal).toHaveBeenCalledTimes(1);
});

test('mobile home search submits public work code', async () => {
  const user = userEvent.setup();
  const onSearchPublicCode = vi.fn();

  render(
    <AuthUiContext.Provider
      value={{
        user: null,
        canAccessProtectedData: false,
        openLoginModal: vi.fn(),
        requireAuth: vi.fn(),
        openSettingsModal: vi.fn(),
        openAccountModal: vi.fn(),
        setCurrentUser: vi.fn(),
        logout: vi.fn(async () => undefined),
        musicVolume: 0.42,
        setMusicVolume: vi.fn(),
        platformTheme: 'light',
        setPlatformTheme: vi.fn(),
        isHydratingSettings: false,
        isPersistingSettings: false,
        settingsError: null,
      }}
    >
      <RpgEntryHomeView
        activeTab="home"
        onTabChange={vi.fn()}
        hasSavedGame={false}
        savedSnapshot={null}
        saveEntries={[]}
        saveError={null}
        featuredEntries={[]}
        latestEntries={[]}
        myEntries={[]}
        historyEntries={[]}
        profileDashboard={null}
        isLoadingPlatform={false}
        isLoadingDashboard={false}
        isResumingSaveWorldKey={null}
        platformError={null}
        dashboardError={null}
        onContinueGame={vi.fn()}
        onResumeSave={vi.fn()}
        onOpenCreateWorld={vi.fn()}
        onOpenCreateTypePicker={vi.fn()}
        onOpenGalleryDetail={vi.fn()}
        onOpenLibraryDetail={vi.fn()}
        onSearchPublicCode={onSearchPublicCode}
      />
    </AuthUiContext.Provider>,
  );

  const searchInput = screen.getByPlaceholderText(
    '搜索作品号、名称、作者、描述',
  );
  await user.type(searchInput, 'PZ-PROFILE1{enter}');

  expect(onSearchPublicCode).toHaveBeenCalledWith('PZ-PROFILE1');
});

test('home search fuzzy matches public work id, name, author and description', async () => {
  const user = userEvent.setup();
  const onOpenGalleryDetail = vi.fn();
  const onSearchPublicCode = vi.fn();
  const entries = [
    {
      ...puzzlePublicEntry,
      workId: 'puzzle-work-moon-gate',
      profileId: 'puzzle-profile-moon-gate',
      publicWorkCode: 'PZ-MOON01',
      authorDisplayName: '月井守望',
      worldName: '月井机关',
      summaryText: '需要沿着银色水路重新点亮机关。',
    },
    {
      ...puzzlePublicEntry,
      workId: 'puzzle-work-fire-bridge',
      profileId: 'puzzle-profile-fire-bridge',
      publicWorkCode: 'PZ-FIRE02',
      authorDisplayName: '晨风',
      worldName: '火桥谜图',
      summaryText: '跨过熔岩断桥寻找遗失碎片。',
    },
  ] satisfies PlatformPublicGalleryCard[];

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: entries,
    onOpenGalleryDetail,
    onSearchPublicCode,
  });

  const searchInput = screen.getByPlaceholderText('搜索作品号、名称、作者、描述');
  await user.type(searchInput, 'MOON01{enter}');
  expect(await screen.findByText('搜索结果')).toBeTruthy();
  expect(screen.getByText('月井机关')).toBeTruthy();
  expect(screen.queryByText('火桥谜图')).toBeNull();
  expect(onSearchPublicCode).not.toHaveBeenCalled();

  await user.clear(searchInput);
  await user.type(searchInput, '火桥{enter}');
  expect(await screen.findByText('火桥谜图')).toBeTruthy();
  expect(screen.queryByText('月井机关')).toBeNull();

  await user.clear(searchInput);
  await user.type(searchInput, '月井守望{enter}');
  expect(await screen.findByText('月井机关')).toBeTruthy();
  expect(screen.queryByText('火桥谜图')).toBeNull();

  await user.clear(searchInput);
  await user.type(searchInput, '熔岩断桥{enter}');
  expect(await screen.findByText('火桥谜图')).toBeTruthy();
  expect(screen.queryByText('月井机关')).toBeNull();

  await user.click(screen.getByRole('button', { name: /火桥谜图/u }));
  expect(onOpenGalleryDetail).toHaveBeenCalledWith(entries[1]);
});

test('home search keeps public code fallback when local works do not match', async () => {
  const user = userEvent.setup();
  const onSearchPublicCode = vi.fn();

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry],
    onSearchPublicCode,
  });

  const searchInput = screen.getByPlaceholderText('搜索作品号、名称、作者、描述');
  await user.type(searchInput, 'CW-REMOTE-ONLY{enter}');

  expect(onSearchPublicCode).toHaveBeenCalledWith('CW-REMOTE-ONLY');
  expect(screen.queryByText('搜索结果')).toBeNull();
});

test('public gallery cards hide work code until detail is opened', async () => {
  const user = userEvent.setup();
  const onOpenGalleryDetail = vi.fn();

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry],
    onOpenGalleryDetail,
  });

  expect(screen.queryByText('PZ-EPUBLIC1')).toBeNull();
  expect(
    screen.queryByRole('button', { name: '复制作品号 PZ-EPUBLIC1' }),
  ).toBeNull();

  await user.click(screen.getByRole('button', { name: /奇幻拼图/u }));

  expect(onOpenGalleryDetail).toHaveBeenCalledWith(puzzlePublicEntry);
});

test('mobile public work cards render cover, author, kind and cover stats', () => {
  const { container } = renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry],
  });

  const card = screen.getByRole('button', {
    name: /奇幻拼图，拼图，20游玩，5改造，12点赞/u,
  });
  expect(
    card.querySelector('.platform-public-work-card__cover.aspect-video'),
  ).toBeTruthy();
  expect(
    card.querySelector('.platform-public-work-card__cover-stats'),
  ).toBeTruthy();
  expect(
    card.querySelectorAll('.platform-public-work-card__cover-stat'),
  ).toHaveLength(3);
  expect(
    card.querySelector('.platform-public-work-card__kind')?.textContent,
  ).toBe('拼图');
  expect(
    card.querySelector('.platform-public-work-card__author-avatar')
      ?.textContent,
  ).toBe('拼');
  expect(screen.getByText('奇幻拼图')).toBeTruthy();
  expect(screen.getByText('拼图玩家')).toBeTruthy();
  expect(screen.getByText('一张用于公开分享的拼图作品。')).toBeTruthy();
  expect(screen.getByText('奇幻')).toBeTruthy();
  expect(screen.getByText('20')).toBeTruthy();
  expect(screen.getByText('5')).toBeTruthy();
  expect(screen.getByText('12')).toBeTruthy();
  expect(card.querySelector('.platform-pill--warm')?.textContent).not.toBe(
    '推荐',
  );
  expect(
    container.querySelector('.platform-mobile-home-channel--active')
      ?.textContent,
  ).toBe('推荐');
});

test('public work cards load real author avatar from public user summary', async () => {
  mockGetPublicAuthUserById.mockResolvedValueOnce({
    id: 'user-2',
    publicUserCode: 'SY-00000002',
    displayName: '拼图玩家',
    avatarUrl: 'data:image/png;base64,AUTHOR',
  });

  renderLoggedOutHomeView(vi.fn(), {
    featuredEntries: [puzzlePublicEntry],
    latestEntries: [puzzlePublicEntry],
  });

  const card = screen.getByRole('button', {
    name: /奇幻拼图，拼图，20游玩，5改造，12点赞/u,
  });

  await waitFor(() => {
    expect(
      card
        .querySelector('.platform-public-work-card__author-avatar-image')
        ?.getAttribute('src'),
    ).toBe('data:image/png;base64,AUTHOR');
  });
  expect(mockGetPublicAuthUserById).toHaveBeenCalledTimes(1);
  expect(mockGetPublicAuthUserById).toHaveBeenCalledWith('user-2');
  expect(mockGetPublicAuthUserByCode).not.toHaveBeenCalled();
});

test('mobile home feed only rotates the card closest to screen center', () => {
  vi.useFakeTimers();
  Object.defineProperty(window, 'requestAnimationFrame', {
    configurable: true,
    writable: true,
    value: (callback: FrameRequestCallback) =>
      window.setTimeout(() => callback(0), 0),
  });
  Object.defineProperty(window, 'cancelAnimationFrame', {
    configurable: true,
    writable: true,
    value: (handle: number) => window.clearTimeout(handle),
  });

  const firstEntry = buildCarouselPuzzleEntry('center1', '中心拼图一', 'center-one');
  const secondEntry = buildCarouselPuzzleEntry(
    'center2',
    '中心拼图二',
    'center-two',
  );
  const cardRects = new Map<string, DOMRect>();

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [firstEntry, secondEntry],
  });

  const tabPanel = document.querySelector('.platform-tab-panel--active');
  const firstCard = screen.getByRole('button', { name: /中心拼图一/u });
  const secondCard = screen.getByRole('button', { name: /中心拼图二/u });
  if (!tabPanel) {
    throw new Error('缺少移动端首页滚动面板');
  }

  tabPanel.getBoundingClientRect = vi.fn(
    () =>
      ({
        top: 0,
        bottom: 600,
        height: 600,
        left: 0,
        right: 360,
        width: 360,
      }) as DOMRect,
  );
  firstCard.getBoundingClientRect = vi.fn(() => cardRects.get('first')!);
  secondCard.getBoundingClientRect = vi.fn(() => cardRects.get('second')!);
  cardRects.set('first', {
    top: 170,
    bottom: 370,
    height: 200,
    left: 0,
    right: 320,
    width: 320,
  } as DOMRect);
  cardRects.set('second', {
    top: 420,
    bottom: 620,
    height: 200,
    left: 0,
    right: 320,
    width: 320,
  } as DOMRect);

  act(() => {
    vi.runOnlyPendingTimers();
  });

  expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
    'center-one-1.png',
  );
  expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
    'center-two-1.png',
  );

  act(() => {
    vi.advanceTimersByTime(4200);
  });

  expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
    'center-one-2.png',
  );
  expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
    'center-two-1.png',
  );

  cardRects.set('first', {
    top: -120,
    bottom: 80,
    height: 200,
    left: 0,
    right: 320,
    width: 320,
  } as DOMRect);
  cardRects.set('second', {
    top: 200,
    bottom: 400,
    height: 200,
    left: 0,
    right: 320,
    width: 320,
  } as DOMRect);

  act(() => {
    tabPanel.dispatchEvent(new Event('scroll'));
    vi.runOnlyPendingTimers();
  });

  expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
    'center-one-1.png',
  );

  act(() => {
    vi.advanceTimersByTime(4200);
  });

  expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
    'center-two-2.png',
  );
});

test('mobile today channel only shows newly published works from today', async () => {
  const user = userEvent.setup();
  const now = new Date();
  const todayPublishedAt = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate(),
    10,
  ).toISOString();
  const yesterdayPublishedAt = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() - 1,
    10,
  ).toISOString();
  const todayEntry = {
    ...puzzlePublicEntry,
    workId: 'puzzle-work-today',
    profileId: 'puzzle-profile-today',
    publicWorkCode: 'PZ-TODAY1',
    worldName: '今日新游',
    publishedAt: todayPublishedAt,
    updatedAt: todayPublishedAt,
  } satisfies PlatformPublicGalleryCard;
  const yesterdayEntry = {
    ...puzzlePublicEntry,
    workId: 'puzzle-work-yesterday',
    profileId: 'puzzle-profile-yesterday',
    publicWorkCode: 'PZ-YDAY01',
    worldName: '昨日旧作',
    publishedAt: yesterdayPublishedAt,
    updatedAt: yesterdayPublishedAt,
  } satisfies PlatformPublicGalleryCard;
  const updatedTodayEntry = {
    ...puzzlePublicEntry,
    workId: 'puzzle-work-updated-today',
    profileId: 'puzzle-profile-updated-today',
    publicWorkCode: 'PZ-UPDAY1',
    worldName: '今日更新旧作',
    publishedAt: yesterdayPublishedAt,
    updatedAt: todayPublishedAt,
  } satisfies PlatformPublicGalleryCard;

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [yesterdayEntry, updatedTodayEntry, todayEntry],
  });

  await user.click(screen.getByRole('button', { name: '今日游戏' }));

  expect(screen.getByRole('button', { name: /今日新游/u })).toBeTruthy();
  expect(screen.queryByText('昨日旧作')).toBeNull();
  expect(screen.queryByText('今日更新旧作')).toBeNull();
});

test('desktop home syncs mobile home modules without square or latest labels', () => {
  mockDesktopLayout();
  const todayPublishedAt = new Date().toISOString();
  const todayEntry = {
    ...puzzlePublicEntry,
    workId: 'puzzle-work-desktop-today',
    profileId: 'puzzle-profile-desktop-today',
    publicWorkCode: 'PZ-DTODAY',
    worldName: '桌面今日新游',
    publishedAt: todayPublishedAt,
    updatedAt: todayPublishedAt,
  } satisfies PlatformPublicGalleryCard;

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry, todayEntry],
  });

  expect(screen.getByText('今日游戏')).toBeTruthy();
  expect(screen.getByText('推荐')).toBeTruthy();
  expect(screen.getByText('作品分类')).toBeTruthy();
  expect(screen.getAllByText('桌面今日新游').length).toBeGreaterThan(0);
  expect(screen.queryByText('趋势关注')).toBeNull();
  expect(screen.queryByText('最新发布')).toBeNull();
  expect(screen.queryByText('作品广场')).toBeNull();
  expect(screen.queryByText('公开作品')).toBeNull();
  expect(screen.queryByText('PZ-EPUBLIC1')).toBeNull();
  expect(screen.getAllByText('拼图').length).toBeGreaterThan(0);
  expect(screen.queryByText('1777110165.990127Z')).toBeNull();
});

test('mobile home moves category shelf into game category channel', async () => {
  const user = userEvent.setup();
  const { container } = renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry],
  });

  expect(screen.queryByRole('button', { name: 'PC游戏' })).toBeNull();
  expect(screen.queryByRole('button', { name: '即点即玩' })).toBeNull();

  await user.click(screen.getByRole('button', { name: '游戏分类' }));

  expect(screen.getAllByText('游戏分类').length).toBeGreaterThan(0);
  expect(screen.getByRole('button', { name: /筛选/u })).toBeTruthy();
  expect(screen.getByRole('button', { name: '奇幻' })).toBeTruthy();
  expect(screen.getByRole('button', { name: /奇幻拼图，试玩/u })).toBeTruthy();
  expect(container.querySelector('.platform-category-game-list')).toBeTruthy();
  expect(container.querySelector('.platform-category-game-item')).toBeTruthy();
  expect(
    container.querySelector('.platform-category-game-item__action')
      ?.textContent,
  ).toBe('试玩');
});

test('mobile game category list orders works by composite public metric', async () => {
  const user = userEvent.setup();

  renderLoggedOutHomeView(vi.fn(), {
    latestEntries: [puzzlePublicEntry, hotRankEntry],
  });

  await user.click(screen.getByRole('button', { name: '游戏分类' }));
  await user.click(screen.getByRole('button', { name: '奇幻' }));

  const gameItems = Array.from(
    document.querySelectorAll('.platform-category-game-item__title'),
  ).map((element) => element.textContent);
  expect(gameItems).toEqual(['热门高分拼图', '奇幻拼图']);
});

test('bottom category tab becomes ranking and switches ranking metrics', async () => {
  const user = userEvent.setup();

  renderStatefulLoggedOutHomeView({
    latestEntries: [remixRankEntry, hotRankEntry, newRankEntry],
  });

  expect(screen.queryByRole('button', { name: '分类' })).toBeNull();

  await user.click(screen.getByRole('button', { name: '排行' }));

  expect(await screen.findByRole('tab', { name: '热门榜' })).toBeTruthy();
  expect(screen.getByRole('tab', { name: '改造榜' })).toBeTruthy();
  expect(screen.getByRole('tab', { name: '新品榜' })).toBeTruthy();
  expect(screen.getByRole('tab', { name: '点赞榜' })).toBeTruthy();

  const rankingPanel = document.getElementById('platform-tab-panel-category');
  expect(rankingPanel?.getAttribute('aria-hidden')).toBe('false');
  expect(within(rankingPanel!).getByText('热门高分拼图')).toBeTruthy();
  expect(within(rankingPanel!).getByText('40')).toBeTruthy();
  expect(within(rankingPanel!).getAllByText('游玩').length).toBeGreaterThan(0);

  await user.click(screen.getByRole('tab', { name: '改造榜' }));

  expect(within(rankingPanel!).getByText('改造高分拼图')).toBeTruthy();
  expect(within(rankingPanel!).getByText('18')).toBeTruthy();
  expect(within(rankingPanel!).getAllByText('改造').length).toBeGreaterThan(0);

  await user.click(screen.getByRole('tab', { name: '新品榜' }));

  expect(within(rankingPanel!).getByText('新品增长拼图')).toBeTruthy();
  expect(within(rankingPanel!).getByText('9')).toBeTruthy();
  expect(within(rankingPanel!).getAllByText('近7日').length).toBeGreaterThan(0);
});

test('ranking rows limit displayed work name and show two short tags on the third line', async () => {
  const user = userEvent.setup();

  renderStatefulLoggedOutHomeView({
    latestEntries: [longTextRankEntry],
  });

  await user.click(screen.getByRole('button', { name: '排行' }));

  const rankingPanel = document.getElementById('platform-tab-panel-category');
  expect(rankingPanel).toBeTruthy();
  expect(within(rankingPanel!).getByText('关键词逍遥游拼图')).toBeTruthy();
  expect(within(rankingPanel!).queryByText('关键词逍遥游拼图关卡')).toBeNull();
  expect(within(rankingPanel!).getByText('逍遥游拼')).toBeTruthy();
  expect(within(rankingPanel!).getByText('古风机关')).toBeTruthy();
  expect(within(rankingPanel!).queryByText(/2026-04-29/u)).toBeNull();
  expect(within(rankingPanel!).queryByText('拼图玩家')).toBeNull();
});