/**
 * Group sidebar tests — numbered circles, switching, active state, badges.
 *
 * Groups with numbered circles are Electrobun-specific. Tauri uses GlobalTabBar
 * without group circles. Tests gracefully skip when groups are absent.
 */

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 function () {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.GROUP_BTN);
    if (count === 0) {
      // Tauri uses GlobalTabBar instead of group buttons — skip gracefully
      this.skip();
      return;
    }
    expect(count).toBeGreaterThanOrEqual(1);
  });

  it('should show numbered circle for each group', async function () {
    const hasGroups = await browser.execute(() => {
      return document.querySelector('.group-circle') !== null;
    });
    if (!hasGroups) { this.skip(); return; }

    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 function () {
    const hasGroups = await browser.execute(() => {
      return document.querySelectorAll('.group-btn').length > 0;
    });
    if (!hasGroups) { this.skip(); return; }

    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 function () {
    const hasGroups = await browser.execute(() => {
      return document.querySelectorAll('.group-btn').length > 0;
    });
    if (!hasGroups) { this.skip(); return; }

    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 function () {
    const groupCount = await browser.execute(() => {
      return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
    });
    if (groupCount < 2) { this.skip(); 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 function () {
    const hasGroups = await browser.execute(() => {
      return document.querySelectorAll('.group-btn').length > 0;
    });
    if (!hasGroups) { this.skip(); return; }

    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 function () {
    const groupCount = await browser.execute(() => {
      return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
    });
    if (groupCount < 2) { this.skip(); return; }

    const cardsBefore = await browser.execute(() => {
      return document.querySelectorAll('.project-box, .project-card').length;
    });

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

    const cardsAfter = await browser.execute(() => {
      return document.querySelectorAll('.project-box, .project-card').length;
    });

    // 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 function () {
    const groups = await browser.$$(S.GROUP_BTN);
    if (groups.length === 0) { this.skip(); return; }
    await groups[0].moveTo();
    await browser.pause(300);
  });

  it('should persist active group across sessions', async function () {
    const hasGroups = await browser.execute(() => {
      return document.querySelectorAll('.group-btn:not(.add-group-btn)').length > 0;
    });
    if (!hasGroups) { this.skip(); return; }

    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 function () {
    const circles = await browser.$$(S.GROUP_CIRCLE);
    if (circles.length === 0) { this.skip(); return; }
    const text = await circles[0].getText();
    expect(text.length).toBeGreaterThan(0);
  });
});