import { expect, test } from '../../fixtures/test.fixture';
import { cssSelectors } from '../../constants/selectors';

const { SIDENAV } = cssSelectors;
const SETTINGS_BTN = `${SIDENAV} .tour-settingsMenuBtn`;

test.describe.serial('Plugin Structure Test', () => {
  test('check plugin card structure', async ({ page, workViewPage, waitForNav }) => {
    await workViewPage.waitForTaskList();

    // Navigate to plugin settings (implementing navigateToPluginSettings inline)
    await page.click(SETTINGS_BTN);
    await waitForNav();

    // Execute script to navigate to plugin section
    await page.evaluate(() => {
      // First ensure we're on the config page
      const configPage = document.querySelector('.page-settings');
      if (!configPage) {
        throw new Error('Not on config page');
      }

      // Scroll to plugins section
      const pluginSection = document.querySelector('.plugin-section');
      if (pluginSection) {
        pluginSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
      } else {
        throw new Error('Plugin section not found');
      }

      // Make sure collapsible is expanded - click the header to toggle
      const collapsible = document.querySelector('.plugin-section collapsible');
      if (collapsible) {
        const isExpanded = collapsible.classList.contains('isExpanded');
        if (!isExpanded) {
          // Click the collapsible header to expand it
          const header = collapsible.querySelector('.collapsible-header');
          if (header) {
            (header as HTMLElement).click();
          } else {
            throw new Error('Could not find collapsible header');
          }
        } else {
        }
      } else {
        throw new Error('Plugin collapsible not found');
      }
    });

    await waitForNav();
    await expect(page.locator('plugin-management')).toBeVisible({ timeout: 5000 });

    // Check plugin card structure
    await page.evaluate(() => {
      const cards = Array.from(document.querySelectorAll('plugin-management mat-card'));
      const apiTestCard = cards.find((card) => {
        const title = card.querySelector('mat-card-title')?.textContent || '';
        return title.includes("Yesterday's Tasks");
      });

      if (!apiTestCard) {
        return { found: false };
      }

      // Look for all possible toggle selectors
      const toggleSelectors = [
        'mat-slide-toggle input',
        'mat-slide-toggle button',
        '.mat-mdc-slide-toggle input',
        '.mat-mdc-slide-toggle button',
        '[role="switch"]',
        'input[type="checkbox"]',
      ];

      const toggleResults = toggleSelectors.map((selector) => ({
        selector,
        found: !!apiTestCard.querySelector(selector),
        element: apiTestCard.querySelector(selector)?.tagName,
      }));

      // Get the card's inner HTML structure
      const cardStructure = apiTestCard.innerHTML.substring(0, 500);

      return {
        found: true,
        cardTitle: apiTestCard.querySelector('mat-card-title')?.textContent,
        toggleResults,
        cardStructure,
        hasMatSlideToggle: !!apiTestCard.querySelector('mat-slide-toggle'),
        allInputs: Array.from(apiTestCard.querySelectorAll('input')).map((input) => ({
          type: input.type,
          id: input.id,
          class: input.className,
        })),
      };
    });
  });
});