/**
 * Group sidebar tests — numbered circles, switching, active state, badges.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { switchGroup } from '../helpers/actions.ts';

describe('Group sidebar', () => {
  it('should show group buttons in sidebar', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.GROUP_BTN);
    expect(count).toBeGreaterThanOrEqual(1);
  });

  it('should show numbered circle for each group', async () => {
    const text = await browser.execute((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent ?? '';
    }, S.GROUP_CIRCLE);
    expect(text).toBe('1');
  });

  it('should highlight the active group', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.GROUP_BTN_ACTIVE);
    expect(count).toBe(1);
  });

  it('should show add group button', async () => {
    const addBtn = await browser.$(S.ADD_GROUP_BTN);
    if (await addBtn.isExisting()) {
      await expect(addBtn).toBeDisplayed();

      const text = await browser.execute(() => {
        const circle = document.querySelector('.add-group-btn .group-circle');
        return circle?.textContent ?? '';
      });
      expect(text).toBe('+');
    }
  });

  it('should switch active group on click', async () => {
    const groupCount = await browser.execute(() => {
      return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
    });
    if (groupCount < 2) return;

    await switchGroup(1);

    const isActive = await browser.execute(() => {
      const groups = document.querySelectorAll('.group-btn:not(.add-group-btn)');
      return groups[1]?.classList.contains('active') ?? false;
    });
    expect(isActive).toBe(true);

    // Switch back
    await switchGroup(0);
  });

  it('should show notification badge structure', async () => {
    const badges = await browser.$$(S.GROUP_BADGE);
    expect(badges).toBeDefined();
  });

  it('should show project grid for active group', async () => {
    const grid = await browser.$(S.PROJECT_GRID);
    await expect(grid).toBeDisplayed();
  });

  it('should display project cards matching active group', async () => {
    const cards = await browser.$$(S.PROJECT_CARD);
    expect(cards).toBeDefined();
  });

  it('should update project grid on group switch', async () => {
    const groupCount = await browser.execute(() => {
      return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
    });
    if (groupCount < 2) return;

    const cardsBefore = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.PROJECT_CARD);

    await switchGroup(1);
    await browser.pause(300);

    const cardsAfter = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.PROJECT_CARD);

    // Card count may differ between groups
    expect(typeof cardsBefore).toBe('number');
    expect(typeof cardsAfter).toBe('number');

    // Switch back
    await switchGroup(0);
  });

  it('should show group tooltip on hover', async () => {
    const groups = await browser.$$(S.GROUP_BTN);
    if (groups.length > 0) {
      await groups[0].moveTo();
      await browser.pause(300);
    }
  });

  it('should persist active group across sessions', async () => {
    const activeIdx = await browser.execute(() => {
      const groups = document.querySelectorAll('.group-btn:not(.add-group-btn)');
      for (let i = 0; i < groups.length; i++) {
        if (groups[i].classList.contains('active')) return i;
      }
      return -1;
    });
    expect(activeIdx).toBeGreaterThanOrEqual(0);
  });

  it('should show group name in numbered circle', async () => {
    const circles = await browser.$$(S.GROUP_CIRCLE);
    if (circles.length > 0) {
      const text = await circles[0].getText();
      expect(text.length).toBeGreaterThan(0);
    }
  });
});