/**
 * Smoke tests — verify the app launches and core UI elements are present.
 *
 * These tests run first and validate the fundamental layout elements that
 * every subsequent spec depends on.
 */

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

describe('Smoke tests', () => {
  it('should launch and have the correct title', async () => {
    await browser.waitUntil(
      async () => {
        const title = await browser.getTitle();
        return title.includes('Agent Orchestrator') || title.includes('AGOR');
      },
      { timeout: 15_000, timeoutMsg: 'App did not load within 15s' },
    );
    const title = await browser.getTitle();
    expect(title).toContain('Agent Orchestrator');
  });

  it('should render the app shell', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.APP_SHELL);
    if (exists) {
      const shell = await browser.$(S.APP_SHELL);
      await expect(shell).toBeDisplayed();
    }
  });

  it('should show the sidebar', async () => {
    const visible = await browser.execute(() => {
      const el = document.querySelector('.sidebar') ?? document.querySelector('[data-testid="sidebar-rail"]');
      if (!el) return false;
      return getComputedStyle(el).display !== 'none';
    });
    expect(visible).toBe(true);
  });

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

  it('should display the status bar', async () => {
    const statusBar = await browser.$(S.STATUS_BAR);
    await expect(statusBar).toBeDisplayed();
  });

  it('should show version text in status bar', async () => {
    const text = await browser.execute(() => {
      const el = document.querySelector('.status-bar .version');
      return el?.textContent?.trim() ?? '';
    });
    if (text) {
      expect(text).toContain('Agent Orchestrator');
    }
  });

  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 the settings gear icon', async () => {
    const exists = await browser.execute(() => {
      return (document.querySelector('[data-testid="settings-btn"]')
        ?? document.querySelector('.sidebar-icon')) !== null;
    });
    expect(exists).toBe(true);
  });

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

  it('should show at least the workspace area', async () => {
    const workspace = await browser.$(S.WORKSPACE);
    if (await workspace.isExisting()) {
      await expect(workspace).toBeDisplayed();
    }
  });

  it('should toggle sidebar with settings button', async () => {
    await browser.execute(() => {
      const btn = document.querySelector('[data-testid="settings-btn"]')
        ?? document.querySelector('.sidebar-icon');
      if (btn) (btn as HTMLElement).click();
    });

    const sidebarPanel = await browser.$(S.SIDEBAR_PANEL);
    const drawer = await browser.$(S.SETTINGS_DRAWER);
    const target = (await sidebarPanel.isExisting()) ? sidebarPanel : drawer;

    if (await target.isExisting()) {
      await target.waitForDisplayed({ timeout: 5_000 });
      await expect(target).toBeDisplayed();

      // Close it
      await browser.execute(() => {
        const btn = document.querySelector('.panel-close')
          ?? document.querySelector('.settings-close');
        if (btn) (btn as HTMLElement).click();
      });
      await browser.pause(500);
    }
  });

  it('should show project cards in grid', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.PROJECT_CARD);
    // May be 0 in minimal fixture, but selector should be valid
    expect(count).toBeGreaterThanOrEqual(0);
  });

  it('should show the AGOR title', async () => {
    const text = await browser.execute((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent?.trim() ?? '';
    }, S.AGOR_TITLE);
    if (text) {
      expect(text).toBe('AGOR');
    }
  });

  it('should have terminal section in project card', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.TERMINAL_SECTION);
    // Terminal section may or may not be visible depending on card state
    expect(typeof exists).toBe('boolean');
  });

  it('should have window close button (Electrobun) or native decorations', async () => {
    // Electrobun has a custom close button; Tauri uses native decorations
    const hasClose = await browser.execute(() => {
      return document.querySelector('.close-btn') !== null;
    });
    // Just verify the check completed — both stacks are valid
    expect(typeof hasClose).toBe('boolean');
  });
});