/**
 * Workspace & project tests — grid, project cards, tabs, status bar.
 *
 * Supports both Tauri (.project-box, .ptab) and Electrobun (.project-card)
 * via dual selectors.
 */

import { browser, expect } from '@wdio/globals';

describe('BTerminal — Workspace & Projects', () => {
  it('should display the project grid', async () => {
    const grid = await browser.$('.project-grid');
    await expect(grid).toBeDisplayed();
  });

  it('should render at least one project card', async () => {
    const boxes = await browser.$$('.project-box, .project-card');
    expect(boxes.length).toBeGreaterThanOrEqual(1);
  });

  it('should show project header with name', async () => {
    const header = await browser.$('.project-header');
    await expect(header).toBeDisplayed();

    const name = await browser.$('.project-name');
    const text = await name.getText();
    expect(text.length).toBeGreaterThan(0);
  });

  it('should show project-level tabs (Model, Docs, Context, Files, SSH, Memory, ...)', async () => {
    const box = await browser.$('.project-box, .project-card');
    // Tauri: .ptab  |  Electrobun: .project-tab or .tab-btn
    const tabs = await box.$$('.ptab, .project-tab, .tab-btn');
    // v3 has 6+ tabs: Model, Docs, Context, Files, SSH, Memory (+ role-specific)
    expect(tabs.length).toBeGreaterThanOrEqual(6);
  });

  it('should highlight active project on click', async () => {
    const header = await browser.$('.project-header');
    await header.click();

    const activeBox = await browser.$('.project-box.active, .project-card.active');
    await expect(activeBox).toBeDisplayed();
  });

  it('should switch project tabs', async () => {
    // Use JS click — WebDriver clicks don't always trigger Svelte onclick
    const switched = await browser.execute(() => {
      const box = document.querySelector('.project-box') ?? document.querySelector('.project-card');
      if (!box) return false;
      const tabs = box.querySelectorAll('.ptab, .project-tab, .tab-btn');
      if (tabs.length < 2) return false;
      (tabs[1] as HTMLElement).click();
      return true;
    });
    expect(switched).toBe(true);
    await browser.pause(500);

    const box = await browser.$('.project-box, .project-card');
    const activeTab = await box.$('.ptab.active, .project-tab.active, .tab-btn.active');
    const text = await activeTab.getText();
    expect(text.toLowerCase()).toContain('docs');

    // Switch back to Model tab
    await browser.execute(() => {
      const box = document.querySelector('.project-box') ?? document.querySelector('.project-card');
      const tab = box?.querySelector('.ptab, .project-tab, .tab-btn');
      if (tab) (tab as HTMLElement).click();
    });
    await browser.pause(300);
  });

  it('should display the status bar with project count', async () => {
    const statusBar = await browser.$('.status-bar .left');
    const text = await statusBar.getText();
    expect(text).toContain('projects');
  });

  it('should display project and agent info in status bar', async () => {
    const statusBar = await browser.$('.status-bar .left');
    const text = await statusBar.getText();
    expect(text).toContain('projects');
  });
});