// @vitest-environment jsdom
import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, expect, it, vi } from 'vitest';

import { AppShell, type InstanceContext } from './app-shell.js';
import type { AuditDataSource } from './audit/audit-page.js';
import type { EventStreamClient } from './events/event-stream-client.js';
import { type FleetDataSource, type FleetSnapshot } from './fleet/fleet-page.js';
import type { FleetMessagesDataSource } from './fleet/fleet-messages-api-data-source.js';
import type { InstanceDataSource } from './instances/instance-api-data-source.js';
import type { JobsDataSource } from './jobs/jobs-page.js';

afterEach(() => {
  cleanup();
  vi.restoreAllMocks();
  vi.unstubAllGlobals();
});

const snapshot: FleetSnapshot = {
  instances: [
    {
      id: 'bravo',
      name: 'Bravo',
      url: 'http://user:***@bravo.example:8080/private',
      tags: ['west'],
    },
    { id: 'alpha', name: 'Alpha', url: 'https://alpha.example/admin' },
  ],
  statuses: new Map([
    [
      'bravo',
      {
        reachable: true,
        authenticated: false,
        latencyMs: 40,
        summary: {
          version: '2.0',
          capabilities: ['sms'],
          freshness: 'stale',
          anomalies: ['clock drift'],
          resources: {
            cpuPercent: 18.4,
            memoryPercent: 63.2,
            maxTemperatureCelsius: 46.7,
            phoneNumbers: ['13800138000'],
          },
        },
      },
    ],
    [
      'alpha',
      {
        reachable: true,
        authenticated: true,
        latencyMs: 10,
        summary: { version: '1.0', capabilities: ['ussd'], freshness: 'fresh' },
      },
    ],
  ]),
};

function source(load: FleetDataSource['load']): FleetDataSource {
  return { load };
}

const quietEventStreamClient: EventStreamClient = {
  subscribe: () => () => undefined,
};

const emptyPage = { items: [], page: { page: 1, pageSize: 25, total: 0 } };

