/**
 * Reusable test actions — common UI operations used across spec files.
 *
 * All actions use browser.execute() for DOM queries where needed
 * (WebKitGTK reliability pattern).
 */

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

/** Open settings panel via gear icon click */
export async function openSettings(): Promise<void> {
  await browser.execute(() => {
    const btn = document.querySelector('[data-testid="settings-btn"]')
      ?? document.querySelector('.sidebar-icon');
    if (btn) (btn as HTMLElement).click();
  });
  const drawer = await browser.$(S.SETTINGS_DRAWER);
  await drawer.waitForDisplayed({ timeout: 5_000 });
}

/** Close settings panel */
export async function closeSettings(): Promise<void> {
  await browser.execute(() => {
    const btn = document.querySelector('.settings-close')
      ?? document.querySelector('.panel-close');
    if (btn) (btn as HTMLElement).click();
  });
  await browser.pause(400);
}

/** Switch to a settings category by index (0-based) */
export async function switchSettingsCategory(index: number): Promise<void> {
  await browser.execute((idx: number) => {
    const tabs = document.querySelectorAll('.settings-tab, .cat-btn');
    if (tabs[idx]) (tabs[idx] as HTMLElement).click();
  }, index);
  await browser.pause(300);
}

/** Switch active group by clicking the nth group button (0-based) */
export async function switchGroup(index: number): Promise<void> {
  await browser.execute((idx: number) => {
    const groups = document.querySelectorAll('.group-btn:not(.add-group-btn)');
    if (groups[idx]) (groups[idx] as HTMLElement).click();
  }, index);
  await browser.pause(300);
}

/** Type text into the agent prompt input */
export async function sendPrompt(text: string): Promise<void> {
  const textarea = await browser.$(S.CHAT_INPUT_TEXTAREA);
  if (await textarea.isExisting()) {
    await textarea.setValue(text);
    return;
  }
  const input = await browser.$(S.CHAT_INPUT_ALT);
  if (await input.isExisting()) {
    await input.setValue(text);
  }
}

/** Open command palette via Ctrl+K */
export async function openCommandPalette(): Promise<void> {
  await browser.keys(['Control', 'k']);
  await browser.pause(400);
}

/** Close command palette via Escape */
export async function closeCommandPalette(): Promise<void> {
  await browser.keys('Escape');
  await browser.pause(300);
}

/** Open search overlay via Ctrl+Shift+F */
export async function openSearch(): Promise<void> {
  await browser.keys(['Control', 'Shift', 'f']);
  await browser.pause(400);
}

/** Close search overlay via Escape */
export async function closeSearch(): Promise<void> {
  await browser.keys('Escape');
  await browser.pause(300);
}

/** Add a new terminal tab by clicking the add button */
export async function addTerminalTab(): Promise<void> {
  await browser.execute(() => {
    const btn = document.querySelector('.tab-add-btn');
    if (btn) (btn as HTMLElement).click();
  });
  await browser.pause(500);
}

/** Click a project-level tab (model, docs, files, etc.) */
export async function clickProjectTab(tabName: string): Promise<void> {
  await browser.execute((name: string) => {
    const tabs = document.querySelectorAll('.project-tab, .tab-btn');
    for (const tab of tabs) {
      if ((tab as HTMLElement).textContent?.toLowerCase().includes(name.toLowerCase())) {
        (tab as HTMLElement).click();
        return;
      }
    }
  }, tabName);
  await browser.pause(300);
}

/** Wait until an element with given selector is displayed */
export async function waitForElement(selector: string, timeout = 5_000): Promise<void> {
  const el = await browser.$(selector);
  await el.waitForDisplayed({ timeout });
}

/** Check if an element exists and is displayed (safe for optional elements) */
export async function isVisible(selector: string): Promise<boolean> {
  return browser.execute((sel: string) => {
    const el = document.querySelector(sel);
    if (!el) return false;
    const style = getComputedStyle(el);
    return style.display !== 'none' && style.visibility !== 'hidden';
  }, selector);
}

/** Get the display CSS value for an element (for display-toggle awareness) */
export async function getDisplay(selector: string): Promise<string> {
  return browser.execute((sel: string) => {
    const el = document.querySelector(sel);
    if (!el) return 'not-found';
    return getComputedStyle(el).display;
  }, selector);
}

/** Open notification drawer by clicking bell */
export async function openNotifications(): Promise<void> {
  await browser.execute(() => {
    const btn = document.querySelector('.notif-btn');
    if (btn) (btn as HTMLElement).click();
  });
  await browser.pause(400);
}

/** Close notification drawer */
export async function closeNotifications(): Promise<void> {
  await browser.execute(() => {
    const backdrop = document.querySelector('.notif-backdrop');
    if (backdrop) (backdrop as HTMLElement).click();
  });
  await browser.pause(300);
}