import { expect, type Page } from '@playwright/test';

const MOBILE_VIEWPORT = { width: 390, height: 844 };

export async function openSettingsModal(page: Page, settingsPage = 'general'): Promise<void> {
  await page.evaluate((targetPage) => {
    interface SettingsModalServiceHandle {
      open: (page: string) => void;
    }
    interface SettingsModalComponentHandle {
      mobilePage?: { set: (page: 'menu' | 'detail') => void };
      animating?: { set: (value: boolean) => void };
      navigate?: (page: string) => void;
    }
    interface AppComponentHandle {
      settingsModal?: SettingsModalServiceHandle;
    }
    interface AngularDebugApi {
      getComponent: (element: Element) => AppComponentHandle & SettingsModalComponentHandle;
      applyChanges?: (component: unknown) => void;
    }

    const debugApi = (window as Window & { ng?: AngularDebugApi }).ng;
    const appRoot = document.querySelector('app-root');
    const settingsHost = document.querySelector('app-settings-modal');
    const appComponent = appRoot && debugApi?.getComponent(appRoot);
    const settingsComponent = settingsHost && debugApi?.getComponent(settingsHost);

    if (!appComponent?.settingsModal?.open) {
      throw new Error('Angular debug API could not open settings modal');
    }

    appComponent.settingsModal.open(targetPage);
    settingsComponent?.mobilePage?.set('menu');
    settingsComponent?.animating?.set(true);
    debugApi?.applyChanges?.(appComponent);
    debugApi?.applyChanges?.(settingsComponent);
  }, settingsPage);

  await expect(page.getByRole('heading', { name: 'Settings', exact: true })).toBeVisible({ timeout: 10_000 });
  await expect(page.getByTestId('settings-logout-button')).toBeVisible({ timeout: 10_000 });
}

export async function openSettingsDetailPage(page: Page, settingsPage: string): Promise<void> {
  await openSettingsModal(page, settingsPage);

  await page.evaluate((targetPage) => {
    interface SettingsModalComponentHandle {
      navigate?: (page: string) => void;
      animating?: { set: (value: boolean) => void };
    }
    interface AngularDebugApi {
      getComponent: (element: Element) => SettingsModalComponentHandle;
      applyChanges?: (component: SettingsModalComponentHandle) => void;
    }

    const host = document.querySelector('app-settings-modal');
    const debugApi = (window as Window & { ng?: AngularDebugApi }).ng;
    const component = host && debugApi?.getComponent(host);

    if (!component?.navigate) {
      throw new Error('Angular debug API could not navigate settings modal');
    }

    component.navigate(targetPage);
    component.animating?.set(true);
    debugApi?.applyChanges?.(component);
  }, settingsPage);
}

export async function openSettingsDataPage(page: Page): Promise<void> {
  await openSettingsDetailPage(page, 'data');
  await expect(page.locator('app-data-settings')).toBeVisible({ timeout: 10_000 });
}

export { MOBILE_VIEWPORT };