describe('React AppShell and Fleet vertical slice', () => {
  it('loads real injected data and renders canonical origins and owner routes without React key warnings', async () => {
    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
    let resolve!: (value: FleetSnapshot) => void;
    const dataSource = source(() => new Promise((done) => (resolve = done)));
    render(<AppShell pathname="/fleet" version="0.1.0" fleetDataSource={dataSource} />);

    expect(screen.getByRole('status', { name: '实例加载状态' }).textContent).toContain(
      '正在加载实例',
    );
    resolve(snapshot);

    const alpha = await screen.findByRole('row', { name: /Alpha/ });
    expect(within(alpha).getByRole('link', { name: 'Alpha' }).getAttribute('href')).toBe(
      '/instances/alpha/overview',
    );
    expect(
      within(screen.getByRole('row', { name: /Bravo/ }))
        .getByRole('link', { name: '打开 Bravo 的源站' })
        .getAttribute('href'),
    ).toBe('http://bravo.example:8080');
    expect(screen.getByText('版本 0.1.0')).toBeTruthy();
    expect(
      consoleError.mock.calls.some((call) =>
        call.some((argument) => String(argument).includes('unique "key" prop')),
      ),
    ).toBe(false);
  });

  it('makes cards, add, detail, edit, and safe deletion available from the overview', async () => {
    const user = userEvent.setup();
    const remove = vi.fn<InstanceDataSource['delete']>().mockResolvedValue(undefined);
    const instanceDataSource: InstanceDataSource = {
      get: vi.fn().mockResolvedValue({
        id: 'bravo',
        name: 'Bravo',
        origin: 'http://bravo.example:8080',
        tags: ['west'],
        revision: 7,
        credentialConfigured: true,
      }),
      create: vi.fn(),
      update: vi.fn(),
      testConnection: vi.fn(),
      delete: remove,
    };

    const fleetMessagesDataSource: FleetMessagesDataSource = {
      load: vi.fn(async (instanceId) =>
        instanceId === 'bravo'
          ? {
              latest: {
                id: 'sms-1',
                direction: 'incoming',
                phoneNumber: '13900139000',
                content: '这是一条用于聚合页展示的最新短信内容',
                timestamp: '2026-07-19T08:30:00.000Z',
              },
            }
          : {},
      ),
    };

    render(
      <AppShell
        pathname="/fleet"
        fleetDataSource={source(async () => snapshot)}
        fleetMessagesDataSource={fleetMessagesDataSource}
        instanceDataSource={instanceDataSource}
      />,
    );

    expect(await screen.findByRole('region', { name: '实例卡片' })).toBeTruthy();
    expect(screen.getByRole('link', { name: '添加实例' }).getAttribute('href')).toBe(
      '/instances/new',
    );
    const card = screen.getByRole('article', { name: 'Bravo 实例概览' });
    expect(within(card).queryByText('延迟')).toBeNull();
    expect(within(card).queryByText('版本')).toBeNull();
    expect(within(card).queryByText('新鲜度')).toBeNull();
    expect(within(card).queryByText('40 ms')).toBeNull();
    expect(within(card).queryByText('2.0')).toBeNull();
    expect(within(card).queryByText('可能过期')).toBeNull();
    expect(within(card).getByText('18.4%')).toBeTruthy();
    expect(within(card).getByText('63.2%')).toBeTruthy();
    expect(within(card).getByText('46.7 °C')).toBeTruthy();
    expect(within(card).getByText('13800138000')).toBeTruthy();
    expect(await within(card).findByText('收到')).toBeTruthy();
    expect(within(card).getByText('13900139000')).toBeTruthy();
    expect(within(card).getByText(/这是一条用于聚合页展示/)).toBeTruthy();
    expect(within(card).getByText(/2026/)).toBeTruthy();
    expect(within(card).queryByText('能力未知')).toBeNull();
    expect(
      within(card).getByRole('link', { name: '打开 Bravo 实例仪表盘' }).getAttribute('href'),
    ).toBe('/instances/bravo/overview');
    expect(within(card).queryByRole('link', { name: /查看.*短信/ })).toBeNull();
    expect(within(card).getByRole('link', { name: '编辑 Bravo' }).getAttribute('href')).toBe(
      '/settings/instances/bravo',
    );

    await user.click(within(card).getByRole('button', { name: '删除 Bravo' }));
    expect(within(card).getByText('删除后无法撤销。')).toBeTruthy();
    await user.type(within(card).getByRole('textbox', { name: '输入 bravo 以确认删除' }), 'bravo');
    await user.click(within(card).getByRole('button', { name: '确认删除 Bravo' }));
    expect(remove).toHaveBeenCalledWith('bravo', 7);
    expect(within(card).getByRole('status').textContent).toContain('删除请求已提交');
  });

  it('keeps message read failures separate from instance reachability and reports each once', async () => {
    const messages: FleetMessagesDataSource = { load: vi.fn().mockRejectedValue(new Error('no')) };
    render(
      <AppShell
        pathname="/fleet"
        fleetDataSource={source(async () => snapshot)}
        fleetMessagesDataSource={messages}
      />,
    );
    const bravo = await screen.findByRole('article', { name: 'Bravo 实例概览' });
    expect(await within(bravo).findAllByText('短信暂不可用')).toHaveLength(1);
    expect(within(bravo).getByText('需要认证')).toBeTruthy();
  });

  it('keeps Jobs and Audit routes compatible without advertising them in global navigation', async () => {
    const jobsDataSource: JobsDataSource = { load: vi.fn().mockResolvedValue(emptyPage) };
    const { rerender } = render(
      <AppShell
        pathname="/jobs"
        jobsDataSource={jobsDataSource}
        eventStreamClient={quietEventStreamClient}
      />,
    );

    expect(await screen.findByText(/没有任务符合当前查询/i)).toBeTruthy();
    const navigation = screen.getByRole('navigation', { name: '全局导航' });
    expect(within(navigation).queryByRole('link', { name: '任务' })).toBeNull();
    expect(within(navigation).queryByRole('link', { name: '审计' })).toBeNull();
    expect(within(navigation).getByRole('link', { name: '实例总览' })).toBeTruthy();
    expect(within(navigation).getByRole('link', { name: '设置' })).toBeTruthy();

    const auditDataSource: AuditDataSource = { load: vi.fn().mockResolvedValue(emptyPage) };
    rerender(
      <AppShell
        pathname="/audit"
        auditDataSource={auditDataSource}
        eventStreamClient={quietEventStreamClient}
      />,
    );
    expect(await screen.findByText(/没有审计事件符合当前查询/i)).toBeTruthy();
  });

  it('loads route-owned instance context so overview-card navigation opens detail management', async () => {
    const instanceDataSource: InstanceDataSource = {
      get: vi.fn().mockResolvedValue({
        id: 'bravo',
        name: 'Bravo',
        origin: 'http://bravo.example:8080',
        tags: ['west'],
        revision: 7,
        credentialConfigured: true,
      }),
      create: vi.fn(),
      update: vi.fn(),
      testConnection: vi.fn(),
      delete: vi.fn(),
    };

    render(
      <AppShell pathname="/instances/bravo/overview" instanceDataSource={instanceDataSource} />,
    );

    expect(screen.getByRole('status').textContent).toContain('正在加载实例');
    expect(await screen.findByText('Bravo')).toBeTruthy();
    expect(screen.getByRole('heading', { name: '实例仪表盘' })).toBeTruthy();
    expect(screen.getByRole('link', { name: '编辑实例' }).getAttribute('href')).toBe(
      '/settings/instances/bravo',
    );
  });

  it('supports accessible search, status filtering, sorting, and visible selection', async () => {
    const user = userEvent.setup();
    render(<AppShell pathname="/fleet" fleetDataSource={source(async () => snapshot)} />);
    await screen.findByRole('row', { name: /Alpha/ });

    await user.click(screen.getByRole('button', { name: /按延迟排序/i }));
    let rows = screen.getAllByRole('row').slice(1);
    expect(rows[0]?.textContent).toContain('Alpha');
    await user.click(screen.getByRole('button', { name: /按延迟排序/i }));
    rows = screen.getAllByRole('row').slice(1);
    expect(rows[0]?.textContent).toContain('Bravo');

    await user.selectOptions(screen.getByRole('combobox', { name: '状态' }), 'auth');
    expect(screen.queryByRole('row', { name: /Alpha/ })).toBeNull();
    await user.click(screen.getByRole('checkbox', { name: '选择当前页全部实例' }));
    expect((screen.getByRole('checkbox', { name: '选择 Bravo' }) as HTMLInputElement).checked).toBe(
      true,
    );
    expect(screen.getByText('已选择 1 项')).toBeTruthy();

    await user.type(screen.getByRole('searchbox', { name: '搜索实例' }), 'missing');
    expect(screen.getByText(/没有实例符合搜索与筛选条件/i)).toBeTruthy();
  });

  it('exposes error, retry, configured-empty, and unsafe-origin states without claiming a backend', async () => {
    const user = userEvent.setup();
    const load = vi
      .fn<FleetDataSource['load']>()
      .mockRejectedValueOnce(new Error('collector unavailable'))
      .mockResolvedValueOnce({
        instances: [{ id: 'unsafe', name: 'Unsafe', url: 'javascript:alert(1)' }],
        statuses: new Map(),
      });
    const first = render(<AppShell pathname="/fleet" fleetDataSource={source(load)} />);

    expect((await screen.findByRole('alert')).textContent).toContain('实例加载失败');
    await user.click(screen.getByRole('button', { name: '重试加载实例' }));
    expect(await screen.findByRole('row', { name: /Unsafe/ })).toBeTruthy();
    expect(screen.queryByRole('link', { name: '打开 Unsafe 的源站' })).toBeNull();
    first.unmount();

    const { unmount } = render(
      <AppShell
        pathname="/fleet"
        fleetDataSource={source(async () => ({ instances: [], statuses: new Map() }))}
      />,
    );
    expect(await screen.findByText(/尚未配置实例/i)).toBeTruthy();
    unmount();
  });

  it('supports metadata filters, column visibility, pagination, and a batch-action entry', async () => {
    const user = userEvent.setup();
    render(<AppShell pathname="/fleet" fleetDataSource={source(async () => snapshot)} />);
    await screen.findByRole('row', { name: /Alpha/ });

    await user.selectOptions(screen.getByRole('combobox', { name: '能力' }), 'sms');
    expect(screen.queryByRole('row', { name: /Alpha/ })).toBeNull();
    expect(screen.getByRole('row', { name: /Bravo/ }).textContent).toContain('clock drift');

    await user.click(screen.getByRole('button', { name: '选择列' }));
    await user.click(screen.getByRole('checkbox', { name: '显示异常列' }));
    expect(screen.queryByRole('columnheader', { name: '异常' })).toBeNull();

    await user.click(screen.getByRole('checkbox', { name: '选择 Bravo' }));
    expect((screen.getByRole('button', { name: '批量操作' }) as HTMLButtonElement).disabled).toBe(
      false,
    );
    await user.click(screen.getByRole('button', { name: '批量操作' }));
    expect(screen.getByText('请为已选择的 1 项选择操作。')).toBeTruthy();
  });

  it('paginates fleet rows and selects only the current page', async () => {
    const many: FleetSnapshot = {
      instances: Array.from({ length: 11 }, (_, index) => ({
        id: `instance-${String(index + 1).padStart(2, '0')}`,
        name: `Instance ${String(index + 1).padStart(2, '0')}`,
        url: `https://instance-${index + 1}.example`,
      })),
      statuses: new Map(),
    };
    render(<AppShell pathname="/fleet" fleetDataSource={source(async () => many)} />);
    await screen.findByRole('row', { name: /Instance 01/ });

    expect(screen.queryByRole('row', { name: /Instance 11/ })).toBeNull();
    expect(screen.getByText('第 1 页，共 2 页')).toBeTruthy();
    fireEvent.click(screen.getByRole('checkbox', { name: '选择当前页全部实例' }));
    expect(screen.getByText('已选择 10 项')).toBeTruthy();
    fireEvent.click(screen.getByRole('button', { name: '下一页' }));
    expect(await screen.findByRole('row', { name: /Instance 11/ })).toBeTruthy();
    expect(screen.getByText('第 2 页，共 2 页')).toBeTruthy();
  });

  it('binds instance context to the route owner and never leaks mismatched context', () => {
    const instance: InstanceContext = {
      id: 'owner',
      name: 'Owner modem',
      origin: 'https://owner.example/path',
      status: 'online',
      authentication: 'authenticated',
      freshness: 'fresh',
    };
    const { rerender } = render(
      <AppShell pathname="/instances/owner/messages" instance={instance} />,
    );
    expect(screen.getByRole('heading', { name: '短信管理' })).toBeTruthy();
    expect(screen.getByText('Owner modem')).toBeTruthy();
    expect(screen.getByRole('link', { name: '打开源站' }).getAttribute('href')).toBe(
      'https://owner.example',
    );

    rerender(<AppShell pathname="/instances/someone-else/messages" instance={instance} />);
    expect(screen.queryByText('Owner modem')).toBeNull();
    expect(screen.getByRole('status').textContent).toContain('正在加载实例');
  });

  it.each([
    {
      pathname: '/jobs',
      endpoint: '/api/v1/jobs?page=1&pageSize=25&sort=createdAt&direction=desc',
      emptyMessage: /没有任务符合当前查询/i,
    },
    {
      pathname: '/audit',
      endpoint: '/api/v1/audit?sort=occurredAt&direction=desc&page=1&pageSize=25',
      emptyMessage: /没有审计事件符合当前查询/i,
    },
  ])(
    'uses the default HTTP data source for $pathname',
    async ({ pathname, endpoint, emptyMessage }) => {
      const fetcher = vi.fn<typeof fetch>().mockResolvedValue(
        new Response(JSON.stringify(emptyPage), {
          status: 200,
          headers: { 'content-type': 'application/json' },
        }),
      );
      vi.stubGlobal('fetch', fetcher);

      render(<AppShell pathname={pathname} eventStreamClient={quietEventStreamClient} />);

      expect(await screen.findByText(emptyMessage)).toBeTruthy();
      expect(fetcher).toHaveBeenCalledTimes(1);
      expect(fetcher).toHaveBeenCalledWith(endpoint, {
        method: 'GET',
        credentials: 'same-origin',
        headers: { accept: 'application/json' },
        signal: expect.any(AbortSignal),
      });
    },
  );

  it.each([
    {
      pathname: '/jobs',
      sourceProp: 'jobsDataSource' as const,
      emptyMessage: /没有任务符合当前查询/i,
    },
    {
      pathname: '/audit',
      sourceProp: 'auditDataSource' as const,
      emptyMessage: /没有审计事件符合当前查询/i,
    },
  ])(
    'uses an explicitly injected data source instead of global fetch for $pathname',
    async ({ pathname, sourceProp, emptyMessage }) => {
      const fetcher = vi.fn<typeof fetch>();
      vi.stubGlobal('fetch', fetcher);
      const load = vi
        .fn<JobsDataSource['load'] | AuditDataSource['load']>()
        .mockResolvedValue(emptyPage);
      const injectedSource = { load };

      render(
        <AppShell
          pathname={pathname}
          eventStreamClient={quietEventStreamClient}
          {...(sourceProp === 'jobsDataSource'
            ? { jobsDataSource: injectedSource as JobsDataSource }
            : { auditDataSource: injectedSource as AuditDataSource })}
        />,
      );

      expect(await screen.findByText(emptyMessage)).toBeTruthy();
      expect(load).toHaveBeenCalledTimes(1);
      expect(fetcher).not.toHaveBeenCalled();
    },
  );
});