/**
 * Communications tab tests — channels, DMs, message area, send form.
 */

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

describe('Communications tab', () => {
  it('should render the comms tab container', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.COMMS_TAB);
    if (exists) {
      const el = await browser.$(S.COMMS_TAB);
      await expect(el).toBeDisplayed();
    }
  });

  it('should show mode toggle bar with Channels and DMs', async () => {
    const modeBar = await browser.$(S.COMMS_MODE_BAR);
    if (!(await modeBar.isExisting())) return;

    const texts = await browser.execute((sel: string) => {
      const buttons = document.querySelectorAll(sel);
      return Array.from(buttons).map(b => b.textContent?.trim() ?? '');
    }, S.MODE_BTN);

    expect(texts.length).toBe(2);
    expect(texts).toContain('Channels');
    expect(texts).toContain('DMs');
  });

  it('should highlight the active mode button', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.MODE_BTN_ACTIVE);
    if (exists) {
      expect(exists).toBe(true);
    }
  });

  it('should show the comms sidebar', async () => {
    const sidebar = await browser.$(S.COMMS_SIDEBAR);
    if (await sidebar.isExisting()) {
      await expect(sidebar).toBeDisplayed();
    }
  });

  it('should show channel list with hash prefix', async () => {
    const text = await browser.execute((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent ?? '';
    }, S.CH_HASH);
    if (text) {
      expect(text).toBe('#');
    }
  });

  it('should show message area', async () => {
    const messages = await browser.$(S.COMMS_MESSAGES);
    if (await messages.isExisting()) {
      await expect(messages).toBeDisplayed();
    }
  });

  it('should show the message input bar', async () => {
    const inputBar = await browser.$(S.MSG_INPUT_BAR);
    if (await inputBar.isExisting()) {
      await expect(inputBar).toBeDisplayed();
    }
  });

  it('should have send button disabled when input empty', async () => {
    const disabled = await browser.execute((sel: string) => {
      const btn = document.querySelector(sel) as HTMLButtonElement;
      return btn?.disabled ?? null;
    }, S.MSG_SEND_BTN);
    if (disabled !== null) {
      expect(disabled).toBe(true);
    }
  });

  it('should switch to DMs mode on DMs button click', async () => {
    const switched = await browser.execute((sel: string) => {
      const buttons = document.querySelectorAll(sel);
      if (buttons.length < 2) return false;
      (buttons[1] as HTMLElement).click();
      return buttons[1].classList.contains('active');
    }, S.MODE_BTN);

    if (switched) {
      expect(switched).toBe(true);
      // Switch back
      await browser.execute((sel: string) => {
        const buttons = document.querySelectorAll(sel);
        if (buttons[0]) (buttons[0] as HTMLElement).click();
      }, S.MODE_BTN);
      await browser.pause(300);
    }
  });

  it('should show DM contact list in DMs mode', async () => {
    await browser.execute((sel: string) => {
      const buttons = document.querySelectorAll(sel);
      if (buttons.length >= 2) (buttons[1] as HTMLElement).click();
    }, S.MODE_BTN);
    await browser.pause(300);

    const hasList = await browser.execute(() => {
      return (document.querySelector('.dm-list')
        ?? document.querySelector('.contact-list')
        ?? document.querySelector('.comms-sidebar')) !== null;
    });
    expect(typeof hasList).toBe('boolean');

    // Switch back
    await browser.execute((sel: string) => {
      const buttons = document.querySelectorAll(sel);
      if (buttons[0]) (buttons[0] as HTMLElement).click();
    }, S.MODE_BTN);
    await browser.pause(300);
  });
});